/* Notes */



/* Remove .container margin 0px that may be added in main-style.css */

/* Added the font awesome 7 icons, so footer needs an update */



/* --------------------------------------------------------------------------
 * Samdaybags : 2026 design updates
 *
 * file           : theme-overrides.css
 * Desc           : Home Main Template - Stylesheet Overrides
 * Date           : 
 * Author         : Ross E
 * -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
 *  Home Main Template - Table of Content

  0 - Structure
    0.1 - Header
    0.2 - Navigation
    0.3 - Footer
    0.4 - Section spacers
    0.5 - Container widths
    0.6 - Theme variables & Hero Video
    0.7 - breadcrumbs

  1 - General
    1.1 - Global properties (body, common classes, structure etc)
    1.2 - Typography (section title, links, page dividers)
    1.3 - Buttons
    1.4 - Form / Input / Textarea
    1.5 - Lists
    1.6 - Cards / Panels (Bootstrap 3 panels)
    1.7 - Border radius overrides
    1.8 - Trust Star Container / Reviews 
    1.9 - Icons (Circle styling etc)
    2.0 - Images (Image cover etc)
    2.2 - Alerts (BS)
    2.3 - Shadows
    2.4 - Borders
    
  2 - Background image wrapper - Full size background images for cards etc.

  3 - Gallery Grid Section

  4 - Trust Logos Section
    4.1 - Trust Logos USP Section - USP icons

  5 - Call to action
    5.1 - CTA footer

  6 - Reviews section
    6.1 - Reviews cards

  7 - Stats section

  8 - Animations

  9 - Content section
    9.1 - Grid / Overlapping images / Content section, sustainability page etc

  10 - Products section
    10.1 - Product filters
    10.2 - Product carousel
    10.3 - How to order steps
    10.4 - Filters side menu
    10.5 - Product process

  11 - Featured section

/* =========================================================
   0.1 Header
   ========================================================= */
header .logo>img {
    max-width: 261px;
}

/* Hero banner */
.mask-overlay::before {
    background: none 0px 0px repeat scroll rgba(0, 42, 60, 0.7);
}

.mask-overlay-10::before {
    background: none 0px 0px repeat scroll rgba(0, 42, 60, 0.1);
}

.mask-overlay-20::before {
    background: none 0px 0px repeat scroll rgba(0, 42, 60, 0.2);
}

.mask-overlay-30::before {
    background: none 0px 0px repeat scroll rgba(0, 42, 60, 0.3);
}

.mask-overlay-40::before {
    background: none 0px 0px repeat scroll rgba(0, 42, 60, 0.4);
}

.mask-overlay-50::before {
    background: none 0px 0px repeat scroll rgba(0, 42, 60, 0.5);
}
.mask-overlay-60::before {
    background: none 0px 0px repeat scroll rgba(0, 42, 60, 0.6);
}
.mask-overlay-70::before {
    background: none 0px 0px repeat scroll rgba(0, 42, 60, 0.7);
}
.mask-overlay-80::before {
    background: none 0px 0px repeat scroll rgba(0, 42, 60, 0.8);
}
.mask-overlay-90::before {
    background: none 0px 0px repeat scroll rgba(0, 42, 60, 0.9);
}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: wait;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--brand-1);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* ========================================================
0.2 Navigation
========================================================= */
.off-canvas-body .icon_menu:before {
    content: "\4d";
}

/* =========================================================
   0.3 Footer
   ========================================================= */

.footer-modern,
.footer-modern p,
.footer-modern h2,
.footer-modern h3,
.footer-modern span,
.footer-modern a:link,
.footer-modern a:visited,
.footer-modern a:hover,
.footer-modern a:active {
    color: #e3f1f8;
}

.footer-modern i {
    color: #e3f1f8 !important;
}

.footer-modern .icon-circle {
    background-color: #0b74a3;
}

/* Footer Styles */
.footer-modern {
    color: #ffffff;
}

.footer-modern p a {
    text-decoration: none;
    font-weight: normal;
}

.footer-title {
    font-weight: 600;
    margin-bottom: 30px;
    padding-bottom: 15px;
    position: relative;
}

.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.footer-title-no-border::after {
    content: none;
}

.footer-title-no-border {
    margin-bottom: 15px;
}

.footer-links li {
    margin-bottom: 16px;
}

.footer-links a {
    color: #b3cccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a i {
    font-size: 16px;
    margin-right: 8px;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-company-logo {
    border-radius: 5px;
    padding: 20px 10px;
    margin-bottom: 16px;
    background-color: #045b82;
    height: 100%;
    display: block;
}

.footer-company-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin-bottom: 20px;
}

.footer-company-logo img {
    max-height: 100%;
    width: auto;
    display: block;
    /* Keeps SVG quality sharp on high-res iMac screens */
    image-rendering: -webkit-optimize-contrast;
}

.footer-company-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin-bottom: 20px;
    width: 100%;
}

.footer-copyright-col {
    margin-top: 32px;
    position: relative;
}

.footer-copyright-col::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    width: calc(100% - 32px);
    height: 1px;
    background: rgba(255, 255, 255, 0.1);

    margin: auto;
}

/* Footer accordion style headers for mobile view */
/* Hide content on mobile */
.js-info-content {
    display: none;
}

/* Show content on desktop screens */
@media (min-width: 769px) {
    .js-info-content {
        display: block !important;
    }

    /* Disable pointer cursor on desktop */
    .js-toggle-info-content {
        cursor: default;
    }
}

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

    .js-toggle-info-content {
        position: relative;
        padding-right: 20px;
        cursor: pointer;
    }

    /* Arrow (chevron-style) */
    .js-toggle-info-content::before {
        content: "";
        position: absolute;
        right: 0;
        top: calc(50% - 10px);
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.25s ease;
        left: calc(100% - 16px);
    }

    /* Rotate arrow when open */
    .js-toggle-info-content.is-open::before {
        transform: translateY(-50%) rotate(-135deg);
    }
}
/* END: Footer accordion style headers for mobile view */

/* =========================================================
   0.4 Section spacers - Responsive padding for sections
   ========================================================= */
/* xs and up */
.sec-space {
    padding-bottom: 20px;
    padding-top: 20px;
}

.sec-space-bottom {
    padding-bottom: 20px;
}

.sec-space-top {
    padding-top: 20px;
}

.sec-space-bottom-50 {
    padding-bottom: 10px;
}

.sec-space-double {
    padding-bottom: 40px;
    padding-top: 40px;
}

.sec-space-50 {
    padding-bottom: 10px;
    padding-top: 10px;
}

.sec-space-top-50 {
    padding-top: 10px;
}

/* sm and up */
@media (min-width: 768px) {
    .sec-space {
        padding-bottom: 40px;
        padding-top: 40px;
    }

    .sec-space-top {
        padding-top: 40px;
    }

    .sec-space-bottom {
        padding-bottom: 40px;
    }

    .sec-space-double {
        padding-bottom: 80px;
        padding-top: 80px;
    }

    .sec-space-50 {
        padding-bottom: 20px;
        padding-top: 20px;
    }

    .sec-space-top-50 {
        padding-top: 20px;
    }

    .sec-space-bottom-50 {
        padding-bottom: 20px;
    }

}

/* md and up */
@media (min-width: 992px) {
    .sec-space {
        padding-bottom: 80px;
        padding-top: 80px;
    }

    .sec-space-bottom {
        padding-bottom: 80px;
    }

    .sec-space-bottom-50 {
        padding-bottom: 40px;
    }

    .sec-space-top {
        padding-top: 80px;
    }

    .sec-space-50 {
        padding-bottom: 40px;
        padding-top: 40px;
    }

    .sec-space-top-50 {
        padding-top: 40px;
    }

}

/* =========================================================
   0.5 Container widths
   ========================================================= */
@media (min-width: 992px) {
    /* .container {
        width: 1128px;
    } */
}

@media (min-width: 1400px) {
    .container {
        padding-left: 0;
        padding-right: 0;
        width: 1568px;
    }
}

/* Narrow Container Utility */
.container-md {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Tablet / Small Desktop (992px and up) */
@media (min-width: 992px) {
    .container-md {
        max-width: 960px;
        width: 100%;
        /* Ensures it behaves like a container on smaller widths */
    }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
    .container-md {
        max-width: 960px;
    }
}

/* Extra Narrow Container (Max 768px) */
.container-sm {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    /* Important for mobile responsiveness */
}

/* 768px is the standard Tablet breakpoint in Bootstrap 3 */
@media (min-width: 768px) {
    .container-sm {
        max-width: 768px;
    }
}

/* Extra Narrow Container (Max 576px) */
.container-xs-sm {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    /* Important for mobile responsiveness */
}

/* 768px is the standard Tablet breakpoint in Bootstrap 3 */
@media (min-width: 576px) {
    .container-xs-sm {
        max-width: 576px;
    }
}

/* =========================================================
   0.6 - Theme variables & Hero Video
   ========================================================= */
.aspect-16\/9 {
    aspect-ratio: 16 / 9;
}

.hero__media {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.single-slider-1 .item {
    height: 100vh;
}

.slider-internal .item {
    height: 80vh;
}

@media (min-width: 576px) {
    .single-slider-1 .item {
        min-height: 650px;
        max-height: none;
    }
}

video {
    width: 100%;
    background-color: #000;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}

video[Attributes Style] {
    width: 16px;
    aspect-ratio: auto 16 / 9;
    height: 9px;
}

video {
    object-fit: contain;
    overflow-clip-margin: content-box;
    overflow: clip;
}

video.hero__media {
    filter: brightness(0.5);
    /* Reduces brightness to 50% */
}

.hero.hero--theme-dark {
    --hero-heading-color: rgb(255 255 255 / 1);
    --hero-copy-color: rgb(255 255 255 / 1);
}

.hero {
    --hero-heading-color: var(--yco-surface-foreground-color);
    --hero-copy-color: rgb(32 32 32 / 1);
    isolation: isolate;
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 1fr auto 1fr;
    gap: 32px var(--yco-inner-gutter);
    padding-block-start: var(--yco-header-height);
    color: var(--hero-copy-color);
}

:root {
    --yco-int-map-card-min-width: 250px;
    --yco-int-map-card-max-width: 432px;
    --yco-int-map-card-hover-border-width: 6px;
    --yco-int-map-effect-duration: .25s;
    --yco-int-map-effect-long-duration: .4s;
    --yco-int-map-effect-longer-duration: .6s;
}

html,
:host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highbg-light-color: transparent;
}

@media (min-width: 768px) {
    :root {
        --yco-header-height: 113px;
        --yco-inner-gutter: 24px;
        --yco-outer-gutter: 48px;
    }
}

:root {
    --yco-header-height: 104px;
    --yco-inner-gutter: 16px;
    --yco-outer-gutter: 24px;
    --yco-surface-color: rgb(255 255 255 / 1);
    --yco-surface-foreground-color: rgb(32 32 32 / 1);
    --yco-surface-accent-color: rgb(255 199 25 / 1);
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}

/* =========================================================
   0.7 - Breadcrumbs
   ========================================================= */
.breadcrumb-bg {
    /* padding: 214px 0 160px;
    padding: 195px 0 80px; */
}

/* =========================================================
   1.1 Global properties (body, common classes, structure etc)
   ========================================================= */
html {
    /* Bootstrap 3 default is 10px on <html>, but 14px on <body> */
    font-size: 16px;
}

body {
    font-size: 16px;
    /* Increases from 14px to 16px */
    line-height: 1.6;
    /* Slightly wider line-height for better readability */
    background-color: #ffffff;
    font-weight: 400;
}

/* =========================================================
   1.2 Typography - uses responsive clamps
   ========================================================= */
body,
p {
    color: var(--primary-color);
    color: #101828;
    color: var(--dark-color);
    font-size: 20px;
    color: #384355;
    color: #59616b;

    /* Scales from 16px to 20px */
    font-size: clamp(16px, 1.2vw + 12px, 20px);
    font-family: "din-2014", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.25;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 600;
}

h1,
.h1 {
    font-size: 42px;
    /* Scales from 32px on mobile to 42px on desktop */
    font-size: clamp(32px, 5vw, 42px);
}

h2,
.h2 {
    font-size: 36px;
    /* Scales from 28px to 36px */
    font-size: clamp(28px, 4vw, 36px);
}

h3,
.h3 {
    font-size: 30px;
    /* Scales from 24px to 30px */
    font-size: clamp(24px, 3vw, 30px);
}

h4,
.h4 {
    font-size: 26px;
    font-size: clamp(22px, 2.5vw, 26px);
}

h5,
.h5 {
    font-size: 22px;
    font-size: clamp(18px, 2vw, 22px);
}

h6,
.h6 {
    font-size: 20px;
    font-size: clamp(16px, 1.5vw, 20px);
}

/* Optional: section titles */
.section-title {
    margin-bottom: 20px;
}

p {
    line-height: 1.6;
}

small,
.small {}

.lead {
    font-weight: inherit;
    font-size: clamp(18px, 2vw, 22px);
}

@media (min-width: 768px) {
    .lead {
        font-size: 22px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.section-title,
.main-title,
.title-1,
.title-2,
.post-title,
.product-title,
.widget-title,
.font-2 {
    color: #101828;
    color: #393948;
    text-transform: none;
    font-family: "din-2014", 'Montserrat', sans-serif !important;
}

main p a {
    text-decoration: underline;
    font-weight: 400;
}

/* theme styling */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.section-title,
.main-title,
.title-1,
.title-2,
.post-title,
.product-title,
.widget-title {
    text-transform: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

p a,
p a:hover {
    color: var(--brand-1);
}

p.text-white a,
p.text-white a:hover {
    color: #fff;
}

/* hero banner */
body .single-slider-1 .main-title {
    font-size: clamp(32px, 5vw, 68px) !important;
}

body .single-slider-1 .title-2 {
    font-size: clamp(22px, 4vw, 35px) !important;
}

.font-weight-bold {
    font-weight: 700 !important;
}

.font-weight-normal {
    font-weight: 400 !important;
}

.font-weight-light {
    font-weight: 300 !important;
}

.font-weight-600 {
    font-weight: 600 !important;
}

/* =========================================================
   1.3 Buttons (optional but common)
   ========================================================= */
.btn {
    font-weight: 500;
    border-radius: 5px;
}

.theme-btn-1:before,
.theme-btn-2:before,
.theme-btn:before,
.btn-black:before,
.btn-white:before {
    content: none;
}

.theme-btn.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.theme-btn.btn-secondary {
    color: #fff;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn.small-btn {
    padding: 0 10px;
    min-width: 80px;
    height: 35px;
    line-height: 35px;
}

/* Scroll buttons */
/* used on hero banner */
html {
    scroll-behavior: smooth;
}

/* Optional: Add an offset so the section doesn't stick to the very top */
#intro {
    scroll-margin-top: 80px;
}


/* =========================================================
   1.4 - Form / Input / Textarea
   ========================================================= */
.overflow-x {
    overflow-x: scroll;
}

label {
    color: #111827;
    font-weight: 500;
}

.form-control {
    color: #111827;
    background-color: #fff;
}

.help-block {
    color: #6b7280;
}

/* Apply 5px radius to all standard form fields */
.form-control {
    border-radius: 5px;
}

/* Fix for Input Groups (e.g., search bars with buttons) */
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child>.btn {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child>.btn {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Optional: Make the focus state feel smoother to match the curves */
.form-control:focus {
    border-color: #337ab7;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(51, 122, 183, .4);
}

.dropdown-menu {
    font-size: inherit;
}

/* =========================================================
   1.5 Lists
   ========================================================= */
/* 1. Remove default bullets and padding */
article.page-body section ul {
    /* list-style: none; */
    padding-left: 20px;
}

/* 2. Create the custom colored bullet */
article.page-body section ul li {
    position: relative;
}

ul.custom-bullets {
    list-style: none;
    padding-left: 0 !important;
}

ul.custom-bullets li {
    position: relative;
    margin-left: 0;
    margin-bottom: 20px;
    display: flex;
    align-items: start;

}

ul.custom-bullets li p {
    margin-bottom: 0;
}

ul.custom-bullets .icon-circle {
    margin-right: 12px;
    color: white;
    background-color: var(--primary-color);
    flex-shrink: 0 !important;
    background: transparent;
    border: 1px solid #408673;
    color: #408673 !important;
}

/* Adjust the icon circle size and interior icon */
ul.custom-bullets .icon-circle-small {
    width: 30px;
    /* Reduced from 26px */
    height: 30px;
    /* Reduced from 26px */
    min-width: 30px;
    line-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    content: none;
    border: none;
    color: var(--brand-1) !important;
    background: var(--bg-100);
}

.bg-100 ul.custom-bullets .icon-circle-small:not(.bg-100) {
    border: 1px solid var(--brand-1);
    background: white;
    border: none;
}

ul.custom-bullets .icon-circle-small i {
    font-size: 14px !important;
}

ul.custom-bullets li::before {
    content: none !important;
}

/* Optional: Subtle space between the bold title and description */
ul.custom-bullets p strong {
    display: inline-block;
    margin-right: 2px;
}

/* =========================================================
   1.6 Cards / Panels (Bootstrap 3 panels)
   ========================================================= */
.card {
    border-color: #fff;
    border-radius: 10px;
}

.panel-title {
    color: #111827;
    font-weight: 600;
}

.panel-body {
    color: #4b5563;
}

.card-footer {
    border: none;
}

.price-pill {
    display: inline-block;
    padding: 4px 15px;
    background-color: var(--brand-1);
    color: #fff;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 70px;
    transition: all 0.3s ease;
}

/* Use your brand-1 color for the 'best value' tier */
.price-pill.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}


/* =========================================================
   1.7 Border radius overrides
   ========================================================= */
.rounded-sm {
    border-radius: 3px !important;
}

.rounded {
    border-radius: 8px !important;
}

.rounded-top {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.rounded-right {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.rounded-bottom {
    border-bottom-right-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.rounded-left {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.rounded-lg {
    border-radius: 10px !important;
    overflow: hidden;
    /* This "clips" the video corners */
}


/* =========================================================
   1.8 - Trust Star Container / Reviews
   ========================================================= */
/* Trustpilot Style Stars Container */
.trust-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    /* Small gap between the boxes */
    vertical-align: middle;
}

/* Individual Star Box Styling */
.trust-stars i {
    background-color: #02bb7d;
    color: #ffffff !important;
    padding: 3px;
    font-size: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
}

/* "Excellent" text style */
.trust-stars+strong,
strong.mr-1 {
    font-weight: 700;
    font-size: 15px;
    text-decoration: underline;

}

/* USP List Icons in header with Trustpilot style banner */
.usp-list i {
    color: var(--brand-3);
}

/* =========================================================
   1.9 - Icons (Circle styling etc)
   ========================================================= */
/* The Circular Container */
.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Circle Dimensions */
    width: 3em;
    height: 3em;
    color: #00628e;
    border-radius: 50%;

    /* Shrink-proof for flex rows */
    flex-shrink: 0;

    background-color: transparent;
    border: 1px solid #00628d;

}

/* Icon size adjustment */
.icon-circle i {
    font-size: 30px;
    color: inherit;
}

footer .icon-circle i {
    color: var(--brand-1) !important;
}

.icon-circle-img {
    max-width: 50px;
}

.icon-circle-small {
    width: 50px;
    height: 50px;
}

.icon-circle-small i {
    font-size: 20px;
}

/* =========================================================
   2.0 - Images (Image cover etc)
   ========================================================= */
.img-cover-wrapper {
    overflow: hidden;
}

.img-cover {
    object-fit: cover;
    object-position: center;
    max-width: none;
    max-height: none;
    width: 100%;
    /* Force it to fill the width */
    height: 100%;
    /* Force it to fill the height */
}

/* Image Position Utilities */
.img-pos-center {
    object-position: center !important;
}

.img-pos-top {
    object-position: top !important;
}

.img-pos-bottom {
    object-position: bottom !important;
}

.img-pos-left {
    object-position: left !important;
}

.img-pos-right {
    object-position: right !important;
}

/* Aspect Ratio Containers */
.aspect-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-21-9 {
    aspect-ratio: 21 / 9;
}

.aspect-3-2 {
    aspect-ratio: 3 / 2;
}

/* Portrait Aspect Ratios */
/* Standard Portrait (The flip of your 4:3) */
.aspect-3-4 {
    aspect-ratio: 3 / 4;
}

/* Classic Photo Portrait (The flip of your 3:2) */
.aspect-2-3 {
    aspect-ratio: 2 / 3;
}

/* Social Media Story / Mobile Full Screen (The flip of your 16:9) */
.aspect-9-16 {
    aspect-ratio: 9 / 16;
}

/* Tall Aesthetic / Editorial (Common in fashion grids) */
.aspect-4-5 {
    aspect-ratio: 4 / 5;
}

/* Ultra Tall (The flip of your 21:9) */
.aspect-9-21 {
    aspect-ratio: 9 / 21;
}

/* =========================================================
   2.1 - Images section background
   ========================================================= */
.section-img-bg {
    background-size: cover;
    position: relative;
}

.section-img-bg:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 0;
}

/* =========================================================
   2.2 - Alerts (BS)
   ========================================================= */
.alert-info {
    border-color: #f0f7fd;
}

/* =========================================================
   2.3 - Shadows
   ========================================================= */
.shadow-sm,
.card-shadow {
    box-shadow: 0 0.125rem 0.25rem rgb(0 98 140 / 15%) !important;
}

/* =========================================================
   2.4 - Borders
   ========================================================= */
.border{
    border:1px solid var(--dark-color);
}

.border-2{
    border-width:2px;
}

.border-primary {
  border-color: var(--primary-color) !important; 
}

.border-bg-100 {
  border-color: var(--bg-100) !important; 
}

/* =========================================================
   2 - Background Image Wrapper - Full size background images for cards etc.
   ========================================================= */
/* Ensure the parent is the anchor point for the absolute image */
/* This element has to have a height set for the image to fill it */
.bg-image-wrapper {
    position: relative;
    overflow: hidden;
    /* Prevents the image from bleeding past rounded corners */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centers text/button vertically */
    /* min-height: 250px;  */
    z-index: 1;
    /* Creates a stacking context */
    /* Set a height so the 'cover' logic has a box to fill */
    /* min-height: 300px; */
}

/* Make the image fill the background */
.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* This is the "magic" that prevents stretching */
    object-position: center;
    /* Keeps the focus of the image centered */
    z-index: -1;
    /* Pushes the image behind the text and button */
}

/* The Overlay - Attached to the WRAPPER */
.bg-image-wrapper__overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    /* 0.8 might be too dark, 0.5 is usually better */
    z-index: -1;
    /* Above the image, but behind the text */
}


/* =========================================================
   3 - Gallery Grid Section
   ========================================================= */
.gallery-grid-item {
    pointer-events: none !important;
}


.gallery-grid-item .bg-image-wrapper {
    border-radius: 10px;
}

.gallery-grid-item__large {
    margin-bottom: 30px;
    aspect-ratio: 1 / 1;
}

.gallery-grid-item__small {
    margin-bottom: 30px;
    aspect-ratio: 1 / 1;
}

@media screen and (min-width: 768px) {
    .gallery-grid-item__large {
        margin-bottom: 30px;
    }
}

/* The "Flexbox" Fix (Modern & Robust) Stop grid items wrapping */
/* Force the row to behave as a flex container */
.gallery-grid-wrapper.row {
    display: flex;
    flex-wrap: wrap;
    /* Allows wrapping only if we actually want it */
}

/* Ensure the columns don't shrink or grow unexpectedly */
.gallery-grid-wrapper-col-lg,
.gallery-grid-wrapper-col-sm {
    flex: 0 0 auto;
    float: none;
    /* Disabling float is cleaner when using flex */
}

/* END: The "Flexbox" Fix (Modern & Robust) Stop grid items wrapping */

.gallery-grid-wrapper-col-lg {
    width: calc(2 * 100% / 5);
}

.gallery-grid-wrapper-col-sm {
    width: calc(100% / 5 * 3);
}

/* Add an ainmation to show content on hover */
.gallery-grid-wrapper .content {
    opacity: 0;
    z-index: 1;
}

.gallery-grid-wrapper .gallery-grid-item:hover .content {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.gallery-grid-wrapper .gallery-grid-item:hover .gallery-caption.hidden {
    display: block !important;
}

.gallery-grid-wrapper .gallery-grid-item:hover .bg-image-wrapper__overlay::after {
    background-color: rgba(16, 30, 46, 0.8);
    z-index: 0;
}

.gallery-grid-wrapper .bg-image {
    z-index: 0;
}

/* Used on popular products - This height keeps the square aspect ratio */
.section-one .features-item-2 {
    height: auto;
    /* Remove the fixed height: 390px; */
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Forces height to equal width */
    border-radius: 10px;
}

.section-one .features-item-2 .content {
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    padding: 20px;
    flex-direction: column;
}

/* Responsive text for product categories */
.section-one .features-item-2 .content h2 {
    max-width: 100px;
    text-align: left;
    font-size: clamp(28px, 2vw, 24px);
    line-height: 28px;
}

.section-one .features-item-2 .content .btn {
    margin-top: auto;
}

/* Gallery lightbox */
/* Ensure the link covers the card area */
.gallery-link {
    display: block;
    text-decoration: none !important;
    outline: none;
}

/* Ensure the "View Now" button looks like a button even inside a link */
.gallery-link .btn {
    pointer-events: none;
    /* Let the click pass through to the anchor */
}

/* Hide the caption in the grid, it's only for the popup */
.gallery-caption.hidden {
    display: none;
}

/* Smooth zoom effect on hover */
.gallery-grid-item .bg-image-wrapper {
    transition: transform 0.3s ease;
}

.gallery-grid-item:hover .bg-image-wrapper {
    transform: scale(1.02);
}

/* Gallery grid with fixed aspect ratios */
/* Custom Gallery Grid Wrapper */
.gallery-grid-flex {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

/* The Large Column (now exactly 2/3 of the row) */
.gallery-col-large {
    width: 66.6666%;
    padding: 0 15px;
}

/* The Small Columns Wrapper (exactly 1/3 of the row) */
.gallery-col-small-wrap {
    width: 33.3333%;
    padding: 0 15px;
}

/* Force Square Aspect Ratio on the inner blocks */
.gallery-grid-item__large,
.gallery-grid-item__small {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Forces perfectly square height */
    margin-bottom: 30px;
    /* Vertical gutter to match horizontal */
}

/* Adjust the small grid items to stack 3-wide inside their 1/3 container */
/* This ensures the margins line up perfectly with the large image */
.gallery-inner-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
    /* Tighter internal gutters */
}

.gallery-inner-grid .gallery-grid-item {
    width: 100%;
    /* Stacks them single file in a narrow 33% col */
    padding: 0 5px;
}

/* =========================================================
   4 - Trust Logos Section
   ========================================================= */
.trust-logos-clients i {
    filter: grayscale(100%);
    opacity: 0.8;
    font-size: 30px;
}

@media (max-width: 768px) {
    .trust-logos-clients .trust-logo {
        width: 33.33%;
    }
}

.trust-logos-wrap {
    overflow: hidden;
}

@media (min-width: 576px) {
    .trust-logos-clients i {
        font-size: 50px;
    }
}

@media (min-width: 1200px) {
    .trust-logos-clients i {
        font-size: 70px;
    }

}

.trust-logos-wrap .trust-logo {
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Make .trust-logo min width a 3rd on tablet devices and down     */
@media (min-width: 768px) {
    .trust-logos-wrap .trust-logo {
        max-width: 150px;
    }
}

@media (min-width: 1200px) {
    .trust-logos-wrap .trust-logo {
        width: 200px;
    }

    .trust-logos-wrap .trust-logo img {
        width: 100%;
    }
}

/* =========================================================
   4.1 - Trust Logos USP Section - USP icons 
   ========================================================= */
.trust-logos-usp-logos-owl {
    /* background-color: #e7f9ff !important; */
    background-color: var(--bg-100) !important;
}

.usp-text {
    color: #393948;
}

@media (max-width: 576px) {
    .trust-logos-usp-logos-owl .owl-stage {
        display: flex;
        justify-content: start;
        align-items: start;
    }
}

/* Owl version of USP trust logos */
@media (min-width: 1200px) {
    .trust-logos-usp-logos-owl {
        padding-left: 90px;
        padding-right: 90px;
    }
}

.trust-logos-usp-logos .trust-logo {
    flex-direction: column;
    text-align: center;
}

@media (max-width: 768px) {
    .trust-logos-usp-logos .trust-logo .usp-text {
        font-size: 16px;
    }

    .trust-logos-usp-logos .trust-logo .icon-circle-img {
        max-width: 40px;
    }
}

.trust-logos-usp-logos .trust-logo,
.trust-logos-usp-logos .trust-logo i {
    /* color: var(--brand-3);
color: var(--brand-2);
color: var(--brand-1); */
}

.trust-logos-usp-logos .trust-logo i {
    font-size: 2em;
    /* color: var(--brand-3) !important;
color: var(--dark-color) !important; */
    color: #00628e;
}

.trust-logo .icon-circle {
    border: 1px solid #393948;
}

.trust-logos-usp-logos .trust-logo i {
    color: #393948;
}

.usp-text-wrapper {
    line-height: 1em;
    max-width: 168px;
}

.usp-text {
    max-width: 300px;
    font-size: 20px;
}

.usp-sub-text {
    padding-top: 5px;
    display: block;
    color: white;
}

@media (min-width: 768px) {
    .trust-logos-usp-logos .trust-logo i {
        /* max-width: 33.33%; */
        font-size: 1.6em;
    }
}

/* Make .trust-logo min width a 3rd on tablet devices and down */
@media (min-width: 1200px) {
    .trust-logos-usp-logos .trust-logo i {
        /* max-width: auto; */
        font-size: 2.3em;
        font-size: 30px;
    }

    .trust-logos-usp-logos .trust-logo {
        flex-direction: row;
        text-align: center;
        /* min-height: 200px; */
    }

    .trust-logos-usp-logos .trust-logo.flex-wrap {
        flex-wrap: nowrap !important;
    }

    .usp-text {
        max-width: 100%;
        text-align: left;
    }

    .icon-circle {
        margin-right: 8px;
    }
}

/* =========================================================
   5.1 - CTA - footer 
   ========================================================= */

/* =========================================================
   6 - Reviews section
   ========================================================= */

.reviews-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 40px;
}

.review-card-title {
    font-size: clamp(18px, 2vw, 24px);
}

@media screen and (min-width: 992px) {
    .review-card {
        margin: 15px;
    }
}

.review-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.review-card .card-footer {
    margin-top: auto;
}

.review-stars {
    color: #0bb87d;
    font-size: 18px;
}

.review-card .card-text {
    line-height: 1.6;
}

.review-card .verified {
    font-size: 13px;
    color: #6b7280;
}

.review-card-logo {
    max-width: 50px;
    margin-top: auto;
}

/* Owl nav */
.reviews-carousel .owl-nav,
.prod-slider .owl-nav {
    text-align: center;
    margin-top: 25px;
}

.reviews-carousel .owl-nav button,
.prod-slider .owl-nav button {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 0 6px;
    font-size: 18px;
}

.reviews-carousel .owl-nav button:hover,
.prod-slider .owl-nav button:hover {
    background: #111827;
    color: #fff;
}

/* Dots */
.reviews-carousel .owl-dots {
    text-align: center;
    margin-top: 20px;
}

.reviews-carousel .owl-dot span {
    width: 8px;
    height: 8px;
    background: #d1d5db;
    display: block;
    border-radius: 50%;
    margin: 5px;
}

.reviews-carousel .owl-dot.active span {
    background: #111827;
}

/* Owl nav arrows */
/* 1. Add space so the arrows don't cover the card text */
.reviews-carousel,
.prod-slider {
    position: relative;
    padding: 0 40px;
}

/* 2. Position the Nav Container */
.reviews-carousel .owl-nav {
    margin-top: 0;
    /* Remove default margin */
}

/* 3. Style both buttons */
.reviews-carousel .owl-nav .owl-prev,
.reviews-carousel .owl-nav .owl-next,
.prod-slider .owl-nav .owl-prev,
.prod-slider .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Centers them vertically */
    width: 40px;
    height: 40px;
    background: #fff !important;
    /* Dark circle */
    color: #333 !important;
    /* White icon */
    border-radius: 50%;
    /* Perfect circle */
    text-align: center;
    line-height: 40px;
    /* Aligns icon vertically in circle */
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 4. Individual side placement */
.reviews-carousel .owl-nav .owl-prev {
    left: -10px;
}

.reviews-carousel .owl-nav .owl-next {
    right: -10px;
}

/* 5. Hover Effect */
.reviews-carousel .owl-nav .owl-prev:hover,
.reviews-carousel .owl-nav .owl-next:hover {
    background: #9b9b9b !important;
    transform: translateY(-50%) scale(1.1);
}

.reviews-carousel .owl-nav .owl-prev,
.reviews-carousel .owl-nav .owl-next {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
}

.reviews-carousel .owl-nav i {
    margin: 0 !important;
}

/* Hide the arrows when they reach the start or end */
.reviews-carousel .owl-nav .disabled {
    display: none !important;
}

/* Make elements full / same height */
/* Target the internal wrapper created by Owl Carousel */
.reviews-carousel .owl-stage {
    display: flex;
}

/* Ensure each item fills the height of the stage */
.reviews-carousel .owl-item {
    display: flex;
}

/* Ensure your internal wrapper (like .features-item-2) also stretches */
.reviews-carousel .owl-item>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}
/* End: Make elements full / same height */

/* =========================================================
   6.1 - Reviews cards
   ========================================================= */
/* Sidebar Image Styling */
.review-image-side {
    position: relative;
    height: 100%;
    /* min-height: 350px; */
    /* Prevents it from disappearing on mobile */
    overflow: hidden;
}

@media (min-content: 992px) {
    .review-image-side {
        height: 550px;
        /* Fixed height for desktop to align with content */
    }
}

.review-image-side img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Review Card Enhancements */
.review-card {
    padding: 10px;
}

.avatar-img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    /* Prevents squishing in flex rows */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bg-200);
    position: relative;
}

/* The Placeholder Icon */
.avatar-img::before {
    content: "";
    width: 60%;
    height: 60%;
    background-color: var(--bg-500);
    /* This controls the icon color! */
    -webkit-mask: url('assets/img/common/icons/boostrap/person-fill.svg') no-repeat center;
    mask: url('assets/img/common/icons/boostrap/person-fill.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
}

/* The Actual Image (if it exists) */
.avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    /* Sits above the placeholder icon */
    position: relative;
    max-width: none !important;
    min-width: 60px;
    min-height: 60px;
}

/* zoom review images */
.review-image-side {
    position: relative;
}

.magnific-link {
    display: block;
    position: relative;
    text-decoration: none;
}

/* Zoom Icon Overlay */
.zoom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    font-size: 30px;
}

.magnific-link:hover .zoom-overlay {
    opacity: 1;
}

/* Ensure image takes up full space inside the anchor */
.magnific-link img {
    display: block;
    transition: transform 0.3s ease;
}

.magnific-link:hover img {
    transform: scale(1.02);
    /* Subtle zoom effect on the card itself */
}


/* =========================================================
   7 - stats section
   ========================================================= */
/* The main white "Card" */
.stat-card-container {
    background: #fff;
    border-radius: 25px;
    padding: 40px 20px;
    margin: 40px 0;
}

.stat-box {
    text-align: center;
    padding: 10px;
}

.stat-number {
    font-size: 48px;
    font-weight: 400;
    color: #1a202c;
    color: var(--brand-1);
    margin: 0 0 5px 0;
}

.stat-label {
    font-size: 20px;

    margin-bottom: 0;
}

/* Vertical Dividers */
@media (min-width: 768px) {
    .stat-border {
        border-right: 1px solid #e2e8f0;
    }
}

/* Remove horizontal gutters for tight spacing */
.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters>[class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

/* =========================================================
   8 - Animations
   ========================================================= */
/* The Image Zoom */
.clip-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Initial state: Zooms in more to emphasize the reveal */
    transform: scale(1.4);
    transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);
    aspect-ratio: 4 / 3;
}

/* AOS Trigger: Expands to 0% distance from all sides */
[data-aos="clip-reveal"].aos-animate {
    clip-path: inset(0% 0% 0% 0% round 15px);
}

[data-aos="clip-reveal"].aos-animate .clip-image {
    transform: scale(1);
}

/* =========================================================
   9 - Content section
   ========================================================= */
.image-composition-wrapper {
    padding: 20px;
}

/* Secondary overlapping image positioning */
.floating-img-secondary {
    position: absolute;
    bottom: -30px;
    right: -20px;
    width: 45%;
    /* Proportionate size */
    z-index: 2;
    /* border: 8px solid #fff;  */
    /* Creates the white border separation effect */
}

/* Responsive adjustment for small screens */
@media (max-width: 991px) {
    .image-composition-wrapper {
        margin-top: 40px;
    }
}

/* =========================================================
   9.1 - Grid / Overlapping images / Content section, sustainability page etc
   ========================================================= */
/* Large left image, small right image */
.overlap-wrapper {
    position: relative;
    padding: 40px 0;
}

.img-main {
    width: 85%;
    position: relative;
    z-index: 1;
}

.img-secondary {
    width: 60%;
    position: absolute;
    bottom: -20px;
    right: 0;
    z-index: 2;
    /* border: 8px solid #fff;  */
}

.geometric-bg {
    position: absolute;
    top: -20px;
    right: -10px;
    width: 150px;
    height: 150px;
    background-image: radial-gradient(#3498db 2px, transparent 2px);
    /* Dotted pattern from your design */
    background-size: 15px 15px;
    z-index: 0;
    opacity: 0.3;
}

/* Ensure images fit their containers */
.rounded-lg {
    border-radius: 15px !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
    box-shadow: 0 1rem 3rem rgb(0 98 140 / 15%) !important;
}

/* Stack vertically on mobile */
@media (max-width: 767px) {
    /* .img-main, .img-secondary {
        width: 100%;
        position: relative;
        bottom: 0;
        right: 0;
        margin-bottom: 20px;
        border: none;
    } */
}



/* Container must be relative to anchor the absolute card */
.overlap-card-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 60px 0;
}

.overlap-img-container {
    width: 75%;
    /* Image takes up most of the width */
    margin-left: auto;
    /* Pushes image to the right */
}

.text-overlap-right .overlap-img-container {
    margin-left: 0;
    margin-right: auto;
    /* Pushes image to the left */
}

.overlap-text-card {
    position: absolute;
    width: 45%;
    /* Card is narrower and overlaps */
    /* background: #fff; */
    padding: 50px;
    z-index: 10;
    left: 0;
}

.text-overlap-right .overlap-text-card {
    left: auto;
    right: 0;
}

/* Responsive Fix: Stack them on mobile */
@media (max-width: 1400px) {
    .overlap-card-wrapper {
        display: block;
        padding: 0;
    }

    .overlap-img-container,
    .overlap-text-card {
        width: 100%;
        position: static;
        margin: 0;
        /* padding: 30px 15px; */
    }

    .overlap-text-card {
        border-radius: 0 0 15px 15px;
    }

    .overlap-img-container img {
        border-radius: 15px 15px 0 0;
    }
}


/* Core Styling for Clusters */
/* 3 image cluster */
.image-cluster-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(11, 1fr);
    min-height: 450px;
}

.img-base {
    grid-column: 1 / 10;
    grid-row: 2 / 11;
    z-index: 1;
}

.img-overlap-top {
    grid-column: 7 / 13;
    grid-row: 1 / 6;
    z-index: 3;
    /* border: 10px solid #fff; border-radius: 15px;  */
}

.img-overlap-bottom {
    grid-column: 8 / 13;
    grid-row: 7 / 13;
    z-index: 2;
    /* border: 10px solid #fff; border-radius: 15px; */
}

/* Mosaic Grid Logic */
.mosaic-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-top: 40px;
}

.mosaic-item.pos-2 {
    transform: translateY(-40px);
}

/* Offset Effect */
.mosaic-item.pos-3 {
    transform: translateY(40px);
}

/* Dot Pattern Detail */
.dot-pattern-bg {
    position: absolute;
    top: 0;
    left: -20px;
    width: 150px;
    height: 150px;
    background-image: radial-gradient(#3498db 2px, transparent 2px);
    background-size: 18px 18px;
    opacity: 0.2;
    z-index: 0;
}

/* Mobile Responsiveness */
/* @media (max-width: 991px) {
    .image-cluster-wrapper, .mosaic-grid-wrapper { 
        display: block; 
        min-height: auto;
    }
    .img-overlap-top, .img-overlap-bottom, .mosaic-item {
        position: static;
        transform: none !important;
        margin-bottom: 20px;
        border: none;
    }
} */


/* =========================================================
   10 - Product section
   ========================================================= */
.product-col {
    margin-bottom: 32px;
}

.product-col img {
    margin: auto;
    object-fit: cover;
    object-position: center;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    /* height: auto; */
}

.product-item.card,
.product-col .product-image {
    border-radius: 10px;
    /* overflow: hidden; */
}

.product-col .product-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: static;
}

.product-col .product-image a {
    /* height: 100%; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    overflow: hidden;
}

.product-item.card {
    overflow: hidden;
    margin: 0;
}

@media screen and (min-width: 576px) {
    .product-item.card {
        height: 100%;
    }
}

@media screen and (min-width: 1400px) {
    /* .product-col .product-image {
        min-height: 350px;
    }
    .product-col .product-image a{
        height: 350px;
    } */
}

.product-col .product-image {
    /* min-height: 490px; */
    min-height: 350px;
}

.product-col .product-image a {
    height: 350px;
}

.product-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Space between thumbnails */
    margin-top: 15px;
    justify-content: center;
}

.product-thumbs .childthumb {
    width: 60px;
    /* Adjust size as needed */
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.product-thumbs .childthumb.synced {
    border-color: #000;
    /* Highlighting the active one */
}

/* Update your CSS to this */
#sync1 .owl-item {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    /* Hardware acceleration for smoother fade */
}

.fadeOut {
    animation-name: fadeOut;
    position: absolute;
    /* Crucial: stops the sliding gap */
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}

.fadeIn {
    animation-name: fadeIn;
    z-index: 2;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Add this to your stylesheet */
.owl-fade-out {
    z-index: 10;
    animation: fadeOut .2s both ease;
    opacity: 0;
}

.owl-fade-in {
    animation: fadeIn .2s both ease;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.product-item .product-content {
    padding: 15px 25px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100%;
    align-items: center;
    flex-direction: column;
}

@media (min-width: 1400px) {
    .product-item .product-content .product-content-meta {
        font-size: 14px;
        height: 28px;
        overflow: hidden;
        position: relative;
        display: block;
    }
}

.color-swatch-item.list-unstyled {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0;
}

.color-swatch-item.list-unstyled li {
    margin-bottom: 6px;
}

.color-swatch-item.list-unstyled .swatch span {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 20%;
    border: 1px solid #ccc;
    margin-right: 2px;
}

.color-swatch-item.list-unstyled .more-colours {
    line-height: 26px;
    display: inline-block;
    width: auto;
    vertical-align: top;
    font-size: 14px;
    margin-left: 5px;
}

.product-item.card.shadow-sm:hover,
.product-item.card.shadow-sm:focus {
    box-shadow: 0 0.125rem 0.25rem rgb(0 98 140 / 35%) !important;
    transition: box-shadow 0.3s ease;
}

article.page-body section .product-description ul {
    padding-left: 0;
}

.product-description ul li {
    list-style: none;
}

/* =========================================================
   10.1 - Product filters
   ========================================================= */

.category-pill-wrapper {}

.category-pill {
    min-width: auto!important;
    height: 38px;
    margin-right: 8px;
    margin-bottom: 8px;
    /* color: var(--brand-1);
    border-color: var(--brand-1); */
}

.category-pill:hover,
.category-pill:focus {
    background-color: var(--brand-1);
    border-color: var(--brand-1);
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover,
.sorter-bar .dropdown-menu>li>a:focus,
.sorter-bar .dropdown-menu>li>a:hover {
    color: var(--brand-1) !important;
    background-color: var(--bg-100);
    text-decoration: none;
}

.bootstrap-select .dropdown-toggle {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-count {
    background: #d9ecfb;
    color: var(--brand-1);
    border-radius: 20px;
    padding: 3px 10px;
    font-weight: 600;
    margin-left: 10px;
    font-size: 14px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bootstrap-select .glyphicon.glyphicon-ok.check-mark {
    font-size: 10px;
    background: var(--brand-1);
    color: white;
    height: 20px;
    width: 20px;
    border-radius: 2px;
}

.bootstrap-select .glyphicon.glyphicon-ok.check-mark:before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.bootstrap-select .colour-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 1px;
    margin-right: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    vertical-align: middle;
}


.active-filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    background-color: #f1f3f5;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    padding: 6px 18px;
    font-size: 16px;
    color: #fff;
    background-color: var(--bg-700);
    border: 1px solid var(--bg-700);
}

.remove-pill {
    background: none;
    border: none;
    margin-left: 8px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: color 0.2s;
    border-radius: 50%;
    width: 20px;
    height: 20px
}

.remove-pill:hover {
    background-color: #fff;
    color: var(--bg-500);
    /* Red on hover */
}

/* .filters-overflow-xs {
    overflow-x: scroll;
    overflow-y: visible;
    width: 100%;
    flex-wrap: nowrap!important;
} */

.price-table-footer th {
    background-color: white!important;
    border: none !important;
}



.table-wrap {
  overflow-x: scroll; }

.product-table {
  min-width: 1000px !important;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px; 
  border: none!important;
}
  .product-table thead th {
    border: none!important;
    padding: 30px;
    color: #fff; 
    background-color: #f9fafc!important;
    /* border-bottom: 1px solid #d2d2d2 !important; */
    text-align: center;
}
  .product-table tbody tr {
    margin-bottom: 10px;
    -webkit-box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29);
    -moz-box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29);
    box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29); }
  .product-table tbody th, .product-table tbody td {
    border: none!important;
    padding: 30px;
    background: #fff; 
    vertical-align: middle;
}
.layout-groupped .product-table .qty {
    background: #f9fafc6b;
}
.product-table .selectprice:hover {
    background-color: #f9fafc;

}

#samedayPriceTable {
    font-size: 18px;
}

.price-grid-disclaimer {
    margin: 12px 0 0;
    color: #5f6673;
    font-size: 19px;
    line-height: 1.5;
}

  .product-table thead.price-table-footer th {
    background-color: #fff!important;
    border: none!important;
}

/* =========================================================
   10.2 - Product filters carousel
   ========================================================= */
/* Container to allow horizontal scrolling */
.category-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px 0;
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on mobile */
}

/* Hide scrollbar for Chrome, Safari and Opera if desired, 
   or keep it visible like in your screenshot */
.category-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
}

.category-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* Individual Item Styling */
.category-item {
    display: inline-block;
    flex: 0 0 auto;
    width: 130px;
    /* Adjust based on preference */
    text-align: center;
    margin-right: 15px;
    text-decoration: none !important;
    color: #333;
    color: var(--brand-1);
}

.category-circle {
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 50%;
    border-radius: 5px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.category-circle img {
    max-width: 60%;
    height: auto;
}

/* Active/Hover State */
.category-item:hover .category-circle,
.category-item.active .category-circle {
    border-color: var(--brand-1);
    /* Match your brand dark blue */
    box-shadow: 0 0 0 1px var(--brand-1);
}

.category-label {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
    /* Allows text to wrap within the item width */
    color: var(--brand-1);
}

/* =========================================================
   10.3 - How to order steps
   ========================================================= */
.process-section {
    background-color: transparent;
    padding: 60px 0;
}

.process-item {
    padding: 20px;
    position: relative;
}

.process-icon {
    width: 80px;
    height: 80px;
    background: var(--bg-100);
    /* border: 2px solid var(--brand-1); */
    border-radius: 50%;
    margin: 0 auto 20px;
    line-height: 80px;
    font-size: 30px;
    color: var(--brand-1);
    position: relative;
    transition: all 0.3s ease;
}

.process-icon.highlight {
    background-color: #eefbff;
    border-color: var(--brand-1);
}

.step-number {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #3498db;
    color: #fff;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 25px;
    font-weight: bold;
    display: none;
}

.process-item h4 {
    font-weight: 700;
    color: var(--brand-1);
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 16px;
}

.process-item p {
    font-size: 14px;
    color: #7f8c8d;
    line-height: 1.4;
}

/* Connecting lines for desktop */
@media (min-width: 992px) {
    .process-item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 60px;
        left: 60%;
        width: 80%;
        height: 2px;
        background: #eee;
        z-index: -1;
    }
}

.pricing-callout {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 30px;
    border: 1px dashed #b4e6e6;
}

/* =========================================================
   10.4 - Filters side menu
   ========================================================= */

.js-close-icon-filters {
    display: none;
}


.nav-trigger-filters {
    display: none;
}

.nav-trigger-filters:before {
    font-family: 'ElegantIcons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\61";
            display: block;
        font-size: 32px;
        background-color: white;
}

.category-pill-wrapper + .nav-trigger-filters:before {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e7e8ec;
    border-radius: 5px;
}

@media (max-width: 1199px) {

.nav-trigger-filters {
    display: block;
}

.menu-bar-filters {
        margin-right: 10px;
        left: 0;
        max-width: 300px;        
        position: fixed;
        top: 0;
        bottom: 0;
        overflow: auto;
        background-color: #fff;
        height: 100%;
        z-index: 999;
        margin: 0;
        border: none;       
        transform: translateX(-350px);
        -webkit-transform: translateX(-350px);

        transition: all ease-in-out 0.3s ;
        -webkit-transition: all ease-in-out 0.3s ;
    }


        .off-canvas-body-filters .menu-bar-filters {
        background-color: #fff;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
    }


        .menu-bar-filters .close-icon {
        margin: 10px;
        font-size: 20px;
        color: #939393;
        text-align: right;
        float: right;
    }

    .menu-bar-filters .close-icon:before {
content: "\4d";
font-size: 20px;
    }

    .js-close-icon-filters {
    display: block;
}

.off-canvas-body-filters .menu-bar-filters {
    background-color: #fff;
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
    padding: 0 10px;
}

.filters-menu-spacer {
    padding: 20px;
    width: 100%;
}


}

/* 1. Base state - Add the transition here */
.selectprice {
    cursor: pointer;
    background-color: transparent;
    color: inherit;
    /* transition: property duration timing-function */
    transition: background-color 0.4s ease, color 0.4s ease;
    -webkit-transition: background-color 0.4s ease, color 0.4s ease; /* Older Safari/Chrome */
}

/* 2. Active state */
.selectprice.active {
    background-color: var(--brand-1)!important;
    color: white !important;
}

.category-pill.active,
.category-pill.active:hover,
.category-pill.active:focus {
    background-color: var(--brand-1) !important;
    border-color: var(--brand-1) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(22, 95, 166, 0.18);
}

.category-description-full {
    max-width: 1000px;
    margin: 14px auto 0;
    font-size: 18px;
    line-height: 1.55;
}

.category-description-mobile {
    margin: 10px auto 0;
    font-size: 15px;
    line-height: 1.45;
}

/* =========================================================
   10.5 - Product process
   ========================================================= */
.product-step .badge {
    font-size: 16px;
}

   .card-process:hover {
    border-color: var(--brand-1)!important;
}


/* =========================================================
   11 - Featured section
   ========================================================= */
.color2 {
    background: #dff5f4;
}

.mask-overlay-alt-1::before {
    background: linear-gradient(360deg, rgb(236 238 245) 0%, rgba(200, 230, 255, 0.8) 100%);
    background: linear-gradient(180deg, rgb(236 238 245) 0%, rgba(200, 230, 255, 0.8) 100%);
    background: linear-gradient(180deg, rgb(200 230 255) 0%, rgba(200, 230, 255, 0.95) 100%);

    background: linear-gradient(180deg, rgb(217 233 251 / 97%) 0%, rgb(217 233 251 / 98%) 100%);


    background: linear-gradient(180deg, rgb(231 249 255) 0%, rgb(231 249 255) 95%);

    opacity: 0.97;
}

.mask-overlay-alt-2::before {
    background: linear-gradient(360deg, rgb(236 238 245) 0%, rgba(200, 230, 255, 0.8) 100%);
    background: linear-gradient(180deg, rgb(236 238 245) 0%, rgba(200, 230, 255, 0.8) 100%);
    background: linear-gradient(180deg, rgb(200 230 255) 0%, rgba(200, 230, 255, 0.9) 100%);

    opacity: 0.5;
}

/* =========================================================
   12 - Medium desktop responsiveness

   Keep the established 1600px layout, while progressively
   reducing wide desktop components at 1440px, 1366px and 1024px.
   ========================================================= */

/* The previous 1568px fixed width overflowed a 1440px viewport. */
@media (min-width: 1400px) {
    .container {
        width: calc(100% - 32px);
        max-width: 1568px;
    }
}

/* 1440px and 1366px desktop layouts. */
@media (min-width: 1200px) and (max-width: 1499px) {
    .header-fifteen .primary-navbar > li > a {
        padding: 5px 14px;
        font-size: 16px;
    }

    .section-one .features-item-2 .content {
        padding: 16px;
    }

    .section-one .features-item-2 .content h2 {
        max-width: 100%;
        font-size: 24px;
        line-height: 1.08;
    }

    .section-one .features-item-2 .content .btn {
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 11px;
    }

    .product-col .product-image {
        min-height: clamp(250px, 20vw, 300px);
    }

    .product-col .product-image a {
        height: clamp(250px, 20vw, 300px);
    }

    .product-item .product-content {
        padding: 13px 15px;
    }

    .product-item .product-title {
        font-size: 16px;
        line-height: 1.3;
    }

    .product-item .product-content-meta-promo .price1 {
        font-size: 34px !important;
    }

    .color-swatch-item.list-unstyled .swatch span {
        width: 23px;
        height: 23px;
    }

    .price-grid-wrap {
        overflow-x: auto;
    }

    /* Give the pricing/options column enough room for a readable 11-column grid. */
    .product-media-column {
        width: 25%;
    }

    .product-info-column {
        width: 75%;
    }

    #samedayPriceTable {
        width: 100%;
        min-width: 100% !important;
        border-spacing: 0 10px;
    }

    #samedayPriceTable thead th,
    #samedayPriceTable tbody th,
    #samedayPriceTable tbody td {
        padding: clamp(22px, 1.8vw, 26px) clamp(5px, .55vw, 8px);
        line-height: 1.35;
        text-align: center;
    }

    #samedayPriceTable thead th {
        white-space: normal;
    }
}

/* 1366px: the full navigation remains on one line. */
@media (min-width: 1200px) and (max-width: 1399px) {
    .header-fifteen .primary-navbar > li > a {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }

    .section-one .features-item-2 .content {
        padding: 12px;
    }

    .section-one .features-item-2 .content h2 {
        font-size: 20px;
    }

    .section-one .features-item-2 .content .btn {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 10px;
    }
}

/* 1024px desktop/tablet landscape: squeeze the price grid into its column. */
@media (min-width: 992px) and (max-width: 1199px) {
    .price-grid-wrap {
        overflow-x: auto;
    }

    #samedayPriceTable {
        min-width: 590px !important;
        border-spacing: 0 5px;
    }

    #samedayPriceTable thead th,
    #samedayPriceTable tbody th,
    #samedayPriceTable tbody td {
        padding: 8px 3px;
        line-height: 1.2;
        text-align: center;
    }

    #samedayPriceTable thead th {
        white-space: normal;
    }
}