/* ==========================================================
   LOADERS & MOVERS
   Main Stylesheet
   Version 2.0
========================================================== */


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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter",sans-serif;
    font-size:16px;
    line-height:1.7;
    background:#F6F7FB;
    color:#16283A;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
select,
textarea{
    font:inherit;
}

ul{
    list-style:none;
}


/* ==========================================================
   DESIGN TOKENS
========================================================== */

:root{

    /* Backgrounds */

    --bg:#F6F7FB;
    --white:#FFFFFF;

    /* Brand */

    --navy:#16283A;

    --green:#2FBF0C;
    --green-light:#6EEA3B;

    --blue:#3B82F6;
    --blue-dark:#2563EB;

    --teal:#16A34A;

    --text:#16283A;
    --muted:#64748B;

    --border:#E6EAF0;

    --radius-sm:10px;
    --radius-md:18px;
    --radius-lg:28px;

    --shadow-sm:
        0 8px 20px rgba(15,23,42,.08);

    --shadow:
        0 18px 45px rgba(15,23,42,.12);

    --transition:.30s ease;

}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5{
    font-family:"Poppins",sans-serif;
    font-weight:800;
    color:var(--navy);
    line-height:1.2;
}

p{
    color:var(--muted);
}

.section-eyebrow{

    display:inline-block;

    color:var(--teal);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:13px;

    font-weight:700;

    margin-bottom:15px;

}

.section-head{

    max-width:760px;

    margin:auto;

    text-align:center;

}

.section-head h2{

    font-size:clamp(34px,4vw,48px);

    margin-bottom:15px;

}

.section-head p{

    font-size:17px;

    line-height:1.8;

}


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

.wrap{

    width:min(1180px,92%);

    margin:auto;

}

section{

    padding:90px 0;

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 28px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-weight:700;

    transition:var(--transition);

}

.btn:hover{

    transform:translateY(-3px);

}

.btn-green{

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

    color:#fff;

    box-shadow:0 14px 28px rgba(47,191,12,.28);

}

.btn-blue{

    background:linear-gradient(
        135deg,
        var(--blue),
        var(--blue-dark)
    );

    color:#fff;

    box-shadow:0 14px 28px rgba(37,99,235,.25);

}

.btn-outline{

    background:#fff;

    border:2px solid var(--border);

    color:var(--navy);

}
/* ==========================================================
   HEADER
========================================================== */

header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

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

    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(0,0,0,.05);

}

.header-inner{

    width:min(1180px,92%);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    min-height:95px;

}


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

.logo{

    display:flex;

    align-items:center;

    gap:16px;

    flex-shrink:0;

}

.logo img{

    width:100px;

    height:100px;

    object-fit:contain;

}

.logo-text{

    display:flex;

    flex-direction:column;

    line-height:1.1;

}

.logo-text strong{

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

    font-size:22px;

    font-weight:800;

    color:var(--navy);

}

.logo-text span{

    margin-top:6px;

    color:var(--teal);

    font-size:12px;

    letter-spacing:.18em;

    text-transform:uppercase;

    font-weight:700;

}


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

nav{

    display:flex;

    align-items:center;

    gap:34px;

}

nav a{

    position:relative;

    font-weight:600;

    color:var(--navy);

    transition:var(--transition);

}

nav a:hover{

    color:var(--green);

}


/* underline animation */

nav a:not(.nav-cta)::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:var(--green);

    border-radius:10px;

    transition:.30s;

}

nav a:not(.nav-cta):hover::after{

    width:100%;

}


/* ==========================================================
   NAV CTA BUTTON
========================================================== */

.nav-cta{

    padding:13px 26px;

    border-radius:999px;

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

    color:#fff;

    font-weight:700;

    box-shadow:0 14px 28px rgba(47,191,12,.25);

    transition:var(--transition);

}

.nav-cta:hover{

    transform:translateY(-3px);

    color:#fff;

}


/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */

.nav-toggle{

    display:none;

    width:46px;

    height:46px;

    border:none;

    background:#fff;

    border-radius:12px;

    cursor:pointer;

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

}

.nav-toggle span{

    display:block;

    width:24px;

    height:2px;

    background:var(--navy);

    margin:5px auto;

    transition:.30s;

}


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

@media(max-width:980px){

    .header-inner{

        min-height:82px;

    }

    .logo img{

        width:65px;

        height:65px;

    }

    .nav-toggle{

        display:block;

    }

    nav{

        position:fixed;

        top:82px;

        left:20px;

        right:20px;

        background:#fff;

        border-radius:24px;

        padding:25px;

        display:none;

        flex-direction:column;

        gap:20px;

        box-shadow:var(--shadow);

    }

    nav.open{

        display:flex;

    }

    .nav-cta{

        width:100%;

        justify-content:center;

    }

}
/* ==========================================================
   GLOBAL SECTION HEADERS
========================================================== */

.section-head{

    text-align:center;

    max-width:760px;

    margin:0 auto 60px;

}

.section-head h1{
    font-family:"Poppins",sans-serif;
    font-size:40px;
    font-weight:800;
    line-height:1.2;
    color:var(--navy);
    margin-bottom:20px;
}

.section-head h2{

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

    font-size:clamp(34px,4vw,48px);

    font-weight:800;

    line-height:1.2;

    color:var(--navy);

    margin-bottom:18px;

}

.section-head p{

    max-width:760px;

    margin:auto;

    font-size:18px;

    color:var(--muted);

    line-height:1.8;

}



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

.hero{

    position:relative;

    overflow:hidden;

    padding:90px 0 70px;

    background:linear-gradient(180deg,#ffffff,#F6F7FB);

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(47,191,12,.08),
        transparent 40%);

    pointer-events:none;

}

.hero .wrap{

    display:grid;

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

    align-items:center;

    gap:70px;

}

.hero-copy{

    position:relative;

    z-index:2;

}

.hero-copy h1 {
    font-family:"Poppins",sans-serif;
    font-size:40px;
    line-height:1.2;
    margin-bottom:25px;
}

.hero-copy p{

    font-size:18px;

    line-height:1.9;

    max-width:560px;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-top:30px;

}

.hero-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1.2 / 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-lg);
}

.hero-card{

    position:absolute;

    left:25px;

    bottom:-30px;

    background:#fff;

    border-radius:20px;

    padding:24px;

    width:290px;

    box-shadow:var(--shadow);

}

.hero-card h3{

    font-size:20px;

    margin-bottom:8px;

}

.hero-card p{

    font-size:15px;

    line-height:1.7;

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

.lightbox-overlay{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    padding:30px;
    background:rgba(16,32,47,.92);
    z-index:9999;
}

.lightbox-overlay.open{
    display:flex;
}

.lightbox-content{
    position:relative;
    max-width:90vw;
    max-height:88vh;
    text-align:center;
}

.lightbox-content img{
    max-width:90vw;
    max-height:80vh;
    width:auto;
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.lightbox-caption{
    margin-top:18px;
    color:#fff;
    font-size:14px;
    letter-spacing:.04em;
}

.lightbox-close{
    position:absolute;
    top:-46px;
    right:-6px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:var(--navy);
    font-size:24px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.lightbox-close:hover{
    transform:rotate(90deg);
}
/* ==========================================================
   MOVING GUIDE TIPS
========================================================== */

.prep-tip-list{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:22px;
}

.prep-tip{
    display:flex;
    gap:10px;
    align-items:flex-start;
    line-height:1.8;
}

.prep-tip::before{
    content:"✓";
    color:var(--green);
    font-weight:700;
    flex-shrink:0;
}

.prep-tip-label{
    color:var(--navy);
    font-weight:700;
}

.prep-tip-text{
    color:var(--muted);
}

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

.grid-2{

    display:grid;

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

    gap:30px;

}

.grid-3{

    display:grid;

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

    gap:30px;

}

.grid-4{

    display:grid;

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

    gap:25px;

}



/* ==========================================================
   GENERIC CARDS
========================================================== */

.card{

    background:#fff;

    border-radius:var(--radius-md);

    padding:35px;

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

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.card-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    background:rgba(47,191,12,.10);

    color:var(--green);

    font-size:30px;

}

.card h3{

    font-size:24px;

    margin-bottom:12px;

}

.card p{

    line-height:1.8;

}



/* ==========================================================
   CHIPS
========================================================== */

.chips{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;

}

.chip{

    padding:12px 18px;

    border-radius:999px;

    background:#fff;

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

    font-weight:600;

    color:var(--navy);

}



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

@media(max-width:980px){

    .hero .wrap{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-copy p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-card{

        position:relative;

        left:0;

        bottom:0;

        margin:25px auto 0;

        width:100%;

        max-width:360px;

    }

    .grid-4{

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

    }

    .grid-3{

        grid-template-columns:1fr;

    }

    .grid-2{

        grid-template-columns:1fr;

    }

}

@media(max-width:640px){

    .grid-4{

        grid-template-columns:1fr;

    }

    .hero{

        padding:70px 0 50px;

    }

    .hero-copy h1{

        font-size:42px;

    }

}
/* ==========================================================
   HOME PAGE
========================================================== */


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

.about{

    background:#fff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:30px;

    box-shadow:var(--shadow);

}

.about-content h2{

    margin-bottom:20px;

}

.about-content p{

    font-size:17px;

    line-height:1.9;

    margin-bottom:20px;

}

.about-highlights{

    display:grid;

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

    gap:18px;

    margin:35px 0;

}

.highlight{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px;

    background:#F8FAFC;

    border-radius:18px;

}

.highlight-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(47,191,12,.12);

    color:var(--green);

    font-size:22px;

}



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

.services{

    background:var(--bg);

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:#fff;

    padding:40px;

    border-radius:24px;

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

    transition:var(--transition);

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.service-icon{

    width:74px;

    height:74px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(47,191,12,.10);

    color:var(--green);

    font-size:32px;

    margin-bottom:24px;

}

.service-card h3{

    font-size:24px;

    margin-bottom:12px;

}

.service-card p{

    line-height:1.8;

    margin-bottom:22px;

}

.service-card a{

    color:var(--green);

    font-weight:700;

}



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

.why{

    background:linear-gradient(
        135deg,
        #10202F,
        #1D3347
    );

    color:#fff;

}

.why .section-head h2{

    color:#fff;

}

.why .section-head p{

    color:#D4DEE6;

}

.why-grid{

    display:grid;

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

    gap:28px;

}

.why-card{

    padding:35px;

    border-radius:22px;

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

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

    backdrop-filter:blur(8px);

    transition:.30s;

}

.why-card:hover{

    transform:translateY(-8px);

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

}

.why-number{

    width:52px;

    height:52px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--green);

    color:#fff;

    font-weight:700;

    margin-bottom:20px;

}

.why-card h3{

    color:#fff;

    margin-bottom:12px;

}

.why-card p{

    color:#D4DEE6;

}


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

.home-cta{

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

    color:#fff;

    border-radius:30px;

}

.home-cta .wrap{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

}

.home-cta h2{

    color:#fff;

    margin-bottom:15px;

}

.home-cta p{

    color:#fff;

    opacity:.92;

}

.home-cta .btn{

    background:#fff;

    color:var(--green);

}



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

@media(max-width:980px){

    .about-grid{

        grid-template-columns:1fr;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

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

    }

    .home-cta .wrap{

        flex-direction:column;

        text-align:center;

    }

}

@media(max-width:640px){

    .about-highlights{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   CONTACT PAGE
========================================================== */


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

.contact-hero{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #10202F,
        #1C3548
    );

    color:#fff;

    padding:110px 0;

}

.contact-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(47,191,12,.15),
        transparent 45%);

    pointer-events:none;

}

.contact-hero .wrap{

    position:relative;

    z-index:2;

    max-width:900px;

    text-align:center;

}

.contact-hero h1{
    color:#fff;
    font-size:30px;
    line-height:1.2;
    margin-bottom:20px;
}

.contact-hero p{

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

    font-size:19px;

    line-height:1.9;

    max-width:760px;

    margin:auto;

}



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

.contact-options{

    background:#fff;

}

.contact-options-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.contact-option-card{

    background:#fff;

    border-radius:28px;

    padding:45px;

    text-align:center;

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

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

    transition:var(--transition);

}

.contact-option-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.contact-option-icon{

    width:86px;

    height:86px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    background:rgba(47,191,12,.10);

    color:var(--green);

    font-size:38px;

}

.contact-option-card h3{

    font-size:28px;

    margin-bottom:12px;

}

.contact-option-card p{

    margin-bottom:30px;

    line-height:1.8;

}

.contact-option-card .contact-value{

    display:block;

    font-size:22px;

    font-weight:700;

    color:var(--navy);

    margin-bottom:25px;

}

.contact-option-card .btn{

    width:100%;

    justify-content:center;

}



/* ==========================================================
   QUICK INFO BAR
========================================================== */

.contact-info-strip{

    margin-top:70px;

    display:grid;

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

    gap:25px;

}

.info-box{

    background:#F8FAFC;

    border-radius:20px;

    padding:25px;

    text-align:center;

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

}

.info-box h4{

    margin-bottom:10px;

    font-size:18px;

}

.info-box p{

    margin:0;

}



/* ==========================================================
   CONTACT PAGE RESPONSIVE
========================================================== */

@media(max-width:900px){

    .contact-options-grid{

        grid-template-columns:1fr;

    }

    .contact-info-strip{

        grid-template-columns:1fr;

    }

    .contact-option-card{

        padding:35px;

    }

}

@media(max-width:640px){

    .contact-hero{

        padding:80px 0;

    }

    .contact-hero h1{

        font-size:30px;

    }

    .contact-option-icon{

        width:72px;

        height:72px;

        font-size:30px;

    }

    .contact-option-card h3{

        font-size:24px;

    }

}
/* ==========================================================
   QUOTE REQUEST
========================================================== */

.quote-section{

    background:#F6F7FB;

}

.quote-wrapper{

    max-width:950px;

    margin:0 auto;

}

.quote-content h2{

    margin-bottom:20px;

}

.quote-content p{

    font-size:17px;

    line-height:1.9;

    margin-bottom:30px;

}

.quote-features{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.quote-feature{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px;

    background:#fff;

    border-radius:18px;

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

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

}

.quote-feature-icon{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(47,191,12,.10);

    color:var(--green);

    font-size:22px;

    flex-shrink:0;

}

.quote-feature h4{

    margin-bottom:6px;

    font-size:18px;

}

.quote-feature p{

    margin:0;

    font-size:15px;

    line-height:1.7;

}



/* ==========================================================
   QUOTE FORM
========================================================== */

.quote-form{

    background:#fff;

    padding:40px;

    border-radius:28px;

    box-shadow:var(--shadow);

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

}

.quote-form h3{

    margin-bottom:25px;

    text-align:center;

    font-size:28px;

}

.form-row{

    display:grid;

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

    gap:18px;

    margin-bottom:18px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    font-weight:600;

    color:var(--navy);

    margin-bottom:8px;

}

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    padding:15px 18px;

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

    border-radius:14px;

    background:#fff;

    transition:var(--transition);

}

.form-group textarea{

    min-height:150px;

    resize:vertical;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    outline:none;

    border-color:var(--green);

    box-shadow:0 0 0 4px rgba(47,191,12,.10);

}

.quote-submit{

    width:100%;

    padding:18px;

    margin-top:30px;

    border:none;

    border-radius:999px;

    background:var(--green);

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.quote-submit:hover{

    background:#28a70a;

    transform:translateY(-2px);

}
.quote-heading-small{

    margin:35px 0 15px;

    font-size:20px;

    color:var(--navy);

}
.pill-group{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:25px;

}
.pill{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:12px 18px;

    border:2px solid var(--border);

    border-radius:50px;

    cursor:pointer;

    background:#fff;

    transition:.3s;

    font-weight:600;

}

.pill:hover{

    border-color:var(--green);

}

.pill input{

    display:none;

}

.pill.active{

    background:var(--green);

    color:#fff;

    border-color:var(--green);

}
.quote-header{

    text-align:center;

    max-width:700px;

    margin:0 auto 50px;

}
.quote-form .form-group{

    margin-bottom:22px;

}
/* ==========================================================
   TRUST BADGES
========================================================== */

.quote-badges{

    display:grid;

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

    gap:18px;

    margin-top:35px;

}

.quote-badge{

    background:#fff;

    border-radius:18px;

    padding:20px;

    text-align:center;

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

}

.quote-badge strong{

    display:block;

    color:var(--green);

    font-size:28px;

    margin-bottom:8px;

}

.quote-badge span{

    color:var(--muted);

    font-size:15px;

}

@media (max-width:900px){

    .form-row{

        grid-template-columns:1fr;

    }

    .quote-form{

        padding:30px;

    }

}

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

@media (max-width:980px){

    .quote-wrapper{
        grid-template-columns:1fr;
    }

    .quote-form{
        background:#fff;
        padding:50px;
        border-radius:24px;
        max-width:950px;
        margin:auto;
    }

}

@media(max-width:768px){



    .quote-badges{

        grid-template-columns:1fr;

    }

}

@media(max-width:480px){

    .quote-form{

        padding:25px;

    }

    .quote-form h3{

        font-size:24px;

    }

}

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

.why-contact{

    background:#fff;

}

.why-contact-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.why-contact-card{

    background:#fff;

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

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

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

    transition:var(--transition);

}

.why-contact-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.why-contact-icon{

    width:82px;

    height:82px;

    margin:0 auto 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:rgba(47,191,12,.10);

    color:var(--green);

    font-size:34px;

}

.why-contact-card h3{

    margin-bottom:14px;

    font-size:24px;

}

.why-contact-card p{

    line-height:1.8;

}



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

.faq-section{

    background:var(--bg);

}

.faq-list{

    max-width:900px;

    margin:60px auto 0;

}

.faq-item{

    background:#fff;

    border-radius:20px;

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

    margin-bottom:20px;

    overflow:hidden;

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

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 30px;

    cursor:pointer;

    background:#fff;

    border:none;

    text-align:left;

    font-size:18px;

    font-weight:700;

    color:var(--navy);

}

.faq-question:hover{

    background:#F8FAFC;

}

.faq-question i{

    color:var(--green);

    transition:.30s;

}

.faq-item.active .faq-question i{

    transform:rotate(180deg);

}

.faq-answer{

    display:none;

    padding:0 30px 30px;

}

.faq-item.active .faq-answer{

    display:block;

}

.faq-answer p{

    line-height:1.9;

}



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

.contact-final-cta{

    position:relative;

    overflow:hidden;

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

    color:#fff;

}

.contact-final-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(255,255,255,.15),
        transparent 45%);

    pointer-events:none;

}

.contact-final-cta .wrap{

    position:relative;

    z-index:2;

    max-width:900px;

    text-align:center;

}

.contact-final-cta h2{

    color:#fff;

    font-size:clamp(36px,5vw,54px);

    margin-bottom:20px;

}

.contact-final-cta p{

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

    font-size:18px;

    line-height:1.9;

    max-width:720px;

    margin:0 auto 35px;

}

.contact-final-cta-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.contact-final-cta .btn{

    min-width:220px;

}

.contact-final-cta .btn-outline{

    background:#fff;

    color:var(--green);

    border:none;

}



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

.contact-option-card,
.quote-form,
.quote-feature,
.why-contact-card,
.faq-item{

    transition:all .30s ease;

}

.contact-option-card:hover,
.quote-feature:hover,
.why-contact-card:hover{

    transform:translateY(-8px);

}



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

@media(max-width:980px){

    .why-contact-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .faq-question{

        font-size:16px;

        padding:20px;

    }

    .faq-answer{

        padding:0 20px 20px;

    }

    .contact-final-cta h2{

        font-size:34px;

    }

    .contact-final-cta p{

        font-size:17px;

    }

    .contact-final-cta .btn{

        width:100%;

    }

}
/* ==========================================================
   INTERNAL PAGE HERO
========================================================== */

.page-hero{

    position:relative;

    overflow:hidden;

    padding:90px 0;

    background:linear-gradient(135deg,#10202F,#1C3548);

    color:#fff;

    text-align:center;

}

.page-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(circle at top right,
        rgba(47,191,12,.15),
        transparent 45%);

}

.page-hero .wrap{

    position:relative;

    z-index:2;

}

.page-hero h1{
    color:#fff;
    font-size:40px;
    line-height:1.2;
    margin-bottom:18px;
}

.page-hero p{

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

    max-width:760px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

}


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

.about-story{

    background:#fff;

}

.about-story-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-story img{

    width:100%;

    border-radius:30px;

    box-shadow:var(--shadow);

}

.values-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.value-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    text-align:center;

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

    transition:var(--transition);

}

.value-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}


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

.services-list{

    background:var(--bg);

}

.service-row{

    display:grid;

    grid-template-columns:120px 1fr;

    gap:30px;

    align-items:center;

    background:#fff;

    padding:35px;

    border-radius:24px;

    margin-bottom:25px;

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

}

.service-row-icon{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:rgba(47,191,12,.10);

    color:var(--green);

    font-size:40px;

}

.service-row h3{

    margin-bottom:12px;

}

.service-row p{

    line-height:1.8;

}


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

.gallery-section{

    background:#fff;

}

.gallery-grid{

    display:grid;

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

    gap:20px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

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

}

.gallery-item img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.45s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:20px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.65)
    );

    opacity:0;

    transition:.35s;

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay span{

    color:#fff;

    font-weight:700;

}


/* ==========================================================
   MOVING GUIDE
========================================================== */

.guide-section{

    background:var(--bg);

}

.guide-grid{

    display:grid;

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

    gap:30px;

}

.guide-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

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

    transition:var(--transition);

}

.guide-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.guide-number{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:var(--green);

    color:#fff;

    font-weight:700;

    margin-bottom:20px;

}

.guide-card h3{

    margin-bottom:12px;

}


/* ==========================================================
   TESTIMONIALS (Carousel Version)
========================================================== */

.testimonials {
    background: #fff;
    padding: 80px 0;
    position: relative; /* Needed to position arrows */
}

#testimonial-slider {
    width: 90%; /* Leaves space for arrows inside the container */
    margin: 0 auto;
}

/* Position arrows INSIDE the container to prevent them being cut off */
.slick-prev, .slick-next {
    width: 45px !important;
    height: 45px !important;
    background: var(--teal) !important;
    border-radius: 50% !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: 0.3s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.slick-prev { left: 0px !important; }
.slick-next { right: 0px !important; }

.slick-prev:hover, .slick-next:hover {
    background: var(--green) !important;
}

.slick-prev:before, .slick-next:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    opacity: 1 !important;
}

.slick-prev:before { content: "" !important; }
.slick-next:before { content: "" !important; }

.testimonial-card {
    background: #fff;
    border-radius: 24px;
    padding: 30px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    margin: 10px 15px; /* Adds vertical breathing room */
    height: 350px !important;
    display: flex !important;
    flex-direction: column;
    transition: all 0.4s ease;
    cursor: pointer;
    overflow: hidden;
}

.testimonial-card.active {
    height: auto !important; 
    z-index: 999;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-color: var(--teal);
    overflow: visible;
}

.testimonial-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: var(--teal);
}

.stars {
    color: #F4B400;
    margin-bottom: 18px;
    font-size: 18px;
}

.testimonial-message {
    font-style: italic;
    margin-bottom: 20px;
    flex-grow: 1;
    line-height: 1.6;
}

.testimonial-author strong {
    color: var(--navy);
    display: block;
}

.testimonial-author span {
    font-size: 0.9em;
    color: #777;
}

.slick-dots li button:before {
    font-size: 12px;
    color: var(--teal);
}

@media (max-width: 768px) {
    .slick-prev, .slick-next {
        display: none !important;
    }
    #testimonial-slider {
        width: 100%; /* Full width on mobile since arrows are hidden */
    }
}
/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:980px){
    .about-story-grid, .values-grid, .guide-grid, .testimonial-grid {
        grid-template-columns:1fr;
    }
    .gallery-grid {
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .service-row {
        grid-template-columns:1fr;
        text-align:center;
    }
    .service-row-icon {
        margin:auto;
    }

    /* MENU FIX - Moved outside the 640px block */
    #navMenu {
        display: none; 
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #10202F;
        flex-direction: column;
        padding: 20px;
        text-align: center;
        z-index: 1000;
    }

    #navMenu.active {
        display: flex !important;
    }
}

@media(max-width:640px){
    .gallery-grid {
        grid-template-columns:1fr;
    }
}
/* ==========================================================
   FOOTER
========================================================== */

footer{
    background:#10202F;
    color:#D7E2EC;
    margin-top:0;
}

footer a{
    color:#D7E2EC;
    text-decoration:none;
    transition:.3s ease;
}

footer a:hover{
    color:#32C85A;
}

.footer-top{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;
    padding:50px 0 35px;
}

.footer-brand .logo{
    display:inline-block;
    margin-bottom:20px;
}

.footer-brand .logo-text{
    color:#fff;
    font-size:24px;
    font-weight:700;
    letter-spacing:1px;
}

.footer-brand p{
    color:#AFC0CB;
    line-height:1.8;
    margin-bottom:25px;
    max-width:340px;
}

.footer-social{
    display:flex;
    gap:15px;
}

.footer-social a{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    transition:.3s;
}

.footer-social a:hover{
    background:#32C85A;
    color:#fff;
    transform:translateY(-3px);
}

.footer-column h3{
    color:#fff;
    font-size:18px;
    margin-bottom:18px;
}

.footer-column ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-column li {
    margin-bottom: 12px;
    color: #AFC0CB;
    line-height: 1.7;
    display: flex;         /* Added to align children */
    align-items: flex-start; /* Keeps icons top-aligned even if text wraps */
}

.footer-column li i {
    width: 25px;           /* Slightly increased width for better spacing */
    color: #32C85A;
    margin-right: 8px;
    flex-shrink: 0;        /* Prevents the icon from squishing */
    margin-top: 5px;       /* Fine-tunes vertical position to match text */
}
.footer-column a{
    color:#AFC0CB;
}

.footer-column a:hover{
    color:#32C85A;
    padding-left:5px;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    padding:18px 0;
    color:#8FA0A8;
    font-size:14px;
}

/* ==========================================
   Responsive
========================================== */

@media (max-width:992px){

    .footer-top{
        grid-template-columns:1fr 1fr;
        gap:35px;
    }

}

@media (max-width:768px){

    .footer-top{
        grid-template-columns:1fr;
        text-align:center;
        padding:40px 0 25px;
    }

    .footer-brand p{
        margin-left:auto;
        margin-right:auto;
    }

    .footer-social{
        justify-content:center;
    }

    .footer-column li i{
        width:auto;
        margin-right:6px;
    }
    #navMenu a {
        color: #ffffff !important; /* Force white text */
        font-size: 18px;          /* Ensure it's readable */
        padding: 15px;
        text-decoration: none;
    }

    #navMenu a:hover {
        color: #32C85A !important; /* Green on hover */
    }
}



/* ==========================================================
   BACK TO TOP
========================================================== */

.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:54px;

    height:54px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--green);

    color:#fff;

    text-decoration:none;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:var(--transition);

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    transform:translateY(-4px);

}


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

a{

    transition:var(--transition);

}


/* ==========================================================
   FORM HELPERS
========================================================== */

input,
select,
textarea{

    border-radius:14px;

}

input::placeholder,
textarea::placeholder{

    color:#94A3B8;

}


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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{

    outline:3px solid rgba(47,191,12,.35);

    outline-offset:3px;

}


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

.fade-up{

    animation:fadeUp .7s ease both;

}

.fade-in{

    animation:fadeIn .7s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


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

img{

    transition:transform .35s ease;

}

.zoom-hover{

    overflow:hidden;

    border-radius:inherit;

}

.zoom-hover img:hover{

    transform:scale(1.05);

}


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

.pt-0{padding-top:0;}
.pb-0{padding-bottom:0;}

.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}

.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

.text-center{text-align:center;}

.hidden{
    display:none;
}


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

@media(max-width:1100px){

    .footer-grid{

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

    }

}

@media(max-width:768px){

    section{

        padding:70px 0;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .footer-top{

        text-align:center;

    }

    .footer-contact{

        align-items:center;

    }

}

@media(max-width:480px){

    body{

        font-size:15px;

    }

    .btn{

        width:100%;

    }

    h1{

        font-size:38px;

    }

    h2{

        font-size:30px;

    }

}


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

@media print{

    header,
    footer,
    .back-to-top,
    .btn{

        display:none !important;

    }

    body{

        background:#fff;

        color:#000;

    }

    section{

        padding:20px 0;

    }

}
/* ===================================
   HOW IT WORKS
=================================== */

.steps{
    padding:90px 0;
    background:#f8fafc;
}

.steps-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:30px;
    margin-top:50px;
}

.step-card{
    background:#fff;
    padding:35px;
    border-radius:16px;
    text-align:center;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition:.3s;
}

.step-card:hover{
    transform:translateY(-8px);
}

.step-number{
    width:70px;
    height:70px;
    margin:0 auto 20px;
    border-radius:50%;
    background:#0d6efd;
    color:#fff;
    font-size:28px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.step-card h3{
    margin-bottom:15px;
}

.step-card p{
    color:#666;
    line-height:1.7;
}
/*===================================
TESTIMONIALS
===================================*/

.testimonials{
    padding:90px 0;
    background:#ffffff;
}

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
    margin-top:50px;
}

.testimonial-card{
    background:#fff;
    padding:35px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
    border-top:5px solid #16a34a;
}

.testimonial-card:hover{
    transform:translateY(-8px);
}

.stars{
    color:#fbbf24;
    font-size:18px;
    margin-bottom:20px;
}

.testimonial-message{
    font-size:16px;
    line-height:1.8;
    color:#555;
    margin-bottom:25px;
    font-style:italic;
}

.testimonial-author strong{
    display:block;
    color:#222;
    font-size:18px;
}

.testimonial-author span{
    color:#777;
    font-size:14px;
}
/*===================================
CALL TO ACTION
===================================*/

.cta-section{
    padding:90px 20px;
    background:linear-gradient(135deg,#0f766e,#16a34a);
}

.cta-box{
    max-width:900px;
    margin:auto;
    text-align:center;
    color:#fff;
}

.cta-box h2{
    font-size:42px;
    margin-bottom:20px;
    color:#fff;
}

.cta-box p{
    max-width:700px;
    margin:0 auto 35px;
    line-height:1.8;
    font-size:18px;
    color:rgba(255,255,255,.95);
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

@media(max-width:768px){

    .cta-box h2{
        font-size:32px;
    }

    .cta-buttons{
        flex-direction:column;
        align-items:center;
    }

}
/* ==========================================================
   GALLERY PAGE
========================================================== */

/* Hero */

.gallery-hero{
    background:linear-gradient(135deg,#10202F,#1B3B53);
    color:#fff;
    text-align:center;
    padding:90px 20px;
}

.gallery-hero h1{
    font-size:clamp(2.2rem,5vw,3.8rem);
    margin:20px 0;
    color:#fff;
}

.gallery-hero p{
    max-width:760px;
    margin:0 auto;
    color:#D8E5EC;
    font-size:1.1rem;
    line-height:1.8;
}

/* ==========================================================
   GALLERY FEATURED PROJECT
========================================================== */

.gallery-featured {
    padding: 60px 0;
}


.gallery-featured .featured-card {

    display: grid;

    grid-template-columns: 53% 47%;

    width: 100%;

    min-height: 345px;

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 15px 40px rgba(20, 35, 55, 0.08);

}


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

.gallery-featured .featured-image {

    width: 100%;

    height: 345px;

    overflow: hidden;

}


.gallery-featured .featured-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


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

.gallery-featured .featured-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 50px 70px;

    background: #fff;

}


.gallery-featured .featured-content .section-eyebrow {

    margin-bottom: 20px;

}


.gallery-featured .featured-content p {

    margin: 0;

    font-size: 16px;

    line-height: 1.8;

    color: #17233c;

}


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

@media (max-width: 768px) {

    .gallery-featured .featured-card {

        grid-template-columns: 1fr;

        min-height: auto;

    }


    .gallery-featured .featured-image {

        height: 280px;

    }


    .gallery-featured .featured-content {

        padding: 35px 25px;

    }

}

/* ==========================================
   Intro
========================================== */

.gallery-intro{
    padding:30px 0 60px;
}

.gallery-intro p{
    max-width:900px;
    margin:20px auto;
    text-align:center;
    line-height:1.9;
    color:#66737C;
}

/* ==========================================
   Gallery Grid
========================================== */

.gallery-section{
    padding:20px 0 90px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.gallery-card{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    cursor:pointer;
    background:#fff;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.gallery-card:hover{
    transform:translateY(-8px);
}

.gallery-image{
    overflow:hidden;
}

.gallery-image img{
    width:100%;
    height:320px;
    display:block;
    object-fit:cover;
    transition:.5s;
}

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

.gallery-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(16,32,47,.95),
        rgba(16,32,47,.15));
    display:flex;
    align-items:flex-end;
    padding:30px;
    opacity:0;
    transition:.35s;
}

.gallery-card:hover .gallery-overlay{
    opacity:1;
}

.gallery-overlay-content h3{
    color:#fff;
    margin:10px 0;
}

.gallery-overlay-content p{
    color:#D6E3EA;
    line-height:1.6;
    margin:0;
}

.gallery-category{
    display:inline-block;
    background:#32C85A;
    color:#fff;
    padding:6px 14px;
    border-radius:30px;
    font-size:.8rem;
    font-weight:600;
}

/* ==========================================
   Lightbox
========================================== */

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:99999;
}

.lightbox.open{
    opacity:1;
    visibility:visible;
}

.lightbox-body{
    max-width:1100px;
    width:92%;
    text-align:center;
}

.lightbox img{
    width:100%;
    max-height:75vh;
    object-fit:contain;
    border-radius:15px;
}

.lightbox-info{
    margin-top:25px;
}

.lightbox-info h3{
    color:#fff;
    margin-bottom:10px;
}

.lightbox-info p{
    color:#D4DDE4;
}

#lightboxCounter{
    display:block;
    margin-top:20px;
    color:#32C85A;
    font-weight:700;
}

.lightbox-close{
    position:absolute;
    top:30px;
    right:35px;
    font-size:42px;
    color:#fff;
    border:none;
    background:none;
    cursor:pointer;
}

.lightbox-prev,
.lightbox-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:#32C85A;
    color:#fff;
    cursor:pointer;
    font-size:20px;
    transition:.3s;
}

.lightbox-prev:hover,
.lightbox-next:hover{
    transform:translateY(-50%) scale(1.08);
}

.lightbox-prev{
    left:35px;
}

.lightbox-next{
    right:35px;
}

/* ==========================================
   Responsive
========================================== */

@media (max-width:992px){

    .featured-card{
        grid-template-columns:1fr;
    }

    .featured-content{
        padding:35px;
    }

}

@media (max-width:768px){



    .gallery-image img{
        height:260px;
    }

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

    .lightbox-prev{
        left:15px;
    }

    .lightbox-next{
        right:15px;
    }

    .lightbox-close{
        right:20px;
        top:20px;
    }

}
/* ==========================================================
   SERVICES PAGE (NEW)
========================================================== */

/* ===============================
   INTRO
================================*/



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

.about-story-grid img{
    width:100%;
    border-radius:28px;
    box-shadow:var(--shadow);
}

.about-story-grid p{
    font-size:17px;
    line-height:1.9;
    margin-bottom:22px;
}


/* ===============================
   GUIDE
================================*/



.guide-accordion{
    max-width:980px;
    margin:70px auto 0;
}

.guide-item{
    background:#fff;
    border-radius:22px;
    border:1px solid var(--border);
    margin-bottom:24px;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:.35s;
}

.guide-item:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow);
}

.guide-question{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:28px 34px;
    border:none;
    background:#fff;
    cursor:pointer;
    text-align:left;
}

.guide-title{
    display:flex;
    align-items:center;
    gap:22px;
    font-family:"Poppins",sans-serif;
    font-size:24px;
    font-weight:700;
    color:var(--navy);
}

.guide-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        135deg,
        var(--green-light),
        var(--green)
    );
    color:#fff;
    font-weight:800;
    flex-shrink:0;
}

.guide-question i{
    color:var(--green);
    font-size:22px;
    transition:.35s;
}

.guide-answer{
    display:none;
    padding:0 34px 34px;
}

.guide-item.active .guide-answer{
    display:block;
}

.guide-item.active .guide-question i{
    transform:rotate(180deg);
}


/* ===============================
   TIPS
================================*/

.guide-tip{
    display:flex;
    gap:22px;
    padding:24px 0;
    border-top:1px solid var(--border);
}

.guide-tip:first-child{
    border-top:none;
}

.guide-tip-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(47,191,12,.10);
    color:var(--green);
    flex-shrink:0;
    font-size:18px;
}

.guide-tip-content{
    flex:1;
}

.guide-tip-content h4{
    font-size:20px;
    margin-bottom:8px;
    color:var(--navy);
}

.guide-tip-content p{
    line-height:1.85;
    color:var(--muted);
}


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

.final-advice{
    background:#fff;
}

.final-advice-card{
    max-width:900px;
    margin:auto;
    display:flex;
    gap:35px;
    align-items:flex-start;
    background:#fff;
    border-radius:28px;
    padding:50px;
    box-shadow:var(--shadow);
    border:1px solid var(--border);
}

.final-icon{
    width:88px;
    height:88px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(47,191,12,.10);
    color:var(--green);
    font-size:40px;
    flex-shrink:0;
}

.final-content h2{
    margin-bottom:18px;
}

.final-content p{
    font-size:18px;
    line-height:1.9;
}


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

.moving-cta{
    position:relative;
    overflow:hidden;
    background:linear-gradient(
        135deg,
        var(--green-light),
        var(--green)
    );
}

.moving-cta::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,.18),
            transparent 45%
        );
}

.moving-cta .wrap{
    position:relative;
    z-index:2;
}

.moving-cta-content{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.moving-cta .section-eyebrow{
    color:#fff;
}

.moving-cta h2{
    color:#fff;
    font-size:clamp(38px,5vw,58px);
    margin-bottom:20px;
}

.moving-cta p{
    color:#fff;
    opacity:.95;
    font-size:18px;
    line-height:1.9;
    max-width:760px;
    margin:0 auto 35px;
}

.moving-cta .hero-buttons{
    justify-content:center;
}

.moving-cta .btn-outline{
    background:#fff;
    border:none;
    color:var(--green);
}

.moving-cta .btn-outline:hover{
    color:var(--green);
}


/* ===============================
   ANIMATION
================================*/

.guide-item,
.final-advice-card{
    transition:.35s;
}

.final-advice-card:hover{
    transform:translateY(-8px);
}


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

@media(max-width:980px){

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

    .guide-title{
        font-size:20px;
    }

    .guide-question{
        padding:24px;
    }

    .guide-answer{
        padding:0 24px 24px;
    }

    .final-advice-card{
        flex-direction:column;
        text-align:center;
        padding:40px;
    }

    .final-icon{
        margin:auto;
    }

}

@media(max-width:640px){

    .guide-title{
        gap:15px;
        font-size:18px;
    }

    .guide-icon{
        width:46px;
        height:46px;
        font-size:16px;
    }

    .guide-tip{
        flex-direction:column;
        gap:15px;
    }

    .guide-tip-icon{
        margin-bottom:10px;
    }

    .moving-cta h2{
        font-size:34px;
    }

    .moving-cta .hero-buttons{
        flex-direction:column;
    }

    .moving-cta .btn{
        width:100%;
    }

}
/* ==========================================================
   MOVING INVENTORY CONTACT PAGE
   Added for the online inventory calculator
========================================================== */


/* ==========================================================
   INVENTORY SECTION
========================================================== */

.inventory-section {
    padding: 80px 0;
    background: #f7f8fa;
}

.inventory-section .section-head {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

.inventory-section .section-head h2 {
    margin-bottom: 15px;
}

.inventory-section .section-head p {
    max-width: 700px;
    margin: 0 auto;
}


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

.inventory-card {
    background: #ffffff;
    border-radius: 16px;
    margin-bottom: 25px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.inventory-card-header {
    padding: 25px 30px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.inventory-card-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
}

.inventory-card-header p {
    margin: 8px 0 0;
    color: #6b7280;
}

.inventory-card-body {
    padding: 30px;
}


/* ==========================================================
   FORM ROW
========================================================== */

.inventory-card .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 20px;
}

.inventory-card .form-group {
    margin-bottom: 20px;
}

.inventory-card .form-group:last-child {
    margin-bottom: 0;
}

.inventory-card label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
}

.inventory-card input[type="text"],
.inventory-card input[type="tel"],
.inventory-card input[type="date"],
.inventory-card select,
.inventory-card textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inventory-card input:focus,
.inventory-card select:focus,
.inventory-card textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.inventory-card textarea {
    resize: vertical;
    min-height: 110px;
}


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

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.pill {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid #d1d5db;
    border-radius: 50px;
    background: #ffffff;
    cursor: pointer;
    font-weight: 500 !important;
    margin: 0 !important;
    transition: all 0.2s ease;
}

.pill input {
    margin: 0;
    width: auto !important;
}

.pill:hover {
    border-color: #2563eb;
}

.pill.active {
    border-color: #2563eb;
    background: #eff6ff;
}


/* ==========================================================
   INVENTORY SUBMIT
========================================================== */

.inventory-submit {
    margin: 30px 0 0;
    padding: 40px 30px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.inventory-submit-content {
    max-width: 700px;
    margin: 0 auto;
}

.inventory-submit h3 {
    margin: 0 0 10px;
    font-size: 24px;
}

.inventory-submit p {
    margin: 0 auto 25px;
    color: #6b7280;
    line-height: 1.6;
}

.inventory-submit .quote-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    cursor: pointer;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    transition: transform 0.2s ease,
                box-shadow 0.2s ease;
}

.inventory-submit .quote-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}


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

.contact-why {
    padding: 80px 0;
    background: #ffffff;
}

.contact-why .section-head {
    max-width: 750px;
    margin: 0 auto 45px;
    text-align: center;
}

.contact-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.contact-benefit {
    text-align: center;
    padding: 30px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
}

.contact-benefit-icon {
    font-size: 36px;
    margin-bottom: 15px;
}

.contact-benefit h3 {
    margin-bottom: 10px;
}

.contact-benefit p {
    margin: 0;
    color: #6b7280;
    line-height: 1.6;
}


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

.contact-faq {
    padding: 80px 0;
    background: #f7f8fa;
}

.contact-faq .section-head {
    max-width: 750px;
    margin: 0 auto 40px;
    text-align: center;
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border: 0;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-weight: 700;
}

.faq-question i {
    transition: transform 0.2s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    margin: 0;
    padding: 0 22px 22px;
    color: #6b7280;
    line-height: 1.7;
}


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

.contact-cta {
    padding: 80px 0;
}

.contact-cta .cta-content {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.contact-cta .cta-content h2 {
    margin-bottom: 15px;
}

.contact-cta .cta-content p {
    max-width: 650px;
    margin: 0 auto 25px;
}

.cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 900px) {

    .inventory-items {
        grid-template-columns: 1fr;
    }

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

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 650px) {

    .inventory-section,
    .contact-why,
    .contact-faq,
    .contact-cta {
        padding: 55px 0;
    }


    .inventory-card-header {
        padding: 20px;
    }


    .inventory-card-body {
        padding: 20px;
    }


    .inventory-card .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }


    .inventory-items {
        grid-template-columns: 1fr;
        gap: 8px;
    }


    .inventory-item {
        padding: 11px;
    }


    .inventory-item-info strong {
        font-size: 13px;
    }


    .inventory-item-info small {
        font-size: 11px;
    }


    .quantity-btn {
        width: 32px;
        height: 32px;
    }


    .quantity-value {
        width: 30px;
    }


    .inventory-summary {
        grid-template-columns: 1fr;
        gap: 10px;
    }


    .inventory-summary-item {
        padding: 18px 20px;
    }


    .inventory-summary-item strong {
        font-size: 21px;
    }


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


    .inventory-submit {
        padding: 30px 20px;
    }


    .inventory-submit .quote-submit {
        width: 100%;
    }


    .faq-question {
        padding: 17px;
        font-size: 14px;
    }


    .faq-answer p {
        padding-left: 17px;
        padding-right: 17px;
    }


    .cta-actions {
        flex-direction: column;
    }


    .cta-actions .btn {
        width: 100%;
        max-width: 320px;
    }

}
/* ==========================================================
   PART 7
   INVENTORY ACCORDION — CLEAN FINAL STYLING
   This is the single source of truth for the inventory accordion.
========================================================== */

/* ==========================================================
   INVENTORY CATEGORY
========================================================== */
.inventory-category {
    margin-bottom: 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.inventory-category:last-child {
    margin-bottom: 0;
}

/* ==========================================================
   CATEGORY HEADER
========================================================== */
.inventory-category-toggle {
    width: 100%;
    min-height: 78px;
    padding: 18px 24px;
    border: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--navy);
    transition: background var(--transition), box-shadow var(--transition);
}

.inventory-category-toggle:hover {
    background: #f8fafc;
}

.inventory-category-toggle:focus-visible {
    outline: 3px solid rgba(47, 191, 12, 0.20);
    outline-offset: -3px;
}

/* ==========================================================
   CATEGORY NAME
========================================================== */
.inventory-category-name {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--navy);
}

/* ==========================================================
   CATEGORY ARROW
========================================================== */
.inventory-category-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(47, 191, 12, 0.10);
    color: var(--green);
    font-size: 13px;
    transition: transform var(--transition), background var(--transition);
}

.inventory-category.open .inventory-category-arrow {
    transform: rotate(90deg);
    background: rgba(47, 191, 12, 0.16);
}

/* ==========================================================
   SELECTED COUNT
========================================================== */
.inventory-category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 6px 12px;
    border-radius: 50px;
    background: #f1f5f9;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.inventory-category.has-selection .inventory-category-count {
    background: #e8f5e9;
    color: #2e7d32;
}

/* ==========================================================
   CATEGORY CONTENT
========================================================== */
.inventory-category-content {
    display: none;
    padding: 0 20px 20px;
    border-top: 1px solid #eef0f2;
}

.inventory-category.open .inventory-category-content {
    display: block;
}

/* ==========================================================
   INVENTORY ITEMS
========================================================== */
.inventory-category-content .inventory-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.inventory-category-content .inventory-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 15px;
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.inventory-category-content .inventory-item:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
}

.inventory-category-content .inventory-item.selected {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

/* ==========================================================
   ITEM INFORMATION
========================================================== */
.inventory-category-content .inventory-item-info {
    min-width: 0;
    flex: 1;
}

.inventory-category-content .inventory-item-info strong {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: #1f2937;
}

.inventory-category-content .inventory-item-info small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

/* ==========================================================
   QUANTITY CONTROL
========================================================== */
.inventory-category-content .inventory-quantity {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 34px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    overflow: hidden;
    background: #ffffff;
}

.inventory-category-content .quantity-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: #f3f4f6;
    color: #374151;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.inventory-category-content .quantity-btn:hover {
    background: #e5e7eb;
}

.inventory-category-content .quantity-btn:active {
    background: #dbeafe;
}

.inventory-category-content .quantity-value {
    width: 36px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

/* ==========================================================
   INVENTORY SUMMARY
========================================================== */
.inventory-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.inventory-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.inventory-summary-item span {
    color: var(--muted);
    font-size: 14px;
}

.inventory-summary-item strong {
    font-size: 23px;
    color: var(--navy);
}

/* ==========================================================
   ACCORDION MOBILE
========================================================== */
@media (max-width: 900px) {
    .inventory-category-content .inventory-items {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .inventory-category {
        margin-bottom: 14px;
        border-radius: 14px;
    }

    .inventory-category-toggle {
        min-height: 64px;
        padding: 14px 15px;
        gap: 10px;
    }

    .inventory-category-name {
        gap: 8px;
        font-size: 14px;
    }

    .inventory-category-arrow {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .inventory-category-count {
        min-width: 65px;
        padding: 4px 8px;
        font-size: 11px;
    }

    .inventory-category-content {
        padding: 0 10px 10px;
    }

    .inventory-category-content .inventory-items {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 12px;
    }

    .inventory-category-content .inventory-item {
        padding: 10px;
        gap: 8px;
    }

    .inventory-category-content .inventory-item-info strong {
        font-size: 13px;
    }

    .inventory-category-content .inventory-item-info small {
        font-size: 10px;
    }

    .inventory-category-content .quantity-btn {
        width: 31px;
        height: 31px;
    }

    .inventory-category-content .quantity-value {
        width: 31px;
    }



    .inventory-summary-item {
        padding: 17px 20px;
    }


}

/* ==========================================================
   CONTACT OPTIONS - THREE COLUMNS
========================================================== */

.contact-options {
    padding: 30px 0 60px;
}


.contact-options-grid {

    display: grid;

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

    gap: 30px;

}


.contact-option-card {

    background: #fff;

    border: 1px solid #e3e7ef;

    border-radius: 24px;

    padding: 40px 30px;

    text-align: center;

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

    display: flex;

    flex-direction: column;

    align-items: center;

    min-height: 390px;

}


.contact-option-icon {

    width: 86px;

    height: 86px;

    border-radius: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 42px;

    margin-bottom: 25px;

    background: #e5f8eb;

}


.contact-option-card h3 {

    margin: 0 0 12px;

    font-size: 28px;

    color: #17233c;

}


.contact-option-card p {

    margin: 0;

    color: #6f7d99;

    font-size: 17px;

    line-height: 1.6;

    min-height: 55px;

}


.contact-option-number {

    margin-top: 25px;

    font-size: 23px;

    font-weight: 700;

    color: #17233c;

}


.contact-option-button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    margin-top: auto;

    padding: 16px 24px;

    border-radius: 40px;

    text-decoration: none;

    color: #fff;

    font-weight: 700;

    font-size: 16px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.contact-option-button:hover {

    transform: translateY(-2px);

}


.contact-call-button {

    background: #5264ed;

    box-shadow:
        0 12px 25px rgba(82, 100, 237, 0.25);

}


.contact-whatsapp-button {

    background: #20cf35;

    box-shadow:
        0 12px 25px rgba(32, 207, 53, 0.25);

}


.contact-email-button {

    background: #344a7a;

    box-shadow:
        0 12px 25px rgba(52, 74, 122, 0.25);

}


.contact-email {

    font-size: 16px;

    word-break: break-word;

}


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

@media (max-width: 900px) {

    .contact-options-grid {

        grid-template-columns:
            1fr;

        gap: 20px;

    }


    .contact-option-card {

        min-height: auto;

    }

}
/* ==========================================================
   STANDARD CTA - HOMEPAGE & INTERNAL PAGES
========================================================== */

.cta {
    padding: 90px 20px;
    background: linear-gradient(
        135deg,
        #0f766e,
        #16a34a
    );
    color: #fff;
    text-align: center;
}

.cta .wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.cta h2 {
    color: #fff;
    margin-bottom: 20px;
}

.cta p {
    color: #fff;
    max-width: 800px;
    margin: 0 auto 35px;
    line-height: 1.8;
}

.cta .hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
/* ==========================================================
   GALLERY CTA - MATCH HOMEPAGE
========================================================== */

.gallery-cta {

    padding: 90px 20px;

    background: linear-gradient(
        135deg,
        #0f766e,
        #16a34a
    );

    color: #fff;

}


.gallery-cta .wrap {

    max-width: 1000px;

    margin: 0 auto;

}


.gallery-cta .cta-card {

    background: transparent;

    border: none;

    border-radius: 0;

    box-shadow: none;

    padding: 0;

    text-align: center;

}


.gallery-cta h2 {

    color: #fff;

    margin-bottom: 20px;

}


.gallery-cta p {

    color: #fff;

    max-width: 800px;

    margin: 0 auto 35px;

    line-height: 1.8;

}


.gallery-cta .btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

}
/* ==========================================================
   CONSISTENT PAGE HERO - GALLERY & CONTACT
========================================================== */

/* Desktop */
.page-hero,
.contact-hero {
    padding: 10px 0;
}

/* Same heading size */
.page-hero h1,
.contact-hero h1 {
    font-size: clamp(40px, 4.5vw, 56px);
    margin-bottom: 18px;
}

/* Same paragraph sizing */
.page-hero p,
.contact-hero p {
    font-size: 18px;
    line-height: 1.8;
}

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

@media (max-width: 640px) {

    .page-hero,
    .contact-hero {
        padding: 55px 0;
    }

    .page-hero h1,
    .contact-hero h1 {
        font-size: 38px;
        margin-bottom: 15px;
    }

    .page-hero p,
    .contact-hero p {
        font-size: 16px;
        line-height: 1.7;
    }
}
/* ==========================================================
   CONTACT CTA - GREEN BACKGROUND
========================================================== */

.contact-page .cta,
.contact-cta,
.cta {
    background: linear-gradient(
        135deg,
        #0f766e,
        #16a34a
    );

    color: #fff;
}

.contact-page .cta h2,
.contact-cta h2,
.cta h2 {
    color: #fff;
}

.contact-page .cta p,
.contact-cta p,
.cta p {
    color: #fff;
}
/* ==========================================================
   SERVICES PAGE - FIXED HERO IMAGE
   Forces all images to display in the same size
========================================================== */

.hero-image.services-hero-image {
    width: 100%;
    height: 360px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    position: relative;
}

.hero-image.services-hero-image img {
    width: 100%;
    height: 100% !important;
    max-width: none !important;
    display: block;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: var(--radius-lg);
}


/* ==========================================================
   SERVICES PAGE - TABLET
========================================================== */

@media (max-width: 980px) {

    .hero-image.services-hero-image {
        width: 100%;
        height: 320px !important;
        aspect-ratio: auto !important;
        max-width: 600px;
        margin: 0 auto;
    }

}


/* ==========================================================
   SERVICES PAGE - MOBILE
========================================================== */

@media (max-width: 640px) {

    .hero-image.services-hero-image {
        height: 280px !important;
        aspect-ratio: auto !important;
    }

}
/* ==========================================================
   GALLERY HERO - HOME PAGE STYLE
========================================================== */

.gallery-home-hero {
    background: #f8fafc;
    padding: 85px 0 70px;
}

.gallery-home-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.gallery-home-hero .section-eyebrow {
    display: block;
    margin-bottom: 18px;
}

.gallery-home-hero h1 {
    font-family: "Poppins", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--navy);
    margin: 0 auto 20px;
}

.gallery-home-hero p {
    max-width: 850px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: #5f7190;
}


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

@media (max-width: 640px) {

    .gallery-home-hero {
        padding: 60px 20px 50px;
    }

    .gallery-home-hero h1 {
        font-size: 30px;
    }

    .gallery-home-hero p {
        font-size: 16px;
    }

}
/* ==========================================================
   CONTACT HERO - HOME PAGE STYLE
========================================================== */

.contact-home-hero {
    background: #f8fafc;
    padding: 85px 0 70px;
}

.contact-home-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.contact-home-hero .section-eyebrow {
    display: block;
    margin-bottom: 18px;
}

.contact-home-hero h1 {
    font-family: "Poppins", sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--navy);
    margin: 0 auto 20px;
}

.contact-home-hero p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: #5f7190;
}


/* ==========================================================
   CONTACT HERO - MOBILE
========================================================== */

@media (max-width: 640px) {

    .contact-home-hero {
        padding: 60px 20px 50px;
    }

    .contact-home-hero h1 {
        font-size: 30px;
    }

    .contact-home-hero p {
        font-size: 16px;
    }

}