/*==================================================

                CSS VARIABLES

==================================================*/

:root{

    /* Main Background */
    --bg-color:#F8F5EE;

    /* Cards */
    --card-color:#FFFFFF;

    /* Primary Gold */
    --gold-color:#C8A44D;

    /* Botanical Green */
    --green-color:#75845A;

    /* Main Text */
    --text-color:#2E2E2E;

    /* Secondary Text */
    --gray-color:#777777;

      /* Layout */
    --container-width:1200px;
    --section-padding:100px;

    /* Border Radius */
    --border-radius:16px;

    /* Shadow */
    --shadow:0 15px 35px rgba(0,0,0,.08);

    /* Animation */
    --transition:.35s ease;

}

/*==================================================

                    RESET

==================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

/*==================================================

                    HTML

==================================================*/

html{

    scroll-behavior:smooth;

}

/*==================================================

                    BODY

==================================================*/

body{

    font-family:"Lato",sans-serif;

    background:var(--bg-color);

    color:var(--text-color);

    overflow-x:hidden;

}

/*==================================================

                    IMAGES

==================================================*/

img{

    max-width:100%;

    display:block;

}

/*==================================================

                    LINKS

==================================================*/

a{

    text-decoration:none;

    color:inherit;

}

/*==================================================

                    LISTS

==================================================*/

ul{

    list-style:none;

}

/*==================================================

                    BUTTONS

==================================================*/

button{

    font:inherit;

    border:none;

    background:none;

    cursor:pointer;

}


/*==================================================

                HEADER

==================================================*/

.header{

    position:fixed;

    top:0px;
    left:0;

    width:100%;

    z-index:1000;

}

/*==================================================

                NAVBAR

==================================================*/

.navbar{
    max-width: var(--container-width);
    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0px 20px;
}


/*==================================================

                    LOGO

==================================================*/

.logo img{

    width: 175px;;

    transition:var(--transition);
    
    
}
.logo img:hover{

    transform:scale(1.05);

}

/*==================================================

                NAVIGATION LINKS

==================================================*/

.nav-links{

    display:flex;

    align-items:center;

    gap:40px;

   

}

.nav-links a{

    position:relative;

    color:var(--text-color);

    font-size:1rem;

    font-weight:bolder;

    transition:var(--transition);
  
    
}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold-color);

    transition:var(--transition);

}

.nav-links a:hover::after{

    width:100%;

}
.nav-links a:hover {
    color: var(--green-color);

}


/*==================================================

            NAVBAR DEFAULT

==================================================*/

.header{
    transition:var(--transition);
    

}

/*==================================================

            SCROLLED NAVBAR

==================================================*/

.header.scrolled{

    background:rgba(248,245,238,.95);

    backdrop-filter:blur(12px);

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

/*==================================================

                MOBILE MENU BUTTON

==================================================*/

.menu-toggle{

    display:none;

    font-size:2rem;

    color:var(--text-color);

}



/*==================================================

                HERO SECTION

==================================================*/

.hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================================

                HERO IMAGE

==================================================*/

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;


}

/*==================================================

                HERO OVERLAY

==================================================*/



.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(248,245,238,.28);

}

/*==================================================

                HERO CONTENT

==================================================*/

.hero-content{

    position:relative;

    z-index:2;

    max-width:700px;

    text-align:center;

    padding:0 20px ;
    margin-right: 400px ;
}

.hero-content h1{

    font-family:"Cormorant Garamond", serif;

    font-size:clamp(3rem,6vw,5rem);

    color:rgb(56, 80, 36);

    margin-bottom:20px;

    line-height:1.1;

}

.hero-content p{

    font-size:1.1rem;

    color:var(--gray-color);

    line-height:1.8;

    margin-bottom:40px;
    color:black;
    
}


.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 40px;

    border:2px solid var(--gold-color);

    color:var(--green-color);

    border-radius:50px;

    transition:var(--transition);

    font-weight:600;

}

.hero-btn:hover{

    background:var(--gold-color);

    color:#fff;

    transform:translateY(-3px);

}

.hero-image{

    animation:heroZoom 18s ease-in-out infinite alternate;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.05);

    }

}


.hero-content h1,
.hero-content p,
.hero-btn{

    opacity:0;

    transform:translateY(30px);

}

.hero-content h1{

    animation:fadeUp .8s ease forwards;

    animation-delay:.3s;

}

.hero-content p{

    animation:fadeUp .8s ease forwards;

    animation-delay:.6s;

}

.hero-btn{

    animation:fadeUp .8s ease forwards;

    animation-delay:.9s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================

                    universe section 

==================================================*/

.universe{

    padding:100px 0;

background:
        linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)),
        url("images/cover-collection.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.section-heading{

    text-align:center;

    max-width:650px;

    margin:0 auto 40px ;

    
}

.slider{

    position:relative;
      max-width: 1100px;
    margin: 0 auto ;


    height:550px;

    border-radius:20px;

    overflow:hidden;



}

.slide{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transition:opacity .8s ease;

}

.slide.active{

    opacity:1;
    
}

.discover-btn{

    display:inline-block;


    padding:15px 35px;

    border-radius:50px;

    background:#4c5d39;

    color:white;

    text-decoration:none;

    transition:.3s;
    font-weight: bold;
}

.discover-btn:hover{

    background:#687d4c;

}

.section-heading h2{

    font-size:clamp(3.5rem,5vw,2.8rem);

    color:#2f3f28;

    margin:10px 0 0px;

}


.flower-line img {

    width: 300px;
    height:100px;
    object-fit:cover;
 
    
} 



.section-heading p{

    max-width:560px;

    margin:0px auto 0;

    line-height:2.5;

    color:#666;
    font-weight: bold;

}

.discover-wrapper{

    text-align:center;

    margin-top:40px;

}

.section-heading span{

    display:inline-block;

    color:#8a8a65;

    font-size:.9rem;

    letter-spacing:2px;

    text-transform:uppercase;

}



/*==================================================

                COLLECTION

==================================================*/
.collection{
    padding:120px 0;
    position:relative;

    background:
         linear-gradient(
    rgba(255,255,255,.78),
    rgba(255,255,255,.78)
    ),
        url("images/cover-collection.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.section-heading span  { 

    color: var(--gold-color);
    font-weight: bolder;
}
.products-container{

    display:grid;

    grid-template-columns:repeat(3,1fr);
    justify-content: center;
    margin: 0 20px;
    gap:40px;

    

}

.product-card{
    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:20px;
    
    width: 100%;
    overflow:hidden;
  
    padding:18px;

    text-align:center;

    transition:.3s;
    border:1px solid rgba(0,0,0,.05);
    background:rgba(255,255,255,.92);

    backdrop-filter:blur(8px);


}

.product-card:hover{

    transform:translateY(-10px);

box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.product-image{
    position:relative;
    justify-content: center;


    overflow:hidden;

    border-radius:15px;
    height:340px;
    aspect-ratio: 4.5/5;
    width: 100%;
}

.product-image img{
    
    position: absolute;
    inset: 0;
    width:100%;
    height: 100%;
  

    display:block;

    transition:.4s ease;

  
    object-fit:cover;

}

.hover-image{

    opacity:0;

}

.product-card:hover .hover-image{

    opacity:1;
 

    transform:scale(1.08);
    height: 100%;
    
    object-fit: cover;
       

}


.product-card:hover .main-image{

    opacity:0;
    transform:scale(1.05);


}

.product-card h3{

    margin-top: 20px;

    font-size:1.35rem;

    letter-spacing:.5px;


    color:rgb(31, 65, 31);
    font-weight: bold;
        min-height:40px;


}


.product-card p{

    color:var(--gold-color);

    
        font-size:1.4rem;

    font-weight:700;


}



.quantity{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin: 20px 0;

}



.quantity button{

    width:25px;

    height:25px;

    border: 1px solid var(--gold-color) ;

    border-radius:50%;

    
    color:var(--gold-color);

    font-size:1.2rem;

    cursor:pointer;

    transition:.3s;

}

.quantity button:hover{

    background:rgb(31, 65, 31);

}

.count{

    font-size:1.2rem;

    font-weight:600;

    min-width:20px;

    text-align:center;

    color:#2f3f28;

}

.order-btn{

    width:100%;

    padding:15px;
     margin-top:15px;

    border:none;

    border-radius:50px;

    background:rgb(31, 65, 31);
    color:#fff;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:.3s ease;

}

.order-btn:hover{

    background:#1EBE5D;
    transform:translateY(-3px);

}



.gender{

    display:inline-block;

    padding:6px 14px;

    border-radius:50px;

    background:#eef4e7;

    color:var(--green-color);

    font-size:.85rem;

    font-weight:600;

    margin-bottom:12px;

}



.filter-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:50px;

    flex-wrap:wrap;

}

.filter-btn{

    padding:12px 28px;

    border:1px solid var(--green-color);

    border-radius:50px;

    background:white;

    color:var(--green-color);

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.filter-btn:hover{

    background:var(--green-color);

    color:white;

}

.filter-btn.active{

    background:var(--green-color);

    color:white;

}


/*==================================================

                    ORDER MODAL

==================================================*/

.modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0, 0, 0, 0.5);
    margin-top: 50px;

}

.modal.active{

    display:flex;

}

.modal-content{

    background:var(--bg-color);

    padding:40px;
    position: relative;
        width:min(90%,550px);

    transform:translateY(30px);

    opacity:0;

    transition:.35s;
    margin-top: 50px;


}






.modal.active .modal-content{

    transform:translateY(0);

    opacity:1;

}

.close-modal{

    position:absolute;

    top:15px;

    right:20px;

    border:none;

    background:none;

    font-size:2rem;

    cursor:pointer;
    width:40px;

    height:40px;

    border-radius:50%;

    background:#f4f4f4;

    transition:.3s;

}
.close-modal:hover{

    background:#eee;

}


.modal-product-price{

    color:var(--gold-color);

    font-size:1.3rem;

    font-weight:700;

}


.modal-product-total{

    color:var(--green-color);

    font-weight:bold;

    font-size:1.2rem;

}

.modal-content input{

    width:100%;

    padding:15px;

    margin:15px 0;

    border:1px solid #ddd;

    border-radius:12px;

    outline:none;

    font-size:1rem;

    transition:.3s;

}

.modal-content input:focus{

    border-color:#4c5d39;

}


.send-order{

    width:100%;

    padding:15px;

    margin-top:20px;

    border:none;

    border-radius:50px;

    background:rgb(31, 65, 31);

    color:#fff;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.send-order:hover{

    background:#1EBE5D;

    transform:translateY(-3px);

}



.modal-content h2{

    margin-bottom:10px;

}

.modal-content h3{

    margin-top:25px;

    color:#2f3f28;

}

.modal-content p{

    margin:10px 0;

    color:#666;

}



.error-message{

    color:#d62828;

    font-size:.95rem;

    margin-bottom:15px;

    text-align:left;

    display:none;

}


.box-order {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    border-bottom: 2px solid var(--green-color);

}
.box-order h2 {
    text-align: center;
    
}


.total-product::before{
content: "Total :";
font-size: large;
color: black;

font-weight: bolder;

}
.quantity-product::before{
content: "Quantity :";
font-size: large;
color: black;
font-weight: bolder;
}
/*==================================================

                    ABOUT

==================================================*/

.about{

    padding:100px 0;

background:
        linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)),
        url("images/cover-collection.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.about-content{

    max-width:700px;

    margin:auto;

    text-align:center;

}

.about-content span{

    color:#7a8d5d;

    font-weight:600;
    font-size:x-large;

}

.about-content h2{

    margin:15px 0;

    font-size:2.5rem;

    color:#2f3f28;

}

.about-content p{

    line-height:1.8;

    color:#666;

}


/*==================================================

                    FOOTER

==================================================*/

.footer{

    background:#2f3f28;

    color:#fff;

    padding:70px 0 30px;

}

.footer-content{

    display:flex;

    justify-content:space-around;

    align-items:flex-start;

    gap:50px;

    flex-wrap:wrap;

}

.footer-logo h2{

    margin-bottom:10px;

    font-size:2rem;

}

.footer-logo p{

    color:#d7d7d7;

}


.footer-contact{

    display:flex;

    flex-direction:column;

    gap:15px;

}


.footer-contact a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}


.footer-contact a:hover{

    color:#c8d8b5;

}

.footer-bottom{

    margin-top:50px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.15);

    text-align:center;

    color:#cfcfcf;

}




/*==================================================

                RESPONSIVE

==================================================*/

@media (max-width:768px){
    .header .container{

    padding:15px 20px;

}

.logo img{

    width:120px;

}

.hero{

    height:auto;

    min-height:100vh;

}

.hero-content{

    text-align:center;

    max-width:100%;

    padding:120px 20px 60px;


}



.hero-content h1{

    font-size:41px;
    margin-left: 150px;
    width: 100%;
}

.hero-content p{

    font-size:1rem;
    margin-left: 150px;
    width: 100%;
}

.hero-btn {
    margin-left:150px ;
    width: 100%;
}

.section-heading{

    margin-bottom:40px;

}

.section-heading h2{

    font-size:2rem;

}

.slider{

    height:250px;

}

.slide{

    height:250px;

}

.products-container{

    grid-template-columns:1fr;

    gap:30px;

    margin:0;

}

.product-card{

    max-width:380px;

    margin:auto;

}

.product-image{

    height:300px;

}


.about{

    padding:80px 20px;

}

.about-content h2{

    font-size:2rem;

}

.footer-content{

    flex-direction:column;

    text-align:center;

    align-items:center;

}


.modal-content{

    width:95%;

    padding:25px;

}

.modal-content h2{

    font-size:1.7rem;

}

}