/*==================================================
  FAST BALLOON DECORATION
  Premium Responsive CSS
  Part 1 - Global Styles
==================================================*/

:root{

    --navy:#131b34;
    --navy-deep:#0c1224;

    --gold:#c79a3d;
    --gold-light:#e8cd8a;

    --ivory:#faf6ec;
    --ivory-warm:#f5edd9;

    --white:#ffffff;

    --text:#495167;
    --black:#111111;

    --shadow-sm:0 8px 20px rgba(0,0,0,.08);
    --shadow:0 18px 45px rgba(0,0,0,.12);
    --shadow-lg:0 30px 80px rgba(0,0,0,.18);

    --radius:20px;

    --transition:.35s cubic-bezier(.22,1,.36,1);

    --container:1180px;

}

/*================ RESET ================*/

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

html{

    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;

}

body{

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

    background:var(--ivory);

    color:var(--navy);

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    width:100%;

    height:auto;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button,
input,
textarea{

    font-family:inherit;

    outline:none;

}

button{

    cursor:pointer;

    border:none;

    background:none;

}

h1,
h2,
h3,
h4{

    font-family:"Playfair Display",serif;

    color:var(--navy-deep);

    line-height:1.2;

}

section{

    position:relative;

}

/*================ CONTAINER ================*/

.container{

    width:min(100% - 40px,var(--container));

    margin-inline:auto;

}

/*================ EYEBROW ================*/

.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:.28em;

    color:var(--gold);

    font-weight:600;

    margin-bottom:16px;

}

.eyebrow::before{

    content:"";

    width:28px;

    height:1px;

    background:var(--gold);

}

/*================ BUTTONS ================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:999px;

    font-size:.84rem;

    font-weight:600;

    letter-spacing:.05em;

    text-transform:uppercase;

    transition:all var(--transition);

    white-space:nowrap;

}

.btn-gold{

    color:var(--navy-deep);

    background:linear-gradient(
        135deg,
        var(--gold-light),
        var(--gold)
    );

    box-shadow:
        0 15px 35px rgba(199,154,61,.35);

}

.btn-gold:hover{

    transform:translateY(-3px);

    box-shadow:
        0 22px 45px rgba(199,154,61,.45);

}

.btn-outline{

    border:1.5px solid var(--navy);

    color:var(--navy);

    background:transparent;

}

.btn-outline:hover{

    background:var(--navy);

    color:#fff;

}

/*================ UTILITIES ================*/

.text-center{

    text-align:center;

}

.section-head{

    max-width:700px;

    margin:0 auto 70px;

    text-align:center;

}

.section-head h2{

    font-size:clamp(2rem,4vw,3rem);

    margin-bottom:16px;

}

.section-head p{

    color:var(--text);

    font-size:1.02rem;

}

/*================ SCROLLBAR ================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:50px;

}

::-webkit-scrollbar-track{

    background:#eee;

}

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

@media(prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}

/* ================= NAV ================= */

/*==================================================
  NAVIGATION
==================================================*/

header.nav{

    position:fixed;

    top:0;
    left:0;
    width:100%;

    z-index:1000;

    background:rgba(250,246,236,.88);

    backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(199,154,61,.18);

    transition:all .35s ease;

}

header.nav.scrolled{

    background:rgba(250,246,236,.96);

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

}

.nav-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:78px;

}

/*================ LOGO ================*/

.nav-brand{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}

.nav-brand img{

    width:46px;

    height:46px;

    object-fit:contain;

}

.nav-brand span{

    font-family:"Playfair Display",serif;

    font-size:1.15rem;

    font-weight:700;

    color:var(--navy);

    white-space:nowrap;

}

.nav-brand em{

    color:var(--gold);

    font-style:normal;

}

/*================ MENU ================*/

.nav-links{

    display:flex;

    align-items:center;

    gap:36px;

}

.nav-links a{

    position:relative;

    font-size:.92rem;

    font-weight:500;

    color:var(--navy);

    transition:.3s;

}

.nav-links a:hover{

    color:var(--gold);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    border-radius:20px;

    background:var(--gold);

    transition:.35s;

}

.nav-links a:hover::after{

    width:100%;

}

/*================ CTA ================*/

.nav-cta{

    display:flex;

    align-items:center;

    gap:12px;

}

/*================ MOBILE TOGGLE ================*/

.nav-toggle{

    display:none;

    width:44px;

    height:44px;

    border-radius:12px;

    background:#fff;

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

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

}

.nav-toggle span{

    width:22px;

    height:2px;

    background:var(--navy);

    transition:.35s;

}

/*================ TABLET ================*/

@media(max-width:992px){

.nav-inner{

height:74px;

}

.nav-links{

gap:24px;

}

.nav-cta .btn{

padding:12px 18px;

font-size:.78rem;

}

}

/*================ MOBILE ================*/

@media(max-width:768px){

.nav-toggle{

display:flex;

}

.nav-cta>.btn{

display:none;

}

.nav-links{

position:absolute;

top:100%;

left:0;

width:100%;

background:var(--ivory);

display:flex;

flex-direction:column;

align-items:center;

gap:22px;

padding:30px;

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

transform:translateY(-15px);

opacity:0;

visibility:hidden;

transition:.35s;

}

.nav-links.open{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.nav-links a{

font-size:1rem;

}

}

/*================ SMALL MOBILE ================*/

@media(max-width:480px){

.nav-inner{

height:68px;

}

.nav-brand span{

font-size:.95rem;

}

.nav-brand img{

width:40px;

height:40px;

}

.nav-links{

padding:24px;

gap:18px;

}

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

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

.hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:130px 0 90px;

    background:
        radial-gradient(circle at 85% 10%,rgba(199,154,61,.16),transparent 40%),
        radial-gradient(circle at 5% 90%,rgba(19,27,52,.08),transparent 45%),
        var(--ivory);

}

.hero-inner{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:70px;

    position:relative;

    z-index:2;

}

/*================ LEFT SIDE ================*/

.hero h1{

    font-size:clamp(2.6rem,5vw,4.7rem);

    line-height:1.08;

    margin-bottom:24px;

}

.hero .accent{

    color:var(--gold);

    font-style:italic;

}

.hero .lead{

    max-width:560px;

    font-size:1.08rem;

    color:var(--text);

    line-height:1.9;

}

.hero-actions{

    display:flex;

    gap:18px;

    margin-top:38px;

    flex-wrap:wrap;

}

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

.hero-stats{

    display:grid;

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

    gap:24px;

    margin-top:60px;

    max-width:560px;

}

.hero-stats div{

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

    backdrop-filter:blur(10px);

    border-radius:18px;

    padding:20px;

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

    text-align:center;

}

.hero-stats strong{

    display:block;

    font-family:"Playfair Display",serif;

    font-size:2rem;

    color:var(--navy-deep);

    margin-bottom:6px;

}

.hero-stats span{

    color:#69728c;

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.08em;

}

/*================ RIGHT SIDE ================*/

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:540px;

}

.hero-ring{

    position:absolute;

    width:min(88vw,440px);

    aspect-ratio:1;

    border-radius:50%;

    border:1px solid rgba(199,154,61,.35);

    animation:rotateRing 40s linear infinite;

}

.hero-ring::before{

    content:"";

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--gold);

    top:-4px;

    left:50%;

    transform:translateX(-50%);

}

.logo-frame{

    width:clamp(240px,33vw,420px);

    aspect-ratio:1;

    border-radius:50%;

    overflow:hidden;

    background:#fff;

    padding:18px;

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

    z-index:2;

}

.logo-frame img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;

}

/*================ FLOATING BALLOONS ================*/

.balloon{

    position:absolute;

    border-radius:50%;

    box-shadow:

        inset -10px -14px 24px rgba(0,0,0,.15),

        inset 8px 8px 20px rgba(255,255,255,.25);

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

}

.balloon::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-42px;

    width:1px;

    height:44px;

    background:rgba(0,0,0,.2);

}

.b1{

    width:78px;

    height:98px;

    top:6%;

    left:2%;

    background:linear-gradient(var(--navy),#24304f);

}

.b2{

    width:58px;

    height:74px;

    right:10%;

    top:4%;

    background:linear-gradient(var(--gold-light),var(--gold));

    animation-delay:.5s;

}

.b3{

    width:48px;

    height:60px;

    left:10%;

    bottom:12%;

    background:linear-gradient(#fff,var(--gold));

    animation-delay:1s;

}

.b4{

    width:68px;

    height:84px;

    right:4%;

    bottom:5%;

    background:linear-gradient(#2b3860,var(--navy));

    animation-delay:1.5s;

}

/*================ SCROLL INDICATOR ================*/

.scroll-cue{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    font-size:.75rem;

    color:#7c8398;

    letter-spacing:.15em;

    text-transform:uppercase;

}

.scroll-cue .line{

    width:2px;

    height:36px;

    background:linear-gradient(var(--gold),transparent);

    animation:scrollMove 2s infinite;

}

/*================ ANIMATIONS ================*/

@keyframes rotateRing{

    to{

        transform:rotate(360deg);

    }

}

@keyframes balloonFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

@keyframes scrollMove{

    0%{

        transform:scaleY(0);

        transform-origin:top;

    }

    50%{

        transform:scaleY(1);

        transform-origin:top;

    }

    51%{

        transform-origin:bottom;

    }

    100%{

        transform:scaleY(0);

        transform-origin:bottom;

    }

}

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

@media(max-width:1100px){

.hero{

text-align:center;

padding:120px 0 80px;

}

.hero-inner{

grid-template-columns:1fr;

gap:60px;

}

.hero .lead{

margin:auto;

}

.hero-actions{

justify-content:center;

}

.hero-stats{

margin-inline:auto;

}

.hero-visual{

min-height:420px;

}

}

@media(max-width:768px){

.hero{

padding:110px 0 70px;

min-height:auto;

}

.hero h1{

font-size:2.5rem;

}

.hero .lead{

font-size:1rem;

}

.hero-actions{

flex-direction:column;

}

.hero-actions .btn{

width:100%;

}

.hero-stats{

grid-template-columns:1fr;

gap:16px;

}

.hero-visual{

min-height:320px;

}

.logo-frame{

width:250px;

}

.hero-ring{

width:290px;

}

}

@media(max-width:480px){

.hero{

padding:100px 0 60px;

}

.hero h1{

font-size:2rem;

}

.hero .lead{

font-size:.95rem;

}

.logo-frame{

width:210px;

}

.hero-ring{

width:240px;

}

.balloon{

display:none;

}

.scroll-cue{

display:none;

}

}
/* ================= SECTION HEAD ================= */

.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 56px;
}

.section-head h2{
  font-size:clamp(1.9rem,3.6vw,2.7rem);
  color:var(--navy-deep);
  font-weight:700;
}

.section-head p{
  margin-top:14px;
  color:#5c6280;
  line-height:1.7;
  font-size:1rem;
}

/* ================= SERVICES ================= */

/*==================================================
                SERVICES SECTION
==================================================*/

.services{

    padding:110px 0;

    background:var(--ivory);

}

/*================ GRID ================*/

.services-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:32px;

    align-items:stretch;

}

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

.service-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    height:100%;

    border:1px solid rgba(199,154,61,.15);

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

    transition:all .4s ease;

    position:relative;

}

.service-card:hover{

    transform:translateY(-10px);

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

}

/*================ IMAGE ================*/

.service-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:4/3;

}

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}

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

    transform:scale(1.08);

}

.service-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    to top,

    rgba(0,0,0,.35),

    transparent 65%

    );

    opacity:0;

    transition:.35s;

}

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

    opacity:1;

}

/*================ CONTENT ================*/

.service-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:28px;

}

.service-content h3{

    font-size:1.45rem;

    margin-bottom:14px;

    color:var(--navy-deep);

}

.service-content p{

    flex:1;

    color:var(--text);

    line-height:1.8;

    margin-bottom:24px;

}

/*================ BUTTON ================*/

.service-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--gold);

    font-weight:600;

    transition:.35s;

}

.service-btn span{

    transition:.35s;

}

.service-btn:hover{

    color:var(--navy);

}

.service-btn:hover span{

    transform:translateX(6px);

}

/*================ GOLD LINE ================*/

.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:

    linear-gradient(

    90deg,

    var(--gold),

    var(--gold-light)

    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.service-card:hover::before{

    transform:scaleX(1);

}

/*================ REVEAL ================*/

.service-card{

    opacity:0;

    transform:translateY(40px);

    transition:

    opacity .7s,

    transform .7s,

    box-shadow .35s;

}

.service-card.in{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
              RESPONSIVE
==================================================*/

@media(max-width:1200px){

.services{

padding:100px 0;

}

.services-grid{

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

}

}

@media(max-width:768px){

.services{

padding:80px 0;

}

.services-grid{

grid-template-columns:1fr;

gap:24px;

}

.service-content{

padding:22px;

}

.service-content h3{

font-size:1.3rem;

}

.service-content p{

font-size:.96rem;

}

}

@media(max-width:480px){

.service-image{

aspect-ratio:16/10;

}

.service-content{

padding:20px;

}

.service-content h3{

font-size:1.2rem;

}

.service-btn{

width:100%;

justify-content:center;

padding:14px;

border-radius:50px;

background:rgba(199,154,61,.08);

}

}
/*==================================================
                GALLERY SECTION
==================================================*/

.gallery{

    padding:110px 0;

    position:relative;

    overflow:hidden;

    background:var(--navy-deep);

}

.gallery::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 90% 10%,
    rgba(199,154,61,.14),
    transparent 45%),

    radial-gradient(circle at 10% 100%,
    rgba(255,255,255,.04),
    transparent 45%);

    pointer-events:none;

}

.gallery .section-head h2{

    color:#fff;

}

.gallery .section-head p{

    color:#bcc4d8;

}

.gallery .eyebrow{

    color:var(--gold-light);

}

.gallery .eyebrow::before{

    background:var(--gold-light);

}

/*================ GRID ================*/

.gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:26px;

    position:relative;

    z-index:2;

}

/*================ ITEM ================*/

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    aspect-ratio:1;

    cursor:pointer;

    background:#18203d;

    border:1px solid rgba(199,154,61,.18);

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

    transition:all .45s ease;

}

.gallery-item:hover{

    transform:translateY(-10px);

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

}

/*================ IMAGE ================*/

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

/*================ OVERLAY ================*/

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    to top,

    rgba(10,15,28,.88),

    rgba(10,15,28,.15) 60%,

    transparent

    );

    opacity:.92;

    transition:.35s;

    z-index:1;

}

.gallery-item:hover::before{

    opacity:1;

}

/*================ LABEL ================*/

.gallery-item .label{

    position:absolute;

    left:24px;

    bottom:22px;

    z-index:5;

    color:#fff;

    font-family:"Playfair Display",serif;

    font-size:1.15rem;

    font-weight:600;

    transition:.35s;

}

.gallery-item:hover .label{

    transform:translateY(-6px);

}

/*================ GOLD BORDER ================*/

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid transparent;

    border-radius:22px;

    transition:.4s;

}

.gallery-item:hover::after{

    border-color:rgba(232,205,138,.6);

}

/*================ FLOATING ICON ================*/

.gallery-item .zoom-icon{

    position:absolute;

    top:18px;

    right:18px;

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(12px);

    color:#fff;

    opacity:0;

    transform:scale(.6);

    transition:.35s;

    z-index:5;

}

.gallery-item:hover .zoom-icon{

    opacity:1;

    transform:scale(1);

}

/*================ REVEAL =================*/

.gallery-item{

    opacity:0;

    transform:translateY(40px);

    transition:

    opacity .7s,

    transform .7s,

    box-shadow .4s;

}

.gallery-item.in{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
              RESPONSIVE
==================================================*/

@media(max-width:1200px){

.gallery{

padding:100px 0;

}

.gallery-grid{

grid-template-columns:

repeat(3,1fr);

}

}

@media(max-width:992px){

.gallery-grid{

grid-template-columns:

repeat(2,1fr);

gap:22px;

}

}

@media(max-width:768px){

.gallery{

padding:80px 0;

}

.gallery-grid{

grid-template-columns:1fr;

gap:20px;

}

.gallery-item{

aspect-ratio:16/11;

}

.gallery-item .label{

font-size:1rem;

left:18px;

bottom:18px;

}

}

@media(max-width:480px){

.gallery-item{

border-radius:18px;

}

.gallery-item .zoom-icon{

width:42px;

height:42px;

font-size:.9rem;

}

.gallery-item .label{

font-size:.95rem;

}

}
/*==================================================
            WHY CHOOSE US
==================================================*/

.why{

    padding:110px 0;

    background:var(--ivory-warm);

    position:relative;

    overflow:hidden;

}

.why::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(199,154,61,.08);

    top:-180px;

    right:-180px;

    pointer-events:none;

}

/*================ LAYOUT ================*/

.why-inner{

    display:grid;

    grid-template-columns:0.95fr 1.05fr;

    gap:70px;

    align-items:center;

}

/*================ LEFT SIDE ================*/

.why-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:450px;

    border-radius:30px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #ffffff,
        #f7edd5
    );

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

}

.why-visual::before{

    content:"";

    position:absolute;

    inset:20px;

    border:2px dashed rgba(199,154,61,.25);

    border-radius:22px;

}

/*================ BADGE ================*/

.badge{

    position:relative;

    width:220px;

    aspect-ratio:1;

    border-radius:50%;

    background:#fff;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow);

    z-index:2;

}

.badge strong{

    font-family:"Playfair Display",serif;

    font-size:4rem;

    color:var(--gold);

    line-height:1;

}

.badge span{

    margin-top:12px;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-size:.8rem;

    color:var(--navy);

    text-align:center;

}

/*================ RIGHT SIDE ================*/

.why-list{

    display:grid;

    gap:24px;

}

.why-row{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:22px;

    background:#fff;

    border-radius:20px;

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

    transition:all .35s ease;

}

.why-row:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

/*================ NUMBER ================*/

.why-num{

    width:56px;

    height:56px;

    border-radius:50%;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--gold-light),
        var(--gold)
    );

    color:var(--navy-deep);

    font-family:"Playfair Display",serif;

    font-size:1.2rem;

    font-weight:700;

}

.why-row h3{

    font-size:1.2rem;

    margin-bottom:8px;

}

.why-row p{

    color:var(--text);

    line-height:1.8;

    font-size:.95rem;

}

/*================ REVEAL ================*/

.why-row{

    opacity:0;

    transform:translateY(35px);

    transition:

        opacity .7s,

        transform .7s,

        box-shadow .35s;

}

.why-row.in{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:1100px){

.why{

padding:100px 0;

}

.why-inner{

grid-template-columns:1fr;

gap:50px;

}

.why-visual{

min-height:380px;

}

.badge{

width:200px;

}

}

@media(max-width:768px){

.why{

padding:80px 0;

}

.why-visual{

min-height:320px;

}

.badge{

width:170px;

}

.badge strong{

font-size:3rem;

}

.why-row{

padding:18px;

gap:16px;

}

.why-num{

width:48px;

height:48px;

font-size:1rem;

}

.why-row h3{

font-size:1.05rem;

}

.why-row p{

font-size:.92rem;

}

}

@media(max-width:480px){

.why-row{

flex-direction:column;

align-items:center;

text-align:center;

}

.why-num{

margin-bottom:8px;

}

.badge{

width:150px;

}

.badge strong{

font-size:2.5rem;

}

.badge span{

font-size:.72rem;

}

}
/*==================================================
                REVIEWS SECTION
==================================================*/

.reviews{

    padding:110px 0;

    background:var(--navy);

    position:relative;

    overflow:hidden;

}

.reviews::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,
        rgba(199,154,61,.12),
        transparent 40%),

        radial-gradient(circle at bottom left,
        rgba(255,255,255,.04),
        transparent 40%);

    pointer-events:none;

}

.reviews .section-head{

    position:relative;

    z-index:2;

}

.reviews .section-head h2{

    color:#fff;

}

.reviews .section-head p{

    color:#bcc4d8;

}

.reviews .eyebrow{

    color:var(--gold-light);

}

.reviews .eyebrow::before{

    background:var(--gold-light);

}

/*================ TRACK ================*/

.reviews-track{

    display:grid;

    grid-auto-flow:column;

    grid-auto-columns:minmax(320px,1fr);

    gap:28px;

    overflow-x:auto;

    padding-bottom:14px;

    scroll-snap-type:x mandatory;

    scroll-behavior:smooth;

    position:relative;

    z-index:2;

}

.reviews-track::-webkit-scrollbar{

    height:8px;

}

.reviews-track::-webkit-scrollbar-thumb{

    background:rgba(199,154,61,.45);

    border-radius:30px;

}

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

.review-card{

    scroll-snap-align:start;

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

    border:1px solid rgba(199,154,61,.18);

    backdrop-filter:blur(12px);

    border-radius:24px;

    padding:34px;

    transition:all .35s ease;

    min-height:290px;

    display:flex;

    flex-direction:column;

}

.review-card:hover{

    transform:translateY(-8px);

    border-color:rgba(232,205,138,.5);

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

}

/*================ STARS ================*/

.stars{

    color:var(--gold);

    letter-spacing:4px;

    font-size:1rem;

    margin-bottom:18px;

}

/*================ REVIEW TEXT ================*/

.review-card p{

    flex:1;

    color:#dde2f1;

    line-height:1.9;

    font-size:.96rem;

    margin-bottom:26px;

}

/*================ REVIEWER ================*/

.reviewer{

    display:flex;

    align-items:center;

    gap:16px;

}

.avatar{

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--gold-light),
        var(--gold)
    );

    color:var(--navy);

    font-family:"Playfair Display",serif;

    font-size:1.3rem;

    font-weight:700;

    flex-shrink:0;

}

.reviewer strong{

    display:block;

    color:#fff;

    font-size:1rem;

    margin-bottom:4px;

}

.reviewer span{

    color:#9da5bf;

    font-size:.85rem;

}

/*================ QUOTE ICON ================*/

.review-card::before{

    content:"❝";

    position:absolute;

    top:20px;

    right:28px;

    font-size:4rem;

    line-height:1;

    color:rgba(199,154,61,.12);

    font-family:serif;

}

/*================ REVEAL ================*/

.review-card{

    position:relative;

    opacity:0;

    transform:translateY(35px);

    transition:

        opacity .7s,

        transform .7s,

        box-shadow .35s;

}

.review-card.in{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:992px){

.reviews{

padding:90px 0;

}

.reviews-track{

grid-auto-columns:300px;

gap:22px;

}

}

@media(max-width:768px){

.reviews{

padding:80px 0;

}

.review-card{

padding:26px;

min-height:260px;

}

.review-card p{

font-size:.92rem;

}

.avatar{

width:50px;

height:50px;

font-size:1.1rem;

}

}

@media(max-width:480px){

.reviews-track{

grid-auto-columns:92%;

}

.review-card{

padding:22px;

border-radius:18px;

}

.review-card::before{

font-size:3rem;

top:16px;

right:18px;

}

.stars{

font-size:.9rem;

letter-spacing:2px;

}

}
/*==================================================
                CTA SECTION
==================================================*/

.cta-strip{

    padding:90px 0;

    background:linear-gradient(
        135deg,
        var(--gold-light),
        var(--gold)
    );

    position:relative;

    overflow:hidden;

}

.cta-strip::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

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

    right:-180px;

    top:-180px;

}

.cta-strip .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    flex-wrap:wrap;

    position:relative;

    z-index:2;

}

.cta-strip h2{

    max-width:650px;

    font-size:clamp(2rem,4vw,3rem);

    color:var(--navy-deep);

    line-height:1.2;

}

.cta-strip p{

    margin-top:16px;

    color:#3f455a;

    font-size:1.05rem;

    max-width:520px;

}

/*==================================================
                    FOOTER
==================================================*/

footer{

    background:var(--navy-deep);

    color:#c7cddd;

    padding:90px 0 30px;

    position:relative;

}

footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,

        rgba(199,154,61,.08),

        transparent 35%);

    pointer-events:none;

}

/*================ GRID ================*/

.footer-grid{

    display:grid;

    grid-template-columns:

        1.5fr

        1fr

        1fr

        1.2fr;

    gap:50px;

    padding-bottom:50px;

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

    position:relative;

    z-index:2;

}

/*================ BRAND ================*/

.footer-brand{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:20px;

}

.footer-brand img{

    width:48px;

    height:48px;

    object-fit:contain;

}

.footer-brand span{

    font-family:"Playfair Display",serif;

    font-size:1.25rem;

    color:#fff;

    font-weight:700;

}

.footer-brand em{

    color:var(--gold);

    font-style:normal;

}

footer .desc{

    color:#9ea6c0;

    line-height:1.9;

    max-width:320px;

}

/*================ TITLES ================*/

footer h4{

    color:#fff;

    margin-bottom:22px;

    font-size:.85rem;

    letter-spacing:.14em;

    text-transform:uppercase;

}

/*================ LINKS ================*/

footer ul{

    display:grid;

    gap:14px;

}

footer ul a{

    color:#9ea6c0;

    transition:.3s;

}

footer ul a:hover{

    color:var(--gold-light);

    padding-left:6px;

}

/*================ SOCIAL ================*/

.foot-social{

    display:flex;

    gap:14px;

    margin-top:24px;

}

.foot-social a{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

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

    transition:.35s;

}

.foot-social a:hover{

    background:var(--gold);

    color:var(--navy);

    transform:translateY(-4px);

}

/*================ CONTACT ================*/

.footer-contact{

    display:grid;

    gap:14px;

}

.footer-contact div{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:#aeb4c8;

    line-height:1.7;

}

/*================ COPYRIGHT ================*/

.foot-bottom{

    padding-top:28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    color:#7f88a3;

    font-size:.84rem;

    position:relative;

    z-index:2;

}

.foot-bottom a{

    transition:.3s;

}

.foot-bottom a:hover{

    color:var(--gold-light);

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:1100px){

.footer-grid{

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

}

}

@media(max-width:768px){

.cta-strip{

padding:70px 0;

text-align:center;

}

.cta-strip .container{

justify-content:center;

}

.cta-strip h2{

font-size:2rem;

}

.footer-grid{

grid-template-columns:1fr;

gap:40px;

text-align:center;

}

.footer-brand{

justify-content:center;

}

footer .desc{

margin:auto;

}

.footer-contact div{

justify-content:center;

}

.foot-social{

justify-content:center;

}

.foot-bottom{

flex-direction:column;

text-align:center;

}

}

@media(max-width:480px){

.cta-strip{

padding:60px 0;

}

.cta-strip h2{

font-size:1.7rem;

}

.cta-strip p{

font-size:.95rem;

}

.footer-grid{

gap:30px;

}

footer{

padding:70px 0 24px;

}

}
/*==================================================
            FLOATING CONTACT BUTTONS
==================================================*/

.floating-contact{

    position:fixed;

    right:24px;

    bottom:24px;

    display:flex;

    flex-direction:column;

    gap:16px;

    z-index:9999;

}

.float-btn{

    position:relative;

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:1.4rem;

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

    transition:all .35s ease;

}

.float-btn:hover{

    transform:translateY(-6px) scale(1.08);

}

.float-btn.call{

    background:var(--navy);

}

.float-btn.whatsapp{

    background:#25D366;

}

/*================ LABEL ================*/

.float-btn span{

    position:absolute;

    right:82px;

    background:#fff;

    color:var(--navy);

    white-space:nowrap;

    padding:10px 18px;

    border-radius:50px;

    font-size:.82rem;

    font-weight:600;

    opacity:0;

    visibility:hidden;

    transform:translateX(15px);

    transition:.35s;

    box-shadow:var(--shadow);

}

.float-btn:hover span{

    opacity:1;

    visibility:visible;

    transform:translateX(0);

}

/*================ PULSE ================*/

.float-btn.whatsapp{

    animation:whatsappPulse 2.8s infinite;

}

@keyframes whatsappPulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.55);

    }

    70%{

        box-shadow:0 0 0 20px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}

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

.popup-overlay{

    position:fixed;

    inset:0;

    background:rgba(8,12,25,.72);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:24px;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:1200;

}

.popup-overlay.show{

    opacity:1;

    visibility:visible;

}

.popup{

    width:min(520px,100%);

    background:#fff;

    border-radius:24px;

    padding:40px;

    position:relative;

    transform:translateY(30px) scale(.96);

    transition:.35s;

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

}

.popup-overlay.show .popup{

    transform:none;

}

.popup-close{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f3f3f3;

    cursor:pointer;

    transition:.3s;

}

.popup-close:hover{

    background:var(--gold);

    color:var(--navy);

}

.popup h3{

    font-size:2rem;

    margin-bottom:16px;

}

.popup p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:28px;

}

/*==================================================
                SCROLL REVEAL
==================================================*/

.reveal{

    opacity:0;

    transform:translateY(45px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.in{

    opacity:1;

    transform:none;

}

/*==================================================
                GLOBAL ANIMATIONS
==================================================*/

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-in{

    animation:fadeIn .8s ease both;

}

.zoom-in{

    animation:zoomIn .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==================================================
                IMAGE HELPERS
==================================================*/

img{

    max-width:100%;

    display:block;

}

.responsive-img{

    width:100%;

    height:auto;

    object-fit:cover;

}

/*==================================================
                SPACING HELPERS
==================================================*/

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:768px){

.floating-contact{

right:16px;

bottom:16px;

gap:12px;

}

.float-btn{

width:58px;

height:58px;

font-size:1.2rem;

}

.float-btn span{

display:none;

}

.popup{

padding:30px 22px;

}

.popup h3{

font-size:1.6rem;

}

}

@media(max-width:480px){

.float-btn{

width:54px;

height:54px;

font-size:1.1rem;

}

.popup{

border-radius:18px;

padding:24px 18px;

}

.popup h3{

font-size:1.4rem;

}

.popup p{

font-size:.95rem;

}

}

/*==================================================
                PRINT
==================================================*/

@media print{

header,

.floating-contact,

.popup-overlay,

.scroll-cue{

display:none !important;

}

body{

background:#fff;

color:#000;

}

a{

text-decoration:none;

color:#000;

}

}

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

:focus-visible{

outline:3px solid var(--gold);

outline-offset:3px;

}

::selection{

background:var(--gold);

color:var(--navy-deep);

}