/* =========================================================
        ROOT / GLOBAL
     ========================================================= */

 :root {
     --sage: #8a9880;
     --sage-dark: #74836a;
     --charcoal: #3b3b3a;
     --off-white: #f1eee8;
     --white: #ffffff;
     --black: #202020;

     --container: 1380px;
     --header-height: 116px;

     --heading-font: "Manrope", sans-serif;
     --body-font: "Inter", sans-serif;

     --transition: 0.3s ease;
     --radius: 6px;
 }

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    color: var(--charcoal);
    background: var(--off-white);
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

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

/* Reusable main heading */
.main-heading {
    font-family: var(--heading-font);
    font-weight: 800;
    color: var(--charcoal);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.section {
    position: relative;
    width: 100%;
}
     .partner-logo {
         text-align: center;
         display: flex !important;
         justify-content: center;
         align-items: center;
         padding: 15px;
         margin: 15px 0;
     }
     .partner-logo img {
         height: 60px
     }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--sage);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 54px;
    padding: 0 30px;

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

    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    background: var(--sage);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--sage-dark) !important;
    transform: translateY(-2px);
    border-color: var(--sage-dark) !important;
}


/* =========================================================
   TOP OFFER BAR
========================================================= */

.offer-bar {
    min-height: 47px;
    padding: 10px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background: var(--sage);
    color: var(--white);

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
}

.offer-bar i {
    font-size: 18px;
}


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

.site-header {
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.96);

    display: flex;
    align-items: center;

    position: relative;
    z-index: 100;
}

.header-inner {
    width: min(100% - 48px, 1440px);
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Logo */

.logo {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}
     .logo img {
         height: 64px;
     }

/* Navigation */

.main-nav {
    display: flex;
    align-items: center;
    gap: 42px;
    margin-left: auto;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 16px;
    font-weight: 600;
    color: var(--charcoal);

    transition: var(--transition);
}

.nav-link:hover {
    color: var(--sage);
}

.nav-link i {
    font-size: 11px;
}


/* Header CTA */

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-btn {
    min-height: 54px;
    padding: 0 26px;
}

.phone-btn {
    width: 52px;
    height: 52px;
justify-content: center;
    display: grid;
    place-items: center;

    border: 1.5px solid var(--sage);
    border-radius: 50%;

    color: var(--sage);
    font-size: 20px;

    transition: var(--transition);
}

.phone-btn:hover {
    background: var(--sage);
    color: var(--white);
}


/* Mobile menu */

.mobile-toggle {
    display: none;

    width: 48px;
    height: 48px;

    border: 1px solid var(--sage);
    background: transparent;
    color: var(--charcoal);

    cursor: pointer;
}

     /* =========================================================
        HEADER - MOBILE MENU
     ========================================================= */

     .mobile-toggle {

         display: none;

         width: 44px;
         height: 44px;

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

         padding: 0;

         border: 1px solid rgba(59, 59, 58, 0.15);
         border-radius: 50%;

         background: transparent;

         color: var(--charcoal);

         font-size: 20px;

         cursor: pointer;

         transition:
                 background 0.25s ease,
                 color 0.25s ease,
                 border-color 0.25s ease;

     }


     .mobile-toggle:hover {

         background: var(--sage);

         color: var(--white);

         border-color: var(--sage);

     }


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

     @media (max-width: 900px) {

         .site-header {

             position: relative;

             z-index: 1000;

         }


         .header-inner {

             position: relative;

         }


         /* Hide desktop CTA on mobile */

         .header-btn {

             display: none;

         }


         /* Phone remains visible */

         .phone-btn {

             display: flex;

         }


         /* Show hamburger */

         .mobile-toggle {

             display: flex;

         }


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

         .main-nav {

             position: absolute;

             top: calc(100% + 12px);

             left: 0;

             right: 0;

             z-index: 999;

             display: flex;

             flex-direction: column;

             align-items: stretch;

             gap: 0;

             padding: 10px;

             background: var(--white);

             border: 1px solid rgba(59, 59, 58, 0.08);

             border-radius: 12px;

             box-shadow:
                     0 15px 40px rgba(59, 59, 58, 0.12);

             /* Hidden by default */

             opacity: 0;

             visibility: hidden;

             pointer-events: none;

             transform: translateY(-10px);

             transition:
                     opacity 0.25s ease,
                     visibility 0.25s ease,
                     transform 0.25s ease;

         }


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

         .main-nav.is-open {

             opacity: 1;

             visibility: visible;

             pointer-events: auto;

             transform: translateY(0);

         }


         /* =====================================================
            MOBILE NAV LINKS
         ===================================================== */

         .main-nav .nav-link {

             width: 100%;

             min-height: 48px;

             display: flex;

             align-items: center;

             justify-content: space-between;

             padding: 12px 15px;

             border-radius: 8px;

             font-family: var(--body-font);

             font-size: 14px;

             font-weight: 500;

             color: var(--charcoal);

             text-decoration: none;

         }


         .main-nav .nav-link:hover {

             background: rgba(138, 152, 128, 0.10);

             color: var(--sage);

         }


         .nav-arrow {

             font-size: 11px;

         }

     }


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

     @media (max-width: 600px) {

         .header-actions {

             gap: 8px;

         }


         .phone-btn {

             width: 40px;

             height: 40px;

         }


         .mobile-toggle {

             width: 40px;

             height: 40px;

             font-size: 18px;

         }


         .main-nav {

             top: calc(100% + 8px);

             left: 12px;

             right: 12px;

         }

     }



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

.hero {
    min-height: calc(100vh - var(--header-height) - 47px);

    position: relative;
    isolation: isolate;

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

    overflow: hidden;
}


     .hero {
         position: relative;
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;
     }
     .hero::before {
         content: "";
         position: absolute;
         inset: 0;
         background: #fff;
         z-index: -1;
         opacity: 0.8;
     }

.hero-content {
    width: min(100% - 40px, 850px);

    padding: 120px 0 100px;

    text-align: center;
    margin-inline: auto;
}

.hero-title {
    font-size: clamp(52px, 6vw, 86px);
    max-width: 800px;
    margin-inline: auto;
}

.hero-title .dark {
    display: block;
    color: var(--black);
}

.hero-title .green {
    display: block;
    color: var(--sage);
}

.hero-description {
    max-width: 650px;
    margin: 25px auto 18px;

    font-size: clamp(18px, 2vw, 25px);
    font-weight: 500;
    line-height: 1.4;

    color: var(--charcoal);
}

.hero-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    margin-bottom: 22px;

    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: 700;
}

.hero-location i {
    color: var(--sage);
    font-size: 25px;
}

.hero-cta {
    min-width: 460px;
    min-height: 80px;

    font-size: 28px;
    font-weight: 700;

    border-radius: 8px;
}


/* Hero benefits */

.hero-benefits {
    margin-top: 48px;

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

    gap: 0;
}

.benefit {
    min-width: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    padding: 0 38px;

    text-align: left;
}

.benefit + .benefit {
    border-left: 1px solid rgba(59, 59, 58, 0.35);
}

.benefit-icon {
    width: 78px;
    height: 78px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: var(--sage);
    color: var(--white);

    font-size: 31px;
}

.benefit-text {
    font-family: var(--heading-font);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--charcoal);
}


/* =========================================================
   NEXT SECTION PLACEHOLDER
   This can be replaced when you send the next section image.
========================================================= */

.section-placeholder {
    min-height: 500px;

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

    background: var(--off-white);
}

.section-placeholder-content {
    text-align: center;
}

.section-placeholder .main-heading {
    font-size: clamp(38px, 5vw, 64px);
    margin-bottom: 20px;
}

.section-placeholder p {
    max-width: 600px;
    margin-inline: auto;
    color: #666;
}


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

@media (max-width: 1200px) {

    .main-nav {
        gap: 24px;
    }

    .logo-name {
        font-size: 22px;
    }

    .header-btn {
        padding: 0 20px;
    }

    .benefit {
        min-width: 220px;
        padding: 0 24px;
    }

    .benefit-icon {
        width: 65px;
        height: 65px;
        font-size: 26px;
    }

    .benefit-text {
        font-size: 16px;
    }
}


@media (max-width: 1024px) {


    .header-actions .header-btn {
        display: none;
    }

    .mobile-toggle {
        display: grid;
        place-items: center;
    }

    .header-actions {
        margin-left: auto;
    }

    .hero {
        min-height: 800px;
    }

    .hero-content {
        padding-top: 100px;
    }

    .hero-cta {
        min-width: 380px;
    }

    .hero-benefits {
        flex-wrap: wrap;
        row-gap: 25px;
    }

    .benefit {
        min-width: 30%;
    }
}


@media (max-width: 767px) {

    .header-inner {
        width: min(100% - 32px, var(--container));
    }

    .offer-bar {
        min-height: 42px;
        padding: 8px 12px;

        font-size: 11px;
    }

    .site-header {
        height: 88px;
    }
    .logo img {
        height: 30px;
    }
    .logo {
        gap: 10px;
    }


    .hero {
        min-height: 780px;

        background-position: center;
    }

    .hero-content {
        width: min(100% - 30px, 650px);
        padding: 70px 0 60px;
    }

    .hero-title {
        font-size: clamp(42px, 12vw, 62px);
    }

    .hero-description {
        font-size: 17px;
        margin-top: 20px;
    }

    .hero-location {
        font-size: 19px;
    }

    .hero-cta {
        min-width: 100%;
        min-height: 62px;
        font-size: 19px;
    }

    .hero-benefits {
        margin-top: 38px;
        flex-direction: column;
        gap: 20px;
    }

    .benefit {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        padding: 0;
    }

    .benefit + .benefit {
        border-left: 0;
    }

    .benefit-icon {
        width: 58px;
        height: 58px;
        font-size: 23px;
    }

    .benefit-text {
        font-size: 16px;
    }
}


@media (max-width: 420px) {

    .logo-tagline {
        display: none;
    }

    .logo-name {
        font-size: 15px;
    }

    .hero-title {
        font-size: 41px;
    }

    .hero-description {
        font-size: 16px;
    }
}

     /* =========================================================
        SECTION 02
        YOUR HOME DESERVES BETTER FLOORING
     ========================================================= */

     .flooring-benefits-section {
         padding-top: 60px;
         padding-bottom: 60px;
         background: var(--white);

     }


     /* =========================================================
        SECTION HEADING
     ========================================================= */

      .section-heading {

         display: flex;

         flex-direction: column;

         align-items: center;

         justify-content: center;

         text-align: center;

         margin-bottom: 32px;

     }


      .section-heading-line {

         display: block;

         width: 30px;

         height: 2px;

         margin-bottom: 8px;

         background: var(--sage);

     }


      .section-title {

         font-size: 25px;

         font-weight: 700;

         line-height: 1.2;

         letter-spacing: -0.02em;

     }


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

     .flooring-benefits-grid {

         display: grid;

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

         gap: 18px;

     }


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

     .flooring-benefit-card {

         background: var(--off-white);

         border-radius: 5px;

         overflow: hidden;

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

     }


     .flooring-benefit-card:hover {

         transform: translateY(-5px);

         box-shadow:
                 0 12px 30px rgba(59, 59, 58, 0.08);

     }


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

     .flooring-benefit-image {

         position: relative;

         height: 150px;

     }


     .flooring-benefit-image img {

         width: 100%;

         height: 100%;

         object-fit: cover;

         display: block;

     }


     /* =========================================================
        BENEFIT ROUND ICON
     ========================================================= */

     .flooring-benefit-icon {

         position: absolute;

         left: 50%;

         bottom: -24px;

         transform: translateX(-50%);

         width: 50px;

         height: 50px;

         display: flex;

         align-items: center;

         justify-content: center;

         background: var(--sage);

         color: var(--white);

         border: 3px solid var(--white);

         border-radius: 50%;

         font-size: 19px;

     }


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

     .flooring-benefit-content {

         padding: 38px 20px 25px;

         text-align: center;

     }


     .flooring-benefit-title {

         margin: 0 0 10px;

         font-family: var(--heading-font);

         font-size: 20px;

         font-weight: 700;

         line-height: 1.35;

         color: var(--charcoal);

     }
     .flooring-benefit-text {
         max-width: 100%;
         margin: 0 auto;
         font-family: var(--body-font);
         font-size: 16px;
         font-weight: 400;
         line-height: 1.65;
         color: var(--charcoal);
     }


     /* =========================================================
        SECTION 02 — TABLET
     ========================================================= */

     @media (max-width: 1000px) {

         .flooring-benefits-grid {

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

             gap: 18px;

         }

     }


     /* =========================================================
        SECTION 02 — MOBILE
     ========================================================= */

     @media (max-width: 600px) {

         .flooring-benefits-section {

             padding-top: 50px;

             padding-bottom: 35px;

         }


         .flooring-benefits-section .section-title {

             font-size: 20px;

         }


         .flooring-benefits-grid {

             grid-template-columns: 1fr;

             gap: 16px;

         }


         .flooring-benefit-image {

             height: 190px;

         }


         .flooring-benefit-content {

             padding: 38px 25px 28px;

         }

     }



     /* =========================================================
        SECTION 03
        FROM OLD FLOOR TO NEW FLOOR
     ========================================================= */

     .flooring-process-section {

         padding-top: 0px;

         padding-bottom: 60px;

         background: var(--white);

     }


     /* =========================================================
        SECTION HEADING
     ========================================================= */

     .flooring-process-section .section-heading {

         display: flex;

         flex-direction: column;

         align-items: center;

         justify-content: center;

         text-align: center;

         margin-bottom: 30px;

     }


     .flooring-process-section .section-heading-line {

         width: 30px;

         height: 2px;

         margin-bottom: 8px;

         background: var(--sage);

     }


     .flooring-process-section .section-title {

         font-size: 25px;

         font-weight: 700;

         line-height: 1.18;

     }


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

     .flooring-process-grid {

         display: grid;

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

         gap: 0;

     }


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

     .flooring-process-item {

         position: relative;

         padding: 0 20px;

         text-align: center;

     }


     /* =========================================================
        ICON WRAPPER
     ========================================================= */

     .flooring-process-icon-wrap {

         position: relative;

         display: flex;

         align-items: center;

         justify-content: center;

         min-height: 78px;

     }


     /* =========================================================
        PROCESS ICON
     ========================================================= */

     .flooring-process-icon {

         width: 72px;

         height: 72px;

         display: flex;

         align-items: center;

         justify-content: center;

         border: 1.5px solid #8a98805e;

         border-radius: 50%;

         background: var(--white);

         color: var(--sage);

         font-size: 25px;

         transition: var(--transition);

     }


     .flooring-process-item:hover .flooring-process-icon {

         color: var(--white);

         background: var(--sage);

         border-color: var(--sage);

     }


     /* =========================================================
        PROCESS ARROW
     ========================================================= */

     .flooring-process-arrow {

         position: absolute;

         top: 50%;

         right: -4px;

         transform: translateY(-50%);

         color: var(--sage);

         font-size: 17px;

     }


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

     .flooring-process-number {

         display: block;

         margin-top: 10px;

         margin-bottom: 4px;

         font-family: var(--heading-font);

         font-size: 14px;

         font-weight: 600;

         color: var(--charcoal);

     }


     /* =========================================================
        PROCESS TITLE
     ========================================================= */
     .flooring-process-title {
         margin: 0 0 10px;
         font-family: var(--heading-font);
         font-size: 18px;
         font-weight: 700;
         line-height: 1.35;
         color: var(--charcoal);
     }


     /* =========================================================
        PROCESS DESCRIPTION
     ========================================================= */

     .flooring-process-text {

         max-width: 100%;

         margin: 0 auto;

         font-family: var(--body-font);

         font-size: 12px;

         font-weight: 400;

         line-height: 1.65;

         color: var(--charcoal);

     }


     /* =========================================================
        SECTION 03 — TABLET
     ========================================================= */

     @media (max-width: 1000px) {

         .flooring-process-grid {

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

             row-gap: 45px;

         }


         .flooring-process-item:nth-child(3)
         .flooring-process-arrow {

             display: none;

         }


         .flooring-process-item:nth-child(4)::before {

             content: "";

             position: absolute;

             top: -22px;

             left: 10%;

             right: 10%;

             height: 1px;

             background: var(--border-light);

         }

     }


     /* =========================================================
        SECTION 03 — MOBILE
     ========================================================= */

     @media (max-width: 600px) {

         .flooring-process-section .section-title {

             font-size: 20px;

         }


         .flooring-process-grid {

             grid-template-columns: 1fr;

             gap: 38px;

         }


         .flooring-process-item {

             padding: 0 15px;

         }


         .flooring-process-arrow {

             display: none;

         }


         .flooring-process-item:nth-child(4)::before {

             display: none;

         }

         .flooring-process-text {
             max-width: 100%;
             font-size: 16px;
         }

     }


     /* =========================================================
        SECTION 04
        WHAT OUR CUSTOMERS SAY
     ========================================================= */

     .customer-reviews-section {
         padding-top: 60px;
         padding-bottom: 60px;
         background: #f1eee8;
     }


     /* =========================================================
        SECTION HEADING
     ========================================================= */

     .customer-reviews-section .section-heading {

         display: flex;

         flex-direction: column;

         align-items: center;

         justify-content: center;

         text-align: center;

         margin-bottom: 22px;

     }


     .customer-reviews-section .section-heading-line {

         width: 30px;

         height: 2px;

         margin-bottom: 8px;

         background: var(--sage);

     }


     .customer-reviews-section .section-title {

         font-size: 25px;

         font-weight: 700;

         line-height: 1.2;

     }


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

     .customer-reviews-grid {

         display: grid;

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

         gap: 16px;

     }


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

     .customer-review-card {

         min-height: 185px;

         padding: 18px 18px 17px;

         background: var(--white);

         border: 1px solid rgba(59, 59, 58, 0.08);

         border-radius: 5px;

         box-shadow:
                 0 5px 20px rgba(59, 59, 58, 0.04);

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

     }


     .customer-review-card:hover {

         transform: translateY(-4px);

         box-shadow:
                 0 10px 28px rgba(59, 59, 58, 0.08);

     }


     /* =========================================================
        REVIEW HEADER
     ========================================================= */

     .customer-review-header {

         display: flex;

         align-items: flex-start;

         justify-content: space-between;

         gap: 10px;

         margin-bottom: 13px;

     }


     /* =========================================================
        REVIEW USER
     ========================================================= */

     .customer-review-user {

         display: flex;

         align-items: center;

         gap: 9px;

         min-width: 0;

     }


     /* =========================================================
        REVIEW AVATAR
     ========================================================= */

     .customer-review-avatar {

         width: 38px;

         height: 38px;

         flex-shrink: 0;

         overflow: hidden;

         border-radius: 50%;

         background: var(--off-white);

     }


     .customer-review-avatar img {

         width: 100%;

         height: 100%;

         object-fit: cover;

     }


     /* =========================================================
        USER INFO
     ========================================================= */

     .customer-review-user-info {

         min-width: 0;

     }


     .customer-review-name {

         margin: 0 0 10px;
         font-family: var(--heading-font);
         font-size: 16px;
         font-weight: 700;
         line-height: 1.2;
         color: var(--charcoal);

     }


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

     .customer-review-stars {

         display: flex;

         align-items: center;

         gap: 2px;

         color: #dba52d;

         font-size: 10px;

     }


     /* =========================================================
        GOOGLE ICON
     ========================================================= */

     .customer-review-google  img{
         height:24px ;

     }


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

     .customer-review-text {

         margin: 0 0 12px;

         font-family: var(--body-font);

         font-size: 14px;

         font-weight: 400;

         line-height: 1.6;

         color: var(--charcoal);

     }


     /* =========================================================
        LOCATION
     ========================================================= */

     .customer-review-location {

         display: block;

         font-family: var(--body-font);

         font-size: 16px;

         font-weight: 500;

         color: var(--charcoal);

     }


     /* =========================================================
        GOOGLE RATING
     ========================================================= */

     .customer-google-rating {

         display: flex;

         align-items: center;

         justify-content: center;

         gap: 5px;

         margin-top: 15px;

         font-family: var(--body-font);

         font-size: 16px;

         color: var(--charcoal);

         text-align: center;

     }


     .customer-google-rating strong {

         font-weight: 700;

         color: var(--charcoal);

     }


     /* =========================================================
        SECTION 04 — TABLET
     ========================================================= */

     @media (max-width: 1000px) {

         .customer-reviews-grid {

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

             gap: 16px;

         }

     }


     /* =========================================================
        SECTION 04 — MOBILE
     ========================================================= */

     @media (max-width: 600px) {


         .customer-reviews-section .section-title {

             font-size: 20px;

         }


         .customer-reviews-grid {

             grid-template-columns: 1fr;

             gap: 14px;

         }


         .customer-review-card {

             min-height: auto;

             padding: 18px;

         }


         .customer-review-text {

             font-size: 12px;

         }


         .customer-google-rating {

             flex-wrap: wrap;

             font-size: 10px;
         }

     }


     /* =========================================================
   SECTION 05
   A BETTER FLOORING EXPERIENCE
========================================================= */

     .better-flooring-section {
         padding-top: 60px;
         padding-bottom: 60px;
         background: var(--white);

     }



     /* =========================================================
        FEATURE ROW
     ========================================================= */

     .better-flooring-row {

         display: grid;

         grid-template-columns: 1fr 1fr;

         align-items: center;

         gap: 30px;

         margin-bottom: 28px;

     }


     /* =========================================================
        SECOND ROW
     ========================================================= */

     .better-flooring-row-reverse {

         margin-bottom: 0;

     }


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

     .better-flooring-image {

         width: 100%;

         overflow: hidden;

         border-radius: 3px;

     }


     .better-flooring-image img {
         display: block;
         width: 100%;
         height: 400px;
         object-fit: cover;
         border-radius: 12px;

     }


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

     .better-flooring-content {

         max-width: 470px;

     }


     .better-flooring-title {

         margin: 0 0 12px;

         font-family: var(--heading-font);

         font-size: 30px;

         font-weight: 700;

         line-height: 1.3;

         color: var(--charcoal);

     }


     .better-flooring-text {

         margin: 0 0 14px;

         font-family: var(--body-font);

         font-size: 16px;

         font-weight: 400;

         line-height: 1.6;

         color: var(--charcoal);

     }


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

     .better-flooring-btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         min-height: 50px;
         padding: 0 20px;
         border: 1px solid var(--sage);
         border-radius: 6px;
         background: transparent;
         color: var(--sage);
         font-family: var(--body-font);
         font-size: 14px;
         font-weight: 600;
         line-height: 1;
         text-decoration: none;
         transition: background 0.25s ease, color 0.25s ease;
     }


     .better-flooring-btn:hover {

         background: var(--sage);

         color: var(--white);

     }


     /* =========================================================
        DESKTOP POSITIONING
        Screenshot has alternating image/content alignment
     ========================================================= */

     .better-flooring-row:nth-child(2) .better-flooring-image {

         order: 1;

     }


     .better-flooring-row:nth-child(2) .better-flooring-content {

         order: 2;

     }


     .better-flooring-row:nth-child(3) .better-flooring-image {

         order: 2;

     }


     .better-flooring-row:nth-child(3) .better-flooring-content {

         order: 1;

     }


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

     @media (max-width: 900px) {


         .better-flooring-row {

             gap: 24px;

         }


         .better-flooring-image img {

             height: 200px;

         }


         .better-flooring-content {

             max-width: 100%;

         }

     }


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

     @media (max-width: 600px) {


         .better-flooring-heading {

             margin-bottom: 25px;

         }


         .better-flooring-heading .main-heading {

             font-size: 20px;

         }


         .better-flooring-row {

             grid-template-columns: 1fr;

             gap: 18px;

             margin-bottom: 40px;

         }


         .better-flooring-row:nth-child(2) .better-flooring-image,
         .better-flooring-row:nth-child(2) .better-flooring-content,
         .better-flooring-row:nth-child(3) .better-flooring-image,
         .better-flooring-row:nth-child(3) .better-flooring-content {

             order: initial;

         }


         .better-flooring-image img {

             height: 230px;

         }


         .better-flooring-content {

             max-width: 100%;

         }


         .better-flooring-title {

             font-size: 16px;

         }


         .better-flooring-text {

             font-size: 12px;

             line-height: 1.65;

         }

     }



     /* =========================================================
        SECTION 06
        SHOP OUR BESTSELLERS
     ========================================================= */

     .shop-bestsellers-section {
         padding-top: 60px;
         padding-bottom: 60px;
         background: var(--off-white);

     }


     /* =========================================================
        SECTION HEADING
     ========================================================= */

     .section-heading {

         display: flex;

         align-items: center;

         justify-content: center;

         text-align: center;

         margin-bottom: 42px;

     }


     .section-heading .main-heading {

         margin: 0;

         font-size: 34px;

         font-weight: 700;

         line-height: 1.15;

         color: var(--charcoal);

     }


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

     .shop-bestsellers-grid {

         display: grid;

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

         gap: 28px;

         max-width: 880px;

         margin: 0 auto;

     }


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

     .bestseller-card {

         overflow: hidden;

         background: var(--white);

         border-radius: 7px;

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

     }


     .bestseller-card:hover {

         transform: translateY(-5px);

         box-shadow:
                 0 15px 35px rgba(59, 59, 58, 0.10);

     }


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

     .bestseller-image {

         width: 100%;

         height: 274px;

         overflow: hidden;

     }


     .bestseller-image img {

         display: block;

         width: 100%;

         height: 100%;

         object-fit: cover;

         transition: transform 0.4s ease;

     }


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

         transform: scale(1.03);

     }


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

     .bestseller-content {

         min-height: 140px;

         padding: 21px 15px 25px;

         text-align: center;

     }


     /* =========================================================
        PRODUCT TITLE
     ========================================================= */

     .bestseller-title {

         margin: 0 0 22px;

         font-family: var(--heading-font);

         font-size: 20px;

         font-weight: 700;

         line-height: 1.12;

         text-decoration: none;
         color: var(--charcoal);

     }


     /* =========================================================
        PRICE
     ========================================================= */

     .bestseller-price {

         display: flex;

         align-items: baseline;

         justify-content: center;

         gap: 4px;

         margin: 0;

         font-family: var(--body-font);

         font-size: 14px;

         font-weight: 600;

         color: var(--charcoal);

     }


     .bestseller-price strong {

         font-size: 15px;

         font-weight: 700;

         color: #e97738;

     }


     .bestseller-price span:last-child {

         color: #e97738;

     }


     .price-from {

         color: var(--charcoal);

     }


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

     .shop-bestsellers-cta {

         display: flex;

         flex-direction: column;

         align-items: center;

         margin-top: 44px;

     }


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

     .shop-bestsellers-btn {

         display: inline-flex;

         align-items: center;

         justify-content: center;

         width: 225px;

         height: 50px;

         border-radius: 7px;

         background: var(--sage);

         color: var(--white);

         font-family: var(--body-font);

         font-size: 14px;

         font-weight: 700;

         text-decoration: none;

         transition:
                 transform 0.25s ease,
                 background 0.25s ease;

     }


     .shop-bestsellers-btn:hover {
         transform: translateY(-2px);
         background: var(--sage-dark);
         color: #fff;
     }


     /* =========================================================
        PAYMENT
     ========================================================= */

     .shop-payment {

         display: flex;

         align-items: center;

         justify-content: center;

         gap: 4px;

         margin-top: 26px;

     }


     .shop-payment-text {

         margin-right: 2px;

         font-family: var(--body-font);

         font-size: 14px;

         font-weight: 500;

         color: var(--charcoal);

     }
     .payment img {
         height: 24px;
     }

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

     @media (max-width: 900px) {


         .shop-bestsellers-heading .main-heading {

             font-size: 30px;

         }


         .shop-bestsellers-grid {

             gap: 18px;

         }


         .bestseller-image {

             height: 230px;

         }


         .bestseller-title {

             font-size: 18px;

         }

     }


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

     @media (max-width: 600px) {

         .shop-bestsellers-section {

             padding-top: 45px;

             padding-bottom: 50px;

         }
         .bestseller-price {
             font-size: 20px;
         }

         .shop-bestsellers-heading {

             margin-bottom: 28px;

         }


         .shop-bestsellers-heading .main-heading {

             font-size: 24px;

         }


         .shop-bestsellers-grid {

             grid-template-columns: 1fr;

             max-width: 380px;

             gap: 18px;

         }


         .bestseller-image {

             height: 260px;

         }


         .bestseller-content {

             min-height: 125px;

         }


         .bestseller-title {

             font-size: 20px;

         }


         .shop-bestsellers-cta {

             margin-top: 32px;

         }


         .shop-bestsellers-btn {

             width: 210px;

             height: 48px;

         }

     }



     /* =========================================================
   SECTION 07
   BOOKING SECTION
========================================================= */

     .booking-section {

         padding-top: 70px;

         padding-bottom: 70px;

         background: var(--off-white);

     }


     .booking-wrapper {

         width: 100%;

         padding: 38px 70px 65px;

         background: var(--white);

         border: 1px solid rgba(59, 59, 58, 0.08);

         border-radius: 6px;

         box-shadow:
                 0 8px 30px rgba(59, 59, 58, 0.04);

     }


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

     .booking-label {
         margin-bottom: 10px;
         font-family: var(--body-font);
         font-size: 18px;
         font-weight: 600;
         color: var(--sage-dark);
     }


     /* =========================================================
        CITY
     ========================================================= */

     .booking-city {

         margin-bottom: 25px;

     }


     .booking-city-options {

         display: flex;

         align-items: center;

         gap: 20px;

     }


     .booking-radio {

         position: relative;

         display: inline-flex;

         align-items: center;

         gap: 7px;

         cursor: pointer;

         font-family: var(--body-font);

         font-size: 14px;

         color: var(--sage-dark);

     }


     .booking-radio input {

         position: absolute;

         opacity: 0;

         pointer-events: none;

     }


     .booking-radio-circle {

         position: relative;

         width: 12px;

         height: 12px;

         border: 1.5px solid var(--sage-dark);

         border-radius: 50%;

     }


     .booking-radio input:checked
     + .booking-radio-circle::after {

         content: "";

         position: absolute;

         top: 2px;

         left: 2px;

         width: 6px;

         height: 6px;

         border-radius: 50%;

         background: var(--sage-dark);

     }


     .booking-radio-muted {

         color: #777;

     }


     .booking-radio-muted
     .booking-radio-circle {

         border-color: #aaa;

     }


     /* =========================================================
        BOOKING SECTION TITLE
     ========================================================= */
     .booking-section-title {
         margin-bottom: 20px;
         font-family: var(--body-font);
         font-size: 16px;
         font-weight: 600;
         color: var(--charcoal);
     }
     /* =========================================================
        DATE SECTION
     ========================================================= */

     .booking-date-section {

         margin-bottom: 30px;

     }


     .booking-date-carousel {

         display: flex;

         align-items: center;

         width: 100%;

         gap: 12px;

     }


     /* =========================================================
        DATE ARROWS
     ========================================================= */

     .booking-date-arrow {

         width: 42px;

         height: 42px;

         flex: 0 0 42px;

         display: flex;

         align-items: center;

         justify-content: center;

         border: 0;

         border-radius: 50%;

         background: #8a988014;

         color: var(--sage-dark);

         cursor: pointer;

         transition:
                 background 0.25s ease,
                 color 0.25s ease,
                 transform 0.2s ease;

     }


     .booking-date-arrow:hover {

         background: var(--sage);

         color: var(--white);

     }


     .booking-date-arrow:active {

         transform: scale(0.94);

     }


     /* =========================================================
        DATE VIEWPORT
     ========================================================= */

     .booking-date-viewport {

         flex: 1;

         min-width: 0;

         overflow-x: auto;

         overflow-y: hidden;

         scroll-behavior: smooth;

         scrollbar-width: none;

         cursor: grab;

     }


     .booking-date-viewport::-webkit-scrollbar {

         display: none;

     }


     .booking-date-viewport:active {

         cursor: grabbing;

     }


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

     .booking-date-track {

         display: flex;

         align-items: flex-start;

         gap: 9px;

         width: max-content;

         padding: 2px 3px 5px;

     }


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

     .booking-date-card {

         position: relative;

         width: 58px;

         flex: 0 0 58px;

         display: flex;

         flex-direction: column;

         align-items: center;

         gap: 5px;

         padding: 0;

         border: 0;

         background: transparent;

         cursor: pointer;

         font-family: var(--body-font);

     }


     .booking-date-card .date-day {

         font-size: 12px;

         font-weight: 600;

         line-height: 1;

         color: var(--charcoal);

     }


     .booking-date-card .date-number {

         width: 42px;

         height: 42px;

         display: flex;

         align-items: center;

         justify-content: center;

         border: 1px solid #e3e0dd;

         border-radius: 50%;

         background: var(--white);

         font-size: 14px;

         font-weight: 500;

         color: var(--charcoal);

         transition: all 0.25s ease;

     }


     /* =========================================================
        DATE HOVER
     ========================================================= */

     .booking-date-card:not(.is-disabled):hover .date-number {

         border-color: var(--sage);
            color: var(--sage);
         background: rgba(138, 152, 128, 0.08);

     }


     /* =========================================================
        SELECTED DATE
     ========================================================= */

     .booking-date-card.is-selected .date-number {

         border-color: var(--sage);

         background: var(--sage);

         color: var(--white);

         box-shadow:
                 0 4px 12px rgba(138, 152, 128, 0.25);

     }


     .booking-date-card.is-selected .date-day {

         color: var(--sage);

     }


     /* =========================================================
        DISABLED DATE
     ========================================================= */

     .booking-date-card.is-disabled {

         cursor: not-allowed;

         opacity: 0.38;

     }


     .booking-date-card.is-disabled .date-number {

         background: #f4f3f2;

         border-color: #e4e2df;

         color: #aaa;

     }


     /* =========================================================
        TIME SECTION
     ========================================================= */

     .booking-time-section {

         margin-bottom: 35px;

     }


     .booking-time-grid {

         display: grid;

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

         gap: 10px;

         min-height: 46px;

     }


     /* =========================================================
        TIME SLOT
     ========================================================= */

     .booking-time-slot {

         min-height: 43px;

         display: flex;

         align-items: center;

         justify-content: center;

         padding: 0 10px;

         border: 1px solid #e5dfda;

         border-radius: 5px;

         background: var(--white);

         color: var(--charcoal);

         font-family: var(--body-font);

         font-size: 12px;

         font-weight: 500;

         cursor: pointer;

         transition:
                 border-color 0.2s ease,
                 background 0.2s ease,
                 color 0.2s ease;

     }


     .booking-time-slot:not(.is-disabled):hover {

         border-color: var(--sage);

         background: rgba(138, 152, 128, 0.08);

     }


     /* =========================================================
        SELECTED TIME
     ========================================================= */

     .booking-time-slot.is-selected {

         border-color: var(--sage);

         background: var(--sage);

         color: var(--white);

     }


     /* =========================================================
        DISABLED TIME
     ========================================================= */

     .booking-time-slot.is-disabled {

         position: relative;

         color: #aaa;

         background: #f5f4f2;

         border-color: #e7e4e1;

         cursor: not-allowed;

         text-decoration: line-through;

         opacity: 0.7;

     }


     /* =========================================================
        DISABLED TIME LABEL
     ========================================================= */

     .booking-time-slot.is-disabled::after {

         content: "Unavailable";

         position: absolute;

         bottom: -16px;

         left: 50%;

         transform: translateX(-50%);

         white-space: nowrap;

         font-size: 8px;

         color: #aaa;

         text-decoration: none;

     }


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

     .booking-fields-grid {

         display: grid;

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

         column-gap: 30px;

         row-gap: 26px;

     }


     /* =========================================================
        FIELD
     ========================================================= */

     .booking-field {

         min-width: 0;

     }


     .booking-field label {

         display: block;

         margin-bottom: 8px;

         font-family: var(--body-font);

         font-size: 13px;

         font-weight: 500;

         color: #4c5361;

     }


     .booking-field label span {

         color: #777;

     }


     .booking-field input {

         width: 100%;

         height: 40px;

         padding: 0 14px;

         border: 1px solid #8a988085;

         border-radius: 6px;

         outline: none;

         background: #8a988014;

         font-family: var(--body-font);

         font-size: 13px;

         color: var(--charcoal);

     }


     .booking-field input::placeholder {

         color: #aaa;

         font-style: italic;

     }


     .booking-field input:focus {

         border-color: var(--sage);

         box-shadow:
                 0 0 0 2px rgba(138, 152, 128, 0.10);

     }


     /* =========================================================
        ADDRESS
     ========================================================= */

     .booking-address {

         display: flex;

         align-items: stretch;

         gap: 8px;

     }


     .booking-address input {

         flex: 1;

     }


     .booking-location-btn {

         width: 42px;

         flex: 0 0 42px;

         border: 1px solid #8a988085;

         border-radius: 6px;

         background: #8a988014;

         color: var(--sage-dark);

         cursor: pointer;

     }


     .booking-location-btn:hover {

         background: var(--sage);

         color: var(--white);

     }


     /* =========================================================
        PHONE
     ========================================================= */

     .booking-phone {

         height: 40px;

         display: flex;

         align-items: stretch;

         border: 1px solid #8a988085;

         border-radius: 6px;

         overflow: hidden;

         background: #8a988014;

     }


     .booking-country {

         display: flex;

         align-items: center;

         gap: 7px;

         padding: 0 10px;

         border-right: 1px solid #ddd6d1;

         font-family: var(--body-font);

         font-size: 13px;

     }


     .booking-flag {

         font-size: 15px;

     }


     .booking-prefix {

         width: 65px;

         padding: 0 8px;

         border: 0;

         border-right: 1px solid #ddd6d1;

         outline: none;

         background: transparent;

         font-family: var(--body-font);

         font-size: 13px;

         color: var(--charcoal);

     }


     .booking-phone input {

         height: 100%;

         flex: 1;

         min-width: 0;

         border: 0;

         border-radius: 0;

         background: transparent;

     }


     .booking-phone input:focus {

         box-shadow: none;

     }


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

     .booking-options-grid {

         display: grid;

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

         gap: 30px;

         margin-top: 45px;

     }


     .booking-option {

         min-height: 81px;

         display: flex;

         align-items: center;

         gap: 9px;

         padding: 15px;

         background: #8a988014;

         cursor: pointer;

     }


     .booking-option input {

         position: absolute;

         opacity: 0;

         pointer-events: none;

     }


     .booking-checkbox {

         width: 19px;

         height: 19px;

         flex: 0 0 19px;

         display: flex;

         align-items: center;

         justify-content: center;

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

         border-radius: 3px;

         background: var(--white);

     }


     .booking-checkbox i {

         display: none;

         color: var(--white);

         font-size: 10px;

     }


     .booking-option input:checked
     + .booking-checkbox {

         background: var(--sage-dark);

     }


     .booking-option input:checked
     + .booking-checkbox i {

         display: block;

     }


     .booking-option-text {

         font-family: var(--body-font);

         font-size: 13px;

         line-height: 1.45;

         color: #4c5361;

     }


     .booking-option-text strong {

         color: var(--charcoal);

     }


     .booking-whatsapp {

         margin-left: auto;

         color: #00a884;

         font-size: 18px;

     }


     .booking-star {

         color: #f5c52b;

         font-size: 16px;

     }


     /* =========================================================
        COMMENT
     ========================================================= */

     .booking-comment-toggle {

         margin-top: 25px;

         padding: 0;

         border: 0;

         background: transparent;

         font-family: var(--body-font);

         font-size: 13px;

         font-weight: 700;

         color: var(--sage-dark);

         cursor: pointer;

     }


     .booking-comment-wrapper {

         display: none;

         margin-top: 12px;

     }


     .booking-comment-wrapper.is-visible {

         display: block;

     }


     .booking-comment-wrapper textarea {

         width: 100%;

         min-height: 90px;

         padding: 12px;

         border: 1px solid #8a988085;

         border-radius: 6px;

         outline: none;

         resize: vertical;

         background: #8a988014;

         font-family: var(--body-font);

         font-size: 13px;

     }


     .booking-comment-wrapper textarea:focus {

         border-color: var(--sage);

     }


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

     .booking-submit {

         min-width: 257px;

         height: 49px;

         margin-top: 30px;

         padding: 0 20px;

         border: 0;

         border-radius: 6px;

         background: var(--sage);

         color: var(--white);

         font-family: var(--body-font);

         font-size: 13px;

         font-weight: 700;

         cursor: pointer;

         transition:
                 opacity 0.2s ease,
                 transform 0.2s ease;

     }


     .booking-submit:disabled {

         background: #e4e4e4;

         color: #fff;

         cursor: not-allowed;

     }


     .booking-submit:not(:disabled):hover {

         transform: translateY(-1px);

     }


     /* =========================================================
        MESSAGE
     ========================================================= */

     .booking-message {

         margin-top: 12px;

         font-family: var(--body-font);

         font-size: 12px;

         color: var(--sage-dark);

     }


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

     @media (max-width: 900px) {

         .booking-wrapper {

             padding: 35px 35px 55px;

         }


         .booking-time-grid {

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

         }


         .booking-options-grid {

             gap: 20px;

         }

     }


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

     @media (max-width: 600px) {

         .booking-section {

             padding-bottom: 45px;

         }


         .booking-wrapper {

             padding: 28px 18px 40px;

         }


         .booking-city-options {

             gap: 15px;

         }


         .booking-radio {

             font-size: 13px;

         }


         .booking-date-carousel {

             gap: 6px;

         }


         .booking-date-arrow {

             width: 34px;

             height: 34px;

             flex: 0 0 34px;

         }


         .booking-date-track {

             gap: 7px;

         }


         .booking-date-card {

             width: 52px;

             flex-basis: 52px;

         }


         .booking-date-card .date-number {

             width: 40px;

             height: 40px;

         }


         .booking-time-grid {

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

             gap: 9px;

         }


         .booking-time-slot {

             min-height: 42px;

         }


         .booking-fields-grid {

             grid-template-columns: 1fr;

             row-gap: 20px;

         }


         .booking-options-grid {

             grid-template-columns: 1fr;

             gap: 12px;

             margin-top: 30px;

         }


         .booking-option {

             min-height: 75px;

         }


         .booking-option-text {

             font-size: 12px;

         }


         .booking-submit {

             width: 100%;

             min-width: 0;

         }

     }


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

     .site-footer {

         position: relative;

         background: var(--charcoal);

         color: var(--off-white);

         padding-top: 70px;

         overflow: hidden;

     }


     /* =========================================================
        DECORATIVE TOP LINE
     ========================================================= */

     .site-footer::before {

         content: "";

         position: absolute;

         top: 0;

         left: 0;

         width: 100%;

         height: 4px;

         background: var(--sage);

     }


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

     .footer-main {

         display: grid;

         grid-template-columns:
        1.6fr
        0.8fr
        0.8fr
        1.2fr;

         gap: 60px;

         padding-bottom: 55px;

     }


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

     .footer-brand {

         max-width: 360px;

     }


     .footer-logo {

         display: inline-flex;

         align-items: center;

         margin-bottom: 22px;

     }


     .footer-logo img {

         display: block;

         width: 220px;

         height: auto;

     }


     /* =========================================================
        DESCRIPTION
     ========================================================= */
     .footer-description {

         max-width: 330px;

         margin: 0 0 18px;

         font-family: var(--body-font);

         font-size: 14px;

         line-height: 1.8;

         color: rgba(241, 238, 232, 0.72);

     }


     /* =========================================================
        COMPANY
     ========================================================= */

     .footer-company {

         max-width: 330px;

         margin: 0 0 25px;

         font-family: var(--body-font);

         font-size: 12px;

         line-height: 1.7;

         color: rgba(241, 238, 232, 0.55);

     }


     .footer-company strong {

         color: var(--off-white);

         font-weight: 600;

     }


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

     .footer-social-title {

         margin-bottom: 12px;

         font-family: var(--body-font);

         font-size: 12px;

         font-weight: 600;

         text-transform: uppercase;

         letter-spacing: 0.8px;

         color: var(--off-white);

     }


     .footer-social {

         display: flex;

         align-items: center;

         gap: 9px;

     }


     .footer-social a {

         width: 38px;

         height: 38px;

         display: flex;

         align-items: center;

         justify-content: center;

         border: 1px solid rgba(241, 238, 232, 0.20);

         border-radius: 50%;

         color: var(--off-white);

         text-decoration: none;

         font-size: 15px;

         transition:
                 background 0.25s ease,
                 border-color 0.25s ease,
                 color 0.25s ease,
                 transform 0.25s ease;

     }


     .footer-social a:hover {

         background: var(--sage);

         border-color: var(--sage);

         color: var(--white);

         transform: translateY(-2px);

     }


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

     .footer-column {

         min-width: 0;

     }


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

     .footer-title {

         position: relative;

         margin: 4px 0 22px;

         padding-bottom: 12px;

         font-family: var(--body-font);

         font-size: 13px;

         font-weight: 700;

         text-transform: uppercase;

         letter-spacing: 1px;

         color: var(--off-white);

     }


     .footer-title::after {

         content: "";

         position: absolute;

         left: 0;

         bottom: 0;

         width: 28px;

         height: 2px;

         background: var(--sage);

     }


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

     .footer-links {

         display: flex;

         flex-direction: column;

         gap: 11px;

         margin: 0;

         padding: 0;

         list-style: none;

     }


     .footer-links a {

         display: inline-block;

         font-family: var(--body-font);

         font-size: 14px;

         line-height: 1.5;

         color: rgba(241, 238, 232, 0.68);

         text-decoration: none;

         transition:
                 color 0.2s ease,
                 padding-left 0.2s ease;

     }


     .footer-links a:hover {

         padding-left: 4px;

         color: var(--off-white);

     }


     /* =========================================================
        LOCATION
     ========================================================= */

     .footer-location-item {

         display: flex;

         align-items: flex-start;

         gap: 13px;

     }


     .footer-location-item strong {

         display: block;

         margin-bottom: 4px;

         font-family: var(--body-font);

         font-size: 14px;

         font-weight: 600;

         color: var(--off-white);

     }


     .footer-location-item p {

         margin: 0;

         font-family: var(--body-font);

         font-size: 14px;

         color: rgba(241, 238, 232, 0.60);

     }


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

     .footer-contact-item {

         display: flex;

         align-items: flex-start;

         gap: 12px;

         margin-bottom: 17px;

         font-family: var(--body-font);

         font-size: 14px;

         line-height: 1.65;

         color: rgba(241, 238, 232, 0.68);

         text-decoration: none;

         transition: color 0.2s ease;

     }


     .footer-contact-item:hover {

         color: var(--off-white);

     }


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

     .footer-icon {

         width: 32px;

         height: 32px;

         flex: 0 0 32px;

         display: flex;

         align-items: center;

         justify-content: center;

         border-radius: 50%;

         background: rgba(138, 152, 128, 0.16);

         color: var(--sage);

         font-size: 14px;

     }


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

     .footer-bottom {

         min-height: 70px;

         display: flex;

         align-items: center;

         justify-content: space-between;

         gap: 20px;

         border-top: 1px solid rgba(241, 238, 232, 0.10);

     }


     .footer-bottom p {

         margin: 0;

         font-family: var(--body-font);

         font-size: 14px;

         color: rgba(241, 238, 232, 0.48);

     }


     .footer-bottom-right {

         text-align: right;

         color: rgba(241, 238, 232, 0.38) !important;

     }


     .footer-divider {

         display: inline-block;

         margin: 0 8px;

         color: var(--sage);

     }


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

     @media (max-width: 1000px) {

         .footer-main {

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

             gap: 45px;

         }


         .footer-brand {

             grid-column: 1 / -1;

             max-width: 500px;

         }

     }


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

     @media (max-width: 650px) {

         .site-footer {

             padding-top: 50px;

         }


         .footer-main {

             grid-template-columns: 1fr;

             gap: 38px;

             padding-bottom: 40px;

         }


         .footer-brand {

             grid-column: auto;

             max-width: 100%;

         }


         .footer-logo img {

             width: 160px;

         }


         .footer-description {

             max-width: 100%;

         }


         .footer-title {

             margin-bottom: 17px;

         }


         .footer-links {

             gap: 9px;

         }


         .footer-bottom {

             min-height: auto;

             padding: 22px 0;

             flex-direction: column;

             align-items: flex-start;

             gap: 8px;

         }


         .footer-bottom-right {

             text-align: left;

         }

     }


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

     @media (max-width: 400px) {


         .footer-divider {

             margin: 0 5px;

         }

     }