/* =========================
   Global + Navbar + Hero + Popup
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Roboto', sans-serif;
}

:root{
    --gold:#d4af37;
    --gold-light:#f3d676;
    --gold-soft:#fff4c2;
    --black:#0d0d0d;
    --dark:#171717;
    --gray:#9b9b9b;
    --light:#f7f4ed;
    --white:#ffffff;
    --shadow:0 25px 70px rgba(212,175,55,.18);
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--black);
    color:var(--white);
    overflow-x:hidden;
}

/* =========================
   NAVBAR
========================= */

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
}

.navbar{
    width:100%;
    padding:18px 7%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(13,13,13,.72);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(212,175,55,.18);
}

.logo{
    text-decoration:none;
    color:var(--white);
    font-size:24px;
    font-weight:900;
    letter-spacing:.5px;
}

.logo span{
    color:var(--gold);
}

.nav-links{
    display:flex;
    align-items:center;
    gap:28px;
    list-style:none;
}

.nav-links a{
    text-decoration:none;
    color:#ddd;
    font-size:14px;
    font-weight:500;
    position:relative;
}

.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:.35s ease;
}

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

.nav-links a:hover::after{
    width:100%;
}

.nav-btn{
    border:none;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--black);
    padding:12px 22px;
    border-radius:40px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    box-shadow:0 14px 35px rgba(212,175,55,.28);
    transition:.35s ease;
}

.nav-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 45px rgba(212,175,55,.38);
}

.menu-toggle{
    display:none;
    font-size:22px;
    color:var(--white);
    cursor:pointer;
}

/* =========================
   HERO
========================= */

.hero{
    min-height:100vh;
    padding:130px 7% 80px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:60px;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at top left, rgba(212,175,55,.22), transparent 35%),
        radial-gradient(circle at bottom right, rgba(212,175,55,.18), transparent 35%),
        linear-gradient(135deg, #0d0d0d, #171717 60%, #050505);
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.05)),
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.02) 0px,
            rgba(255,255,255,.02) 1px,
            transparent 1px,
            transparent 12px
        );
    pointer-events:none;
}

.hero-content,
.hero-visual{
    position:relative;
    z-index:2;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(212,175,55,.25);
    padding:9px 16px;
    border-radius:40px;
    color:var(--gold-light);
    font-size:13px;
    font-weight:600;
    margin-bottom:22px;
    box-shadow:var(--shadow);
}

.hero h1{
    font-size:clamp(36px, 5vw, 68px);
    line-height:1.03;
    letter-spacing:-1px;
    max-width:760px;
    margin-bottom:22px;
    color:var(--white);
}

.hero p{
    max-width:640px;
    color:#cfcfcf;
    font-size:16px;
    line-height:1.8;
    margin-bottom:32px;
}

.hero-buttons{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:36px;
}

.btn-primary,
.btn-secondary{
    border:none;
    text-decoration:none;
    padding:14px 24px;
    border-radius:40px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:.35s ease;
}

.btn-primary{
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--black);
    box-shadow:0 18px 45px rgba(212,175,55,.25);
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 25px 60px rgba(212,175,55,.35);
}

.btn-secondary{
    background:rgba(255,255,255,.06);
    color:var(--white);
    border:1px solid rgba(212,175,55,.28);
}

.btn-secondary:hover{
    background:rgba(212,175,55,.12);
    transform:translateY(-3px);
}

/* =========================
   HERO STATS
========================= */

.hero-stats{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.hero-stats div{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(212,175,55,.18);
    border-radius:18px;
    padding:15px 18px;
    min-width:130px;
    box-shadow:0 12px 35px rgba(0,0,0,.22);
}

.hero-stats strong{
    display:block;
    font-size:22px;
    color:var(--gold);
}

.hero-stats span{
    font-size:12px;
    color:#d7d7d7;
}

/* =========================
   HERO VISUAL
========================= */

.hero-visual{
    min-height:560px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-card{
    position:relative;
    width:min(430px,100%);
    height:480px;
    border-radius:38px;
    overflow:hidden;
    box-shadow:0 35px 90px rgba(0,0,0,.45);
    border:10px solid rgba(212,175,55,.25);
}

.hero-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.hero-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.45), transparent 55%);
}

.floating-card{
    position:absolute;
    background:rgba(13,13,13,.82);
    backdrop-filter:blur(14px);
    border:1px solid rgba(212,175,55,.28);
    box-shadow:0 25px 60px rgba(0,0,0,.35);
    border-radius:22px;
    padding:16px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    animation:floatCard 4s ease-in-out infinite;
}

.floating-card i{
    width:40px;
    height:40px;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--black);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.floating-card strong{
    display:block;
    font-size:14px;
    color:var(--white);
}

.floating-card span{
    font-size:12px;
    color:#cfcfcf;
}

.card-one{
    top:70px;
    left:0;
}

.card-two{
    right:0;
    bottom:90px;
    animation-delay:1.2s;
}

@keyframes floatCard{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
}

/* =========================
   POPUP
========================= */

.booking-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.72);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:3000;
    padding:20px;
}

.booking-popup.active{
    display:flex;
}

.popup-box{
    width:100%;
    max-width:460px;
    background:#111;
    border:1px solid rgba(212,175,55,.28);
    border-radius:28px;
    padding:36px;
    text-align:center;
    position:relative;
    box-shadow:0 35px 90px rgba(0,0,0,.55);
    animation:popupShow .35s ease;
}

@keyframes popupShow{
    from{
        opacity:0;
        transform:scale(.9) translateY(20px);
    }
    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

.close-popup{
    position:absolute;
    top:18px;
    right:20px;
    cursor:pointer;
    color:#dcdcdc;
    font-size:18px;
}

.popup-icon{
    width:70px;
    height:70px;
    margin:0 auto 18px;
    background:#25D366;
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
}

.popup-box h3{
    font-size:24px;
    margin-bottom:12px;
    color:var(--white);
}

.popup-box p{
    color:#cfcfcf;
    font-size:15px;
    line-height:1.7;
    margin-bottom:24px;
}

.popup-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:14px 20px;
    border-radius:40px;
    background:#25D366;
    color:white;
    text-decoration:none;
    font-weight:800;
    transition:.3s ease;
}

.popup-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(37,211,102,.28);
}



/* =========================
   FITGOLD CLUB -
   Programmes + Challenge + Coach + Membership
========================= */

/* GENERAL SECTIONS */

section{
    padding:100px 7%;
}

.section-heading{
    text-align:center;
    max-width:760px;
    margin:0 auto 55px;
}

.section-heading span,
.challenge-text span,
.coach-text span{
    display:inline-block;
    color:var(--gold);
    font-size:13px;
    font-weight:900;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.section-heading h2,
.challenge-text h2,
.coach-text h2{
    font-size:clamp(30px,3.4vw,46px);
    line-height:1.12;
    color:var(--white);
    margin-bottom:14px;
}

.section-heading p,
.challenge-text p,
.coach-text p{
    color:#cfcfcf;
    font-size:15px;
    line-height:1.8;
}

/* PROGRAMMES */

.programmes{
    background:#111;
}

.programmes-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.programme-card{
    background:linear-gradient(180deg,#181818,#0f0f0f);
    border:1px solid rgba(212,175,55,.18);
    border-radius:28px;
    padding:34px 24px;
    text-align:center;
    box-shadow:var(--shadow);
    transition:.35s ease;
}

.programme-card:hover{
    transform:translateY(-10px);
    border-color:rgba(212,175,55,.45);
}

.programme-card.featured{
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--black);
}

.programme-card i{
    width:60px;
    height:60px;
    margin:0 auto 18px;
    border-radius:50%;
    background:rgba(212,175,55,.12);
    color:var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.programme-card.featured i{
    background:rgba(0,0,0,.12);
    color:var(--black);
}

.programme-card h3{
    font-size:18px;
    margin-bottom:10px;
}

.programme-card p{
    color:#cfcfcf;
    font-size:14px;
    line-height:1.7;
}

.programme-card.featured p{
    color:#211f16;
}

/* CHALLENGE */

.challenge{
    background:
        radial-gradient(circle at top right,rgba(212,175,55,.18),transparent 35%),
        #0d0d0d;
}

.challenge-content{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:50px;
    align-items:center;
}

.challenge-list{
    display:grid;
    gap:14px;
    margin:24px 0;
}

.challenge-list div{
    display:flex;
    align-items:center;
    gap:12px;
    color:#e7e7e7;
    font-size:14px;
}

.challenge-list i{
    width:28px;
    height:28px;
    background:var(--gold);
    color:var(--black);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}

.section-btn{
    border:none;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--black);
    padding:14px 24px;
    border-radius:40px;
    cursor:pointer;
    font-size:14px;
    font-weight:900;
    transition:.35s ease;
    box-shadow:0 18px 45px rgba(212,175,55,.22);
}

.section-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 25px 60px rgba(212,175,55,.32);
}

.challenge-image{
    position:relative;
    height:500px;
    border-radius:36px;
    overflow:hidden;
    border:10px solid rgba(212,175,55,.18);
    box-shadow:0 35px 90px rgba(0,0,0,.45);
}

.challenge-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.challenge-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%);
}

.winner-badge{
    position:absolute;
    left:22px;
    bottom:22px;
    z-index:2;
    background:rgba(13,13,13,.82);
    border:1px solid rgba(212,175,55,.28);
    color:var(--white);
    padding:14px 18px;
    border-radius:22px;
    display:flex;
    align-items:center;
    gap:10px;
    backdrop-filter:blur(14px);
}

.winner-badge i{
    color:var(--gold);
}

/* PRIVATE COACH */

.private-coach{
    background:#111;
}

.coach-layout{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:50px;
    align-items:center;
}

.coach-images{
    position:relative;
    min-height:520px;
}

.coach-img{
    position:absolute;
    overflow:hidden;
    border-radius:32px;
    border:8px solid rgba(212,175,55,.18);
    box-shadow:0 30px 80px rgba(0,0,0,.45);
}

.coach-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.coach-img.large{
    width:72%;
    height:440px;
    left:0;
    top:0;
}

.coach-img.small{
    width:45%;
    height:280px;
    right:0;
    bottom:0;
}

.coach-benefits{
    display:grid;
    gap:14px;
    margin:24px 0;
}

.coach-benefits div{
    display:flex;
    align-items:center;
    gap:12px;
    color:#e7e7e7;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(212,175,55,.15);
    padding:14px 16px;
    border-radius:18px;
}

.coach-benefits i{
    color:var(--gold);
}

/* MEMBERSHIP */

.membership{
    background:
        radial-gradient(circle at bottom left,rgba(212,175,55,.16),transparent 35%),
        #0d0d0d;
}

.membership-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.membership-card{
    position:relative;
    background:linear-gradient(180deg,#181818,#101010);
    border:1px solid rgba(212,175,55,.18);
    border-radius:30px;
    padding:36px 28px;
    box-shadow:var(--shadow);
    transition:.35s ease;
}

.membership-card:hover{
    transform:translateY(-10px);
    border-color:rgba(212,175,55,.45);
}

.membership-card.premium{
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--black);
}

.popular-tag{
    position:absolute;
    top:18px;
    right:18px;
    background:var(--black);
    color:var(--gold);
    padding:7px 12px;
    border-radius:30px;
    font-size:12px;
    font-weight:900;
}

.membership-card h3{
    font-size:22px;
    margin-bottom:14px;
}

.price{
    font-size:26px;
    font-weight:900;
    color:var(--gold);
    margin-bottom:22px;
}

.membership-card.premium .price{
    color:var(--black);
}

.membership-card ul{
    list-style:none;
    display:grid;
    gap:13px;
    margin-bottom:28px;
}

.membership-card li{
    color:#d8d8d8;
    font-size:14px;
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.membership-card.premium li{
    color:#211f16;
}

.membership-card li i{
    color:var(--gold);
    margin-top:3px;
}

.membership-card.premium li i{
    color:var(--black);
}

.plan-btn{
    width:100%;
    border:none;
    padding:14px 20px;
    border-radius:40px;
    cursor:pointer;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--black);
    font-weight:900;
    transition:.3s ease;
}

.membership-card.premium .plan-btn{
    background:var(--black);
    color:var(--gold);
}

.plan-btn:hover{
    transform:translateY(-3px);
}

/* RESPONSIVE PART 2 */

@media(max-width:1024px){

    .programmes-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .challenge-content,
    .coach-layout{
        grid-template-columns:1fr;
    }

    .coach-text,
    .challenge-text{
        text-align:center;
    }

    .challenge-list div,
    .coach-benefits div{
        justify-content:center;
    }

    .membership-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:768px){

    section{
        padding:80px 6%;
    }

    .programmes-grid,
    .membership-grid{
        grid-template-columns:1fr;
    }

    .challenge-image{
        height:380px;
    }

    .coach-images{
        min-height:460px;
    }

    .coach-img.large{
        width:82%;
        height:360px;
    }

    .coach-img.small{
        width:52%;
        height:220px;
    }
}

@media(max-width:480px){

    section{
        padding:70px 5%;
    }

    .programme-card,
    .membership-card{
        padding:30px 22px;
    }

    .challenge-image{
        height:320px;
        border-radius:26px;
    }

    .coach-images{
        min-height:390px;
    }

    .coach-img.large{
        width:86%;
        height:310px;
    }

    .coach-img.small{
        width:58%;
        height:190px;
    }
}






/* =========================
   FITGOLD CLUB 
   Gallery + Testimonials + Footer
========================= */

/* GALLERY */

.fitness-gallery{
    background:#111;
}

.gallery-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    grid-template-rows:240px 240px;
    gap:20px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    border:1px solid rgba(212,175,55,.18);
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.gallery-item.large{
    grid-row:span 2;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s ease;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

.gallery-overlay{
    position:absolute;
    left:18px;
    right:18px;
    bottom:18px;

    background:rgba(13,13,13,.85);
    backdrop-filter:blur(15px);

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

    padding:14px;
    border-radius:18px;

    transform:translateY(20px);
    opacity:0;

    transition:.35s ease;
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
    transform:translateY(0);
}

.gallery-overlay h4{
    color:white;
    margin-bottom:4px;
}

.gallery-overlay span{
    color:var(--gold);
    font-size:13px;
}

/* TESTIMONIALS */

.testimonials{
    background:#0d0d0d;
}

.testimonial-slider{
    max-width:850px;
    margin:auto;
    overflow:hidden;
}

.testimonial-track{
    display:flex;
    transition:.6s ease;
}

.testimonial-card{
    min-width:100%;

    background:linear-gradient(
        180deg,
        #171717,
        #101010
    );

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

    border-radius:30px;

    padding:40px;

    text-align:center;

    box-shadow:var(--shadow);
}

.testimonial-card p{
    color:#d8d8d8;
    line-height:1.8;
    margin-bottom:20px;
}

.testimonial-card h4{
    color:white;
    margin-bottom:15px;
}

.stars{
    display:flex;
    justify-content:center;
    gap:5px;
}

.stars i{
    color:var(--gold);
}

.testimonial-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:25px;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#444;
    cursor:pointer;
}

.dot.active{
    background:var(--gold);
}

/* CONTACT */

.contact-section{
    background:#111;
}

.contact-container{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:40px;
    align-items:center;
}

.contact-info h2{
    color:white;
    margin:15px 0;
    font-size:42px;
}

.contact-info p{
    color:#cfcfcf;
    line-height:1.8;
    margin-bottom:25px;
}

.contact-items{
    display:grid;
    gap:15px;
    margin-bottom:25px;
}

.contact-item{
    display:flex;
    align-items:center;
    gap:15px;

    background:#171717;
    border:1px solid rgba(212,175,55,.18);

    padding:16px;
    border-radius:20px;
}

.contact-item i{
    width:45px;
    height:45px;

    border-radius:50%;

    background:var(--gold);
    color:black;

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

.contact-item strong{
    color:white;
}

.contact-item span{
    color:#cfcfcf;
    font-size:13px;
}

.contact-map{
    height:450px;

    overflow:hidden;

    border-radius:30px;

    border:8px solid rgba(212,175,55,.18);

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

.contact-map iframe{
    width:100%;
    height:100%;
    border:none;
}

/* SOCIAL BANNER */

.social-banner{
    background:linear-gradient(
        135deg,
        var(--gold),
        #f1d277
    );

    color:black;
    text-align:center;
}

.social-content{
    max-width:800px;
    margin:auto;
}

.social-content h2{
    font-size:44px;
    margin:15px 0;
}

.social-content p{
    line-height:1.8;
    margin-bottom:30px;
}

.social-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.social-btn{
    text-decoration:none;

    background:black;
    color:var(--gold);

    padding:14px 24px;

    border-radius:40px;

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

    transition:.35s ease;
}

.social-btn:hover{
    transform:translateY(-3px);
}

/* FOOTER */

.footer{
    background:#050505;
    padding:80px 7% 25px;
}

.footer-container{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:40px;
    margin-bottom:40px;
}

.footer-logo{
    text-decoration:none;
    color:white;
    font-size:26px;
    font-weight:900;
}

.footer-logo span{
    color:var(--gold);
}

.footer-brand p{
    color:#bdbdbd;
    margin-top:18px;
    line-height:1.8;
}

.footer-links h4,
.footer-social h4{
    color:white;
    margin-bottom:18px;
}

.footer-links a,
.footer-social a{
    display:block;
    text-decoration:none;
    color:#bdbdbd;
    margin-bottom:12px;
    transition:.3s ease;
}

.footer-links a:hover,
.footer-social a:hover{
    color:var(--gold);
}

.footer-social i{
    width:22px;
    color:var(--gold);
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:20px;
    text-align:center;
}

.footer-bottom p{
    color:#999;
    font-size:13px;
}

/* RESPONSIVE */

@media(max-width:1024px){

    .contact-container{
        grid-template-columns:1fr;
    }

    .footer-container{
        grid-template-columns:1fr 1fr;
    }

    .gallery-grid{
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .gallery-item.large{
        grid-row:auto;
        height:350px;
    }

    .gallery-item{
        height:250px;
    }
}

@media(max-width:768px){

    .contact-info h2{
        font-size:34px;
    }

    .social-content h2{
        font-size:34px;
    }

    .testimonial-card{
        padding:30px 20px;
    }

    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }
}

@media(max-width:480px){

    .contact-map{
        height:320px;
    }

    .gallery-item,
    .gallery-item.large{
        height:220px;
    }

    .social-btn{
        width:100%;
        justify-content:center;
    }
}

/* FIX RESPONSIVE NAVBAR */
.mobile-booking{
    display:none;
}

@media(max-width:980px){

    .desktop-booking{
        display:none !important;
    }

    .mobile-booking{
        display:block;
        width:100%;
    }

    .mobile-booking .nav-btn{
        width:100%;
        justify-content:center;
        margin-top:8px;
    }

    .menu-toggle{
        display:block !important;
    }

    .nav-links{
        position:absolute;
        top:74px;
        right:7%;
        width:260px;

        display:none !important;
        flex-direction:column;
        align-items:flex-start;
        gap:16px;

        background:rgba(13,13,13,.96);
        border:1px solid rgba(212,175,55,.25);
        border-radius:22px;
        padding:22px;

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

    .nav-links.active{
        display:flex !important;
    }

    .nav-links a{
        color:#fff;
    }
}

@media(max-width:480px){

    .nav-links{
        width:90%;
        right:5%;
    }
}


/* =========================
   FINAL HERO RESPONSIVE FIX
========================= */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

.hero{
    overflow:hidden;
}

.hero-visual{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* TABLET */
@media(max-width:1024px){

    .hero{
        grid-template-columns:1fr;
        text-align:center;
        padding:120px 6% 70px;
        gap:35px;
    }

    .hero p{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons,
    .hero-stats{
        justify-content:center;
    }

    .hero-visual{
        min-height:520px;
        width:100%;
    }

    .hero-card{
        width:100%;
        max-width:430px;
        height:500px;
    }
}

/* MOBILE */
@media(max-width:768px){

    .hero{
        padding:105px 5% 55px;
    }

    .hero h1{
        font-size:34px;
        line-height:1.15;
    }

    .hero p{
        font-size:15px;
    }

    .hero-visual{
        min-height:460px;
    }

    .hero-card{
        max-width:340px;
        height:410px;
        border-radius:28px;
    }

    .floating-card{
        position:absolute;
        max-width:240px;
        padding:12px 14px;
        z-index:5;
    }

    .floating-card span{
        display:none;
    }

    .card-one{
        top:15px;
        left:50%;
        transform:translateX(-50%);
    }

    .card-two{
        bottom:15px;
        right:50%;
        transform:translateX(50%);
    }
}

/* SMALL PHONES */
@media(max-width:480px){

    .hero{
        padding:95px 5% 45px;
    }

    .hero h1{
        font-size:29px;
    }

    .hero p{
        font-size:14px;
        line-height:1.7;
    }

    .hero-visual{
        min-height:420px;
    }

    .hero-card{
        max-width:315px;
        height:380px;
        border-radius:24px;
        border-width:7px;
    }

    .hero-stats{
        flex-direction:column;
        align-items:center;
    }

    .hero-stats div{
        width:100%;
        max-width:240px;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
    }

    .card-one{
        top:8px;
    }

    .card-two{
        bottom:8px;
    }
}

/* EXTRA SMALL */
@media(max-width:360px){

    .hero-card{
        max-width:290px;
        height:350px;
    }

    .hero-visual{
        min-height:390px;
    }

    .floating-card{
        max-width:220px;
    }
}