/* ========================================
   BODY / BACKGROUND IMAGE
   ======================================== */

/* Smooth scroll behavior for anchor links */

body {
    /* Placeholder color while image loads */
    background-color: #1a3a1f;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url("../assets/images/general-site/forrest1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-top: 70px; /* Account for fixed header height */
    /* Performance optimization */
    will-change: auto;
    backface-visibility: hidden;
}

/* Mobile and Tablet-specific forest background fix */
@media screen and (max-width: 1024px) {
    html {
        position: relative; /* create stacking context for ::before */
    }
    body {
        /* Use pseudo-element for better mobile/tablet fixed background support */
        background-image: none;
        position: relative;
        z-index: 1; /* ensure content sits above background */
    }
    
    html::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        min-height: 100vh;
        background-image: 
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url("../assets/images/general-site/forrest1.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0; /* non-negative to avoid Chrome mobile culling */
        pointer-events: none;
        /* Prevent scaling and maintain exact size */
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Lock the background to prevent viewport changes */
        will-change: auto;
        /* Prevent mobile browser UI changes from affecting background */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
    }
}

/* Additional fix for mobile viewport changes */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    html::before {
        /* Use a fixed height to prevent viewport scaling */
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
    }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
    html::before {
        /* Use a fixed height to prevent viewport scaling */
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-track {
        animation: none !important;
        transform: none !important;
    }

    .qbp-card,
    .qbp-card-content,
    .hero-bottom .hero-bottom-arrow,
    .hero-selector-arrow,
    .quick-browse-bottom .arrow-left,
    .quick-browse-bottom .arrow-right {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

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

.hero-section-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(3, 3, 3, 0.05);
    /* background-color: white; */
}

/* Infinite Scroll Wrapper */
.infinite-scroll-wrapper {
    height: 34px;
    width: 100%;
    background: rgba(5, 168, 76, 0.7);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(104, 233, 160, 0.381);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
    z-index: 5;
    
    /* Disable scroll effects and touch interference */
    overscroll-behavior: none !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: auto !important;
    scroll-behavior: auto !important;
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -ms-scroll-chaining: none !important;
    scroll-snap-type: none !important;
}

/* Prevent rubber banding across all containers */
.hero-section-wrapper,
body, 
html {
    overscroll-behavior: none !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: none !important;
}

.hero-section-wrapper {
    -webkit-overflow-scrolling: auto !important;
}

.scroll-track {
    display: flex;
    align-items: center;
    height: 100%;
    animation: scroll-left 30s linear infinite;
    white-space: nowrap;
    will-change: transform;
    transform: translateZ(0);
    
    /* Disable scroll effects that could interfere with animation */
    overscroll-behavior: none !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: auto !important;
    scroll-behavior: auto !important;
    -ms-scroll-chaining: none !important;
    scroll-snap-type: none !important;
}

.scroll-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 10px 0 0;
    flex-shrink: 0;
    min-width: 300px;
}

.scroll-text {
    color: white;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    flex: 1;
}

.scroll-icon {
    width: 25px; /* EDIT SIZE HERE - Increase/decrease this value */
    height: 25px; /* EDIT SIZE HERE - Keep same as width for square scaling */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center; /* Ensures scaling from center point */
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.333%);
    }
}

/* Ensure scrolling continues regardless of pointer events */
.infinite-scroll-wrapper {
    pointer-events: none;
}

.infinite-scroll-wrapper * {
    pointer-events: none;
}

.hero-section-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 80px 10px;
    width: 100%;
    /* border: solid 1px blue; */
}

.hero-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* border: solid 1px blue; */
}

.hero-top h1 {
    line-height: 90px;
    font-size: 70px;
    color: var(--white);
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
}

.hero-selector-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 20px 0 10px;
    color: var(--white);
}

.hero-selector-text {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--white);
}

.hero-selector-arrow {
    flex-shrink: 0;
    opacity: 0.9;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero-selector-arrow:hover {
    transform: scale(1.1);
    opacity: 1;
}

.hero-subheading {
    display: none;
    color: var(--white);
    font-size: 20px;
    margin: 10px 0 0;
}

.hero-bottom-title {
    margin: 0;
    font-weight: 500;
}

.hero-call-button {
    display: none !important;
    text-decoration: none !important;
}

.hero-quote-button {
    display: none !important;
    text-decoration: none !important;
    background: rgba(211, 211, 211, 0.751);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.545);
    border-radius: 50px;
    color: var(--black);
    font-weight: 600;
    padding: 10px 42px;
    transition: all 0.2s ease-in-out;
}

.hero-quote-button:hover {
    scale: 1.03;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
    /* border: solid 1px rgba(10, 82, 41, 0.1); */
    cursor: pointer;
}

/* FORM */

.form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
    padding: 20px;
    height: 450px;
    width: 350px;
    min-width: 350px;
    max-width: 350px;
    min-height: 450px;
    border-radius: 30px;
    background: rgba(211, 211, 211, 0.6);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.545);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.form h3 {
    font-size: 35px;
    color: var(--black);
}

.form input, textarea {
    height: 40px;
    width: 100%;
    padding: 10px;
    border: 1px solid white;
    border-radius: 15px;
    background-color: white;
}

.form textarea {
    resize: none;
    height: 150px;
}

.form button,
.get-in-touch-submit {
    min-width: 120px;
    height: 40px;
    /* border: 1px solid var(--white); */
    border: none;
    color: var(--white);
    background: var(--black, #000);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.form button {
    width: 120px; 
    align-self: center;
}

.form button:hover,
.get-in-touch-submit:hover {
    background-color: #ffdc1c;
    color: var(--black);
    border: solid 1px rgb(74, 74, 74);
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
}

/* END FORM */

.hero-form-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.hero-form-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.hero-form-modal__content {
    position: relative;
    width: min(420px, 94vw);
}

.hero-modal-form {
    width: 100%;
}

.hero-form-modal__close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--dark-grey, #434242);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.hero-form-modal__close:hover {
    background: var(--black, #0b0b0b);
}

body.modal-open {
    overflow: hidden;
}

/* Hero Modal Mobile Fixes */
@media screen and (max-width: 768px) {
    .hero-form-modal {
        align-items: flex-start;
        overflow-y: auto;
        padding: 20px 10px;
    }
    
    .hero-form-modal__content {
        margin: auto;
        max-height: none;
    }
}

.hero-bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    color: var(--white);
}

.hero-bottom .hero-bottom-arrow {
    flex-shrink: 0;
    opacity: 0.9;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero-bottom .hero-bottom-arrow:hover {
    transform: scale(1.1);
    opacity: 1;
}

.hero-bottom-title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

/* ========================================
   QUICK BROWSE PRODUCTS SECTION
   ======================================== */

.quick-browse-section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20;
    padding-top: 30px;
    padding-bottom: 50px; /* Increased to accommodate hover effects */
    height: auto;
    width: 100%; /* was 100vw causing horizontal jank */
    background-color: white;
    overflow: visible; /* prevent clipping */
    box-sizing: border-box;
    /* SVG Background - Edit position and color here */
    background-image: url("data:image/svg+xml,%3Csvg width='495' height='495' viewBox='0 0 495 495' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.05'%3E%3Cpath d='M485.874 137.826L485.1 333.816L432.042 364.598L427.092 363.825L394.453 344.953C391.514 343.87 386.255 349.594 383.161 350.677L382.233 393.989L329.794 424.308C327.164 425.081 324.38 423.38 322.059 422.297C312.005 417.656 302.105 409.767 292.05 404.662L281.531 409.303L280.449 453.08L229.092 483.398H223.214L8.6626 357.483L7.88916 164.278L8.97197 159.637L263.897 11.1375H269.775L485.874 137.981V137.826ZM232.959 41.6109L434.517 158.555L469.477 139.064L267.919 21.6562C266.063 20.7281 264.67 21.9656 262.969 22.739C256.163 25.8328 241.777 34.4953 235.589 38.9812C234.97 39.4453 232.495 41.1468 232.959 41.7656V41.6109ZM424.927 163.814L223.369 47.0249L177.736 72.239L380.377 190.575L424.463 165.825L425.081 163.814H424.927ZM370.631 195.834L167.991 78.8906L122.358 103.641L323.761 221.822L326.855 221.512L370.477 195.834H370.631ZM68.0626 136.744L270.394 253.842L315.253 228.319L113.695 110.911H110.911L68.2173 136.744H68.0626ZM261.113 260.803L59.4001 142.931L55.8423 143.241L23.5126 160.875L24.7501 163.041L225.534 279.366L228.474 279.056L261.113 260.648V260.803ZM475.355 148.345L230.949 285.089V338.456L270.239 315.098C272.405 303.033 269.156 288.492 270.703 276.736C270.858 275.344 271.013 274.261 272.095 273.333L326.236 242.086C327.783 240.384 332.733 243.942 332.733 244.716V281.067L372.333 258.637V218.573C373.106 215.325 378.83 212.85 381.614 211.148C397.392 201.558 414.253 193.359 430.341 184.078C436.838 185.006 434.517 189.337 434.517 193.205C434.517 203.105 434.827 213.005 434.517 222.75L475.2 200.011V148.191L475.355 148.345ZM17.6345 171.548V222.441C47.7985 241.003 78.5813 258.637 109.055 276.427C144.633 297.155 181.449 320.203 217.645 339.384C219.038 340.158 220.43 341.395 222.131 341.241L221.203 288.337L17.6345 171.548ZM424.927 223.987V198.773C423.07 200.166 402.652 210.994 403.58 212.386L424.927 223.987ZM230.949 350.522V402.342L270.239 380.067L271.631 337.837L324.38 307.209C326.7 305.508 332.888 306.745 332.888 309.839V345.262L372.178 322.987C374.034 319.739 371.869 291.431 372.642 284.625C372.797 283.078 372.952 281.531 374.189 280.294C391.514 271.631 408.22 259.72 425.391 251.058C429.258 249.047 431.578 246.881 434.517 251.831L435.755 288.028L474.581 265.289V211.922L473.034 210.53L231.103 350.677L230.949 350.522ZM382.233 221.977V253.997L419.049 231.722L392.906 216.562L382.233 221.977ZM17.6345 235.589V287.409L219.811 404.198C221.667 404.972 221.822 398.939 221.822 397.701C222.131 385.326 221.203 372.487 221.203 359.958C221.203 357.328 222.75 353.461 220.894 351.759L17.6345 235.589ZM323.142 283.078V256.936L301.795 270.084L323.142 283.233V283.078ZM424.927 262.814L403.58 274.416C402.806 275.653 423.38 286.327L424.927 288.028V262.814ZM281.377 280.139V312.159L315.717 292.669L317.264 290.348L292.359 275.498L281.377 280.139ZM475.355 277.355L232.031 416.573V468.394L271.322 446.119C273.333 442.87 270.858 413.634 271.786 406.828C271.941 405.436 272.095 404.353 273.178 403.425L325.153 372.952C327.164 370.477 333.816 372.951 333.816 374.808V411.159L373.416 388.73C374.963 385.945 372.642 355.317 373.57 348.666C373.725 347.273 373.88 346.191 374.963 345.262L428.175 314.016C429.567 312.314 434.672 314.634 434.672 315.717V350.677L436.992 352.069L475.355 329.33V277.509V277.355ZM382.233 287.409V317.883L419.049 297.464L393.061 281.067C390.741 280.758 384.399 285.708 382.078 287.255L382.233 287.409ZM220.275 416.883L17.6345 300.558V351.45L23.2032 355.626L220.275 470.25V416.883ZM323.142 321.905L303.033 333.351L301.795 335.053L323.142 347.119V321.905ZM424.927 351.914V326.7C423.225 328.092 401.569 338.92 402.652 340.312L424.927 351.914ZM281.377 377.128L317.264 355.317L291.431 339.539L281.377 345.727V377.283V377.128ZM323.142 385.945C315.563 388.884 308.602 393.68 301.795 398.011L323.142 411.159V385.945Z' fill='%2305A84B'/%3E%3Cpath d='M39.7546 196.917C42.075 196.608 44.3953 198.619 46.5609 199.547L107.972 235.125C110.756 237.755 110.447 251.367 109.983 255.389C109.364 260.339 106.27 262.969 101.475 260.958L36.6609 223.059C35.5781 222.131 35.4234 221.049 35.2687 219.656C34.8046 216.563 34.9593 200.939 36.1968 199.238C36.8156 198.464 38.9812 197.227 39.9093 197.072L39.7546 196.917ZM98.8453 239.766L45.7875 209.447V217.955L98.6906 248.119C101.011 246.727 100.392 241.158 99 239.611L98.8453 239.766Z' fill='%2305A84B'/%3E%3Cpath d='M131.33 277.974C129.783 270.858 126.07 246.572 139.528 252.759L203.878 290.194C205.116 292.05 205.425 311.85 204.342 314.016C203.878 315.099 201.558 316.491 200.475 316.491C176.653 305.353 154.688 290.039 131.33 277.819V277.974ZM194.133 302.569L193.205 294.37L139.838 264.825V272.405L194.133 302.569Z' fill='%2305A84B'/%3E%3Cpath d='M131.33 406.055C130.092 398.63 125.761 375.427 139.528 380.841L203.878 417.347C205.116 419.203 205.425 439.931 204.342 442.097C203.878 443.18 201.403 444.572 200.32 444.727L131.33 405.9V406.055ZM194.133 431.423L193.205 423.225L139.838 393.68V401.259L194.133 431.578V431.423Z' fill='%2305A84B'/%3E%3Cpath d='M39.7548 324.07C41.3017 323.761 42.6938 324.534 43.9313 325.308L107.817 362.278C110.756 365.372 113.231 394.144 101.32 388.111L36.5063 350.213C35.4235 349.284 35.2688 348.202 35.1142 346.809C34.6501 343.716 34.8048 328.092 36.0423 326.391C36.661 325.617 38.8267 324.38 39.7548 324.225V324.07ZM97.9173 367.692L44.8595 337.373V345.881L97.7626 376.045C99.0001 374.653 98.8454 368.62 98.072 367.538L97.9173 367.692Z' fill='%2305A84B'/%3E%3Cpath d='M134.733 315.253C136.125 314.944 137.362 315.098 138.6 315.872L203.414 353.77C205.425 356.245 205.116 370.786 204.806 374.808C204.497 378.366 204.033 381.769 199.547 380.995L131.639 342.169C129.628 339.694 129.628 324.07 130.247 320.513C130.711 317.883 132.103 315.717 134.733 315.253ZM193.978 358.875L139.837 328.711L140.766 336.909L190.42 365.681L193.978 366.455C193.669 364.598 194.597 360.113 193.978 358.875Z' fill='%2305A84B'/%3E%3Cpath d='M38.8267 261.886C39.7548 261.577 40.5282 261.577 41.4563 261.731L107.972 299.939C110.602 302.723 110.447 316.181 109.828 320.358C109.055 325.462 105.033 327.164 100.392 324.998L37.5892 288.028C36.3517 287.1 35.5782 286.172 35.2688 284.625C34.6501 281.686 34.9595 266.372 36.197 264.206C36.661 263.433 38.0532 262.195 38.8267 262.041V261.886ZM45.7876 274.416L46.7207 282.614L96.6798 311.231H99.6189C100.547 308.756 100.547 305.508 98.072 303.961L45.7876 274.416Z' fill='%2305A84B'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 100% -50%; /* EDIT POSITION HERE */
    background-size: auto 70%; /* EDIT SIZE HERE */
}

.our-services-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    width: 100vw;
    height: auto;
}

.services-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 20px;
    border: solid 1px transparent;
    height: 100%;
    width: 250px;
    padding-top: 10px;
    padding-bottom: 20px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease, backdrop-filter 0.35s ease;
    position: relative;
    will-change: transform, box-shadow, backdrop-filter;
    transform: translateZ(0);
}

.services-container:hover,
.services-container.is-active {
    border: solid 1px var(--light-grey);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
}

.services-container img {
    width: 120px;
    height: 120px;
}

.services-container h3 {
    font-size: 26px;
    text-align: center;
    color: var(--dark-grey);
    margin-top: 130px;
}

.services-container button {
    margin-top: 0px;
    padding: 4px 16px;
    align-self: center;
    border: 1px solid #888;
    background: white;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.services-container button:hover {
    background-color: var(--medium-grey);
    color: var(--white);
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
}

/* Service Icons */
.service-icon {
    width: 120px;
    height: 120px;
    fill: var(--dark-grey);
    margin-bottom: 0px;
    /* transition: all 0.3s ease; */
    position: absolute;
    top: 10px;
}

/* ========================================
   GET IN TOUCH SECTION
   ======================================== */

.get-in-touch-section {
    position: relative;
    padding: 40px 20px 0px;
    display: flex;
    height: 400px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    background: rgba(5, 168, 76, 0.7);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(104, 233, 160, 0.381);
    box-shadow: 0 -7px 20px var(--black-shadow), 0 7px 20px var(--black-shadow);
    overflow: visible;
}

.get-in-touch-section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    position: relative;
    top: -280px;
    overflow: visible;
}

.get-in-touch-heading {
    margin: 0;
    text-align: center;
    color: var(--black);
    position: relative;
    z-index: 2;
    margin-top: 20px;
    top: 0;
}

.get-in-touch-card {
    width: min(1100px, 100%);
    background: rgb(255, 255, 255);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
    border-radius: 20px;
    border: solid 1px rgb(219, 219, 219);
    padding: 0px;
    display: flex;
    gap: 36px;
    position: relative;
    top: 0;
    z-index: 1;
    height: 490px;
    margin-top: 30px;
}

.get-in-touch-left {
    flex: 0 0 40%;
    background: #f5f6f8;
    border: solid 1px rgb(219, 219, 219);
    border-radius: 20px;
    padding: 0px 28px 0px 28px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    position: relative;
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.086);
}

.get-in-touch-left h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 24px;
    color: #222;
}

.contact-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 16px;
    color: #434242;
}

.contact-info-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-info-list svg {
    flex-shrink: 0;
}

.get-in-touch-map {
    background: #dfe4ea;
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
    border: solid 1px rgb(219, 219, 219);
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 260px;
    margin: 24px -28px 0px;
}

.get-in-touch-map iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

/* Hide mobile-only contact elements by default */
.get-in-touch-map-mobile,
.get-in-touch-address {
    display: none;
}


.get-in-touch-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 30px 20px 0px;
}

.get-in-touch-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.get-in-touch-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.get-in-touch-form label {
    font-size: 15px;
    font-weight: 500;
    color: #2f2f2f;
}

.get-in-touch-form input,
.get-in-touch-form select,
.get-in-touch-form textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid #d2d2d2;
    font-size: 15px;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.get-in-touch-form textarea {
    min-height: 140px;
    resize: vertical;
}

.get-in-touch-submit {
    width: 120px;
    align-self: center;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 4px;
}


#hand-shake {
    position: absolute;
    width: 150px;
    height: 150px;
}



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

.contact-section-wrapper {
    position: absolute;
    width: 1254px;
    height: 582px;
    left: 134px;
    top: 2738px;
    background: #F4F4F4;
    border: 1px solid #D2D2D2;
    box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

.contact-left {
    position: absolute;
    width: 509px;
    height: 582px;
    left: 0px;
    top: 0px;
    background: #F4F4F4;
    border: 1px solid #D2D2D2;
    box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
}

.contact-left h2 {
    position: absolute;
    width: 247px;
    height: 36px;
    left: 147px;
    top: 7px;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
    color: #434242;
    margin: 0;
}

.contact-left .contact-image {
    position: absolute;
    width: 509px;
    height: 348px;
    left: 0px;
    top: 234px;
    background: url("../assets/images/general-site/image.png");
    background-size: cover;
    border: 1px solid #D2D2D2;
    border-radius: 20px;
}

.contact-left .contact-details {
    position: absolute;
    width: 309px;
    height: 124px;
    left: 29px;
    top: 78px;
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.contact-details .contact-item {
    display: flex;
    align-items: center;
    gap: 9px;
}

.contact-details .contact-item.phone {
    width: 156px;
    height: 24px;
}

.contact-details .contact-item.email {
    width: 325px;
    height: 26px;
}

.contact-details .contact-item.location {
    width: 309px;
    height: 28px;
}

.contact-details .contact-item .icon {
    width: 24px;
    height: 24px;
    border: 2px solid #434242;
    border-radius: 50%;
}

.contact-details .contact-item .icon.email-icon {
    width: 26px;
    height: 26px;
}

.contact-details .contact-item .icon.location-icon {
    width: 28px;
    height: 28px;
}

.contact-details .contact-item .text {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #434242;
}

.contact-right {
    position: absolute;
    width: 548px;
    height: 431px;
    left: 615px;
    top: 122px;
}

.contact-right h3 {
    position: absolute;
    width: 545px;
    height: 75px;
    left: 0px;
    top: -75px;
    font-size: 18px;
    line-height: 22px;
    color: #434242;
    margin: 0;
}

.contact-right input, .contact-right select, .contact-right textarea {
    position: absolute;
    background: #FFFFFF;
    border: 1px solid #C8C8C8;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    padding: 5px 12px;
}

.contact-right input[type="text"], .contact-right input[type="email"] {
    width: 264px;
    height: 35px;
}

.contact-right input[name="name"] {
    left: 0px;
    top: 0px;
}

.contact-right input[name="company"] {
    left: 284px;
    top: 0px;
}

.contact-right input[name="email"] {
    left: 0px;
    top: 79px;
}

.contact-right select {
    left: 284px;
    top: 79px;
    width: 264px;
    height: 35px;
    color: #706C6C;
}

.contact-right textarea {
    left: 0px;
    top: 184px;
    width: 548px;
    height: 183px;
    resize: none;
}

.contact-right label {
    position: absolute;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: #434242;
}

.contact-right label[for="name"] {
    left: 0px;
    top: -33px;
}

.contact-right label[for="company"] {
    left: 284px;
    top: -33px;
}

.contact-right label[for="email"] {
    left: 0px;
    top: -46px;
}

.contact-right label[for="enquiry"] {
    left: 0px;
    top: -33px;
}

.contact-right button {
    position: absolute;
    width: 118px;
    height: 37px;
    left: 215px;
    top: 316px;
    background: #000000;
    border: 1px solid #000000;
    border-radius: 50px;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
}

/* Footer */
.footer-wrapper {
    position: absolute;
    width: 1566px;
    height: 406px;
    left: -26px;
    top: 3397px;
    background: linear-gradient(180deg, rgba(67, 67, 67, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    padding: 60px 130px;
    color: #FFFFFF;
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-section h3 {
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    margin: 0;
}

.footer-section a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
}

.footer-section .hours {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-section .hours .day {
    display: flex;
    justify-content: space-between;
    width: 240px;
}

.footer-section .hours .day span:first-child {
    font-weight: 600;
}

.footer-section .hours .day span:last-child {
    font-weight: 400;
}

.footer-bottom {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #808080;
}

.footer-bottom p {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    margin: 5px 0;
}

/* ========================================
   QUICK BROWSE PRODUCTS - DRAG TO SCROLL
   ======================================== */

.quick-browse-products-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100vw;
    height: auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
    padding-top: 30px;

    overflow-x: scroll;
    overflow-y: visible;
    /* Scroll bar */
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* Internet Explorer 10+ */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    
    /* Ultra-smooth dragging */
    cursor: grab;
    scroll-behavior: auto;
    scroll-snap-type: none;
    will-change: scroll-position;
    
    /* GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.quick-browse-products-wrapper.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.quick-browse-products-wrapper.dragging .qbp-card {
    pointer-events: none;
    transition: none;
}

/* Scroll bar edit */

.quick-browse-products-wrapper::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, Opera */
}

.qbp-container {
    flex-shrink: 0;
    width: 329px;
    height: 377px;
    overflow: visible;
    cursor: grab;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
}

.qbp-container:hover {
    cursor: grab;
}

.quick-browse-products-wrapper.dragging .qbp-container {
    will-change: auto;
}

.quick-browse-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    bottom: 30px;
    color: var(--dark-grey);
    align-items: center;
    gap: 15px;
}

.quick-browse-bottom .arrow-left,
.quick-browse-bottom .arrow-right {
    flex-shrink: 0;
    opacity: 0.8;
    transition: all 0.2s ease;
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
}

.quick-browse-bottom .arrow-left:hover,
.quick-browse-bottom .arrow-right:hover {
    opacity: 1;
    transform: scale(1.1);
}

.quick-browse-bottom p {
    margin: 0;
    font-weight: 500;
}

/* ========================================
   ABOUT US SECTION
   ======================================== */

.about-us-section-wrapper {
    display: flex;
    align-items: center;
    padding: 50px 80px;
    gap: 10px;
    width: 100%;
    background: linear-gradient(180deg, rgba(5, 168, 75, 0.7) 0%, rgba(0, 124, 53, 0.7) 100%);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


.about-us-section-wrapper > div:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 200px;
}

.about-us-left-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 37px;
    width: 581px;
}

.about-us-left-container h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 48px;
    text-align: center;
    color: #FFFFFF;
    width: 100%;
}

.about-us-left-container p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #FFFFFF;
    width: 100%;
}

.about-us-left-container a {
    align-self: center;
}

.about-us-left-container button {
    padding: 6px 20px;
    width: 142px;
    height: 34px;
    border: 1px solid #FFFFFF;
    border-radius: 50px;
    color: #FFFFFF;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 0px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.about-us-left-container button:hover {
    background-color: #FFFFFF;
    color: rgba(5, 168, 75, 1);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.about-us-right-container {
    position: relative;
    width: 567px;
    height: 497px;
    flex-shrink: 0;
}

.top-image {
    position: absolute;
    left: -50px;
    top: -120px;
    z-index: 1;
}

.top-image img {
    width: 400px;
    height: auto;
    object-fit: cover;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    display: block;
}

.bottom-image {
    position: absolute;
    right: -20px;
    bottom: -120px;
    z-index: 2;
}

.bottom-image img {
    width: 400px;
    height: auto;
    object-fit: cover;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    display: block;
}

/* Responsive scaling for about us images as a pair */
@media screen and (max-width: 1400px) {
    .about-us-right-container {
        transform: scale(0.875);
        transform-origin: right center;
    }
}

@media screen and (max-width: 1200px) {
    .about-us-right-container {
        transform: scale(0.75);
        transform-origin: right center;
    }
}

@media screen and (max-width: 1000px) {
    .about-us-right-container {
        transform: scale(0.625);
        transform-origin: right center;
    }
}


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

.our-services-section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-top: 50px;
    padding-bottom: 30px;
    height: 700px;
    width: 100vw;
    background-color: white;
    /* SVG Background - Edit position and color here */
    background-image: url(/src/assets/images/general-site/Melbourne\ Map\ 2.png);
    background-repeat: no-repeat;
    background-position: 100% 60%; /* EDIT POSITION HERE */
    background-size: 100% auto;
}

.section-title-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    align-items: center;
    text-align: center;
}

.section-title-wrapper h2,
.get-in-touch-heading {
    font-size: 35px;
    line-height: 1;
}

.section-title-wrapper p {
    font-size: 16px;
    color: var(--dark-grey);
}

/* Responsive layout for mobile through iPad widths */
@media screen and (min-width: 200px) and (max-width: 1024px) {
    html {
        scroll-behavior: smooth;
    }

    body {
        padding-top: 70px;
        /* Background now handled by html::before pseudo-element above */
        min-height: 100vh;
    }

    .hero-section-container {
        padding: 32px 20px 40px;
        align-items: stretch;
        gap: 30px;
    }

    .hero-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0px;
        padding-top: 0px;
    }

    .hero-top h1 {
        /* font-size: clamp(34px, 8vw, 52px); */
        font-size: 50px;
        line-height: 1.15;
    }

    .hero-selector-mobile {
        display: none;
    }

    .hero-subheading {
        display: block;
        text-align: center;
        font-size: 20px;
        margin-top: 40px;
        color: var(--white);
    }

    .hero-call-button {
        display: inline-flex !important;
        align-self: center;
        margin-top: 15px;
    }

    .hero-quote-button {
        display: inline-flex !important;
        align-self: center;
        margin-top: 30px;
    }

    .hero-inline-form {
        display: none;
    }

    .hero-bottom {
        display: none;
    }

    .hero-bottom-title {
        display: none;
    }

    .services-container:hover {
        border: solid 1px transparent;
        box-shadow: none;
        transform: none;
        background: none;
        backdrop-filter: none;
    }

    .quick-browse-section-wrapper {
        padding: 20px 0px 16px;
    }

    .quick-browse-section-wrapper h2 {
        font-size: 40px;
    }

    .quick-browse-section-wrapper p {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .section-title-wrapper .section-subtitle {
        font-size: 0;
        line-height: 0;
    }

    .section-title-wrapper .section-subtitle::after {
        content: "Swipe through our range of products,\A tap to expand";
        white-space: pre-line;
        font-size: 18px;
        line-height: 1.4;
        color: var(--dark-grey);
        display: block;
    }

    .get-in-touch-section {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 0px;
        /*        ^ adds extra space at the top so the parent expands down */
        gap: 0;
        height: 930px;
        min-height: auto;
        margin-top: 0;
        /* clear: both; */
        position: relative;
        overflow: visible;
    }

    .get-in-touch-section-wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: 100%;
        width: 100%;
        position: relative;
        overflow: visible;
        top: -150px;
    }

    .get-in-touch-heading {
        z-index: 2;
        margin: 0px;
    }

    .get-in-touch-card {
        margin-top: 20px; /* pull the card up */
        padding: 24px;
        gap: 24px;
        width: 100%;
        max-width: 100%;
        /* min-height: 100px; keep only if you want this */
        height: 100%;     /* ensure natural height */
        z-index: 3;       /* keep it above background/section */
    }

    .get-in-touch-left {
        display: none;
    }

    .get-in-touch-form {
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .get-in-touch-form h3 {
        display: none;
    }


    .get-in-touch-form .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .get-in-touch-form .form-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .get-in-touch-form input,
    .get-in-touch-form select,
    .get-in-touch-form textarea {
        width: 100%;
        padding: 14px 16px;
        border-radius: 12px;
        border: 1px solid #d2d2d2;
        font-size: 15px;
        font-family: inherit;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .get-in-touch-form textarea {
        min-height: 120px;
        resize: vertical;
    }

    .get-in-touch-submit {
        align-self: center;
        text-align: center;
        width: 140px;
        min-width: 0;
        padding: 14px 24px;
        margin-top: 8px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 50px;
    }

    /* Address section for mobile */
    .get-in-touch-address {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--white);
        font-size: 16px;
        margin: 0px;
        padding: 0 0px;
    }

    .get-in-touch-address svg {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
    }

    /* Map section for mobile */
    .get-in-touch-map-mobile {
        width: 100%;
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
        border: solid 1px rgb(219, 219, 219);
        margin: 0px 0;
        min-height: 250px;
        display: block;
    }
    
    .get-in-touch-map-mobile iframe {
        width: 100%;
        height: 250px;
        display: block;
        border: 0;
    }

    .qbp-container {
        flex-shrink: 0;
        width: 250px;
        height: 310px;
        overflow: visible;
        cursor: grab;
        transform: scale(0.8);
        transform-origin: center;
    }

    .qbp-container .qbp-card-image {
        background-image: url("../assets/images/general-site/pallet template.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: calc(100% - 40px);
        aspect-ratio: 290 / 169;
        height: auto;
        margin: 45px 20px 0 20px;
        transition: filter 0.2s ease-in-out;
        cursor: grab;
    }

    .qbp-container .qbp-card-content h3 {
        font-size: 24px;
    }

    .qbp-container .qbp-card-content .p2 {
        font-size: 14px;
    }

    .qbp-container .qbp-card-content .qbp-button {
        margin-top: 15px;
    }

    .quick-browse-products-wrapper {
        width: 100%;
        padding: 20px 10px 40px;
        gap: 0px;
    }

    .our-services-section-wrapper {
        background-size: cover;
        background-position: center;
        height: auto;
        min-height: 600px;
        padding: 40px 20px;
        padding-bottom: 200px;
    }

    .our-services-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .quick-browse-bottom {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;
    }

    .about-us-section-wrapper {
        padding: 50px 20px;
    }

    .about-us-section-wrapper > div:first-child {
        flex-direction: column;
        gap: 32px;
    }

    .about-us-left-container {
        width: 100%;
    }

    .about-us-left-container h2 {
        font-size: 32px;
        line-height: 40px;
    }

    .about-us-left-container p {
        font-size: 16px;
        line-height: 20px;
    }

    .about-us-right-container,
    .top-image,
    .bottom-image,
    .top-image img,
    .bottom-image img {
        display: none;
    }

    .contact-section-wrapper {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        padding: 32px 20px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        height: auto;
    }

    .contact-left,
    .contact-right {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        height: auto;
    }

    .contact-left h2,
    .contact-left .contact-details,
    .contact-left .contact-image {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
    }

    .contact-left h2 {
        text-align: left;
        margin-bottom: 12px;
    }

    .contact-left .contact-details {
        gap: 16px;
        margin-top: 8px;
    }

    .contact-left .contact-image {
        height: 220px;
        margin-top: 16px;
    }

    .contact-right {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .contact-right h3,
    .contact-right label,
    .contact-right input,
    .contact-right select,
    .contact-right textarea,
    .contact-right button {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
    }

    .contact-right input,
    .contact-right select,
    .contact-right textarea {
        margin-top: 4px;
    }

    .contact-right textarea {
        height: 180px;
    }

    .contact-right button {
        align-self: flex-start;
        margin-top: 10px;
    }

    .footer-wrapper {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        height: auto;
        padding: 40px 20px 60px;
    }

footer .footer-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .footer-container .div-line {
        width: 90vw;
        height: 3px;
        background-color: var(--medium-grey);
        align-self: center;
    }

    .footer-content {
        flex-direction: column;
        gap: 24px;
        padding: 30px 0 10px;
    }

    .footer-bottom {
        position: relative;
        left: 0;
        bottom: 0;
        transform: none;
        margin-top: 20px;
    }
}

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

.services-page-wrapper {
    height: 80vh;
    padding: 0px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.services-page-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Construction Animation */
.construction-animation {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    height: 80px;
}

.construction-cone {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 50px solid #FFA500;
    position: relative;
    animation: bounce 1.5s ease-in-out infinite;
}

.construction-cone::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 10px;
    width: 30px;
    height: 8px;
    background: #FFFFFF;
}

.construction-cone::after {
    content: '';
    position: absolute;
    left: -15px;
    top: 25px;
    width: 30px;
    height: 8px;
    background: #FFFFFF;
}

.construction-cone:nth-child(1) {
    animation-delay: 0s;
}

.construction-cone:nth-child(2) {
    animation-delay: 0.3s;
}

.construction-cone:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.services-page-container h1 {
    font-size: 48px;
    font-weight: 600;
    color: #000000;
    text-align: center;
    margin-bottom: 15px;
}

.services-page-container > p {
    font-size: 20px;
    color: #808080;
    text-align: center;
    margin-bottom: 60px;
}

.services-content {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.service-detail-section {
    padding: 40px;
    background: linear-gradient(135deg, #F5F5F5 0%, #FFFFFF 100%);
    border-radius: 20px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.service-detail-section:hover {
    border: solid 1px var(--light-grey);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
    cursor: pointer;
    /* background: rgba(255, 255, 255, 0.2); */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
}

.service-detail-section h2 {
    font-size: 32px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 15px;
}

.service-detail-section p {
    font-size: 18px;
    line-height: 1.6;
    color: #434242;
}

@media screen and (max-width: 768px) {
    .services-page-wrapper {
        padding: 100px 20px 60px 20px;
    }

    .services-page-container h1 {
        font-size: 36px;
    }

    .services-page-container > p {
        font-size: 18px;
        margin-bottom: 40px;
    }

    .service-detail-section {
        padding: 30px 20px;
    }

    .service-detail-section h2 {
        font-size: 26px;
    }

    .service-detail-section p {
        font-size: 16px;
    }
}

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

.gallery-page-wrapper {
    min-height: 100vh;
    padding: 40px 20px 40px 20px;
    background-color: #FFFFFF;
}

.gallery-page-container {
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-page-container .section-title-wrapper {
    margin-bottom: 40px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.gallery-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item.gallery-placeholder {
    background: #D0D0D0;
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px;
    font-size: 12px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
}

.gallery-error {
    font-size: 18px;
    color: #808080;
    text-align: center;
    grid-column: 1 / -1;
}

/* Gallery Lightbox */
.gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lightbox-content {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.lightbox-caption {
    color: white;
    font-size: 16px;
    text-align: center;
    margin-top: 15px;
    padding: 0 20px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 3;
    background: none;
    border: none;
    color: white;
    font-size: 50px;
    font-weight: 300;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
    line-height: 1;
}

.lightbox-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.lightbox-arrow:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: 30px;
}

.lightbox-next {
    right: 30px;
}

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: white;
    font-size: 14px;
    opacity: 0.7;
}

@media screen and (max-width: 768px) {
    .gallery-lightbox {
        padding: 20px 0;
        align-items: flex-start;
        overflow-y: auto;
    }
    
    .lightbox-content {
        max-height: none;
        margin: auto;
        padding: 60px 0 40px 0;
    }
    
    .lightbox-image {
        max-height: none;
        max-width: 90vw;
    }
    
    .lightbox-arrow {
        width: 45px;
        height: 45px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-close {
        top: 15px;
        right: 20px;
        font-size: 40px;
        position: fixed;
    }

    .lightbox-arrow svg {
        width: 30px;
        height: 30px;
    }
    
    .lightbox-counter {
        position: fixed;
    }
}

@media screen and (max-width: 768px) {
    .gallery-page-wrapper {
        padding: 100px 20px 60px 20px;
    }

    .gallery-page-container .section-title-wrapper {
        margin-bottom: 30px;
    }

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

/* ========================================
   PRODUCTS PAGE - 3 COLUMN LAYOUT
   ======================================== */

.products-page-wrapper-new {
    height: 90vh;
    padding: 40px 80px 0 80px;
    background: #FFFFFF;
    overflow: hidden;
}

.products-page-container-new {
    max-width: 1600px;
    margin: 0 auto;
    height: 100%;
}

.products-three-column {
    display: grid;
    grid-template-columns: 280px .8fr .8fr;
    gap: 0;
    height: 670px;
    border: none;
    max-width: 1700px;
    margin: 0 auto;
}

/* Browse Products Toggle Button (Mobile/Tablet Only) */
.browse-products-toggle {
    display: none; /* Hidden on desktop */
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.2s ease;
}

.browse-products-toggle:hover {
    background: #f8f8f8;
    border-color: #C0C0C0;
}

.burger-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
}

.burger-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    transition: all 0.3s ease;
}

.browse-products-toggle.active .burger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.browse-products-toggle.active .burger-icon span:nth-child(2) {
    opacity: 0;
}

.browse-products-toggle.active .burger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Column 1: Sidebar - Product Categories */
.products-sidebar {
    padding: 0px 30px 40px 30px;
    border-right: 1px solid #E0E0E0;
    height: 105%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.products-sidebar h2 {
    font-size: 28px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E0E0E0;
    position: relative;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    flex-shrink: 0;
}

.product-category-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    padding-top: 30px;
    padding-left: 20px;
    margin-left: -10px;
    -webkit-overflow-scrolling: touch;
    direction: rtl;
}

.product-category-list > * {
    direction: ltr;
}

/* Fade gradient at top */
.product-category-list::before {
    content: '';
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 10;
    pointer-events: none;
    margin-bottom: -30px;
}

/* Custom scrollbar - thinner and on left (All Browsers) */

/* Firefox */
.product-category-list {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.products-sidebar:hover .product-category-list {
    scrollbar-color: #D0D0D0 transparent;
}

/* Webkit browsers (Chrome, Safari, Edge, Opera) */
.product-category-list::-webkit-scrollbar {
    width: 2px;
}

.product-category-list::-webkit-scrollbar-track {
    background: transparent;
}

.product-category-list::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 1px;
}

.products-sidebar:hover .product-category-list::-webkit-scrollbar-thumb {
    background: #D0D0D0;
}

.product-category-list::-webkit-scrollbar-thumb:hover {
    background: #B0B0B0;
}

.category-section {
    margin-bottom: 30px;
}

.category-header {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E0E0E0;
    transition: color 0.2s ease;
}

/* Turn category header green when one of its products is selected */
.category-section:has(.product-item.active) .category-header {
    color: var(--green);
}

.product-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-item {
    padding: 8px 0;
    font-size: 15px;
    color: #C0C0C0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.product-item:hover {
    color: #808080;
}

.product-item.active {
    color: var(--green);
    font-weight: 600;
}

/* Column 2: Product Details */
.product-details {
    padding: 0px 50px;
    border-right: 1px solid #E0E0E0;
    height: 105%;
    overflow-y: auto;
    
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #D0D0D0 transparent;
}

/* Webkit browsers (Chrome, Safari, Edge, Opera) */
.product-details::-webkit-scrollbar {
    width: 6px;
}

.product-details::-webkit-scrollbar-track {
    background: transparent;
}

.product-details::-webkit-scrollbar-thumb {
    background: #D0D0D0;
    border-radius: 3px;
}

.product-details::-webkit-scrollbar-thumb:hover {
    background: #B0B0B0;
}

.product-detail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: #808080;
    font-size: 16px;
}

.product-detail-header {
    margin-bottom: 40px;
}

.product-detail-header h2 {
    font-size: 32px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

.product-badge {
    display: none;
}

.product-specs-list {
    margin-bottom: 40px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #F0F0F0;
}

.spec-row:first-child {
    border-top: 1px solid #F0F0F0;
}

.spec-label {
    font-weight: 400;
    color: #000000;
    font-size: 16px;
}

.spec-value {
    color: #000000;
    font-size: 16px;
    font-weight: 400;
}

.spec-value-weight {
    font-weight: 600;
}

.product-description-section {
    margin-bottom: 40px;
}

.product-description-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 15px;
}

.product-description-section p {
    font-size: 15px;
    line-height: 1.7;
    color: #000000;
}

.product-actions {
    margin-top: 40px;
    text-align: center;
}

.btn-enquire {
    display: inline-block;
    padding: 12px 35px;
    background: #000000;
    color: white;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 25px;
    border: solid 1px transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.btn-enquire:hover {
    background-color: #ffdc1c;
    color: var(--black);
    border: solid 1px rgb(74, 74, 74);
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
}

/* Column 3: Product Images */
.product-images {
    padding: 0px 30px;
    height: 120%;
    overflow-y: auto;
    
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #D0D0D0 transparent;
}

/* Webkit browsers (Chrome, Safari, Edge, Opera) */
.product-images::-webkit-scrollbar {
    width: 6px;
}

.product-images::-webkit-scrollbar-track {
    background: transparent;
}

.product-images::-webkit-scrollbar-thumb {
    background: #D0D0D0;
    border-radius: 3px;
}

.product-images::-webkit-scrollbar-thumb:hover {
    background: #B0B0B0;
}

.product-image-main {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
}

.product-image-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-image-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.product-thumbnail {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 5px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
    position: relative;
    will-change: transform, box-shadow;
    transform: translateZ(0);
}

.product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-thumbnail:hover {
    border: solid 1px var(--light-grey);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
    cursor: pointer;
}

.product-thumbnail.active {
    border-color: var(--green);
}

/* Hide Get Quote button in images section on desktop - only show on mobile/tablet */
.product-images .product-actions {
    display: none;
}

/* Mobile Responsive */
@media screen and (max-width: 1200px) {
    .products-three-column {
        grid-template-columns: 240px 1fr 380px;
    }
    
    .product-details {
        padding: 30px 35px;
    }
}

@media screen and (max-width: 992px) {
    .products-page-wrapper-new {
        height: auto;
        min-height: 100vh;
        overflow: auto;
        padding: 100px 15px 0px 15px;
    }
    
    .products-page-container-new {
        height: auto;
    }
    
    /* Show browse products button */
    .browse-products-toggle {
        display: flex;
        width: fit-content;
    }
    
    .products-three-column {
        grid-template-columns: 1fr;
        gap: 0;
        height: auto;
        display: flex;
        flex-direction: column;
    }
    
    /* Sidebar - Slide-in overlay (like nav menu) */
    .products-sidebar {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(400px, 85vw);
        height: 100vh;
        border-right: none;
        border-left: 1px solid #E0E0E0;
        overflow-y: auto;
        padding: 100px 30px 40px 30px;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(25px) saturate(180%);
        -webkit-backdrop-filter: blur(25px) saturate(180%);
        box-shadow: -12px 0 30px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 1001;
    }
    
    .products-sidebar.active {
        right: 0;
    }
    
    /* Products sidebar overlay */
    .products-page-container-new::before {
        content: '';
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1000;
    }
    
    .products-page-container-new.sidebar-open::before {
        opacity: 1;
        pointer-events: auto;
    }
    
    .products-sidebar h2 {
        font-size: 24px;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    
    .product-category-list {
        padding-top: 0;
        padding-left: 0;
        margin-left: 0;
        direction: ltr;
        
        /* Reset scrollbar styles for mobile */
        scrollbar-width: thin;
        scrollbar-color: #D0D0D0 transparent;
    }
    
    .product-category-list::-webkit-scrollbar {
        width: 6px;
    }
    
    .product-category-list::-webkit-scrollbar-thumb {
        background: #D0D0D0;
        border-radius: 3px;
    }
    
    .product-category-list::-webkit-scrollbar-thumb:hover {
        background: #B0B0B0;
    }
    
    /* Product Details - Show first */
    .product-details {
        order: 1;
        border-right: none;
        border-bottom: none;
        height: auto;
        min-height: 300px;
        padding: 30px 20px 0px 20px;
    }
    
    /* Product Images - Show second */
    .product-images {
        order: 2;
        border-bottom: none;
        height: auto;
        padding: 0px 20px 30px 20px;
        display: flex;
        flex-direction: column;
    }
    
    /* Get Quote Button - Inside images section on mobile */
    .product-images .product-actions {
        display: block;
        margin-top: 25px;
        padding: 0;
        text-align: center;
        width: 100%;
        order: 3;
    }
    
    /* Hide button in details section on mobile (it's rendered in images instead) */
    .product-details .product-actions {
        display: none;
    }
    
    /* Thumbnails appear first on mobile */
    .product-image-thumbnails {
        order: 1;
        margin-bottom: 15px;
    }
    
    .product-thumbnails {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    
    .product-thumbnail {
        aspect-ratio: 1 / 1;
    }
    
    /* Main image appears second on mobile (after thumbnails) */
    .product-image-main {
        order: 2;
        margin-bottom: 15px;
    }
}

/* Tablet-specific adjustments (769px - 992px) */
@media screen and (max-width: 992px) and (min-width: 769px) {
    .browse-products-toggle {
        padding: 14px 24px;
        font-size: 15px;
    }
    
    .product-details {
        padding: 40px 30px 0px 30px !important;
        border-bottom: none !important;
    }
    
    .product-images {
        padding: 0px 30px 40px 30px !important;
        border-bottom: none !important;
    }
    
    .product-description-section {
        margin-bottom: 20px;
    }
    
    .product-images .product-actions {
        margin-top: 30px;
    }
    
    .product-thumbnails {
        gap: 12px !important;
    }
    
    .products-sidebar {
        width: min(420px, 85vw);
        padding: 120px 35px 40px 35px;
    }
}

@media screen and (max-width: 768px) {
    .products-page-wrapper-new {
        padding: 100px 10px 0px 10px;
    }
    
    .browse-products-toggle {
        font-size: 14px;
        padding: 10px 16px;
    }
    
    .burger-icon {
        width: 18px;
        gap: 3px;
    }
    
    .products-sidebar {
        width: min(340px, 90vw);
        padding: 100px 25px 40px 25px;
    }
    
    .products-sidebar h2 {
        font-size: 22px;
    }
    
    .product-details {
        padding: 20px 15px 0px 15px;
        border-bottom: none;
    }
    
    .product-images {
        padding: 0px 15px 20px 15px;
    }
    
    .product-images .product-actions {
        margin-top: 20px;
    }
    
    .product-detail-header h2 {
        font-size: 24px;
    }
    
    .product-specs-list {
        font-size: 14px;
    }
    
    .product-description-section {
        margin-bottom: 20px;
    }
    
    .product-description-section p {
        font-size: 14px;
    }
    
    .product-thumbnails {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .product-thumbnail:last-child {
        display: none; /* Hide 4th thumbnail on small mobile */
    }
}

/* Old Products Page Styles (Keep for backward compatibility) */
.products-page-wrapper {
    min-height: 100vh;
    padding: 30px 20px 80px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(245, 245, 245, 0.7) 100%);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.products-page-container {
    max-width: 1400px;
    margin: 0 auto;
}

.products-page-container h1 {
    font-size: 48px;
    font-weight: 600;
    color: #000000;
    text-align: center;
    margin-bottom: 15px;
}

.products-page-container > p {
    font-size: 20px;
    color: #434242;
    text-align: center;
    margin-bottom: 40px;
}

.products-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-bottom: 80px;
}

.product-category-section h2 {
    font-size: 36px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 3px solid rgba(200, 200, 200, 0.7);
}

.product-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.product-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 245, 0.95) 100%);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid transparent;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease, backdrop-filter 0.35s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    will-change: transform, box-shadow, backdrop-filter;
    transform: translateZ(0);
}

.product-card:hover {
    border: solid 1px var(--light-grey);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
    cursor: pointer;
    /* background: rgba(255, 255, 255, 0.2); */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
}

.product-card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #05A84B 0%, #007C35 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-card-badge.second-hand {
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
}

.product-card-badge.export {
    background: linear-gradient(135deg, #E94B3C 0%, #C23B2C 100%);
}

.product-card h3 {
    font-size: 24px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 20px;
    margin-top: 10px;
}

.product-card .product-specs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(5, 168, 75, 0.08);
    border-radius: 10px;
    border-left: 3px solid rgba(5, 168, 75, 0.7);
}

.product-card .spec-item {
    font-size: 15px;
    color: #2c2c2c;
    margin: 0;
}

.product-card .spec-item strong {
    color: #000000;
    font-weight: 600;
}

.product-description {
    font-size: 15px;
    line-height: 1.6;
    color: #434242;
    margin: 0;
}

/* Call to Action Section */
.products-cta {
    text-align: center;
    padding: 60px 40px;
    background: linear-gradient(135deg, rgba(5, 168, 75, 0.9) 0%, rgba(0, 124, 53, 0.9) 100%);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
}

.products-cta h2 {
    font-size: 36px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.products-cta p {
    font-size: 18px;
    color: #EBEBEB;
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    padding: 14px 40px;
    background: #FFFFFF;
    color: #05A84B;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
    background: #F5F5F5;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .products-page-wrapper {
        padding: 100px 20px 60px 20px;
    }

    .products-page-container h1 {
        font-size: 36px;
    }

    .products-page-container > p {
        font-size: 18px;
        margin-bottom: 40px;
    }

    .product-category-section h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .product-cards-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .product-card {
        padding: 25px 20px;
    }

    .product-card h3 {
        font-size: 20px;
    }

    .products-cta {
        padding: 40px 20px;
    }

    .products-cta h2 {
        font-size: 28px;
    }

    .products-cta p {
        font-size: 16px;
    }

    .cta-button {
        padding: 12px 30px;
        font-size: 16px;
    }
}

/* ===================================
   QUOTE MODAL POPUP
   =================================== */

.quote-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.quote-modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.quote-modal-content {
    position: relative;
    background: white;
    border-radius: 15px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.quote-modal-overlay.active .quote-modal-content {
    transform: scale(1);
}

.quote-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 32px;
    font-weight: 300;
    color: #666;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 10;
}

.quote-modal-close:hover {
    background: #f0f0f0;
    color: #000;
}

.quote-modal-inner {
    padding: 50px 40px 40px 40px;
}

.quote-modal-inner h2 {
    font-size: 32px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
}

.quote-modal-inner > p {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

/* Form Styling */
.quote-modal-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.quote-modal-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.quote-modal-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quote-modal-form label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.quote-modal-form input,
.quote-modal-form textarea {
    padding: 12px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s ease;
}

.quote-modal-form input:focus,
.quote-modal-form textarea:focus {
    outline: none;
    border-color: #ffdc1c;
}

.quote-modal-form textarea {
    min-height: 120px;
    resize: vertical;
}

.quote-modal-form input[readonly] {
    background-color: #f8f8f8;
    color: #666;
    cursor: not-allowed;
}

.quote-modal-submit {
    padding: 14px 40px;
    background: #000000;
    color: white;
    border: solid 1px transparent;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: 10px;
}

.quote-modal-submit:hover {
    background-color: #ffdc1c;
    color: var(--black);
    border: solid 1px rgb(74, 74, 74);
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .quote-modal-overlay {
        padding: 20px 0;
        align-items: flex-start;
        overflow-y: auto;
    }
    
    .quote-modal-content {
        max-height: none;
        width: 95%;
        margin: auto;
    }
    
    .quote-modal-inner {
        padding: 40px 25px 30px 25px;
    }
    
    .quote-modal-inner h2 {
        font-size: 26px;
    }
    
    .quote-modal-form .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .quote-modal-close {
        top: 15px;
        right: 15px;
    }
}