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

:root{
 --navy:#061f5c;--navy2:#0b3f9b;--blue:#0757d9;--blue2:#0b73e8;
 --gold:#e3a400;--gold2:#f0bd2f;--cream:#f4f8ff;--paper:#fff;
 --ink:#14233b;--muted:#64748b;--line:#dce5f0;--white:#fff
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;font-size:16px}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap,.container{width:min(1180px,calc(100% - 48px));margin:auto}

.topbar{height:38px;background:var(--navy);color:#c7d2dd;font-size:14px}
.topbar .wrap,.topbar .container{height:100%;display:flex;align-items:center;justify-content:space-between}
.topbar-right,.toplinks{display:flex;gap:25px}

header,.header{height:152px;background:#fff;color:var(--navy);box-shadow:0 5px 24px rgba(6,31,92,.08);position:sticky;top:0;z-index:100}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo img,.brand img{width:305px;height:124px;object-fit:contain}

.menu{display:flex;align-items:center;gap:31px;font-size:14px;font-weight:700}
.menu>a,.dropdown>a{height:92px;display:flex;align-items:center;position:relative;color:var(--navy)}
.menu>a:hover,.dropdown>a:hover,.menu>a.active{color:var(--blue)}
.menu>a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--blue)}
.dropdown{position:relative}
.dropdown>a:after{content:"⌄";margin-left:6px}
.dropdown-menu{position:absolute;top:82px;left:-15px;width:220px;padding:8px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(7px);transition:.2s}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:none}
.dropdown-menu a{display:block;padding:11px 12px;color:var(--navy)}
.dropdown-menu a:hover{background:var(--cream);color:var(--blue)}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 21px;font-size:13px;font-weight:700;border-radius:3px;transition:.2s}
.nav-cta,.btn-gold,.btn-primary{background:var(--blue);color:#fff}
.nav-cta:hover,.btn-gold:hover,.btn-primary:hover{background:var(--blue2)}
.btn-outline{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-outline:hover{background:#fff;color:var(--navy)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy2)}
.mobile-btn{display:none;border:0;background:none;color:var(--navy);font-size:25px;cursor:pointer}

.hero{background:linear-gradient(135deg,var(--navy),#0a347d);color:#fff;overflow:hidden}
.hero-grid{min-height:650px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:55px}
.eyebrow{font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold2);font-weight:700;margin-bottom:16px}
.hero h1{font-size:clamp(44px,5.5vw,72px);line-height:1.05;letter-spacing:-2.8px;font-weight:700;max-width:650px}
.hero h1 span{color:var(--gold2)}
.hero p{color:#c3d0dc;max-width:600px;font-size:17px;margin:22px 0 28px}
.hero-ctas{display:flex;gap:11px;flex-wrap:wrap}
.hero-stats{display:flex;gap:42px;margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15)}
.stat-num{font-size:25px;font-weight:700;color:#fff}
.stat-label{font-size:11px;color:#aab8c5;max-width:125px;line-height:1.4;margin-top:3px}
.plumb-visual{height:500px;position:relative;display:flex;justify-content:center}
.plumb-anchor{width:18px;height:18px;border-radius:50%;background:var(--gold);position:absolute;top:50px;left:50%;transform:translateX(-50%);box-shadow:0 0 0 8px rgba(201,162,39,.1)}
.plumb-string{position:absolute;top:68px;bottom:120px;width:1px;background:linear-gradient(to bottom,rgba(228,197,94,.85),rgba(228,197,94,.15))}
.plumb-bob{position:absolute;bottom:76px}
.plumb-label{position:absolute;bottom:20px;letter-spacing:2px;font-size:11px;text-transform:uppercase;color:var(--gold2)}

.section{padding:95px 0}
.section.cream,.alt{background:var(--cream)}
.section-head{max-width:700px;margin-bottom:42px}
.section-head h2{font-size:clamp(36px,4vw,54px);line-height:1.1;letter-spacing:-1.7px;font-weight:700;color:var(--navy)}
.section-head p{color:var(--muted);font-size:17px;margin-top:14px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{background:#fff;border:1px solid var(--line);padding:29px;min-height:320px;transition:.25s;position:relative}
.service-card:hover{transform:translateY(-5px);box-shadow:0 16px 35px rgba(11,35,64,.1);border-color:#cbd4dc}
.service-card:after{content:"";position:absolute;left:0;top:0;width:4px;height:0;background:var(--gold);transition:.25s}
.service-card:hover:after{height:100%}
.service-icon{width:82px;height:82px;margin-bottom:24px;color:var(--blue);font-size:58px;line-height:1;display:flex;align-items:center;justify-content:flex-start}
.service-card h3{font-size:28px;color:var(--navy);margin-bottom:9px}
.service-card p{font-size:15px;color:var(--muted)}
.service-list{list-style:none;margin-top:20px}
.service-list li{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:11px 0;font-size:13px;color:var(--muted)}
.service-list li span:last-child{color:var(--navy);font-weight:700}

.cred-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:start}
.cred-list{list-style:none}
.cred-list li{display:grid;grid-template-columns:55px 1fr;gap:17px;padding:19px 0;border-top:1px solid var(--line)}
.cred-num{font-size:14px;color:var(--gold);font-weight:700;letter-spacing:1px}
.cred-list h4{font-size:16px;color:var(--navy);margin-bottom:4px}
.cred-list p{font-size:13px;color:var(--muted)}
.cred-card{background:var(--navy);color:#fff;padding:38px;min-height:400px;position:relative;overflow:hidden}
.cred-card h3{font-size:36px;line-height:1.18;max-width:390px;margin:12px 0 18px}
.cred-card p{color:#bdcbd7;font-size:14px;max-width:450px}
.cred-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:27px}
.cred-tag{border:1px solid rgba(255,255,255,.22);padding:7px 10px;font-size:10px;color:#d8e0e7}

.community{background:var(--navy2);color:#fff;padding:95px 0}
.community .section-head h2{color:#fff}
.community .section-head p{color:#bdcbd7}
.community-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.community-card{min-height:245px;border:1px solid rgba(255,255,255,.18);padding:30px;background:rgba(255,255,255,.03)}
.community-card h3{font-size:22px;margin-bottom:9px}
.community-card p{font-size:13px;color:#c2ced9}

.page-hero{background:linear-gradient(135deg,var(--navy),#0a347d);color:#fff;padding:82px 0}
.page-hero h1{font-size:clamp(44px,5.5vw,72px);line-height:1.05;letter-spacing:-2.5px;max-width:800px}
.page-hero p,.page-hero .lede{max-width:690px;color:#c3d0dc;font-size:17px;margin-top:18px}

.story-grid,.split{display:grid;grid-template-columns:1.1fr .9fr;gap:75px;align-items:start}
.story-text h2{font-size:33px;color:var(--navy);margin-bottom:18px}
.story-text p{color:var(--muted);font-size:15px;margin-bottom:17px}
.pull-card,.image-panel{background:var(--cream);padding:35px;border-left:4px solid var(--gold)}
.pull-card p,.image-panel .quote{font-size:28px;line-height:1.35;color:var(--navy);font-weight:600}
.pull-card span{display:block;margin-top:22px;color:var(--muted);font-size:10px;letter-spacing:1px}
.image-panel{min-height:320px}
.image-panel .eyebrow{color:var(--gold)}
.image-panel .quote{margin-top:22px}

.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.value-card,.card{background:#fff;border:1px solid var(--line);padding:25px}
.value-card .num{color:var(--gold);font-size:14px;font-weight:700}
.value-card h4{font-size:17px;color:var(--navy);margin:14px 0 8px}
.value-card p,.card p{font-size:13px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card .icon{font-size:38px;color:var(--blue);font-weight:700;margin-bottom:18px}
.card h3{font-size:24px;color:var(--navy);margin-bottom:10px}

.timeline{background:var(--cream)}
.tl-list{border-top:1px solid var(--line)}
.tl-item{display:grid;grid-template-columns:170px 1fr 1.2fr;gap:25px;padding:23px 0;border-bottom:1px solid var(--line)}
.tl-year{font-size:11px;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.tl-item h4{font-size:16px;color:var(--navy)}
.tl-item p{font-size:13px;color:var(--muted)}

.service-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:70px}
.service-content .icon{font-size:64px;line-height:1;color:var(--blue);margin-bottom:20px}
.service-content h2{font-size:44px;color:var(--navy);line-height:1.1;margin:15px 0}
.service-content p{font-size:17px;color:var(--muted);margin-bottom:17px}
.feature-list{display:grid;grid-template-columns:1fr 1fr;margin-top:27px;border-top:1px solid var(--line)}
.feature-list div{padding:14px 10px 14px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:700}
.side-box{background:var(--navy);color:#fff;padding:32px;position:sticky;top:110px;height:max-content}
.side-box h3{font-size:34px;line-height:1.15;margin:13px 0}
.side-box p{font-size:14px;color:#c2ced9;margin-bottom:22px}

.form-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}
.form-box{background:#fff;border:1px solid var(--line);padding:30px;box-shadow:0 12px 30px rgba(11,35,64,.05)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field.full{grid-column:1/-1}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid #d4dce3;padding:12px;font:inherit;font-size:14px;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.contact-items{margin-top:25px}
.contact-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.contact-item .ci{color:var(--gold);font-size:22px}
.contact-item strong{font-size:15px;color:var(--navy);display:block}
.contact-item span{font-size:14px;color:var(--muted)}
.checklist{list-style:none;margin-top:25px}
.checklist li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--navy)}
.checklist li:before{content:"✓";color:var(--gold);font-weight:700;margin-right:12px}

.cta-strip{background:var(--gold);padding:35px 0}
.cta-strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}
.cta-strip h3{font-size:24px;color:var(--navy)}

footer{background:#071a30;color:#aebdca;padding:55px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:35px;border-bottom:1px solid rgba(255,255,255,.13)}
footer img{width:205px;filter:brightness(0) invert(1);margin-bottom:14px}
footer p{font-size:13px}
footer h4{color:#fff;font-size:14px;margin-bottom:11px}
footer a{display:block;font-size:13px;padding:4px 0}
footer a:hover{color:#fff}
.copyright{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:18px;font-size:11px}

.whatsapp{position:fixed;right:22px;bottom:22px;width:55px;height:55px;border-radius:50%;background:#20b965;color:#fff;display:grid;place-items:center;font-size:24px;z-index:90}

@media(max-width:950px){
 .menu{display:none;position:absolute;top:92px;left:0;right:0;background:#fff;padding:15px 24px;box-shadow:0 15px 30px rgba(0,0,0,.12)}
 .menu.open{display:block}
 .menu>a,.dropdown>a{height:auto;padding:13px 0}
 .dropdown-menu{position:static;width:100%;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 15px}
 .dropdown:hover .dropdown-menu{display:block}
 .mobile-btn{display:block}
 .nav-cta{display:none}
 .hero-grid,.cred-grid,.story-grid,.split,.service-layout,.form-wrap{grid-template-columns:1fr}
 .plumb-visual{order:-1;height:370px}
 .service-grid,.cards{grid-template-columns:1fr 1fr}
 .values-grid{grid-template-columns:1fr 1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
 .side-box{position:static}
}
@media(max-width:620px){
 .wrap,.container{width:calc(100% - 30px)}
 .topbar{height:auto;padding:8px 0}
 .topbar .wrap,.topbar .container{display:block}
 .topbar-right,.toplinks{gap:12px;flex-wrap:wrap;margin-top:3px}
 header,.header{height:120px}
 .logo img,.brand img{width:175px;height:125px}
 .menu{top:76px}
 .hero-grid{min-height:auto;padding:58px 0}
 .hero h1{letter-spacing:-1.8px}
 .hero-stats{gap:20px;flex-wrap:wrap}
 .service-grid,.cards,.values-grid,.feature-list,.form-grid{grid-template-columns:1fr}
 .field.full{grid-column:auto}
 .section{padding:72px 0}
 .community-grid{grid-template-columns:1fr}
 .tl-item{grid-template-columns:1fr;gap:6px}
 .cta-strip .wrap{display:block}
 .cta-strip .btn{margin-top:17px}
 .footer-grid{grid-template-columns:1fr}
 .page-hero{padding:60px 0}
 .page-hero h1{font-size:44px}
 .service-content h2{font-size:36px}
}




/* =========================================
   ABOUT PAGE
========================================= */

.about-story {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 75px;
    align-items: center;
}

.about-story-content {
    max-width: 680px;
}

.about-story-content .section-head {
    margin-bottom: 30px;
}

.about-story-content .section-head p {
    margin-bottom: 16px;
}


.about-philosophy {
    min-height: 430px;
    background: linear-gradient(
        145deg,
        var(--navy),
        var(--navy2)
    );

    padding: 45px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;
    overflow: hidden;

    color: #fff;
}

.about-philosophy:before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

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

    border-radius: 50%;

    right: -230px;
    bottom: -210px;
}


.about-quote {
    font-size: 42px;
    line-height: 1.2;
    letter-spacing: -1px;
    font-weight: 700;

    position: relative;
    z-index: 1;

    margin-top: 15px;
}


.about-line {
    width: 90px;
    height: 3px;

    background: var(--gold2);

    margin: 30px 0 20px;
}


.about-philosophy p {
    color: #c3d0dc;
    font-size: 14px;
    max-width: 300px;
}


.about-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


.about-card {
    background: #fff;

    border: 1px solid var(--line);

    padding: 35px;

    min-height: 290px;

    transition: .25s;

    position: relative;
}


.about-card:before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 0;

    background: var(--gold);

    transition: .25s;
}


.about-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 18px 40px rgba(6,31,92,.10);

    border-color: #cbd8e6;
}


.about-card:hover:before {
    height: 100%;
}


.about-card-number {
    font-size: 14px;

    color: var(--gold);

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 30px;
}


.about-card h3 {
    font-size: 25px;

    color: var(--navy);

    margin-bottom: 12px;
}


.about-card p {
    font-size: 14px;

    color: var(--muted);

    line-height: 1.7;
}


.about-commitment {
    display: grid;

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

    gap: 90px;

    align-items: start;
}


.commitment-list {
    border-top: 1px solid var(--line);
}


.commitment-item {
    display: grid;

    grid-template-columns: 60px 1fr;

    gap: 20px;

    align-items: center;

    padding: 22px 0;

    border-bottom: 1px solid var(--line);
}


.commitment-item span {
    font-size: 13px;

    color: var(--gold);

    font-weight: 700;

    letter-spacing: 1px;
}


.commitment-item p {
    font-size: 16px;

    color: var(--navy);

    font-weight: 600;
}


/* =========================================
   RESPONSIVE ABOUT PAGE
========================================= */

@media (max-width: 950px) {

    .about-story,
    .about-commitment {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-cards {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 620px) {

    .about-story,
    .about-commitment {
        gap: 35px;
    }

    .about-philosophy {
        min-height: 350px;

        padding: 30px;
    }

    .about-quote {
        font-size: 34px;
    }

    .about-cards {
        grid-template-columns: 1fr;
    }

    .about-card {
        min-height: auto;

        padding: 28px;
    }

    .commitment-item {
        grid-template-columns: 45px 1fr;

        gap: 12px;
    }

    .commitment-item p {
        font-size: 14px;
    }

}












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

.site-footer {
    background:
        linear-gradient(
            135deg,
            #04142d 0%,
            #071f43 55%,
            #061a36 100%
        );

    color: #aebdca;

    padding: 0 0 25px;

    position: relative;

    overflow: hidden;
}


/* Decorative background element */

.site-footer:before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    border: 1px solid rgba(227,164,0,.10);

    border-radius: 50%;

    right: -260px;
    bottom: -300px;

    pointer-events: none;
}


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

.footer-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 55px 0;

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

}


.footer-cta .eyebrow {

    color: var(--gold2);

    margin-bottom: 12px;

}


.footer-cta h2 {

    color: #fff;

    font-size: clamp(30px, 4vw, 46px);

    line-height: 1.12;

    letter-spacing: -1.5px;

    max-width: 600px;

}


.footer-cta p {

    color: #aebdca;

    font-size: 15px;

    max-width: 560px;

    margin-top: 14px;

}


.footer-cta-btn {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    background: var(--gold);

    color: var(--navy);

    padding: 17px 24px;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    transition: .25s;

}


.footer-cta-btn span {

    font-size: 22px;

    line-height: 1;

}


.footer-cta-btn:hover {

    background: var(--gold2);

    transform: translateY(-3px);

}


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

.footer-main {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1.25fr;

    gap: 55px;

    padding: 58px 0 50px;

}


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

.footer-brand img {

    width: 215px;

    height: auto;

    filter: brightness(0) invert(1);

    margin-bottom: 20px;

}


.footer-brand p {

    max-width: 330px;

    color: #aebdca;

    font-size: 14px;

    line-height: 1.8;

}


.footer-location {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 24px;

    color: #d5dee6;

    font-size: 13px;

}


.location-icon {

    color: var(--gold2);

    font-size: 17px;

}


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

.footer-socials {

    display: flex;

    gap: 10px;

    margin-top: 25px;

}


.footer-socials a {

    width: 40px;

    height: 40px;

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

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: #fff;

    font-size: 17px;

    font-weight: 700;

    transition: .25s;

}


.footer-socials a:hover {

    background: var(--gold);

    border-color: var(--gold);

    color: var(--navy);

    transform: translateY(-3px);

}


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

.footer-column h4 {

    color: #fff;

    font-size: 15px;

    margin-bottom: 20px;

    position: relative;

    padding-bottom: 12px;

}


.footer-column h4:after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 32px;

    height: 2px;

    background: var(--gold);

}


.footer-column a {

    display: block;

    color: #aebdca;

    font-size: 14px;

    padding: 7px 0;

    transition: .2s;

}


.footer-column a:hover {

    color: #fff;

    padding-left: 5px;

}


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

.footer-contact a {

    display: flex;

    align-items: center;

    gap: 11px;

}


.contact-icon {

    color: var(--gold2);

    width: 22px;

    font-size: 17px;

}


.footer-hours {

    margin-top: 20px;

    padding: 15px 18px;

    border-left: 3px solid var(--gold);

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

}


.footer-hours strong {

    display: block;

    color: #fff;

    font-size: 14px;

}


.footer-hours span {

    display: block;

    color: #aebdca;

    font-size: 12px;

    margin-top: 3px;

}


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

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 22px;

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

    color: #7f92a4;

    font-size: 12px;

}


.footer-tagline {

    color: #aebdca;

    letter-spacing: .5px;

}


.footer-tagline strong {

    color: var(--gold2);

}


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

@media (max-width: 950px) {

    .footer-main {

        grid-template-columns: 1.4fr 1fr 1fr;

        gap: 40px;

    }

    .footer-contact {

        grid-column: span 3;

    }

}


@media (max-width: 620px) {

    .footer-cta {

        display: block;

        padding: 45px 0;

    }


    .footer-cta h2 {

        font-size: 32px;

    }


    .footer-cta-btn {

        margin-top: 25px;

    }


    .footer-main {

        grid-template-columns: 1fr;

        gap: 35px;

        padding: 45px 0;

    }


    .footer-contact {

        grid-column: auto;

    }


    .footer-brand img {

        width: 190px;

    }


    .footer-bottom {

        display: block;

        line-height: 1.8;

    }


    .footer-tagline {

        display: block;

        margin-top: 10px;

    }

}







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

.gallery-section {
    background: #ffffff;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 45px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 4 / 3;
    background: #f1f1f1;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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


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

@media (max-width: 1000px) {

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 700px) {

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

}


@media (max-width: 450px) {

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

}





/* =========================
   GALLERY
========================= */

.gallery-section {
    background: #ffffff;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 45px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 4 / 3;
    background: #f1f1f1;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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


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

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

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

    padding: 50px;
}

.gallery-lightbox.active {
    display: flex;
}


/* Full Image */

.gallery-lightbox img {
    max-width: 90vw;
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 6px;

    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}


/* Close Button */

.lightbox-close {
    position: absolute;

    top: 20px;
    right: 30px;

    width: 50px;
    height: 50px;

    border: none;
    background: transparent;

    color: #ffffff;

    font-size: 42px;
    line-height: 1;

    cursor: pointer;

    z-index: 10;
}


/* Previous / Next Buttons */

.lightbox-prev,
.lightbox-next {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 55px;
    height: 55px;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    color: #ffffff;

    font-size: 28px;

    cursor: pointer;

    transition: all 0.3s ease;

    z-index: 10;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--gold);
    color: var(--navy);
}

.lightbox-prev {
    left: 25px;
}

.lightbox-next {
    right: 25px;
}


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

@media (max-width: 1000px) {

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 700px) {

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .gallery-lightbox {
        padding: 20px;
    }

    .gallery-lightbox img {
        max-width: 95vw;
        max-height: 80vh;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 45px;
        height: 45px;
        font-size: 22px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

}


@media (max-width: 450px) {

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

}