@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --gold: #d4af37;
    --gold-light: #f0d98c;
}

/* ====================== BASE ====================== */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

.heading-font {
    font-family: 'Playfair Display', serif;
}

/* ====================== UTILITIES ====================== */
.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(212,175,55,.45);
}

.gold-gradient {
    background: linear-gradient(90deg, #d4af37, #f0d98c, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ====================== NAVBAR ====================== */
#navbar {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px);
    transition: all 0.5s ease;
}

#navbar.scrolled{

    background:rgba(10,10,10,.96);

    backdrop-filter:blur(28px);

    padding-top:4px;
    padding-bottom:4px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.45);

    border-bottom:
        1px solid rgba(212,175,55,.15);
}
/* ====================== SCROLL PROGRESS ====================== */

#scroll-progress{
    position:fixed;
    top:0;
    left:0;
    width:0%;
    height:3px;
    background:linear-gradient(90deg,#d4af37,#f0d98c,#d4af37);
    z-index:9999;
    transition:width .15s linear;
    box-shadow:0 0 15px rgba(212,175,55,.6);
}

/* Nav Link Hover */
.nav-link{

    position:relative;

    color:white;

    transition:
        color .35s ease;

}

.nav-link:hover{

    color:#d4af37;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:0;

    height:2px;

    background:#d4af37;

    transition:.35s;

    transform:translateX(-50%);

}

.nav-link:hover::after{

    width:100%;

}
.nav-link.active{
    color: var(--gold);
}

.nav-link.active::after{
    width:100%;
}

@keyframes menuDrop{

    from{
        opacity:0;
        transform:translateY(-15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
/* ====================== HERO ====================== */
#hero {
    position: relative;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    animation: heroZoom 25s linear infinite alternate;
}

@keyframes heroZoom {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

#hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
}

#hero .max-w-2xl {
    position: relative;
    z-index: 5;
}

#hero button,
#hero a {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#hero button:hover,
#hero a:hover {
    transform: translateY(-4px);
}

#hero button:hover {
    box-shadow: 0 20px 35px rgba(212, 175, 55, 0.35);
}

/* ====================== SERVICE CARD ====================== */

.signature-badge{
    transition:all .35s ease;
}

.group:hover .signature-badge{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(212,175,55,.25);
}

/* ====================== CUSTOM CURSOR ====================== */
.custom-cursor {
    position: fixed;
    width: 14px;
    height: 14px;
    background: var(--gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: all 0.15s ease;
    display: none;
}

@media (min-width: 1024px) {
    .custom-cursor { display: block; }
}

/* ====================== TRANSFORMATIONS SLIDER ====================== */
#comparison-slider {
    max-height: 650px;
    aspect-ratio: 16 / 9;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
}

#comparison-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    #comparison-slider {
        max-height: 420px;
    }
}

/* ====================== TEAM ====================== */
#team-grid > div {
    transition: transform 0.4s ease;
}

#team-grid > div:hover {
    transform: translateY(-10px);
}
/* ====================== book btn ====================== */
.book-btn{

transition:.35s;

}

.book-btn:hover{

transform:translateY(-4px);

box-shadow:
0 15px 35px rgba(212,175,55,.35);

}
#hero-buttons button,
#hero-buttons a{

    transition:.4s;

}

#hero-buttons button:hover,
#hero-buttons a:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 60px rgba(212,175,55,.28);

}
/* ====================== Logo Hover====================== */
#navbar img{

transition:.4s;

}

#navbar img:hover{

transform:scale(1.08);

filter:
drop-shadow(0 0 12px rgba(212,175,55,.6));

}
/* ====================== RESPONSIVE ====================== */
@media (max-width: 1024px) {
    #hero { text-align: center; }
    #hero .max-w-2xl { margin: auto; }
}

@media (max-width:768px){

    #hero{
        padding-top:110px;
        padding-bottom:70px;
    }

    #hero h1{
        font-size:3.2rem;
    }

    #hero h2{
        font-size:1.5rem;
    }

    #voice-toggle{
        width:58px;
        height:58px;
        bottom:20px;
        right:16px;
    }

    #hero-stats{
        margin-top:2rem;
    }

    #hero-stats h3{
        line-height:1;
    }

    #hero-stats p{
        margin-top:8px;
    }

    #hero-trust{
        margin-top:1.5rem;
        justify-content:center;
    }

    .scroll-indicator{
        display:none;
    }

}
@media (max-width:768px){

    #hero-stats{
        margin-top:2rem;
    }

    #hero-trust{
        margin-top:1.5rem;
        justify-content:center;
    }

}

/* ====================== MISC ====================== */
.animate-bounce {
    animation-duration: 2s;
}

#navbar .heading-font {
    line-height: 1;
}
/* ================= MOBILE MENU ================= */

#mobile-menu{

    transform-origin:top;

    transition:
        opacity .35s ease,
        transform .35s ease;

}

#mobile-menu.hidden{

    opacity:0;

    transform:translateY(-20px);

    pointer-events:none;

}

#mobile-menu:not(.hidden){

    opacity:1;

    transform:translateY(0);

}
/* ================= ACCESSIBILITY ================= */

button:focus-visible,
a:focus-visible{

    outline:2px solid #d4af37;

    outline-offset:4px;

    border-radius:10px;

}
#hero-trust{
    font-size:14px;
}
#hero-trust{
    gap: 16px;
}
 #hero-trust div{

transition:.35s ease;

}

#hero-trust div:hover{
    transform: translateY(-5px);
    box-shadow:
        0 10px 30px rgba(212,175,55,.18);
}
.hero-title-wrapper{

    position:relative;

    display:block;

    width:100%;

}

.hero-glow{

    position:absolute;

    left:120px;

    top:130px;

    transform:none;

    width:500px;

    height:500px;

    background:radial-gradient(circle,
        rgba(212,175,55,.25) 0%,
        rgba(212,175,55,.10) 40%,
        transparent 75%);

    filter:blur(70px);

    z-index:-1;

    animation:goldGlow 6s ease-in-out infinite;

}
#hero:hover .hero-glow{

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

    transition:1s;

}

@keyframes goldGlow{

0%,100%{
transform:translate(-50%,-50%) scale(1);
opacity:.6;
}

50%{
transform:translate(-50%,-50%) scale(1.15);
opacity:1;
}

}
#hero-title{

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #f7d56b 45%,
        #ffffff 70%
    );

    background-size:250% auto;

    background-clip:text;
    -webkit-background-clip:text;

    color:transparent;
    -webkit-text-fill-color:transparent;

    animation:shineText 6s linear infinite;

}

@keyframes shineText{

to{
background-position:250% center;
  }
}
.book-btn,
.secondary-btn{

position:relative;
overflow:hidden;

}

.book-btn::before,
.secondary-btn::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:60%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);

transform:skewX(-25deg);

transition:.7s;

}

.book-btn:hover::before,
.secondary-btn:hover::before{

left:170%;

}
.service-arrow{
    border:1px solid rgba(255,255,255,.15);
}

.service-card:hover .service-arrow{

    transform:translateX(6px);

    background:rgba(212,175,55,.95);

    border-color:transparent;

}
.service-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(212,175,55,.12),
        transparent 45%,
        transparent 100%
    );

    opacity:0;

    transition:.45s;

    pointer-events:none;

}

.service-card:hover{

    transform:translateY(-14px);

    box-shadow:
        0 35px 80px rgba(0,0,0,.45),
        0 0 0 1px rgba(212,175,55,.08);

}

.service-card:hover::before{

    opacity:1;

}
.service-card:hover .service-arrow i{

    color:#111;
}
/* ===========================
   PREMIUM GALLERY
=========================== */

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:#111;

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

}

.gallery-card:hover{

    transform:translateY(-12px);

    box-shadow:
        0 40px 80px rgba(0,0,0,.45),
        0 0 35px rgba(251,191,36,.15);

}

.gallery-card img{

    width:100%;

    display:block;

    transition:
        transform .9s ease,
        filter .6s ease;

}

.gallery-card:hover img{

    transform:scale(1.08);

    filter:brightness(.88);

}

/* Luxury Golden Shine */

.gallery-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        transparent 0%,
        rgba(251,191,36,.18) 50%,
        transparent 100%
    );

    transform:translateX(-120%);

    transition:transform .9s ease;

    z-index:2;

    pointer-events:none;

}

.gallery-card:hover::before{

    transform:translateX(120%);

}
/* ===========================
   GALLERY FILTERS
=========================== */

.gallery-filter{

   padding:12px 22px;

    border-radius:999px;

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

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

    color:white;

   font-size:.85rem;
letter-spacing:1px;
font-weight:600;
text-transform:uppercase;
.gallery-filter{

    min-width:90px;

}

    transition:.35s;

    cursor:pointer;

    backdrop-filter:blur(12px);

}

.gallery-filter:hover{

    background:#d4af37;

    color:black;

    transform:translateY(-3px);

}

.gallery-filter.active{

    background:#d4af37;

    color:black;

    border-color:#d4af37;

    box-shadow:0 0 20px rgba(212,175,55,.45);

}
/*==========================
LIGHTBOX
==========================*/

#gallery-lightbox{

    display:none;

}

#gallery-lightbox.active{

    display:flex;

}

#lightbox-image{

    transition:.4s;

}
/*==========================
GALLERY SUBTITLE
==========================*/

.gallery-subtitle{

    color:#d4af37;

    font-size:.8rem;

    letter-spacing:6px;

    text-transform:uppercase;

    font-weight:600;

    opacity:.9;

}
/* ===========================
   HOUSE OF HEENA BRANDING
=========================== */

.brand-h{

    font-family:"Cinzel", serif;

    font-size:3.5rem;

    font-weight:700;

    color:#D4AF37;

    line-height:1;

    text-shadow:
        0 0 12px rgba(212,175,55,.35),
        0 0 24px rgba(212,175,55,.20);

    transition:.35s ease;

}

.brand-h:hover{

    transform:scale(1.08);

}

.brand-tagline{

    color:#D4AF37;

    font-size:.75rem;

    letter-spacing:3px;

    text-transform:uppercase;

}

.hero-brand{

    margin-top:30px;

    color:#D4AF37;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:1rem;

    font-weight:500;

}

/* ===========================
   HERO SERVICE PILLS
=========================== */

.hero-services{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin:32px 0 42px;

    max-width:600px;

}
.service-pill{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:999px;

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

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

    backdrop-filter:blur(16px);

    color:#F5F5F5;

    font-size:.95rem;

    letter-spacing:.3px;

    transition:all .35s ease;

}
#hero-trust{

    max-width:650px;

}
.service-pill{

    font-weight:500;

    letter-spacing:.3px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.02);

}

.service-pill:hover{

    transform:translateY(-4px);

    border-color:#D4AF37;

    background:rgba(212,175,55,.10);

    box-shadow:
        0 10px 30px rgba(212,175,55,.12);
    border:1px solid rgba(255,255,255,.08);

}
.service-pill i{

    color:#D4AF37;

    font-size:.9rem;

}
/* =========================================
   SERVICE MODAL THUMBNAILS
========================================= */

.service-thumb{

    width:70px;
    height:90px;

    object-fit:cover;

    border-radius:14px;

    cursor:pointer;

    border:2px solid transparent;

    transition:all .35s ease;

    opacity:.65;

}

.service-thumb:hover{

    opacity:1;

    transform:translateY(-4px);

}

.service-thumb.active{

    opacity:1;

    border-color:#fbbf24;

    transform:translateY(-4px);

    box-shadow:0 0 22px rgba(251,191,36,.35);

}
/* =========================================
   LUXURY GALLERY FILTERS
========================================= */

.gallery-filter{

    padding:12px 24px;

    border-radius:999px;

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

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

    color:#d4d4d4;

    font-size:.85rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    transition:all .35s ease;

    backdrop-filter:blur(14px);

}

.gallery-filter:hover{

    transform:translateY(-3px);

    border-color:rgba(251,191,36,.45);

    color:#fbbf24;

    background:rgba(251,191,36,.08);

}

.gallery-filter.active{

    background:linear-gradient(135deg,#fbbf24,#d97706);

    color:#111;

    border-color:transparent;

    box-shadow:0 12px 30px rgba(251,191,36,.35);

}
#booking-modal .glass{
    overflow-y:auto;
    scrollbar-width:none;
}

#booking-modal .glass::-webkit-scrollbar{
    display:none;
}
#service-modal-content{

    overflow-y:auto;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

#service-modal-content::-webkit-scrollbar{

    width:0;

    height:0;

    background:transparent;

}

#service-modal-content::-webkit-scrollbar-thumb{

    background:transparent;

}
/* ===========================
   HERO SERVICE PILLS - GOLD
=========================== */

.hero-services {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 36px;
    max-width: 650px;
}

.service-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 18px;
    border-radius: 999px;

    color: #ffffff;

    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.45);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.18),
        inset 0 0 18px rgba(212, 175, 55, 0.05);

    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.2px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.service-pill i {
    color: #fbbf24;
}

.service-pill:hover {
    transform: translateY(-3px);

    background: rgba(212, 175, 55, 0.22);
    border-color: rgba(251, 191, 36, 0.85);

    box-shadow:
        0 10px 30px rgba(212, 175, 55, 0.18),
        inset 0 0 20px rgba(212, 175, 55, 0.08);
}
/* =========================================================
   BOOKING TIME DROPDOWN
   Fix native browser option visibility
   ========================================================= */

#booking-time {
    color: #ffffff;
    background-color: #18181b;
}

#booking-time option {
    color: #18181b;
    background-color: #ffffff;
}

/* Keep the placeholder readable */
#booking-time option:first-child {
    color: #71717a;
}
/* =========================================================
   CLIENT REVIEWS
========================================================= */

.reviews-section {
    position: relative;
    isolation: isolate;
}


/* Background luxury glows */

.reviews-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: -1;
}

.reviews-glow-left {
    top: 15%;
    left: -220px;
    background: rgba(212, 175, 55, .08);
}

.reviews-glow-right {
    bottom: 10%;
    right: -220px;
    background: rgba(212, 175, 55, .06);
}


/* Rating */

.review-rating-box {
    text-align: center;
    padding: 28px 30px;

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

    border: 1px solid rgba(212,175,55,.22);

    border-radius: 28px;

    backdrop-filter: blur(18px);

    box-shadow:
        0 20px 60px rgba(0,0,0,.25),
        inset 0 0 30px rgba(212,175,55,.025);
}


/* Stars */

.review-stars {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fbbf24;
}


/* Review Card */

.review-card {

    position: relative;

    padding: 30px;

    min-height: 300px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

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

    border-radius: 28px;

    backdrop-filter: blur(20px);

    overflow: hidden;

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}


.review-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.7),
            transparent
        );

    opacity: .45;

}


.review-card:hover {

    transform: translateY(-10px);

    border-color: rgba(212,175,55,.35);

    box-shadow:
        0 30px 70px rgba(0,0,0,.35),
        0 0 35px rgba(212,175,55,.08);

}


/* Avatar */

.review-avatar {

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f0d98c
        );

    color: #111;

    font-size: .8rem;

    font-weight: 700;

    letter-spacing: 1px;

    flex-shrink: 0;

}


/* Quote */

.review-quote-mark {

    font-family: Georgia, serif;

    font-size: 5rem;

    line-height: .7;

    color: rgba(212,175,55,.25);

    margin-top: 30px;

}


/* Review text */

.review-text {

    margin-top: 14px;

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

    line-height: 1.9;

    font-size: .95rem;

}


/* Verified */

.review-verified {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 25px;

    padding-top: 18px;

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

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

    font-size: .72rem;

    letter-spacing: .08em;

    text-transform: uppercase;

}


.review-verified i {

    color: #d4af37;

}


/* CTA */

.review-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 28px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #f0d98c,
            #d4af37
        );

    color: #111;

    font-weight: 700;

    letter-spacing: .04em;

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

}


.review-cta:hover {

    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(212,175,55,.25);

}


/* Mobile */

@media (max-width: 768px) {

    .reviews-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .review-card {
        padding: 24px;
        min-height: auto;
    }

    .review-rating-box {
        padding: 24px;
    }

    .review-stars {
        gap: 4px;
    }

}
/* =====================================================
   FAQ
===================================================== */

.faq-item {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color .3s ease,
                background .3s ease;
}

.faq-item:hover {
    border-color: rgba(251,191,36,.35);
    background: rgba(255,255,255,.045);
}

.faq-item[open] {
    border-color: rgba(251,191,36,.45);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    cursor: pointer;
    list-style: none;
    font-size: 18px;
    font-weight: 500;
    color: white;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(251,191,36,.35);
    color: #fbbf24;
    transition: transform .3s ease,
                background .3s ease;
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
    background: rgba(251,191,36,.10);
}

.faq-answer {
    padding: 0 28px 25px;
    color: rgba(255,255,255,.62);
    line-height: 1.8;
    font-size: 15px;
    max-width: 850px;
}

@media (max-width: 640px) {

    .faq-question {
        padding: 20px;
        font-size: 16px;
    }

    .faq-answer {
        padding: 0 20px 22px;
        font-size: 14px;
    }

}
/* =====================================================
   FLOATING WHATSAPP
===================================================== */

.whatsapp-float {

    position: fixed;

    left: 24px;
    bottom: 28px;

    z-index: 49;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 7px 16px 7px 7px;

    border-radius: 999px;

    background: rgba(24, 24, 24, .92);

    border: 1px solid rgba(34, 197, 94, .35);

    backdrop-filter: blur(18px);

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

    color: white;

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

}


.whatsapp-float:hover {

    transform: translateY(-5px);

    border-color: rgba(34, 197, 94, .7);

    box-shadow:
        0 20px 50px rgba(0,0,0,.45),
        0 0 30px rgba(34,197,94,.12);

}


/* Icon */

.whatsapp-float-icon {

    width: 46px;
    height: 46px;

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

    border-radius: 50%;

    background: #22c55e;

    color: white;

    font-size: 23px;

    flex-shrink: 0;

}


/* Text */

.whatsapp-float-text {

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .02em;

    white-space: nowrap;

}


/* Subtle pulse */

.whatsapp-float-icon::after {

    content: "";

    position: absolute;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    border: 1px solid rgba(34,197,94,.5);

    animation: whatsappPulse 2.2s infinite;

}


@keyframes whatsappPulse {

    0% {
        transform: scale(1);
        opacity: .7;
    }

    70% {
        transform: scale(1.45);
        opacity: 0;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }

}


/* Mobile */

@media (max-width: 768px) {

    .whatsapp-float {

        left: 16px;

        bottom: 86px;

        padding: 6px;

        width: 50px;
        height: 50px;

        justify-content: center;

    }

    .whatsapp-float-text {

        display: none;

    }

    .whatsapp-float-icon {

        width: 38px;
        height: 38px;

        font-size: 20px;

    }

    .whatsapp-float-icon::after {

        width: 38px;
        height: 38px;

    }

}
/* =====================================================
   BRIDAL EXPERIENCE PACKAGES
===================================================== */

.bridal-package {

    position: relative;

    display: flex;
    flex-direction: column;

    padding: 34px;

    min-height: 520px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

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

    box-shadow:
        0 25px 70px rgba(0,0,0,.25);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}


.bridal-package:hover {

    transform: translateY(-10px);

    border-color: rgba(212,175,55,.45);

    box-shadow:
        0 35px 80px rgba(0,0,0,.4),
        0 0 35px rgba(212,175,55,.08);

}


/* Featured package */

.bridal-package-featured {

    border-color: rgba(212,175,55,.45);

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.12),
            rgba(255,255,255,.035)
        );

}


.bridal-package-featured:hover {

    border-color: rgba(212,175,55,.75);

}


/* Badge */

.bridal-package-badge {

    position: absolute;

    top: 20px;
    right: 20px;

    padding: 7px 12px;

    border-radius: 999px;

    background: #d4af37;

    color: #111;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


/* Label */

.bridal-package-label {

    color: #d4af37;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;

}


/* Price */

.bridal-package-price {

    margin-top: 28px;

    font-size: 18px;

    font-weight: 600;

    color: #f0d98c;

}


/* Divider */

.bridal-package-divider {

    height: 1px;

    margin: 26px 0;

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

}


/* Features */

.bridal-package-list {

    display: flex;

    flex-direction: column;

    gap: 16px;

    flex-grow: 1;

}


.bridal-package-list li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

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

    font-size: 14px;

    line-height: 1.6;

}


.bridal-package-list i {

    margin-top: 4px;

    color: #d4af37;

    font-size: 12px;

}


/* CTA */

.bridal-package-btn {

    width: 100%;

    margin-top: 32px;

    padding: 16px 20px;

    border-radius: 16px;

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

    border: 1px solid rgba(212,175,55,.30);

    color: white;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition: all .3s ease;

}


.bridal-package-btn:hover {

    background: #d4af37;

    color: #111;

    transform: translateY(-3px);

}


.bridal-package-btn span {

    color: #d4af37;

    transition: transform .3s ease;

}


.bridal-package-btn:hover span {

    color: #111;

    transform: translateX(5px);

}


/* Mobile */

@media (max-width: 768px) {

    .bridal-package {

        min-height: auto;

        padding: 28px;

    }

}
/* =====================================================
   WHY CHOOSE HOUSE OF HEENA
===================================================== */

.why-choose-section{
    background:#090909;
}

.why-glow{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    filter:blur(120px);
    opacity:.12;
    pointer-events:none;
}

.why-glow-left{
    background:#d4af37;
    left:-180px;
    top:120px;
}

.why-glow-right{
    background:#8b5cf6;
    right:-180px;
    bottom:80px;
}

.why-card{
    position:relative;
    padding:30px;
    border-radius:24px;
    background:linear-gradient(
        145deg,
        rgba(255,255,255,.07),
        rgba(255,255,255,.025)
    );
    border:1px solid rgba(255,255,255,.08);
    transition:.35s ease;
    min-height:260px;
}

.why-card:hover{
    transform:translateY(-8px);
    border-color:rgba(212,175,55,.45);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.why-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    background:rgba(212,175,55,.12);
    border:1px solid rgba(212,175,55,.25);
    color:#d4af37;
    font-size:22px;
}

.why-card h3{
    color:white;
    font-size:19px;
    font-weight:600;
    margin-bottom:12px;
}

.why-card p{
    color:rgba(255,255,255,.58);
    line-height:1.7;
    font-size:14px;
}

.why-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:34px 38px;
    border-radius:24px;
    background:linear-gradient(
        90deg,
        rgba(212,175,55,.12),
        rgba(255,255,255,.04)
    );
    border:1px solid rgba(212,175,55,.22);
}

.why-book-btn{
    padding:16px 26px;
    border-radius:14px;
    background:#d4af37;
    color:#111;
    font-weight:600;
    transition:.3s ease;
    white-space:nowrap;
}

.why-book-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(212,175,55,.25);
}

@media(max-width:768px){

    .why-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .why-book-btn{
        width:100%;
    }

}
/* =====================================================
   PREMIUM FOOTER
===================================================== */

.premium-footer{
    position:relative;
    background:#050505;
    border-top:1px solid rgba(212,175,55,.18);
    padding:90px 0 35px;
    overflow:hidden;
}

.premium-footer::before{
    content:"";
    position:absolute;
    top:-180px;
    left:50%;
    transform:translateX(-50%);
    width:700px;
    height:350px;
    background:rgba(212,175,55,.06);
    filter:blur(120px);
    pointer-events:none;
}

.footer-main{
    position:relative;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.4fr;
    gap:60px;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:25px;
}

.footer-h{
    font-family:"Cinzel",serif;
    font-size:52px;
    line-height:1;
    color:#d4af37;
    text-shadow:0 0 20px rgba(212,175,55,.25);
}

.footer-brand-name{
    font-family:"Cinzel",serif;
    font-size:24px;
    letter-spacing:4px;
    color:#fff;
}

.footer-tagline{
    margin-top:4px;
    font-size:9px;
    letter-spacing:3px;
    color:#d4af37;
}

.footer-description{
    max-width:390px;
    color:rgba(255,255,255,.55);
    line-height:1.8;
    font-size:14px;
    margin-bottom:28px;
}

.footer-book-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 22px;
    border-radius:12px;
    background:#d4af37;
    color:#111;
    font-weight:600;
    transition:.3s ease;
}

.footer-book-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(212,175,55,.22);
}

.footer-column{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.footer-column h4{
    color:#d4af37;
    font-size:11px;
    letter-spacing:3px;
    margin-bottom:22px;
}

.footer-column button{
    background:none;
    border:0;
    padding:0;
    margin-bottom:13px;
    color:rgba(255,255,255,.58);
    font-size:14px;
    cursor:pointer;
    transition:.25s ease;
    text-align:left;
}

.footer-column button:hover{
    color:#d4af37;
    transform:translateX(4px);
}

.footer-contact p{
    color:rgba(255,255,255,.58);
    font-size:14px;
    line-height:1.8;
    margin-bottom:18px;
}

.footer-contact > a{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:white;
    font-size:15px;
    margin-bottom:22px;
    transition:.25s ease;
}

.footer-contact > a:hover{
    color:#d4af37;
}

.footer-hours{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.footer-hours span{
    color:#d4af37;
    font-size:9px;
    letter-spacing:2px;
}

.footer-hours strong{
    color:rgba(255,255,255,.75);
    font-size:14px;
    font-weight:500;
}

.footer-divider{
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.35),
        transparent
    );
    margin:60px 0 25px;
}

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    color:rgba(255,255,255,.4);
    font-size:12px;
}

.footer-bottom p{
    margin:0;
}

.footer-bottom-links{
    display:flex;
    gap:25px;
}

.footer-bottom-links button{
    background:none;
    border:0;
    color:rgba(255,255,255,.45);
    cursor:pointer;
    font-size:12px;
    transition:.25s ease;
}

.footer-bottom-links button:hover{
    color:#d4af37;
}


/* MOBILE */

@media(max-width:900px){

    .footer-main{
        grid-template-columns:1fr 1fr;
        gap:45px 30px;
    }

}

@media(max-width:600px){

    .premium-footer{
        padding:65px 0 30px;
    }

    .footer-main{
        grid-template-columns:1fr;
        gap:40px;
    }

    .footer-brand-name{
        font-size:20px;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .footer-bottom-links{
        flex-wrap:wrap;
        gap:15px 20px;
    }

}
/* =====================================================
   MOBILE BOOKING BAR
===================================================== */

.mobile-booking-bar {
    display: none;
}


/* MOBILE ONLY */

@media (max-width: 768px) {

    .mobile-booking-bar {

        position: fixed;

        left: 12px;
        right: 12px;
        bottom: 12px;

        z-index: 1000;

        display: grid;
        grid-template-columns: 0.85fr 1.35fr;

        gap: 8px;

        padding: 7px;

        background: rgba(12, 12, 12, 0.92);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        border: 1px solid rgba(212, 175, 55, 0.25);

        border-radius: 18px;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.45),
            0 0 25px rgba(212, 175, 55, 0.08);
    }


    .mobile-booking-bar a,
    .mobile-booking-bar button {

        min-height: 50px;

        border-radius: 13px;

        display: flex;

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

        gap: 8px;

        font-size: 13px;

        font-weight: 600;

        text-decoration: none;

        cursor: pointer;

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


    .mobile-booking-whatsapp {

        background: rgba(37, 211, 102, 0.12);

        border: 1px solid rgba(37, 211, 102, 0.35);

        color: #25d366;
    }


    .mobile-booking-whatsapp i {

        font-size: 19px;

    }


    .mobile-booking-btn {

        border: 0;

        background:
            linear-gradient(
                135deg,
                #f6c542,
                #d4af37
            );

        color: #111;

        box-shadow:
            0 8px 22px rgba(212, 175, 55, 0.18);
    }


    .mobile-booking-btn i {

        font-size: 16px;

    }


    .mobile-booking-bar a:active,
    .mobile-booking-bar button:active {

        transform: scale(.97);

    }


    /*
       Prevent the fixed bar from covering
       the final content/footer.
    */

    body {

        padding-bottom: 105px;

    }

}
@media (max-width: 768px) {

    .whatsapp-float {
        bottom: 92px !important;
        left: 16px !important;
    }

}
/* ================================
   LOCATION / DIRECTIONS
================================ */

.footer-address-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-address-link:hover {
    color: #fbbf24;
}

.footer-directions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 18px;
    color: #fbbf24;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-directions:hover {
    transform: translateX(4px);
    color: #fcd34d;
}

.footer-directions i {
    font-size: 0.85rem;
}
/* =========================================
   MOBILE NAVBAR FIX
   ========================================= */

@media (max-width: 768px) {

    #navbar {
        padding-left: 12px;
        padding-right: 12px;
    }

    #navbar .heading-font {
        font-size: 1.15rem;
    }

    #navbar .brand-tagline {
        font-size: 0.55rem;
        letter-spacing: 2px;
    }

    #navbar .book-btn {
        padding: 10px 16px;
        font-size: 14px;
    }

}

/* Extra-small phones */
@media (max-width: 360px) {

    #navbar {
        padding-left: 8px;
        padding-right: 8px;
    }

    #navbar .heading-font {
        font-size: 1rem;
    }

    #navbar .brand-tagline {
        font-size: 0.48rem;
        letter-spacing: 1.5px;
    }

    #navbar .book-btn {
        padding: 9px 12px;
        font-size: 13px;
    }

}
/* =========================================
   EXTRA SMALL MOBILE NAVBAR
   ========================================= */

@media (max-width: 360px) {

    #navbar {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Compact logo */
    #navbar img {
        width: 32px;
        height: 32px;
    }

    /* Compact brand area */
    #navbar .heading-font {
        font-size: 0.85rem;
        letter-spacing: 1px;
    }

    /* Hide the tagline on very small screens */
    #navbar .brand-tagline {
        display: none;
    }

    /* Reduce spacing around brand */
    #navbar .flex.items-center.gap-3 {
        gap: 6px;
    }

    /* Compact Book button */
    #navbar .book-btn {
        padding: 8px 10px;
        font-size: 12px;
        gap: 5px;
        white-space: nowrap;
    }

    /* Reduce spacing between navbar controls */
    #navbar .flex.items-center {
        gap: 8px;
    }

}
/* =========================================
   315px MOBILE NAVBAR FINAL FIX
   ========================================= */

@media (max-width: 360px) {

    /* Give the navbar all available width */
    #navbar .max-w-7xl {
        width: 100%;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Keep brand compact */
    #navbar img {
        width: 30px;
        height: 30px;
    }

    /* Compact brand text */
    #navbar .heading-font {
        font-size: 0.78rem;
        letter-spacing: 0.5px;
    }

    /* Hide long tagline */
    #navbar .brand-tagline {
        display: none;
    }

    /* Smaller spacing */
    #navbar .flex.items-center {
        gap: 6px;
    }

    /* Make Book button compact */
    #navbar .book-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
        border-radius: 999px;
        justify-content: center;
        gap: 0;
    }

    /* Hide Book Now text */
    #navbar .book-btn span {
        display: none;
    }

    /* Keep calendar icon visible */
    #navbar .book-btn i {
        font-size: 14px;
        margin: 0;
    }

}