*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg-color: #FDF5EA;
    --text-color: #4E2A18;

}

body{

    background:#fdf5ea;
    color:#4E2A18;

    font-family:Montserrat, sans-serif;

    overflow-x:hidden;


}

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:"Cinzel", serif;
    font-weight:400;

}





/* ---------------- NAV ---------------- */

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

}

nav{

    height:5rem; /* 80px */

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8vw;

    backdrop-filter:blur(0.75rem); /* 12px */

    background:rgba(249,242,232,.75);

    border-bottom:0.0625rem solid rgba(0,0,0,.08); /* 1px */

}


nav ul{

    display:flex;

    list-style:none;

    gap:3.125rem; /* 50px */

}

nav a{

    text-decoration:none;

    color:#4E2A18;

    font-size:1rem; /* 16px */

}

/* ---------------- MOBILE NAV ---------------- */

@media (max-width:768px){

    nav{

        height:4.5rem;

        padding:0 1.5rem;

    }

    nav img{

        height:2.5rem;

    }

    nav ul{

        gap:1.25rem;

    }

    nav a{

        font-size:.9rem;

    }

}

/* ---------------- HERO ---------------- */

.hero{

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:2rem 8vw;

}

.hero-content{

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:clamp(1.125rem, 2vw, 1.75rem); /* 18px - 28px */

    max-width:43.75rem; /* 700px */

}

.logo-placeholder{

    margin-top: 20px;

    width:clamp(15rem, 24vw, 22.5rem); /* 240px - 360px */

    aspect-ratio:1;

    display:flex;
    justify-content:center;
    align-items:center;

}

.logo-placeholder img{

    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

}

.booking{

    font-size:clamp(1rem, 1.1vw, 1.125rem); /* 16px - 18px */

    letter-spacing:0.03125rem; /* 0.5px */

}

.btn{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    padding:
        clamp(0.75rem, 1vw, 0.875rem)      /* 12px - 14px */
        clamp(1.75rem, 2vw, 2.25rem);      /* 28px - 36px */

    background:#4E2A18;

    color:#fff;

    text-decoration:none;

    border-radius:0.75rem; /* 12px */

    font-size:clamp(0.9375rem, 1vw, 1.0625rem); /* 15px - 17px */

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}

.btn:hover{

    transform:translateY(-0.1875rem); /* 3px */

    box-shadow:0 0.75rem 1.75rem rgba(78,42,24,.22); /* 12px 28px */

}

/* ---------------- MOBILE HERO ---------------- */

@media (max-width:768px){

    .hero{

        padding:6rem 1.5rem 3rem;

    }

    .hero-content{

        gap:1.25rem;

        max-width:100%;

    }

    .logo-placeholder{

        margin-top:0;

        width:clamp(12rem,60vw,16rem);

    }

    .booking{

        font-size:.95rem;

        line-height:1.6;

    }

    .btn{

        width:100%;

        max-width:18rem;

        padding:.9rem 1.5rem;

        font-size:1rem;

    }

}

/* ---------------- SERVICES ---------------- */

.services{

    max-width:1200px;

    margin:160px auto;

    padding:0 40px;

    text-align:center;



}

.services-label{

    display:block;

    margin-bottom:18px;

    font-size:.72rem;

    letter-spacing:5px;

    color:#4E2A18;

}

.services h2{

    font-size:3rem;

    font-weight:300;

    line-height:1.2;

    margin-bottom:70px;

    color:#4E2A18;

}

/* ---------- GRID ---------- */

.services-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

/* ---------- CARD ---------- */

.service-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    text-decoration:none;

    color:inherit;

    box-shadow:

        0 8px 30px rgba(0,0,0,.08);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 18px 45px rgba(0,0,0,.12);

}

/* ---------- IMAGE ---------- */

.service-image{

    height:290px;

    overflow:hidden;

}

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .6s ease;

}

.service-card:hover .service-image img{

    transform:scale(1.05);

}

/* ---------- CONTENT ---------- */

.service-content{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    padding:32px;

}

.service-content h3{

    text-align:left;

    font-size:1.45rem;

    font-weight:500;

    margin-bottom:10px;

}

.service-content p{

    text-align:left;

    color:#666;

    line-height:1.7;

    max-width:280px;

}

.arrow{

    font-size:1.6rem;

    transition:transform .3s ease;

}

.service-card:hover .arrow{

    transform:translateX(8px);

}

/* ---------- RESPONSIVE ---------- */

@media(max-width:900px){

    .services-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:600px){

    .services{

        margin:100px auto;

        padding:0 24px;

    }

    .services h2{

        font-size:2.2rem;

    }

    .service-image{

        height:220px;

    }

    .service-content{

        padding:24px;

    }

}

/* ---------- RESPONSIVE ---------- */

@media (max-width:768px){

    .services{

        margin:6rem auto;

        padding:0 1.5rem;

    }

    .services-label{

        font-size:.7rem;

        letter-spacing:4px;

        margin-bottom:1rem;

    }

    .services h2{

        font-size:2.2rem;

        margin-bottom:3rem;

    }

    .services-grid{

        grid-template-columns:1fr;

        gap:1.5rem;

    }

    .service-image{

        height:15rem;

    }

    .service-content{

        padding:1.5rem;

    }

    .service-content h3{

        font-size:1.3rem;

        margin-bottom:.5rem;

    }

    .service-content p{

        font-size:.95rem;

        line-height:1.6;

        max-width:none;

    }

    .arrow{

        font-size:1.4rem;

    }

}
/* ---------------- LINE ART ---------------- */

.art-section{
    position:relative;
}

.butterfly-container{

    position:absolute;
    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:9999;

}

.butterfly-svg{

    position:absolute;
    display:none;
    top:0;
    left:0;

    width:clamp(700px,75vw,1200px);

    height:auto;


    transform:translateX(clamp(40px,6vw,100px));

    max-width:none;

}


/* ---------------- GALLERY ---------------- */

.gallery{

    position:relative;

    padding:clamp(20px,3vw,40px) 8vw clamp(80px,8vw,120px);

    display:flex;
    flex-direction:column;
    align-items:center;

    overflow:hidden;

}

.gallery h2{

    text-align:center;

    font-size:clamp(2.4rem,4vw,3.25rem);

    margin-bottom:clamp(40px,5vw,70px);

    font-weight:400;

    line-height:1.15;

}

.gallery-wrapper{

    display:flex;

    justify-content:center;
    align-items:center;

    gap:clamp(16px,2vw,22px);

    flex-wrap:wrap;

    width:100%;

}

.gallery-card{

    width:clamp(150px,11vw,180px);

    aspect-ratio:180 / 340;

    border-radius:18px;

    background:#EFE3D4;

    border:2px solid rgba(78,42,24,.12);

    overflow:hidden;

    cursor:pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    flex-shrink:0;

}

.gallery-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.gallery-card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 40px rgba(0,0,0,.1);

}

.gallery-henna-right{

    position:absolute;

    width:clamp(260px,26vw,400px);

    right:0;
    top:0;

    transform:translate(50%,-50%) rotate(180deg);

    object-fit:contain;

    pointer-events:none;

}


.gallery-link{

    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:40px;

    text-decoration:none;

    color:var(--text-color);

    font-size:15px;
    font-weight:500;
    letter-spacing:.5px;

    transition:.3s ease;

}

.gallery-link-wrapper{

    width:100%;

    display:flex;
    justify-content:center;

    margin-top:40px;

}

/* ---------------- MOBILE GALLERY ---------------- */

@media (max-width:768px){

    .gallery{

        padding:3rem 1.5rem 5rem;

    }

    .gallery h2{

        font-size:2.2rem;

        margin-bottom:2.5rem;

    }

    .gallery-wrapper{

        gap:1rem;

        justify-content:center;

    }

    .gallery-card{

        width:calc(50% - .5rem);

        max-width:170px;

        min-width:140px;

    }

    .gallery-link-wrapper{

        margin-top:2rem;

    }

    .gallery-link{

        font-size:.95rem;

    }

    .gallery-henna-right{

        display:none;

    }

}

/* ---------------- PRODUCTS ---------------- */

.products{


    padding:0px

    position:relative;

}

.products h2{

    text-align:center;

    margin-bottom:80px;

    font-size:52px;

    font-weight:400;

}



.product-grid{

    display:flex;

    justify-content:center;

    gap:10px;

}


.product {

    width: 420px;

    transform-origin: center center;

    animation: float 5s ease-in-out infinite;

}

.product.show{
    opacity:1;

    transform:translateY(0) rotate(-8deg);
}

.products-layout{

    display:flex;

    justify-content:center;
    align-items:center;

    gap:clamp(40px,6vw,80px);

}

.product-column{

    flex:1;
    max-width:470px;

}

.product-scene{

    flex:0 1 420px;

}


.info-box{


    border-radius:10px;

}

.info-box.large{

    width:470px;
    height:480px;

}

.info-box.small{

    width:470px;
    height:180px;

}

.product-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:2.5rem;
}

.product-tag{
    font-size:0.8rem;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#9b7a54;
    margin-bottom:1.5rem;
}

.product-title{
    font-family:"Cinzel", serif;
    font-size:3rem;
    line-height:1.15;
    font-weight:500;
    color:#4f2c0c;
    margin-bottom:2rem;
}

.product-divider{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:2rem;
}

.product-divider::before,
.product-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:#c9b08c;
}

.product-divider span{
    margin:0 18px;
    color:#b78d54;
    font-size:1rem;
}

.product-description{
    max-width:280px;
    font-size:1rem;
    line-height:1.8;
    color:#5d4a36;
}

/* ---------------- MOBILE PRODUCTS ---------------- */

@media (max-width:768px){

    .products{

        padding:4rem 1.5rem;

    }

    .products h2{

        font-size:2.2rem;

        margin-bottom:3rem;

    }

    .products-layout{

        flex-direction:column;

        gap:2rem;

    }

    .product-column{

        width:100%;

        max-width:100%;

    }

    .product-scene{

        order:2;

        flex:none;

        width:100%;

        display:flex;
        justify-content:center;

    }

    .product{

        width:70%;

        max-width:280px;

    }

    .info-box.large,
    .info-box.small{

        width:100%;
        height:auto;

    }

    .product-card{

        padding:2rem 1.5rem;

    }

    .product-title{

        font-size:2rem;

        margin-bottom:1.5rem;

    }

    .product-description{

        max-width:100%;

        font-size:.95rem;

        line-height:1.7;

    }

}

/* ---------------- ABOUT ---------------- */



.about-content{

    width:min(900px,100%);

    text-align:center;

}

.about{

    position:relative;


    background:#F3E9DC;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:70px 8vw;

    overflow:hidden;

}

.about h2{

    text-align:center;

    font-size:44px;

    font-weight:500;

    margin-bottom:70px;

    letter-spacing:3px;

}

.about-text{

    width:min(700px, 100%);

    margin:auto;

}

.about-text p{

    font-size:20px;

    line-height:1.5;

    text-align:center;

    margin-bottom:25px;

}

.henna-left{

    position:absolute;

    width:380px;

    left:0;
    bottom:0;

    transform:translate(-50%, 50%);

    object-fit:contain;

}

.henna-right{

    position:absolute;

    width:300px;

    right:-75px;

    top:120px;

    object-fit:contain;

    transform:rotate(180deg);

}

@media (max-width:768px){

    .about{

        padding:4rem 1.5rem;

    }

    .about h2{

        font-size:2.2rem;

        margin-bottom:2.5rem;

    }

    .about-text p{

        font-size:0.8rem;

        line-height:1.4;

    }

    .henna-left{

        width:180px;

        left:-90px;

        bottom:-60px;

        transform:none;

    }

    .henna-right{

        width:100px;

        right:-20px;

        top : 0px;

        transform:rotate(180deg);

    }

}


/* ---------------- FOOTER ---------------- */

footer{

    background:#4E2A18;

    color:white;

    padding:80px 8vw 40px;

    text-align:center;

}

.footer-logo{

    width:100px;

    height:100px;

    margin:0 auto 40px;
    object-fit:contain;

}

.footer-contact{

    display:flex;

    justify-content:center;

    gap:60px;

    margin-bottom:50px;

}

.footer-bottom{

    opacity:.6;

    font-size:14px;

}

.footer-credit{
    font-size: 10px; /* Smaller text */
    opacity: 0.8;    /* Optional: make it a bit subtler */
}

.footer-contact{

    display:flex;
    justify-content:center;
    gap:2rem;
    flex-wrap:wrap;

    margin-bottom:3rem;

}

.contact-card{

    width:220px;

    padding:1.6rem;

    text-decoration:none;
    color:white;

    border:1px solid rgba(255,255,255,.12);

    border-radius:18px;

    background:rgba(255,255,255,.04);

    transition:.3s;

}

.contact-card:hover{

    transform:translateY(-6px);

    background:rgba(255,255,255,.08);

    border-color:rgba(255,255,255,.25);

}

.contact-card i{

    font-size:1.9rem;

    margin-bottom:1rem;

    color:#D8B16A;

}

.contact-card h4{

    font-size:1.05rem;

    font-weight:500;

    margin-bottom:.45rem;

}

.contact-card span{

    font-size:.9rem;

    color:rgba(255,255,255,.75);

    word-break:break-word;

}

/* ---------------- MOBILE FOOTER ---------------- */

@media (max-width:768px){

    footer{

        padding:4rem 1.5rem 2rem;

    }

    .footer-logo{

        width:80px;
        height:80px;

        margin-bottom:2rem;

    }


    .footer-contact{

        display:flex;

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:center;

        gap:1rem;

        margin-bottom:2.5rem;

    }

    .contact-card{

        flex:0 0 calc(50% - 0.5rem);

        max-width:160px;

        width:calc(50% - 0.5rem);

        padding:1rem .75rem;

        box-sizing:border-box;

    }

    .contact-card i{

        font-size:1.4rem;

        margin-bottom:.75rem;

    }

    .contact-card h4{

        font-size:.9rem;

        margin-bottom:.35rem;

    }

    .contact-card span{

        font-size:.72rem;

        line-height:1.4;

        word-break:break-word;

    }

    .footer-bottom{

        font-size:.8rem;

        line-height:1.6;

    }

    .footer-credit{

        font-size:.6rem;

    }

}





@keyframes float {

    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(5px) rotate(-5deg);
    }

}