:root {
    /* Colors */
    --sandstone: #9a8b74;
    --forest-green: #5E725D;
    --deep-teal: #1E3636;
    --slate-gray: #666c72;
    --silver-mist: #BCBDC0;
    --dark-teal: hwb(117 36% 60%);


    /* Tofino font variables */
    --font-tofino: "Tofino", sans-serif;
}

html,
body {
    background-color: var(--deep-teal) !important;
    scroll-behavior: smooth;
    scroll-padding: 100px;
}

.form-group .input-group-flex {
    display: flex !important;
    gap: 2px;
    /* Space between the inputs */
}

.form-group .input-group-flex input {
    flex: 1 !important;
    /* Makes both inputs take equal width */
}

.form-group {
    margin-bottom: 2px !important;
}

.black-background {
    background: black !important;
}


/* .inner-footer{
    align-items: center !important;
} */

.faded-white {
    color: rgba(255, 255, 255, 0.801) !important;
}

.sandstone {
    color: var(--sandstone);
}

.link:hover {
    text-decoration: underline;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.527);
}

.off {
    display: none !important;
}

#see-more-btn {
    background-color: transparent;
    color: var(--sandstone);
    border: none;
}


.forest-green {
    color: var(--forest-green)
}

.deep-teal {
    color: var(--deep-teal)
}

.dark-teal {
    color: var(--dark-teal);
}

.slate-gray {
    color: var(--slate-gray);
}

.silver-mist {
    color: var(--silver-mist);
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-Black.woff2") format("woff2");
    font-weight: 900;
    /* Black typically maps to 900 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-BlackItalic.woff2") format("woff2");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-Bold.woff2") format("woff2");
    font-weight: bold;
    /* 700 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-BoldItalic.woff2") format("woff2");
    font-weight: bold;
    /* 700 */
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Acme Gothic Extrawide W05 SmBd";
    src: url("../fonts/fonnts.com-Acme_Gothic_Extrawide_Semibold.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-Book.woff2") format("woff2");
    font-weight: 300;
    /* Book is often lighter, around 300 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-BookItalic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-Light.woff2") format("woff2");
    font-weight: 200;
    /* Light typically maps to 200 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-LightItalic.woff2") format("woff2");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-Medium.woff2") format("woff2");
    font-weight: 500;
    /* Medium typically maps to 500 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-MediumItalic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-Regular.woff2") format("woff2");
    font-weight: normal;
    /* 400 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-RegularItalic.woff2") format("woff2");
    font-weight: normal;
    /* 400 */
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-Semibold.woff2") format("woff2");
    font-weight: 600;
    /* Semibold typically maps to 600 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-SemiboldItalic.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-Thin.woff2") format("woff2");
    font-weight: 100;
    /* Thin typically maps to 100 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-ThinItalic.woff2") format("woff2");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-Ultra.woff2") format("woff2");
    font-weight: 950;
    /* Ultra is often heavier than Black, around 950 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tofino";
    src: url("../fonts/Tofino-UltraItalic.woff2") format("woff2");
    font-weight: 950;
    font-style: italic;
    font-display: swap;
}

/*Fonts*/
.gothic {
    font-family: acme-gothic-extrawide, sans-serif;
    font-style: normal;
    font-weight: 600;

}

/* Classes for each font variation */
.tofino-black {
    font-family: "Tofino", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

.item-head p {
    padding: 0;
    margin: 0;
}

.item-head h3 {
    margin-top: 0;
    padding-top: 0;
}

.tofino-black-italic {
    font-family: "Tofino", sans-serif;
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

.tofino-bold {
    font-family: "Tofino", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.tofino-bold-italic {
    font-family: "Tofino", sans-serif;
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

.tofino-book {
    font-family: "Tofino", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

.tofino-book-italic {
    font-family: "Tofino", sans-serif;
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

.tofino-light {
    font-family: "Tofino", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

.tofino-light-italic {
    font-family: "Tofino", sans-serif;
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

.tofino-medium {
    font-family: "Tofino", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.tofino-medium-italic {
    font-family: "Tofino", sans-serif;
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

.tofino-regular {
    font-family: "Tofino", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.tofino-regular-italic {
    font-family: "Tofino", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

.tofino-semibold {
    font-family: "Tofino", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

.tofino-semibold-italic {
    font-family: "Tofino", sans-serif;
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

.tofino-thin {
    font-family: "Tofino", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

.tofino-thin-italic {
    font-family: "Tofino", sans-serif;
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

.tofino-ultra {
    font-family: "Tofino", sans-serif;
    font-weight: 950;
    font-style: normal;
    font-display: swap;
}

.tofino-ultra-italic {
    font-family: "Tofino", sans-serif;
    font-weight: 950;
    font-style: italic;
    font-display: swap;
}

.gothic-smb {
    font-family: "Acme Gothic Extrawide W05 SmBd";
    letter-spacing: 5px;
    text-transform: uppercase;
}

.ls-3 {
    letter-spacing: 5px;
}

h1 {
    transition: 0.3s all ease-in-out;
    font-family: "Acme Gothic Extrawide W05 SmBd";
    text-transform: uppercase;
    letter-spacing: 5px;
}

h2 {
    transition: 0.3s all ease-in-out;
    font-family: "Acme Gothic Extrawide W05 SmBd";
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    letter-spacing: 5px;
}

h3 {
    transition: 0.3s all ease-in-out;
    padding: 0;
    margin: 0;
}

p {
    transition: 0.3s all ease-in-out;
    padding: 0;
    margin: 0;
}

.new-banner-content {
    z-index: 999;
    margin-top: auto;
    margin-bottom: 15%;

}

.textual-content p {
    font-size: 15px !important;
}

/**/
.banner-btn {
    color: white;
    background-color: transparent;
    border: 3px solid var(--forest-green);
    padding: 8px 16px;
    letter-spacing: 2px;
    transition: 0.3s ease-in-out all;
    font-size: 13px;
    cursor: pointer;
}

.banner-btn:hover,
.blog-btn:hover,
.project-btn:hover,
.cnt-btn:hover,
.btn-sandstone:hover {
    transform: scale(1.05);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.305);
}

/* Forest-green-bordered buttons → fill forest-green on hover */
.banner-btn:hover {
    background-color: var(--forest-green);
    border-color: var(--forest-green);
    color: #fff;
}

.blog-btn:hover {
    background-color: var(--forest-green);
    border-color: var(--forest-green);
    color: #fff !important;
}

/* Blue-bordered button → fill blue on hover */
.cnt-btn:hover {
    background-color: #5b7b8a;
    border-color: #5b7b8a;
    color: #fff;
}

/* Sandstone-bordered buttons → fill sandstone on hover */
.project-btn:hover {
    background-color: var(--sandstone);
    border-color: var(--sandstone);
    color: #fff;
}

.header-section {
    background-color: var(--deep-teal);
    width: 100%;
    position: sticky !important;
    top: 0 !important;
    height: 100px;
    z-index: 1000000;
    box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.572);
}

.new-nav-menu {
    display: flex;
    gap: 1.5em;
    align-items: center;
    list-style: none;
    font-family: var(--font-tofino);
    font-weight: 500;
}

.dropdown-content a {
    font-family: "Nunito Sans", Tahoma, Verdana, sans-serif;
    font-size: 13px !important;
}

.lg-offset {
    margin-top: -30px;
}


.new-nav-menu .nav-link,
.new-nav-menu li {
    color: var(--sandstone);
    cursor: pointer;
    letter-spacing: 2px;
    font-size: 13px;
    transition: 0.3s ease-in-out all;
}

.nav-item {
    position: relative;
}

.nav-link:hover,
#p-bt:hover {
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
}



.line {
    width: 2px;
    height: 20px;
    background-color: #ccc;
    /* Adjust color as needed */
}

/* Dropdown */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--deep-teal);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    z-index: 1000;
}

.dropdown-content a {
    display: block;
    padding: 3px 8px;
    border-bottom: 0.5px solid hwb(180 12% 85%);
    text-decoration: none;
    color: white;
}

.dropdown-content a:hover {
    background-color: hwb(180 12% 81%);
    color: white;
}

/* Flyout */
.dropdown-toggle {
    position: relative;
}

.flyout-menu {
    display: none;
    position: absolute;
    left: 100%;

    background-color: var(--deep-teal);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    z-index: 99999999999999;
}

.nav-item:hover .dropdown-content {
    display: block;
}

.dropdown-content a.dropdown-toggle:hover+.flyout-menu,
.flyout-menu:hover {
    display: block !important;
}


.line {
    height: 30px;
    width: 2px;
    background-color: hwb(180 12% 83%);
}

.row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-btn {
    background-color: hwb(180 12% 84%);
    width: 135px;
    font-size: 12px !important;
    padding: 8px 16px;
    text-align: center;
}

.contact-btn a {
    color: #9a8b74 !important;
    transition: 0.3s ease-in-out all;
}

.contact-btn:hover {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.318);
    transform: scale(1.05);
}


.turnkey-section {
    background-color: black;
    position: relative;
}

.shadow-box {
    position: absolute;
    top: -300px;
    /* Pulls the gradient up to overlap the bottom of the hero section */
    left: 0;
    width: 100%;
    /* Full width of the container */
    height: 300px;
    /* Increase height for a smoother fade */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    /* Fade from transparent to solid black */
    pointer-events: none;
    /* Ensures the gradient doesn't interfere with clicks */
    z-index: 992;
    /* Places it above the video but below content if needed */
}

.turnkey-list {
    display: flex;
    gap: 2em;
    padding-top: 40px;
    align-items: center;
}

.turnkey-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 300px;
}

.turnkey-item span {
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.turnkey-p {
    font-size: 14px;
    color: var(--sandstone);
}

.turnkey-icon {
    height: 30px !important;
    width: 30px !important;
}

.pt-pb-60 {
    padding: 60px 0 60px !important;
}

.aboutus-section {
    background-color: var(--deep-teal);
}

.aboutus-head {
    margin-left: 50px;
}

.aboutus-list {
    display: flex;
    flex-direction: column;
}

.row-r {
    flex-direction: row-reverse !important;
}

.aboutus-item:nth-child(2) {
    flex-direction: row-reverse;
}

.aboutus-item {
    display: flex;
    align-items: center;
}

.aboutus-text {
    flex: 0 0 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    /* Center the nested container */
}

.aboutus-text-content {
    max-width: 80%;

    /* Constrain the width of the content */
    p {
        font-size: 14px;
    }
}

.aboutus-img {
    flex: 0 0 50%;
    box-sizing: border-box;
}

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

.learnmore-btn {
    color: var(--forest-green);
    background-color: transparent;
    border: none;
    padding: 0;
    margin-top: 20px;
    transition: 0.3s ease-in-out all;
    cursor: pointer;
}

.learnmore-btn:hover {
    text-decoration: underline var(--forest-green);
}

/* ========================================
   REDESIGNED ABOUT US - COMPACT LAYOUT
   ======================================== */

/* Hero Row: Our Beginning */
.aboutus-hero-row {
    display: flex;
    align-items: stretch;
    min-height: 380px;
    overflow: hidden;
}

.aboutus-hero-image {
    flex: 0 0 55%;
    position: relative;
    overflow: hidden;
}

.aboutus-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.aboutus-hero-row:hover .aboutus-hero-image img {
    transform: scale(1.03);
}

.aboutus-hero-gradient {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(to left, var(--deep-teal), transparent);
    pointer-events: none;
}

.aboutus-hero-content {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 40px 40px 50px;
    box-sizing: border-box;
}

.aboutus-hero-content h3 {
    font-size: 22px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.aboutus-hero-content p {
    font-size: 14px;
    line-height: 1.75;
}

/* Three Column Cards Row */
.aboutus-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 0;
}

.aboutus-card {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: background-color 0.3s ease;
}

.aboutus-card:last-child {
    border-right: none;
}

.aboutus-card:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Card Visual Area (Image or Logo) */
.aboutus-card-visual {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.aboutus-card-visual img:not(.aboutus-card-logo) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.aboutus-card:hover .aboutus-card-visual img:not(.aboutus-card-logo) {
    transform: scale(1.05);
}

.aboutus-card-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, var(--deep-teal), transparent);
    pointer-events: none;
}

/* Logo variant of card visual */
.aboutus-card-logo-bg {
    background-color: hwb(180 12% 83%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboutus-card-logo {
    max-height: 120px;
    max-width: 80%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.aboutus-card:hover .aboutus-card-logo {
    transform: scale(1.08);
}

/* Card Body */
.aboutus-card-body {
    padding: 25px 28px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.aboutus-card-label {
    font-size: 10px !important;
    margin-bottom: 4px;
}

.aboutus-card-title {
    font-size: 16px;
    margin-bottom: 14px;
    line-height: 1.3;
}

.aboutus-card-desc {
    font-size: 13px !important;
    line-height: 1.7;
}

/* ========================================
   RESPONSIVE: ABOUT US REDESIGN
   ======================================== */

@media (max-width: 992px) {
    .aboutus-hero-row {
        flex-direction: column;
        min-height: auto;
    }

    .aboutus-hero-image {
        flex: none;
        height: 280px;
    }

    .aboutus-hero-gradient {
        width: 100%;
        height: 40%;
        top: auto;
        bottom: 0;
        right: 0;
        background: linear-gradient(to top, var(--deep-teal), transparent);
    }

    .aboutus-hero-content {
        flex: none;
        padding: 30px 25px;
    }

    .aboutus-cards-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .aboutus-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        flex-direction: row;
    }

    .aboutus-card:last-child {
        border-bottom: none;
    }

    .aboutus-card-visual {
        flex: 0 0 40%;
        height: auto;
        min-height: 180px;
    }

    .aboutus-card-body {
        flex: 1;
        padding: 20px 25px;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .aboutus-hero-image {
        height: 220px;
    }

    .aboutus-hero-content {
        padding: 25px 20px;
    }

    .aboutus-hero-content h3 {
        font-size: 18px;
    }

    .aboutus-card {
        flex-direction: column;
    }

    .aboutus-card-visual {
        flex: none;
        height: 180px;
    }

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

    .aboutus-card-title {
        font-size: 14px;
    }
}

/* --- New Redesigned Precision Approach Section --- */
.new-approach-section {
    background-color: var(--deep-teal);
    padding: 100px 0;
}

.new-approach-head {
    margin-bottom: 80px;
}

.new-approach-head h2 {
    font-size: 52px;
    margin-top: 10px;
}

.approach-grid {
    display: flex;
    justify-content: space-between;
    gap: 2%;
}

.approach-item {
    flex: 0 0 18%;
    max-width: 18%;
}

.approach-card {
    position: relative;
    padding-left: 0;
}

.approach-number-wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    margin-bottom: 30px;
    min-height: 70px;
}

.outlined-num {
    font-size: 78px;
    line-height: 0.75;
    color: transparent;
    -webkit-text-stroke: 1px var(--forest-green);
    opacity: 0.4;
    font-family: "Acme Gothic Extrawide W05 SmBd", sans-serif;
    font-weight: 300;
    flex-shrink: 0;
}

.approach-title {
    font-size: 15px;
    letter-spacing: 0.15em;
    margin-left: -85px;
    margin-bottom: -20px;
    font-weight: 800;
    line-height: 1.3;
}

.approach-desc {
    font-size: 14px;
    line-height: 1.6;
    max-width: 100%;
}

@media (max-width: 992px) {
    .outlined-num {
        font-size: 60px;
    }

    .approach-title {
        font-size: 14px;
        margin-left: -20px;
    }

    .approach-desc {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .approach-grid {
        flex-direction: column;
        gap: 40px;
    }

    .approach-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .new-approach-head {
        text-align: center;
        margin-bottom: 60px;
    }

    .approach-card {
        text-align: center;
        padding-left: 0;
    }

    .approach-number-wrap {
        justify-content: center;
    }

    .outlined-num {
        font-size: 50px;
    }

    .approach-title {
        font-size: 20px;
        margin-left: -30px;
    }

    .approach-desc {
        max-width: 100%;
        margin: 0 auto;
        font-size: 16px;
    }
}

.approach-section {
    background-color: hwb(180 12% 81%);
}

.approach-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    /* Responsive columns */
    gap: 20px;
    /* Space between grid items */
}

.ml-50 {
    margin-left: 50px;
}


.number {
    display: flex;
    flex-direction: column;
}

.num {
    font-size: 22px;
    color: hwb(180 12% 81%);
    text-shadow:
        -1px -1px 0 var(--forest-green),
        /* Top-left */
        1px -1px 0 var(--forest-green),
        /* Top-right */
        -1px 1px 0 var(--forest-green),
        /* Bottom-left */
        1px 1px 0 var(--forest-green);
    /* Bottom-right */
    padding: 0;
    margin: 0;
    margin-bottom: -8px;
}

.txt {
    font-size: 20px;
}

.approach-list-text {
    color: white;
    font-size: 14px;
}


.services-section {
    background-color: black;
}

.services-head {
    display: flex;
    justify-content: space-between;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.service-top {
    display: flex;
    gap: 10px;
}

.service-img {
    position: relative;
    height: 150px;
}

.service-img-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    z-index: 999;
}

.flex-1 {
    flex: 1;
}

.section-head p {
    padding: 0;
    margin: 0;
}

.section-head h1,
.section-head h2,
.section-head h3 {
    padding-top: 0;
    margin-top: 0;
}

.service-img-lg {
    position: relative;
    height: 150px;
    object-fit: cover;
}

.service-btn {
    border: 2px solid var(--sandstone);
    color: var(--sandstone);
    background-color: transparent;
    font-size: 10px;
    margin-top: 40px;
    padding: 8px 16px;
    cursor: pointer;
    display: none !important;
    visibility: hidden !important;
}

.map-section {
    background-color: var(--deep-teal);
}

.map-menu ul {
    color: white;
}

.map-menu ul li a {
    transition: 0.3s ease-in-out;
}

.map-menu ul li a:hover {
    text-decoration: underline;
}


.carouselDottyHaven {
    display: flex !important;
    justify-content: center !important;
    gap: 10px;
    margin-top: 10px;
    /* Adjust as needed */
}

.zanyDot {
    width: 10px !important;
    height: 10px !important;
    background-color: #ccc !important;
    border-radius: 50% !important;
}

.zanyDot.dottyActive {
    background-color: #333 !important;
}

.partners-section {
    background-color: black;
}

.carousel-wrapper {
    overflow: hidden !important;
    width: 120%;
    margin-left: -10%;
    /* Adjust as needed */
}

#partners-carousel {
    display: flex;
    animation: scroll 20s linear infinite;
    /* Adjust duration for speed */
}



/* Animation for continuous scrolling */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-120%);
        /* Move by half since images are doubled */
    }
}

/* Pause animation on hover (optional) */
#partners-carousel:hover {
    animation-play-state: paused;
}

.hover:hover {
    color: #9a8b74 !important;
}

.carousel-container {
    display: flex;
    justify-content: space-around !important;
}

.carousel-pc-img {
    height: 180px !important;
    width: 180px !important;
    width: auto;
    object-fit: contain;
    margin-right: 80px;
}


.testimonials-section {
    position: relative;
    /* Required for the ::before pseudo-element */
    height: 725px;
    background-image: url('../../../img/blog-media/2025_pool_trends_blog_banner_enhanced.webp');
    background-size: cover;
    /* Ensure the image covers the entire section */
    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Prevent the image from repeating */
    color: white;
    /* Ensure text is white for contrast */
}

/* Add a semi-transparent overlay to reduce image opacity and improve text readability */
.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Dark overlay with 70% opacity */
    z-index: 1;
    /* Place the overlay above the background image */
}

/* Ensure content is above the overlay */
.testimonials-section>* {
    position: relative;
    z-index: 2;
    /* Place content above the overlay */
}

.testimonials-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.testimonials-slider {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.testimonial-item {
    max-width: 600px;
    margin: 0 auto;
}

.testimonial-item p {
    margin: 10px 0;
}

.testimonial-item h2 {
    font-size: 24px;
}


.testimonial-item .text-white {
    font-size: 16px;
    color: white;
    line-height: 1.6;
}

.testimonial-item .sandstone {
    font-size: 18px;
    color: var(--sandstone);
}

#left-tc,
#right-tc {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    background-color: transparent;
    border: none;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#left-btn,
#right-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    background-color: transparent;
    border: none;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#left-btn {
    left: 50px;
}

#right-btn {
    right: 50px;
}

#left-tc {
    left: -60px;
}

#right-tc {
    right: -60px;
}

#left-tc:hover,
#right-tc:hover,
#left-btn:hover,
#right-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
    border-color: #ddd;
}

#left-tc:active,
#right-tc:active {
    transform: translateY(-50%) scale(0.95);
}

#left-tc:disabled,
#right-tc:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#left-tc:focus,
#right-tc:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Navigation dots */
.testimonials-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.testimonial-dot {
    width: 12px;
    height: 12px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.testimonial-dot.active {
    background-color: #fff;
}

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

    #left-tc,
    #right-tc {
        width: 40px;
        height: 40px;
        font-size: 20px;
        padding: 8px;
    }

    #left-tc {
        left: 15px;
    }

    #right-tc {
        right: 15px;
    }

    .testimonial-dot {
        width: 10px;
        height: 10px;
    }

    .testimonials-wrapper {
        max-width: 100%;
        padding: 0 20px;
    }

    .testimonial-item {
        max-width: 100%;
        padding: 0 20px;
    }
}

.contact-section {
    background-color: var(--deep-teal);
}

.contact-body {
    display: flex;
    gap: 1em;
}

.contact-left {
    flex: 0 0 60%;
    /* Left side takes 60% */
    max-width: 60%;
}

.bm-1 {
    margin-bottom: 60px;
}

.contact-right {
    flex: 0 0 30%;
    /* Right side (image) takes 40% */
    max-width: 30%;
    margin-left: auto;
}

.contact-img {
    width: 100%;
    /* Ensures image fills the 40% width */
    height: 570px !important;
    /* Maintains aspect ratio */
    display: block;
    /* Ensures visibility */
    object-fit: cover;
}

.form-container {
    padding: 0 !important;
}

.f-btn {
    background-color: var(--sandstone);
    padding: 8px 16px;
    cursor: pointer;
    transition: 0.3s ease-in-out all;
}

.f-btn:hover {
    transform: translateY(3px);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.483);
}

.small-switch {
    display: block;
}

.large-switch {
    display: none !important;
}

.small-header {
    z-index: 9999999999;
    background-color: var(--deep-teal);
    position: sticky;
    top: 0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.644);

}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--deep-teal);
    z-index: 999;
    overflow-y: auto;
    padding: 60px 20px 20px;
}

.mobile-menu.active {
    display: block;
}

.mobile-nav-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.footer-social {
    z-index: 999;
}

.mobile-nav-item {
    margin-bottom: 15px;
}

.mobile-nav-link,
.mobile-nav-item>a {
    color: var(--sandstone);
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    display: block;
    padding: 10px 0;
    cursor: pointer;
}

.mobile-dropdown {
    list-style: none;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.close-menu {
    position: absolute;
    top: 15px;
    left: 20px;
    cursor: pointer;
}


.mobile-dropdown.active {
    display: flex;
}

.mobile-dropdown li a {
    color: #ccc;
    font-size: 16px;
    text-decoration: none;
    display: block;
    padding: 8px 0;
}

.mobile-flyout {
    list-style: none;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mobile-flyout.active {
    display: flex;
}

.mobile-flyout li a {
    color: white;
    font-size: 14px;
}

.menu-toggle {
    cursor: pointer;
}

.approach-item-sm {
    display: flex;
    flex-direction: column;
}

/*RESPONSIVE STYLING*/
/* @media only screen and (min-width:992px) and (max-width:1199px) {
    .small-switch{
        display: none;
    }
} */
@media only screen and (max-width:479px) {
    .small-switch {
        display: none !important;
    }

    .projects-section {
        background-color: #080707b3 !important;
        background-image:
            linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%),
            linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%) !important;
        background-size: 100vw 50% !important;
        background-position: top left, bottom left !important;
        background-repeat: repeat-x !important;
        position: relative;
        overflow: hidden;
        min-height: 400px;
    }

    .blog-title2 {
        height: 30px !important;
        font-size: 15px !important;
        line-height: 15px !important;
    }

    .large-switch {
        display: block !important;
    }

    .turnkey-list {
        flex-direction: column;
    }

    .turnkey-head {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .testimonial-item {
        max-width: 375px !important;
    }

    .testimonial-item h2 {
        font-size: 15px !important;
    }

    .aboutus-item {
        padding-top: 40px;
        flex-direction: column;
    }

    .learnmore-btn {
        padding-bottom: 30px;
    }

    .contact-right {
        display: none;
    }

    #left-btn {
        left: -15px;
        top: 30%;
    }

    #right-btn {
        right: -15px;
        top: 30%;
    }

    .project-text {
        padding-top: 20px !important;
    }

    .project-head {
        padding-bottom: 0 !important;
    }

    .projects-body {
        margin-top: 0 !important;
    }

    .contact-left {
        max-width: 100%;
        width: 100%;
        flex: 0 0 100%;
    }

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

    .section-head {
        padding-bottom: 30px;
    }

    .testimonial-item p {
        margin: 10px 0;
        font-size: 13px;
    }

    .carousel-pc-img {
        height: 100px !important;
        width: 100px !important;
    }

    .testimonial-item h2 {
        font-size: 21px;
    }

    .new-banner-content {
        position: absolute;
        bottom: 60px;
        left: 30px;
    }

    .new-banner-content h1 {
        font-size: 40px;
    }

    .testimonial-item .text-white {
        font-size: 13px;
        color: white;
        line-height: 1.6;
    }

    .testimonial-item .sandstone {
        font-size: 15px;
        color: var(--sandstone);
    }

    #left-tc {
        left: -10px;
    }

    #right-tc {
        right: -10px;
    }

    .txt {
        font-size: 17px;
    }

    #left-pc {
        display: none;
    }

    .featured-in {
        height: 550px !important;
    }

    #right-pc {
        display: none;
    }

    .lg-offset {
        margin-top: 0;
    }

    .row- {
        flex-direction: column !important;
        gap: 1.5em !important;
    }

    .cta-left {
        gap: 15px !important;
    }

    .cnt-btn {
        margin-top: 15px !important;
    }

    .cta-section {
        height: 450px !important;
    }

    .ml-sm {
        margin-left: 10px;
    }

    .project-img {
        height: 300px !important;
        width: 100% !important;
        margin-top: -20px;
    }

    .projects-body {
        flex-direction: column !important;
    }

    .row {
        display: block !important;
    }

    .turnkey-head h2,
    .aboutus-head h2,
    .services-head h2,
    .approach-head h2,
    .section-head h2,
    .cta-left h2,
    .project-head h2,
    h2 {
        font-size: 25px !important;
    }

    .turnkey-head p,
    .aboutus-head p,
    .services-head p,
    .approach-head p,
    .section-head p,
    .cta-left p,
    .project-head p,
    .sa-p {
        font-size: 10px !important;
    }

    .item-head p {
        font-size: 10px !important;
    }

    .item-head h3 {
        font-size: 18px !important;
    }

    .turnkey-head,
    .aboutus-head,
    .services-head,
    .approach-head,
    .section-head,
    .cta-left,
    .project-head {
        margin: 0 !important;
        text-align: center !important;
    }

    .services-head,
    .project-top {
        display: block !important;
    }

    .aboutus-item,
    .cta-right-content,
    .approach-item-sm,
    .project-1,
    .project-2,
    .project-3,
    .project-4 {
        align-items: center;
        text-align: center;
    }

    .textual-content h1 {
        font-size: 32px !important;
    }

    .textual-content p {
        font-size: 12px !important;
    }

    .sm-txt {
        font-size: 18px !important;
    }

    .approach-item-sm .p-sm {
        font-size: 14px !important;
        max-width: 300px;
    }

    .ob-img img {
        height: 300px !important;
        width: 100% !important;
        object-fit: cover;
        margin-top: 20px;
    }

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

    .image-comparison,
    .slider-body {
        max-width: 400px !important;
        height: 350px !important;
    }

    .ob-row {
        display: block !important;
    }

    .unilock-img {
        object-fit: contain;
        height: 225px !important;
    }

    .imp-item {
        padding: 20px;
    }

    .widget-area,
    .sidebar.wider {
        width: 80% !important;
        text-align: center !important;
        margin: 0 auto;
    }
}

@media (min-width:768px) and (max-width:992px) {
    .small-switch {
        display: none !important;
    }

    .large-switch {
        display: block !important;
    }

    .new-banner-content h1 {
        font-size: 40px;
    }

    #left-btn {
        left: -15px;
        top: 30%;
    }

    .project-text {
        padding-top: 20px !important;
    }

    .project-head {
        padding-bottom: 0 !important;
    }

    .projects-body {
        margin-top: 0 !important;
    }

    .blog-title2 {
        height: 30px !important;
        font-size: 15px !important;
        line-height: 15px !important;
    }

    #right-btn {
        right: -15px;
        top: 30%;
    }

    .contact-btn {
        width: 110px;
        font-size: 8px !important;
    }

    .turnkey-list {
        flex-direction: column;
    }

    .txt {
        font-size: 17px;
    }

    .turnkey-head {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .aboutus-item {
        padding-top: 40px;
        flex-direction: column;
    }

    .learnmore-btn {
        padding-bottom: 30px;
    }

    .contact-right {
        display: none;
    }

    .projects-section {
        background-color: #080707b3 !important;
        background-image:
            linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%),
            linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%) !important;
        background-size: 100vw 50% !important;
        background-position: top left, bottom left !important;
        background-repeat: repeat-x !important;
        position: relative;
        overflow: hidden;
        min-height: 400px;
    }

    .contact-left {
        max-width: 100%;
        width: 100%;
        flex: 0 0 100%;
    }

    .widget-area,
    .sidebar.wider {
        width: 80% !important;
        text-align: center !important;
        margin: 0 auto;
    }

    .image-comparison,
    .slider-body {
        max-width: 400px !important;
        height: 350px !important;
    }

    .carousel-pc-img {
        height: 100px !important;
        width: 100px !important;
    }

    .new-banner-content {
        position: absolute;
        bottom: 60px;
        left: 30px;
    }

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

    .section-head {
        padding-bottom: 30px;
    }

    .testimonial-item p {
        margin: 10px 0;
        font-size: 13px;
    }

    .testimonial-item h2 {
        font-size: 21px;
    }

    .lg-offset {
        margin-top: 0;
    }

    .testimonial-item .text-white {
        font-size: 13px;
        color: white;
        line-height: 1.6;
    }

    .testimonial-item .sandstone {
        font-size: 15px;
        color: var(--sandstone);
    }

    #left-tc {
        left: -30px;
    }

    #right-tc {
        right: -30px;
    }

    #left-pc {
        display: none;
    }

    #right-pc {
        display: none;
    }

    .social-share {
        margin-top: -30px !important;
    }

    .row- {
        flex-direction: column !important;
        gap: 1.5em !important;
    }

    .cta-left {
        gap: 15px !important;
    }

    .cnt-btn {
        margin-top: 15px !important;
    }

    #left-btn {
        left: -15px;
        top: 30%;
    }

    #right-btn {
        right: -15px;
        top: 30%;
    }

    .cta-section {
        height: 450px !important;
    }

    .ml-sm {
        margin-left: 10px;
    }

    .unilock-img {
        object-fit: contain;
        height: 225px !important;
    }

    .project-img {
        height: 300px !important;
        width: 100% !important;
        margin-top: -20px;
    }

    .ob-img img {
        height: 300px !important;
        width: 100% !important;
        object-fit: cover;
        margin-top: 20px;
    }

    .projects-body {
        flex-direction: column !important;
    }

    .row {
        display: block !important;
    }

    .turnkey-head h2,
    .aboutus-head h2,
    .services-head h2,
    .approach-head h2,
    .section-head h2,
    .cta-left h2,
    .project-head h2,
    h2 {
        font-size: 25px !important;
    }

    .turnkey-head p,
    .aboutus-head p,
    .services-head p,
    .approach-head p,
    .section-head p,
    .cta-left p,
    .project-head p,
    .sa-p {
        font-size: 10px !important;
    }

    .item-head p {
        font-size: 10px !important;
    }

    .item-head h3 {
        font-size: 18px !important;
    }

    .turnkey-head,
    .aboutus-head,
    .services-head,
    .approach-head,
    .section-head,
    .cta-left,
    .project-head {
        margin: 0 !important;
        text-align: center !important;
    }

    .services-head,
    .project-top {
        display: block !important;
    }

    .aboutus-item,
    .cta-right-content,
    .approach-item-sm,
    .project-1,
    .project-2,
    .project-3,
    .project-4 {
        align-items: center;
        text-align: center;
    }

    .textual-content h1 {
        font-size: 32px !important;
    }

    .textual-content p {
        font-size: 12px !important;
    }

    .sm-txt {
        font-size: 18px !important;
    }

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

    .approach-item-sm .p-sm {
        font-size: 14px !important;
        max-width: 300px;
    }

    .ob-row {
        display: block !important;
    }

    .imp-item {
        padding: 20px;
    }
}

@media (min-width:576px) and (max-width:767px) {
    .small-switch {
        display: none !important;
    }

    .featured-in {
        height: 550px !important;
    }

    .large-switch {
        display: block !important;
    }

    .turnkey-list {
        flex-direction: column;
    }

    .contact-btn {
        width: 110px;
        font-size: 8px;
    }

    .social-share {
        margin-top: -30px !important;
    }

    .blog-title2 {
        height: 30px !important;
        font-size: 15px !important;
        line-height: 15px !important;
    }

    .project-text {
        padding-top: 20px !important;
    }

    .testimonial-item {
        max-width: 375px !important;
    }

    .testimonial-item h2 {
        font-size: 15px !important;
    }

    .project-head {
        padding-bottom: 0 !important;
    }

    .projects-body {
        margin-top: 0 !important;
    }

    .txt {
        font-size: 17px;
    }

    .new-banner-content h1 {
        font-size: 40px;
    }

    #left-btn {
        left: -15px;
        top: 30%;
    }

    #right-btn {
        right: -15px;
        top: 30%;
    }

    .widget-area,
    .sidebar.wider {
        width: 80% !important;
        text-align: center !important;
        margin: 0 auto;
    }

    .turnkey-head {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .image-comparison,
    .slider-body {
        max-width: 400px !important;
        height: 350px !important;
    }

    .aboutus-item {
        padding-top: 40px;
        flex-direction: column;
    }

    .carousel-pc-img {
        height: 100px !important;
        width: 100px !important;
    }

    .learnmore-btn {
        padding-bottom: 30px;
    }

    .new-banner-content {
        position: absolute;
        bottom: 60px;
        left: 30px;
    }

    .imp-item {
        padding: 20px;
    }

    .contact-right {
        display: none;
    }

    .projects-section {
        background-color: #080707b3 !important;
        background-image:
            linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%),
            linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%) !important;
        background-size: 100vw 50% !important;
        background-position: top left, bottom left !important;
        background-repeat: repeat-x !important;
        position: relative;
        overflow: hidden;
        min-height: 400px;
    }

    .contact-left {
        max-width: 100%;
        width: 100%;
        flex: 0 0 100%;
    }

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

    .ob-img img {
        height: 300px !important;
        width: 100% !important;
        object-fit: cover;
        margin-top: 20px;
    }

    .section-head {
        padding-bottom: 30px;
    }

    .testimonial-item p {
        margin: 10px 0;
        font-size: 13px;
    }

    .contact-btn {
        width: 110px;
        font-size: 8px;
    }

    .testimonial-item h2 {
        font-size: 21px;
    }

    .lg-offset {
        margin-top: 0;
    }

    .testimonial-item .text-white {
        font-size: 13px;
        color: white;
        line-height: 1.6;
    }

    .testimonial-item .sandstone {
        font-size: 15px;
        color: var(--sandstone);
    }

    #left-tc {
        left: -20px;
    }

    .unilock-img {
        object-fit: contain;
        height: 225px !important;
    }

    #right-tc {
        right: -20px;
    }

    #left-pc {
        display: none;
    }

    #right-pc {
        display: none;
    }

    .row- {
        flex-direction: column !important;
        gap: 1.5em !important;
    }

    .cta-left {
        gap: 15px !important;
    }

    .cnt-btn {
        margin-top: 15px !important;
    }

    .cta-section {
        height: 450px !important;
    }

    .ml-sm {
        margin-left: 10px;
    }

    .project-img {
        height: 300px !important;
        width: 100% !important;
        margin-top: -20px;
    }

    .projects-body {
        flex-direction: column !important;
    }

    .row {
        display: block !important;
    }

    .item-head p {
        font-size: 10px !important;
    }

    .item-head h3 {
        font-size: 18px !important;
    }

    .turnkey-head h2,
    .aboutus-head h2,
    .services-head h2,
    .approach-head h2,
    .section-head h2,
    .cta-left h2,
    .project-head h2,
    h2 {
        font-size: 25px !important;
    }

    .turnkey-head p,
    .aboutus-head p,
    .services-head p,
    .approach-head p,
    .section-head p,
    .cta-left p,
    .project-head p,
    .sa-p {
        font-size: 10px !important;
    }

    .turnkey-head,
    .aboutus-head,
    .services-head,
    .approach-head,
    .section-head,
    .cta-left,
    .project-head {
        margin: 0 !important;
        text-align: center !important;
    }

    .services-head,
    .project-top {
        display: block !important;
    }

    .aboutus-item,
    .cta-right-content,
    .approach-item-sm,
    .project-1,
    .project-2,
    .project-3,
    .project-4 {
        align-items: center;
        text-align: center;
    }

    .textual-content h1 {
        font-size: 32px !important;
    }

    .textual-content p {
        font-size: 12px !important;
    }

    .sm-txt {
        font-size: 18px !important;
    }

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

    .ob-row {
        display: block !important;
    }

    .approach-item-sm .p-sm {
        font-size: 14px !important;
        max-width: 300px;
    }

    .contact-btn {
        width: 110px;
        font-size: 8px;
    }

    .ob-row {
        display: block !important;
    }
}

@media (max-width:768px) {
    .small-switch {
        display: none !important;
    }

    .large-switch {
        display: block !important;
    }

    .featured-in {
        height: 550px !important;
    }

    .blog-title2 {
        height: 30px !important;
        font-size: 15px !important;
        line-height: 15px !important;
    }

    .ob-img img {
        height: 300px !important;
        width: 100% !important;
        object-fit: cover;
        margin-top: 20px;
    }

    .testimonial-item {
        max-width: 375px !important;
    }

    .testimonial-item h2 {
        font-size: 15px !important;
    }

    .turnkey-list {
        flex-direction: column;
    }

    .project-text {
        padding-top: 20px !important;
    }

    .project-head {
        padding-bottom: 0 !important;
    }

    .projects-body {
        margin-top: 0 !important;
    }

    .turnkey-head {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .unilock-img {
        object-fit: contain;
        height: 225px !important;
    }

    .social-share {
        margin-top: -30px !important;
    }

    .txt {
        font-size: 17px;
    }

    .widget-area,
    .sidebar.wider {
        width: 80% !important;
        text-align: center !important;
        margin: 0 auto;
    }

    #left-btn {
        left: -15px;
        top: 30%;
    }

    #right-btn {
        right: -15px;
        top: 30%;
    }

    .new-banner-content h1 {
        font-size: 40px;
    }

    .image-comparison,
    .slider-body {
        max-width: 400px !important;
        height: 350px !important;
    }

    .projects-section {
        background-color: #080707b3 !important;
        background-image:
            linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%),
            linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%) !important;
        background-size: 100vw 50% !important;
        background-position: top left, bottom left !important;
        background-repeat: repeat-x !important;
        position: relative;
        overflow: hidden;
        min-height: 400px;
    }

    .new-banner-content {
        position: absolute;
        bottom: 60px;
        left: 30px;
    }

    .aboutus-item {
        padding-top: 40px;
        flex-direction: column !important;
    }

    .learnmore-btn {
        padding-bottom: 30px;
    }

    .contact-right {
        display: none;
    }

    .contact-left {
        max-width: 100%;
        width: 100%;
        flex: 0 0 100%;
    }

    .carousel-pc-img {
        height: 100px !important;
        width: 100px !important;
    }

    .contact-btn {
        width: 110px;
        font-size: 8px !important;
    }

    .lg-offset {
        margin-top: 0;
    }

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

    .section-head {
        padding-bottom: 30px;
    }

    .testimonial-item p {
        margin: 10px 0;
        font-size: 13px;
    }

    .testimonial-item h2 {
        font-size: 21px;
    }


    .testimonial-item .text-white {
        font-size: 13px;
        color: white;
        line-height: 1.6;
    }

    .testimonial-item .sandstone {
        font-size: 15px;
        color: var(--sandstone);
    }

    #left-tc {
        left: -20px;
    }

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

    #right-tc {
        right: -20px;
    }

    #left-pc {
        display: none;
    }

    #right-pc {
        display: none;
    }

    .row- {
        flex-direction: column !important;
        gap: 1.5em !important;
    }

    .cta-left {
        gap: 15px !important;
    }

    .cnt-btn {
        margin-top: 15px !important;
    }

    .cta-section {
        height: 450px !important;
    }

    .ml-sm {
        margin-left: 10px;
    }

    .project-img {
        height: 300px !important;
        width: 100% !important;
        margin-top: -20px;
    }

    .projects-body {
        flex-direction: column !important;
    }

    .row {
        display: block !important;
    }

    .turnkey-head h2,
    .aboutus-head h2,
    .services-head h2,
    .approach-head h2,
    .section-head h2,
    .cta-left h2,
    .project-head h2,
    h2 {
        font-size: 25px !important;
    }

    .turnkey-head p,
    .aboutus-head p,
    .services-head p,
    .approach-head p,
    .section-head p,
    .cta-left p,
    .project-head p,
    .sa-p {
        font-size: 10px !important;
    }

    .item-head p {
        font-size: 10px !important;
    }

    .item-head h3 {
        font-size: 18px !important;
    }

    .turnkey-head,
    .aboutus-head,
    .services-head,
    .approach-head,
    .section-head,
    .cta-left,
    .project-head {
        margin: 0 !important;
        text-align: center !important;
    }

    .services-head,
    .project-top {
        display: block !important;
    }

    .aboutus-item,
    .cta-right-content,
    .approach-item-sm,
    .project-1,
    .project-2,
    .project-3,
    .project-4 {
        align-items: center;
        text-align: center;
    }

    .textual-content h1 {
        font-size: 32px !important;
    }

    .textual-content p {
        font-size: 12px !important;
    }

    .sm-txt {
        font-size: 18px !important;
    }

    .approach-item-sm .p-sm {
        font-size: 14px !important;
        max-width: 300px;
    }

    .imp-item {
        padding: 20px;
    }
}

@media (min-width:1000px) and (max-width:1199px) {
    .nav-link {
        font-size: 10px !important;
    }

    .row-between div a img {
        height: 80px !important;
    }

    .header-section {
        height: 80px !important;
    }

    .nav-link,
    .contact-btn,
    #p-bt {
        font-size: 10px !important;
    }

    .new-nav-menu {
        gap: 20px !important;
    }

    .dropdown-content,
    .flyout-menu {
        font-size: 13px !important;
    }

    .contact-btn {
        width: 110px;
        font-size: 8px !important;
    }
}

.services-carousel {
    position: relative;
    width: 100%;
    max-width: 400px;
    /* Adjust as needed */
    padding-top: 30px;
    margin: 0 auto;
    /* Increased margin for arrow space */
    /* 3 × (200px height + 10px gap) */
    overflow: hidden;
    height: 630px;
}

.carousel-wrapper-2 {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease;
    gap: 10px;
    width: 100%;
}

.turnkey-head p,
.aboutus-head p,
.services-head p,
.approach-head p,
.section-head p,
.cta-left p,
.project-head p,
.sa-p {
    font-size: 12px !important;
}

/* Masonry Gallery Lightbox Styles */
.lightbox {
    position: fixed;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999999;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
}

.lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    padding: 15px;
    user-select: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    transition: background 0.3s;
}

.lightbox-nav:hover {
    background: rgba(0, 0, 0, 0.6);
}

.lightbox-prev {
    left: -60px;
}

.lightbox-next {
    right: -60px;
}

@media (max-width: 768px) {
    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-close {
        top: -40px;
        right: 10px;
    }
}

.services-car-container {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 200px;
}

.services-car-img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    opacity: 0.5;
    display: block;
}

.bg-dt {
    background-color: hwb(180 12% 82%) !important;
}

.services-car-h3 {
    position: absolute;
    display: inline;
    font-size: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    transition: 0.3s ease-in-out all;
}

.services-car-h3:hover {
    color: #9a8b74 !important;
}

.carousel-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 30px;
    background: linear-gradient(rgba(0, 0, 0, 0.531), black);
    border: none;
    cursor: pointer;
    z-index: 9999999;
    /* Ensure above other elements */
    font-size: 20px;
    line-height: 40px;
    text-align: center;
}

.up-arrow {
    top: 0;
    /* Inside container, near top */

}

.down-arrow {
    bottom: 0;
    /* Inside container, near bottom */
}

.carousel-dots {
    position: absolute;
    bottom: -40px;
    /* Below the carousel */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
    z-index: 20;
    /* Ensure visible */
}

.dot {
    width: 10px;
    /* Slightly larger for visibility */
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: #9a8b74;
}

.services-wrapper-2 {
    margin: 10px 0;
    display: flex;
    align-items: center;
    /* Vertically center the buttons and carousel */
    max-width: 100%;
    /* Ensure it fits within its container */
    position: relative;
}

.services-carousel-container-2 {
    display: flex;
    gap: 10px;
    /* Space between carousel items */
    flex: 1;
    /* Allow carousel to take available space */

}

.service-card {
    position: relative;
}

.service-image {
    opacity: 0.6;
    height: 200px;
    width: 363.33px;
    object-fit: cover;
}

.service-title {
    position: absolute;
    z-index: 999;
    bottom: 10px;
    left: 10px;
    color: white;
    letter-spacing: 3px;
    margin: 0;
}

.service-link {
    text-decoration: none;
    display: block;
}

#services-left,
#services-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    background-color: transparent;
    border: none;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#services-left {
    left: -60px;
}

#services-right {
    right: -60px;
}

#services-left:hover,
#services-right:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
    border-color: #ddd;
}

#services-left:active,
#services-right:active {
    transform: translateY(-50%) scale(0.95);
}

#services-left:disabled,
#services-right:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#services-left:focus,
#services-right:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

#services-left::before {
    content: "◀";
    /* Left arrow */
}

#services-right::after {
    content: "▶";
    /* Right arrow */
}

#services-left:disabled,
#services-right:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cta-section {
    position: relative;
    background-image: url(../img/pool-water-background.jpeg);
    width: 100%;
    height: 400px;
    background-position: center;
    background-size: cover;
    display: flex;
    /* Add flex to the container */
    align-items: center;
    /* Center the row vertically */
}

.cta-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(180, 29%, 10%, 0.92);
    z-index: 1;
}

.cta-section>* {
    position: relative;
    z-index: 2;
}

.row- {
    display: flex;
    align-items: center;
    /* Vertically center items within the row */
    justify-content: space-between;
    width: 100%;
    /* Ensure it spans the container */
    max-height: 100%;
    /* Prevent overflow beyond 400px */
}

.line-2 {
    height: 180px;
    width: 1px;
    background-color: #5b7b8a;
}

.blue {
    color: #5b7b8a;
}

.cta-left {
    display: flex;
    flex-direction: column;
    gap: 2em;
    /* Remove fixed height to allow natural centering */
    /* height: 400px; */
}

.cta-right {
    display: flex;
    align-items: center;
    gap: 1.5em;
    /* Remove fixed height to allow natural centering */
    /* height: 400px; */
}

.cnt-btn {
    border: 2px solid #5b7b8a;
    padding: 8px 16px;
    font-size: 12px;
    color: #5b7b8a;
    background-color: transparent;
    transition: 0.3s ease-in-out all;
}


.projects-section {
    background-color: #080707cb !important;
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%) !important;
    background-size: 100vw 50% !important;
    background-position: top left, bottom left !important;
    background-repeat: repeat-x !important;
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.projects-section::after {
    content: '';
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    background-image: url(../img/leaf.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}



.project-head h2,
.project-head p {
    padding: 0;
    margin: 0;
}

.project-text p.text-white {
    color: var(--forest-green) !important;
}

.project-text h3 {
    font-size: 45px;
    color: transparent !important;
    -webkit-text-stroke: 1.5px var(--sandstone) !important;
    text-shadow: none !important;
    padding: 0;
    margin: 0;
}

.project-text .p-b {
    margin-top: -24px;
}

.project-text .p-t {
    margin-top: -24px;
}

.projects-body {
    margin-top: 50px;
    z-index: 100 !important;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.project-img {
    height: 600px;
    width: 270px;
    position: relative;
    z-index: 100 !important;
}

.video-wrapper {
    position: relative;
    height: 600px;
    /* Matches your inline style */
}

.p-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Your original style */
}

.video-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.234);
    /* Your desired dark tint */
    z-index: 1;
    /* Places tint above video */
    pointer-events: none;
    /* Allows interaction with video */
}

.project-top {
    display: flex;
    justify-content: space-between;
}

.project-btn {
    padding: 8px 16px;
    border: 2px solid var(--sandstone);
    color: var(--sandstone);
    background-color: transparent;
    transition: 0.3s ease-in-out all;
    font-size: 10px !important;
}

.design-in-3d-section {
    background-color: black !important;
}

.image-comparison {
    position: relative;
    max-width: 650px;
    /* Set your desired width */
    height: 500px;
    /* Set your desired height */
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    /* Center the container */
    margin-top: 60px !important;
    margin-bottom: 20px !important;
}

.slider-body- {
    max-width: 650px;
    /* Set your desired width */
    margin: 0 auto;
    /* Center the container */

}

.bottom-image,
.top-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures images fill the container without stretching */
}

.top-image {
    clip-path: inset(0 50% 0 0);
    /* Initially shows left half of top image */
}

.slider-line {
    position: absolute;
    top: 0;
    left: 50%;
    /* Starts in the middle */
    width: 2px;
    height: 100%;
    background-color: white;
    border: 1px solid black;
    pointer-events: none;
    /* Allows clicks to pass through to the handle */
}

.slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: white;
    border: 1px solid black;
    border-radius: 50%;
    cursor: ew-resize;
    /* East-West resize cursor */
    z-index: 10;
}

/* Container for each blog card */
#blogs-container {
    margin-top: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

button {
    transition: 0.3s ease-in-out all;
}

.blog-btn {
    margin-top: 40px;
    padding: 8px 16px;
    border: 3px solid var(--forest-green);
    background-color: transparent;
    font-size: 10px;
    transition: 0.3s ease-in-out all;
}

.blog-card2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 31% !important;
    flex-shrink: 0;
    margin-bottom: 30px;
}

.blog-image2 {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 15px;
}

.blog-content2 {
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-title2 {
    font-size: 18px;
    font-family: var(--font-tofino) !important;
    margin: 0;
    color: var(--forest-green) !important;
    font-weight: 700 !important;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 2px;
    height: 42px;
    /* Fixed height for 2 lines to ensure alignment */
    overflow: hidden;
}

/* Summary text in white */
.blog-summary2 {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.white-bg {
    background-color: white !important;
}

/* Read more link styling */
.read-more-link2 {
    display: inline-block;
    color: var(--forest-green) !important;
    text-decoration: none;
    font-weight: 800;
    transition: 0.3s ease;
    font-size: 12px !important;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.read-more-link2:hover {
    color: white !important;
    text-decoration: none;
}

/* Remove width classes from JS since we're forcing a row layout */
.full-width,
.half-width,
.onethird-width {
    width: 30%;
    /* Override JS-added classes to ensure consistency */
}

/* Ensure responsiveness */
@media (max-width: 768px) {
    #blogs-container {
        flex-direction: column;
        /* Stack cards vertically on small screens */
        align-items: center;
        gap: 20px;
    }

    .blog-card2 {
        width: 100% !important;
        /* Full width on smaller screens */
    }

    .full-width,
    .half-width,
    .onethird-width {
        width: 100% !important;
        /* Override for mobile */
    }
}

.impression {
    margin-top: 40px;
    padding: 20px 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    background-color: hwb(180 12% 83%);
}

.imp-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 400px;
}

.imp-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.ob-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.ob-body {
    max-width: 500px;
}

.ob-body p {
    color: white;
}

.ob-img img {
    width: 400px;
    height: 500px;
    object-fit: cover;
}

.small-featuredin {
    display: flex;
    flex-direction: column;
    gap: 30px !important;
}

.box .description {
    color: white;
    font-size: 14px;
}

.floatleft {
    float: left;
    padding-right: 10px;
    padding-bottom: 5px;
}

.box {
    padding: 20px 0;
}

.extra-img {
    background-color: hwb(180 12% 83%);
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.extra-img-logo {
    height: 200px;
    width: 400px;
    object-fit: contain;
}

/* Global Container Standardization */
.container {
    max-width: 1140px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    width: 100%;
}

@media (max-width: 1200px) {
    .container {
        max-width: 960px !important;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px !important;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 540px !important;
    }
}

@media (max-width: 576px) {
    .container {
        max-width: 100% !important;
    }
}

/* Site content width adjustment */
@media (min-width: 1650px) {

    .container,
    .map-container-inner {
        max-width: 1600px !important;
    }

    .turnkey-list {
        gap: 1em !important;
    }

    .turnkey-item {
        max-width: 500px !important;
    }

    .turnkey-item span {
        gap: 30px;

    }

    .turnkey-p {
        font-size: 16px;
        color: var(--sandstone);
    }

    .turnkey-icon {
        height: 40px !important;
        width: 40px !important;
    }

    .pt-pb-60 {
        padding-top: 120px !important;
        padding-bottom: 120px !important;
    }

    .aboutus-img {
        flex: 0 0 50%;
        box-sizing: border-box;
    }

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

    .extra-img {
        height: 500px;
    }

    .extra-img-logo {
        height: 300px;
    }

    .project-img {
        height: 600px;
        width: 375px;
        position: relative;
    }

    .video-wrapper {
        position: relative;
        height: 600px;
        /* Matches your inline style */
    }

    .project-text .p-t {
        margin-top: -24px;
    }

    #partners-carousel {
        display: flex;
        animation: scroll 40s linear infinite;
        /* Adjust duration for speed */
    }

    .testimonials-section {
        height: 900px;
    }

    .service-image {
        opacity: 0.6;
        height: 250px !important;
        width: 515.33px !important;
        object-fit: cover;
    }

    .service-img-lg {
        height: 250px !important;
        width: 1050px !important;
        object-fit: cover;
    }

    .service-img {
        height: 250px !important;
        width: 515.33px !important;
        object-fit: cover;
    }
}

/* --- Premium Redesigned Footer --- */
.site-footer {
    background-color: #142121 !important;
    /* Premium dark teal matching reference image */
    padding: 100px 0 60px !important;
    color: var(--forest-green);
    font-family: var(--font-tofino);
    border-top: 1px solid rgba(154, 139, 116, 0.1);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 2fr 0.8fr;
    gap: 80px;
}

.footer-col-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 450px;
}

.footer-logo img {
    max-width: 320px;
    height: auto;
}

.footer-contact-details {
    color: var(--sandstone);
    font-size: 15px;
    line-height: 1.8;
}

.footer-contact-details p {
    margin-bottom: 20px !important;
    color: var(--sandstone) !important;
}

.footer-social-icons {
    display: flex;
    gap: 20px;
    margin-top: 25px;
}

.footer-social-icons a {
    color: var(--sandstone);
    font-size: 22px;
    transition: transform 0.3s, color 0.3s;
}

.footer-social-icons a:hover {
    color: white;
    transform: translateY(-3px);
}

.footer-sub-heading {
    color: var(--sandstone) !important;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 600;
    margin-bottom: 40px !important;
    font-size: 16px !important;
    border-bottom: 1px solid rgba(154, 139, 116, 0.2);
    padding-bottom: 15px;
    width: 100%;
    display: block;
}

.footer-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 40px;
}

.footer-services-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-services-grid a {
    color: var(--forest-green) !important;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s;
    white-space: nowrap;
}

.footer-services-grid a:hover {
    color: var(--sandstone) !important;
}

.footer-company-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-left: 1px solid rgba(154, 139, 116, 0.1);
    padding-left: 40px;
}

.footer-company-links a {
    color: var(--forest-green) !important;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s;
}

.footer-company-links a:hover {
    color: var(--sandstone) !important;
}

.footer-post-bottom {
    margin-top: 100px;
    padding-top: 40px;
    border-top: 1px solid rgba(154, 139, 116, 0.05);
    text-align: center;
    font-size: 13px;
    color: rgba(94, 114, 93, 0.6);
}

.footer-post-bottom a {
    color: rgba(94, 114, 93, 0.8);
    text-decoration: none;
}

@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-col-info {
        min-height: auto;
        margin-bottom: 40px;
    }

    .footer-company-links {
        border-left: none;
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

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

    .site-footer {
        padding: 60px 20px !important;
    }
}

/* Legacy Map Styles */
.custom-icon {
    background: transparent;
    border: none;
}

/* Popup Styling Refined */
.leaflet-popup-content-wrapper {
    background: #fff !important;
    color: #1A241A !important;
    border-radius: 30px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px rgba(26, 36, 26, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    width: 240px !important;
}

.leaflet-popup-tip-container {
    display: none !important;
}

.popup-container {
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
}

.popup-hero {
    height: 100px;
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}

.popup-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.popup-container:hover .popup-hero img {
    transform: scale(1.05);
}

.popup-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 36, 26, 0.8) 0%, transparent 60%);
}

.popup-title {
    position: absolute;
    bottom: 12px;
    left: 15px;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    font-family: serif;
    font-style: italic;
    margin: 0;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.popup-body {
    padding: 15px 15px;
}

.popup-text {
    font-size: 11px;
    color: rgba(26, 36, 26, 0.65);
    line-height: 1.5;
    margin-bottom: 15px;
    font-weight: 300;
    letter-spacing: 0.01em;
}

.popup-actions {
    display: flex;
    gap: 15px;
}

.btn-primary-map {
    flex: 1;
    background: #1A241A;
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #1A241A;
}

.btn-primary-map:hover {
    background: #2D3A2D;
    border-color: #2D3A2D;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(26, 36, 26, 0.1);
}

.btn-secondary-map {
    flex: 0.8;
    border: 1px solid rgba(154, 139, 116, 0.4);
    color: #9A8B74;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-secondary-map:hover {
    background: rgba(154, 139, 116, 0.05);
    border-color: #9A8B74;
    color: #9A8B74;
}

/* --- Immersive Minimalist Map Section --- */
.map-section-minimalist {
    background: var(--deep-teal);
    padding: 100px 0;
    overflow: hidden;
    font-family: 'Nunito Sans', sans-serif;
    border-top: 1px solid rgba(154, 139, 116, 0.1);
}

.map-container-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.map-header-minimalist {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
    gap: 40px;
}

.map-subtitle {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3em;
    margin-bottom: 12px;
}

.map-main-title {
    font-size: 52px;
    font-weight: 300;
    line-height: 1.1;
    margin: 0;
}

.italic-serif {
    font-style: italic;
    font-family: serif;
}

.map-description {
    color: rgba(26, 36, 26, 0.5);
    font-size: 14px;
    font-weight: 300;
    max-width: 300px;
    margin: 0;
    line-height: 1.6;
}

.map-hero-wrapper {
    position: relative;
    width: 100%;
    height: 600px;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(20, 33, 33, 0.3);
    border: 1px solid rgba(154, 139, 116, 0.3);
    background: #1a241a;
}

.hero-map-element {
    width: 100%;
    height: 100%;
}

.map-overlay-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 100px rgba(26, 36, 26, 0.05);
    z-index: 400;
}

.discovery-pill-container {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 1000;
    width: 100%;
    max-width: 320px;
}

.discovery-pill {
    position: relative;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px;
    box-shadow: 0 20px 40px rgba(26, 36, 26, 0.1);
    display: flex;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.discovery-pill:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 25px 50px rgba(26, 36, 26, 0.15);
}

.discovery-pill input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 0 25px;
    font-size: 14px;
    color: #1A241A;
}

.discovery-pill input::placeholder {
    color: rgba(26, 36, 26, 0.25);
}

.discovery-icon {
    width: 40px;
    height: 40px;
    background: #1A241A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: transform 0.5s ease;
}

.discovery-pill:hover .discovery-icon {
    transform: rotate(15deg);
}

.discovery-icon svg {
    width: 18px;
    height: 18px;
}

.map-reset-btn {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 15px 30px rgba(26, 36, 26, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A241A;
    cursor: pointer;
    transition: all 0.4s ease;
    transform: scale(0.9);
}

.map-reset-btn:hover {
    background: #1A241A;
    color: #fff;
    transform: scale(1);
}

.map-reset-btn svg {
    width: 22px;
    height: 22px;
}

/* Popup Styling Refined */
.leaflet-popup-content-wrapper {
    background: #1E3636 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(154, 139, 116, 0.3) !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    width: 240px !important;
}

.leaflet-popup-tip-container {
    display: none !important;
}

.popup-container {
    background: #1E3636;
    border-radius: 0;
    overflow: hidden;
}

.popup-hero {
    height: 100px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1E3636 0%, #2a4a3a 50%, #1E3636 100%);
}

.popup-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.popup-container:hover .popup-hero img {
    transform: scale(1.05);
}

.popup-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #1E3636 0%, transparent 60%);
}

.popup-title {
    position: absolute;
    bottom: 12px;
    left: 15px;
    color: #9A8B74;
    font-size: 18px;
    font-weight: 300;
    font-family: serif;
    font-style: italic;
    margin: 0;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.popup-body {
    padding: 15px 15px;
}

.popup-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin-bottom: 15px;
    font-weight: 300;
    letter-spacing: 0.01em;
}

.popup-actions {
    display: flex;
    gap: 15px;
}

.btn-primary-map {
    flex: 1;
    background: transparent;
    color: #9A8B74 !important;
    text-decoration: none !important;
    text-align: center;
    padding: 8px 10px;
    border-radius: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: 0.3s ease-in-out all;
    border: 2px solid #9A8B74;
    font-family: "Tofino", sans-serif;
}

.btn-primary-map:hover {
    background: #9A8B74;
    color: #fff !important;
    transform: scale(1.05);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.btn-secondary-map {
    flex: 0.8;
    border: 2px solid #9A8B74;
    color: #9A8B74 !important;
    text-decoration: none !important;
    text-align: center;
    padding: 8px 10px;
    border-radius: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: 0.3s ease-in-out all;
    background: transparent;
    font-family: "Tofino", sans-serif;
}

.btn-secondary-map:hover {
    background: #9A8B74;
    color: #fff !important;
    transform: scale(1.05);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .map-section-minimalist {
        padding: 60px 0;
    }

    .map-header-minimalist {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        margin-bottom: 30px;
    }

    .map-main-title {
        font-size: 25px;
    }

    .map-context-content h2 {

        text-align: center !important;
    }

    .map-context-content span {
        font-size: 1rem !important;
        text-align: center !important;
    }

    .map-context-content p {
        text-align: center;
        margin-bottom: 25px !important;
    }

    .map-context-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .map-hero-wrapper {
        height: 400px;
        border-radius: 30px;
    }

    .discovery-pill-container {
        top: 20px;
        left: 20px;
        max-width: calc(100% - 40px);
    }

    .leaflet-popup-content {
        width: 280px !important;
    }


}

.btn-sandstone {
    background-color: transparent;
    color: var(--sandstone);
    text-decoration: none;
    text-align: center;
    padding: 8px 16px !important;
    border-radius: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    transition: 0.3s ease-in-out all;
    border: 2px solid var(--sandstone);
    cursor: pointer;
    font-family: "Tofino", sans-serif;
}

.btn-sandstone:hover {
    background-color: var(--sandstone);
    border-color: var(--sandstone);
    color: #fff !important;
    text-decoration: none;
}

/* Modern Featured In Redesign */
.featured-in-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 50px 0;
}

.featured-card {
    flex: 0 0 calc(33.333% - 20px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(154, 139, 116, 0.1);
    padding: 40px 30px;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 480px;
}

.featured-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.05);
    border-color: #9a8b74;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.featured-logo-wrap {
    height: 140px;
    width: 100%;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-logo-wrap img {
    max-height: 100%;
    max-width: 90%;
    object-fit: contain;
}

.featured-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #fff;
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    opacity: 0.85;
    font-style: normal;
    font-display: swap;
}

@media (max-width: 991px) {
    .featured-card {
        flex: 0 0 calc(50% - 15px);
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .featured-card {
        flex: 0 0 100%;
        max-width: 500px;
    }
}

/* ============================================
   TEMPORARILY HIDDEN PAGE LINKS
   Hide nav/footer links to pages not yet ready.
   Remove this block to restore them.
   ============================================ */
/* Desktop nav: direct <a> tags inside dropdowns/flyouts */
.dropdown-content>a[href*="commercial-soil-cells.html"],
.dropdown-content>a[href*="pool-restoration.html"],
.dropdown-content>a[href*="caulking.html"],
.dropdown-content>a[href*="fixtures-accessories.html"],
.flyout-menu>a[href*="commercial-soil-cells.html"],
.flyout-menu>a[href*="pool-restoration.html"],
.flyout-menu>a[href*="caulking.html"],
.flyout-menu>a[href*="fixtures-accessories.html"] {
    display: none !important;
}

/* Mobile nav: hide parent <li> so no empty bullets */
.mobile-flyout>li:has(> a[href*="commercial-soil-cells.html"]),
.mobile-flyout>li:has(> a[href*="pool-restoration.html"]),
.mobile-flyout>li:has(> a[href*="caulking.html"]),
.mobile-flyout>li:has(> a[href*="fixtures-accessories.html"]),
.mobile-dropdown>li:has(> a[href*="commercial-soil-cells.html"]),
.mobile-dropdown>li:has(> a[href*="pool-restoration.html"]),
.mobile-dropdown>li:has(> a[href*="caulking.html"]),
.mobile-dropdown>li:has(> a[href*="fixtures-accessories.html"]) {
    display: none !important;
}

/* Footer: hide parent <li> in footer link lists */
.footer-company-links>li:has(> a[href*="commercial-soil-cells.html"]),
.footer-company-links>li:has(> a[href*="pool-restoration.html"]),
.footer-company-links>li:has(> a[href*="caulking.html"]),
.footer-company-links>li:has(> a[href*="fixtures-accessories.html"]) {
    display: none !important;
}