/* Scrollbar width */
 ::-webkit-scrollbar {
     width: 5px;
 }

/* Products mobile category filter */
.page-products .mobile-category-filter {
    width: min(400px, 92vw);
    border: 0;
    background: #f7f7f5;
    box-shadow: 18px 0 50px rgba(0, 0, 0, 0.16);
}

.page-products .mobile-category-filter .offcanvas-header {
    min-height: 92px;
    padding: 18px 20px;
    border-bottom: 1px solid #e9e9e5;
    background: #ffffff;
}

.mobile-category-filter-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-category-filter-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    background: #fff0f1;
    color: #e00827;
    font-size: 19px;
}

.mobile-category-filter-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #858585;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.page-products .mobile-category-filter h5 {
    color: #171717;
    font-size: 17px;
    font-weight: 700;
}

.mobile-category-filter-close {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #ecece8;
    border-radius: 50%;
    background: #ffffff;
    color: #454545;
}

.page-products .mobile-category-filter .offcanvas-body {
    padding: 20px 18px 28px;
}

.mobile-category-filter-label {
    margin: 0 2px 11px;
    color: #858585;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

.page-products .mobile-category-link {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 12px;
    border: 0;
    border-radius: 11px;
    color: #292929;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.mobile-category-name {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    overflow-wrap: anywhere;
}

.page-products .mobile-category-link:hover,
.page-products .mobile-category-link.active {
    padding-left: 12px;
    background: #fff0f1;
    color: #c9001e;
}

.mobile-category-all {
    margin-bottom: 18px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}

.mobile-category-list {
    overflow: hidden;
    border: 1px solid #e9e9e5;
    border-radius: 14px;
    background: #ffffff;
}

.page-products .mobile-view-all-products {
    margin-top: 14px;
    padding: 15px 16px;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}

.mobile-category-group + .mobile-category-group,
.mobile-category-group {
    border-bottom: 1px solid #efefec;
}

.mobile-category-group:last-child {
    border-bottom: 0;
}

.mobile-category-row {
    display: flex;
    align-items: center;
    padding-right: 8px;
}

.mobile-category-row > .mobile-category-link {
    flex: 1 1 auto;
}

.mobile-category-expand {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #777777;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.mobile-category-expand:hover,
.mobile-category-expand[aria-expanded="true"] {
    background: #f5f5f2;
    color: #e00827;
}

.mobile-category-expand[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.mobile-category-expand i {
    transition: transform 0.2s ease;
}

.mobile-category-children {
    margin: 0 10px 10px 14px;
    padding-left: 8px;
    border-left: 1px solid #e9e9e5;
}

.mobile-category-children .mobile-category-link {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
}

 /* Blog page */
 .blog-page-hero {
     position: relative;
     display: flex;
     align-items: center;
     min-height: 390px;
     padding: 75px 0;
     color: #ffffff;
     background:
         linear-gradient(90deg, rgba(12, 12, 12, 0.82), rgba(12, 12, 12, 0.28)),
         url("../assets/images/modern-office-teamwork-co-working-space-quiet-a-2024-12-06-22-51-04-utc-min-3.png") center 45% / cover;
 }

 .blog-page-hero-content {
     max-width: 720px;
 }

 .blog-page-hero .hero-eyebrow {
     color: #ffcc66;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 2px;
 }

 .blog-page-hero h1 {
     margin: 16px 0;
     color: #ffffff;
     font-size: clamp(38px, 6vw, 64px);
     font-weight: 700;
     line-height: 1.1;
 }

 .blog-page-hero p {
     max-width: 610px;
     margin-bottom: 22px;
     color: rgba(255, 255, 255, 0.86);
     line-height: 1.8;
 }

 .blog-page-hero .breadcrumb-custom {
     color: rgba(255, 255, 255, 0.78);
 }

 .blog-page-hero .breadcrumb-custom a {
     color: #ffffff;
 }

 .blog-page-main {
     padding: 90px 0 110px;
     background: #f7f7f5;
 }

 .blog-page-heading {
     display: flex;
     align-items: end;
     justify-content: space-between;
     gap: 32px;
     margin-bottom: 38px;
 }

 .blog-page-heading h2 {
     margin: 16px 0 0;
     color: #111111;
     font-size: clamp(32px, 4vw, 46px);
     font-weight: 700;
     line-height: 1.15;
 }

 .blog-page-heading h2 span {
     color: #e00827;
 }

 .blog-page-heading>p {
     max-width: 440px;
     margin: 0 0 4px;
     color: #666666;
     line-height: 1.8;
 }

 .blog-page-cards .blog-card {
     border: 1px solid #e8e8e5;
     transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 }

 .blog-page-cards .blog-card:hover {
     transform: translateY(-6px);
     border-color: transparent;
     box-shadow: 0 18px 42px rgba(0, 0, 0, 0.1);
 }

 .blog-page-cards .blog-card>img {
     display: block;
 }

 .blog-page-cards .blog-content p {
     margin: 0 0 20px;
     color: #666666;
     font-size: 14px;
     line-height: 1.75;
 }

 .blog-published-date {
     display: block;
     margin: 0 0 12px;
     color: #888888;
     font-size: 12px;
 }

 .blog-page-cards .blog-content a {
     display: inline-flex;
     align-items: center;
     font-size: 12px;
     transition: color 0.25s ease;
 }

 .blog-page-cards .blog-content a:hover {
     color: #e00827;
 }

 .blog-page-cards .blog-content a i {
     transition: transform 0.25s ease;
 }

 .blog-page-cards .blog-content a:hover i {
     transform: translateX(4px);
 }

 .blog-page-cta {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     margin-top: 48px;
     padding: 38px;
     background: #ffffff;
     border: 1px solid #e8e8e5;
 }

 .blog-page-cta h2 {
     margin: 12px 0 0;
     color: #111111;
     font-size: clamp(23px, 3vw, 32px);
     font-weight: 700;
 }

 .clients-section {
     overflow: hidden;
     padding: 82px 0;
     background: #f7f7f5;
 }

 .clients-heading {
     margin-bottom: 34px;
     text-align: center;
 }

 .clients-heading .section-label {
     margin-bottom: 12px;
 }

 .clients-heading .section-title {
     margin: 0 auto;
     font-size: clamp(32px, 4vw, 44px);
 }

 .clients-heading p {
     margin: 14px 0 0;
     color: #666666;
 }

 .client-slider {
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none;
     -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
     mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
     cursor: grab;
     user-select: none;
     touch-action: pan-x pan-y;
 }

 .client-slider.is-dragging {
     cursor: grabbing;
 }

 .client-slider::-webkit-scrollbar {
     display: none;
 }

 .client-slider-track {
     display: flex;
     width: max-content;
     align-items: center;
     padding: 4px 0 12px;
 }

 .client-logo {
     position: relative;
     display: flex;
     width: 220px;
     height: 140px;
     flex: 0 0 220px;
     align-items: center;
     justify-content: center;
     margin: 0 12px;
     padding: 18px 24px;
     background: #ffffff;
     border: 1px solid #e7e7e4;
     color: #242424;
     cursor: pointer;
     text-align: center;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }

 .client-slider.is-dragging .client-logo {
     pointer-events: none;
 }

 .client-logo:hover,
 .client-logo:focus-visible {
     border-color: #e00827;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
 }

 .client-logo img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }



 .blog-detail-hero {
     position: relative;
     overflow: hidden;
     padding: 38px 0 72px;
     background:
         radial-gradient(ellipse at 85% 0%, rgba(224, 8, 39, .08), transparent 34%),
         #f7f7f5;
 }

 .blog-detail-hero-content {
     max-width: 900px;
     margin: 0 auto;
 }

 .blog-detail-hero .breadcrumb-custom {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 9px;
     margin-bottom: 38px;
     color: #999;
     font-size: 10px;
     letter-spacing: .7px;
 }

 .blog-detail-hero .breadcrumb-custom a {
     color: #696969;
     text-decoration: none;
     transition: color .2s ease;
 }

 .blog-detail-hero .breadcrumb-custom a:hover {
     color: #e00827;
 }

 .blog-detail-hero .breadcrumb-custom span:last-child {
     max-width: min(55vw, 340px);
     overflow: hidden;
     color: #222;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .blog-detail-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 17px;
     color: #e00827;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 1.6px;
 }

 .blog-detail-eyebrow::before {
     width: 26px;
     height: 2px;
     background: #e00827;
     content: "";
 }

 .blog-detail-hero h1 {
     max-width: 860px;
     margin: 0 0 18px;
     color: #171717;
     font-size: clamp(38px, 5.4vw, 66px);
     font-weight: 700;
     line-height: 1.06;
     letter-spacing: -2px;
 }

 .blog-detail-hero .blog-detail-subtitle {
     max-width: 700px;
     margin: 0 0 25px;
     color: #666;
     font-size: 17px;
     line-height: 1.8;
 }

 .blog-detail-meta {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 18px;
     color: #777;
     font-size: 12px;
 }

 .blog-detail-meta time,
 .blog-detail-author {
     display: inline-flex;
     align-items: center;
     gap: 9px;
 }

 .blog-detail-meta time i {
     color: #e00827;
 }

 .blog-detail-author {
     color: #333;
     font-weight: 600;
 }

 .blog-detail-author-mark {
     display: grid;
     width: 30px;
     height: 30px;
     place-items: center;
     border-radius: 50%;
     background: #171717;
     color: #fff;
     font-size: 9px;
     letter-spacing: .3px;
 }

 .blog-detail-section {
     padding: 0 0 96px;
     background: #f7f7f5;
 }

 .blog-detail-article {
     max-width: 1040px;
     margin: 0 auto;
     transform: translateY(-32px);
     margin-bottom: -32px;
 }

 .blog-detail-figure {
     margin: 0;
     padding: 10px;
     overflow: hidden;
     border: 1px solid #fff;
     background: #fff;
     box-shadow: 0 20px 55px rgba(0, 0, 0, .11);
 }

 .blog-detail-image {
     display: block;
     width: 100%;
     height: auto;
     max-height: 580px;
     object-fit: contain;
     background: #f2f2f0;
 }

 .blog-detail-body {
     max-width: 790px;
     margin: 0 auto;
     padding: 42px 54px 38px;
     border: 1px solid #e9e9e6;
     background: #fff;
     box-shadow: 0 14px 36px rgba(0, 0, 0, .045);
 }

 .blog-detail-reading-label {
     display: block;
     margin-bottom: 20px;
     color: #e00827;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: 1.5px;
 }

 .blog-detail-copy {
     color: #4f4f4f;
     overflow-wrap: anywhere;
 }

 .blog-detail-copy > :first-child {
     margin-top: 0;
 }

 .blog-detail-copy > :last-child {
     margin-bottom: 0;
 }

 .blog-detail-copy p,
 .blog-detail-copy li {
     color: #4f4f4f;
     font-size: 16px;
     line-height: 1.9;
 }

 .blog-detail-copy p {
     margin: 0 0 22px;
     white-space: pre-line;
 }

 .blog-detail-copy h2,
 .blog-detail-copy h3,
 .blog-detail-copy h4 {
     margin: 32px 0 14px;
     color: #171717;
     font-weight: 700;
     line-height: 1.3;
 }

 .blog-detail-copy h2 {
     font-size: 28px;
 }

 .blog-detail-copy h3 {
     font-size: 22px;
 }

 .blog-detail-copy ul,
 .blog-detail-copy ol {
     margin: 0 0 24px;
     padding-left: 24px;
 }

 .blog-detail-copy li {
     margin-bottom: 8px;
     padding-left: 4px;
 }

 .blog-detail-copy blockquote {
     margin: 30px 0;
     padding: 5px 0 5px 22px;
     border-left: 3px solid #e00827;
     color: #333;
     font-size: 19px;
     font-weight: 500;
     line-height: 1.7;
 }

 .blog-detail-copy a {
     color: #c9001d;
     text-decoration-thickness: 1px;
     text-underline-offset: 3px;
 }

 .blog-detail-copy img {
     max-width: 100%;
     height: auto;
 }

 .blog-detail-copy .blog-detail-empty {
     color: #777;
     font-style: italic;
 }

 .blog-detail-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
     margin-top: 34px;
     padding-top: 24px;
     border-top: 1px solid #ececea;
 }

 .blog-detail-back {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     color: #555;
     font-size: 13px;
     font-weight: 700;
     text-decoration: none;
 }

 .blog-detail-back:hover,
 .blog-detail-contact:hover {
     color: #e00827;
 }

 .blog-detail-contact {
     display: flex;
     flex-direction: column;
     gap: 7px;
     color: #777;
     font-size: 11px;
     font-weight: 700;
     text-decoration: none;
     transition: color .2s ease;
 }

 .blog-detail-contact > span:last-child {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     color: #171717;
     font-size: 12px;
 }

 .blog-detail-not-found {
     padding: 45px;
     background: #ffffff;
     text-align: center;
 }

 .blog-detail-not-found h2 {
     color: #111111;
 }

 .blog-detail-not-found a {
     color: #e00827;
     font-weight: 700;
 }

 @media (max-width: 767.98px) {
     .blog-page-hero {
         min-height: 340px;
         padding: 60px 0;
     }

     .blog-page-main {
         padding: 65px 0 80px;
     }

     .blog-page-heading,
     .blog-page-cta {
         align-items: flex-start;
         flex-direction: column;
     }

     .blog-page-cta {
         padding: 28px;
     }

     .clients-section {
         padding: 65px 0;
     }

     .client-logo {
         width: 180px;
         height: 84px;
         flex-basis: 180px;
     }

     .blog-detail-hero {
         padding: 32px 0 52px;
     }

     .blog-detail-section {
         padding: 0 0 64px;
     }

     .blog-detail-hero .breadcrumb-custom {
         margin-bottom: 28px;
         gap: 7px;
     }

     .blog-detail-hero h1 {
         font-size: clamp(34px, 8vw, 48px);
         letter-spacing: -1px;
     }

     .blog-detail-hero .blog-detail-subtitle {
         font-size: 15px;
     }

     .blog-detail-figure {
         padding: 6px;
     }

     .blog-detail-body {
         padding: 28px 24px;
     }

     .blog-detail-copy p {
         font-size: 15px;
         line-height: 1.85;
     }

     .blog-detail-footer {
         align-items: flex-start;
         flex-direction: column;
         gap: 18px;
     }
 }

 .whatsapp-float {
     position: fixed;
     right: 50px;
     bottom: 100px;
     z-index: 3000;
     display: flex;
     width: 58px;
     height: 58px;
     align-items: center;
     justify-content: center;
     border: 2px solid #ffffff;
     border-radius: 50%;
     background: #25d366;
     color: #ffffff;
     font-size: 30px;
     line-height: 1;
     text-decoration: none;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
     transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
 }

 .whatsapp-float:hover,
 .whatsapp-float:focus-visible {
     transform: translateY(-4px);
     background: #1fba59;
     color: #ffffff;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
 }

 .whatsapp-float:focus-visible {
     outline: 3px solid #14532d;
     outline-offset: 3px;
 }

 .whatsapp-tooltip {
     position: absolute;
     right: calc(100% + 12px);
     top: 50%;
     padding: 9px 13px;
     border-radius: 7px;
     background: #171717;
     color: #ffffff;
     font-size: 12px;
     font-weight: 600;
     line-height: 1;
     white-space: nowrap;
     opacity: 0;
     pointer-events: none;
     transform: translate(5px, -50%);
     transition: opacity 0.2s ease, transform 0.2s ease;
 }

 .whatsapp-tooltip::after {
     position: absolute;
     top: 50%;
     left: 100%;
     width: 0;
     height: 0;
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-left: 5px solid #171717;
     content: "";
     transform: translateY(-50%);
 }

 .whatsapp-float:hover .whatsapp-tooltip,
 .whatsapp-float:focus-visible .whatsapp-tooltip {
     opacity: 1;
     transform: translate(0, -50%);
 }

 @media (prefers-reduced-motion: reduce) {
     .whatsapp-float {
         transition: none;
     }

     .whatsapp-tooltip {
         transition: none;
     }
 }

 @media (prefers-reduced-motion: no-preference) {

     a,
     button,
     input[type="button"],
     input[type="submit"],
     [role="button"] {
         transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease,
             box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
     }
 }

 .whatsapp-btn {
     margin-top: 10px;
     width: 100%;
     height: 54px;
     border: 1px solid #ddd;
     background: #fff;
     color: #222;
     text-decoration: none;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     font-size: 14px;
     font-weight: 600;
     transition: all .25s ease;
 }

 .whatsapp-btn i {
     color: #25D366;
     font-size: 18px;
 }

 .whatsapp-btn:hover {
     border-color: #25D366;
     color: #25D366;
 }


 .page-what-we-do .scroll-reveal-item {
     opacity: 0;
     transform: translateY(25px);
     transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .page-what-we-do .scroll-reveal-item.is-visible {
     opacity: 1;
     transform: translateY(0);
 }

 .page-what-we-do .service-card.scroll-reveal-item.is-visible:hover {
     transform: translateY(-6px) !important;
     transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 }

 @media (prefers-reduced-motion: reduce) {
     .client-slider {
         -webkit-mask-image: none;
         mask-image: none;
     }

     *,
     *::before,
     *::after {
         scroll-behavior: auto !important;
         transition-duration: 0.01ms !important;
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
     }
 }

 /* Scrollbar track */
 ::-webkit-scrollbar-track {
     background: #f1f1f1;
     /* border-radius: 10px; */
 }

 /* Scrollbar handle */
 ::-webkit-scrollbar-thumb {
     background: #E00827;
     /* border-radius: 10px; */
 }


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

 html,
 body {
     overflow-x: hidden !important;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: "Inter", sans-serif;
     color: #555555;
     background: #ffffff;
 }

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

 a {
     text-decoration: none;
 }

 section {
     scroll-margin-top: 90px;
 }

 @media (prefers-reduced-motion: no-preference) {
     .scroll-reveal {
         opacity: 0;
         transform: translateY(18px);
         transition: opacity 650ms ease, transform 650ms ease;
     }

     .scroll-reveal.is-visible {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @media (prefers-reduced-motion: reduce) {
     html {
         scroll-behavior: auto;
     }
 }

 .section-padding {
     padding: 110px 0;
 }

 /* TOP BAR */
 .top-bar {
     background: #fff;
     color: #ffffff;
     font-size: 13px;
 }

 .top-bar-inner {
     min-height: 42px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .top-left,
 .top-right {
     display: flex;
     align-items: center;
     gap: 22px;
 }

 .top-bar a {
     color: #000;
     transition: 0.3s ease;
 }

 .top-bar a:hover {
     color: #E00827 !important;
 }

 .top-bar i {
     margin-right: 6px;
     color: #E00827;
 }

 .top-right {
     gap: 12px;
 }

 .top-right span {
     margin-right: 4px;
     color: #aaa;
 }

 .top-right a {
     font-size: 14px;
 }


 /* =========================================================
   NAVBAR
========================================================= */

 .main-navbar {
     background: rgba(255, 255, 255, 0.98);
     min-height: 82px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.06);
     transition: all 0.3s ease;
     z-index: 999;
 }

 .navbar-scrolled {
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
 }

 .navbar-brand {
     display: flex;
     align-items: center;
     gap: 5px;
     font-weight: 800;
     letter-spacing: 1px;
 }

 .logo-main {
     color: #000;
     font-size: 22px;
 }

 .logo-sub {
     color: #E00827;
     font-size: 22px;
 }

 .navbar-nav {
     gap: 5px;
 }


 /* =========================================================
   NAVBAR LINKS & HOVER UNDERLINE
========================================================= */

 .nav-link {
     color: #070707 !important;
     font-size: 14px;
     font-weight: 500;
     padding: 30px 14px !important;
     position: relative;
 }

 /* Base animated underline for top nav links */
 .nav-link::after {
     content: "";
     position: absolute;
     width: 0;
     height: 2px;
     background: #E00827;
     bottom: 18px;
     left: 14px;
     transition: width 0.3s ease;
     border: none !important;
     vertical-align: normal !important;
 }

 /* 1. Keep underline active on hover AND when hovering inside the dropdown menu */
 .nav-link:hover::after,
 .nav-link.active::after,
 .nav-item.dropdown:hover>.nav-link::after {
     width: calc(100% - 28px);
 }

 /* Reset Bootstrap dropdown toggle margin */
 .dropdown-toggle::after {
     margin-left: 0 !important;
 }

 /* =========================================================
   SHOW DROPDOWN ON HOVER
========================================================= */

 @media (min-width: 992px) {

     /* Reveal dropdown list on parent hover */
     .nav-item.dropdown:hover>.dropdown-menu {
         display: block;
         opacity: 1;
         visibility: visible;
         margin-top: 0;
     }

     .dropdown-menu {
         display: block;
         opacity: 0;
         visibility: hidden;
         transition: all 0.25s ease-in-out;
         border: 1px solid #eee;
         border-radius: 4px;
         box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
         padding: 8px 0;
     }
 }

 /* =========================================================
   DROPDOWN OPTIONS ANIMATED RED LINE
========================================================= */

 .dropdown-item {
     position: relative;
     padding: 10px 20px;
     color: #333;
     font-size: 14px;
     transition: color 0.3s ease, padding-left 0.3s ease;
 }

 /* Red line indicator before each sub-option (hidden by default) */
 .dropdown-item::before {
     content: "";
     position: absolute;
     left: 12px;
     top: 50%;
     transform: translateY(-50%);
     width: 0;
     height: 2px;
     background-color: #E00827;
     transition: width 0.3s ease;
 }

 /* Option hover effect: expand line and shift text slightly */
 .dropdown-item:hover {
     background-color: transparent;
     color: #E00827;
     padding-left: 30px;
 }

 .dropdown-item:hover::before {
     width: 12px;
 }

 .office-care-logo {
     width: 175px;
     height: auto;
     display: block;
     object-fit: contain;
 }


 @media (max-width: 480px) {

     .office-care-logo {
         width: 145px;
     }

 }


 .footer-office-logo {
     width: 180px;
     height: auto;
     display: block;
     margin-bottom: 20px;
 }

 .dropdown-menu {
     border: 0;
     border-radius: 0;
     padding: 10px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

 }

 .dropdown-item {
     padding: 10px 15px;
     font-size: 13px;
 }

 .dropdown-item:hover {
     background: #f7f7f5;
     color: #000
 }

 .search-btn {
     width: 42px;
     height: 42px;
     border: 1px solid #e4e4e1;
     border-radius: 50%;
     background: transparent;
     transition: 0.3s ease;
 }

 .search-btn:hover {
     background: #000;
     color: white;
     border-color: #000;
 }

 .navbar-toggler {
     border: 0;
     box-shadow: none !important;
 }


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

 .hero-section {
     min-height: 720px;
     position: relative;
     display: flex;
     align-items: center;

     background:
         url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2000&q=90") center center / cover no-repeat;
 }

 .hero-overlay {
     position: absolute;
     inset: 0;

     background:
         linear-gradient(90deg,
             rgba(0, 0, 0, 0.78) 0%,
             rgba(0, 0, 0, 0.60) 45%,
             rgba(0, 0, 0, 0.10) 100%);
 }

 .min-vh-hero {
     min-height: 720px;
 }

 .hero-content {
     max-width: 720px;
     color: #ffffff;
 }

 .hero-label,
 .section-label {
     display: inline-block;
     color: #E00827;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 2px;
     margin-bottom: 18px;
 }

 .hero-content h1 {
     font-size: clamp(48px, 6vw, 82px);
     line-height: 1.02;
     font-weight: 700;
     letter-spacing: -3px;
     margin-bottom: 25px;
 }

 .hero-content h1 span {
     color: #E00827;
     display: block;
 }

 .hero-content p {
     max-width: 600px;
     color: rgba(255, 255, 255, 0.82);
     font-size: 17px;
     line-height: 1.8;
     margin-bottom: 35px;
 }

 .hero-buttons {
     display: flex;
     gap: 15px;
     flex-wrap: wrap;
 }


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

 .btn {
     border-radius: 0;
     padding: 14px 25px;
     font-size: 13px;
     font-weight: 600;
     transition: all 0.3s ease;
 }

 .btn i {
     margin-left: 8px;
 }

 .btn-primary-custom {
     background: #E00827;
     color: #ffffff;
     border: 1px solid #E00827;
 }

 .btn-primary-custom:hover {
     background: #000;
     color: #ffffff;
     border-color: #000;
     transform: translateY(-2px);
 }

 .btn-outline-light-custom {
     border: 1px solid rgba(255, 255, 255, 0.6);
     color: #ffffff;
 }

 .btn-outline-light-custom:hover {
     background: #ffffff;
     color: #000
 }

 .btn-light-custom {
     background: #ffffff;
     color: #000;
     border: 1px solid #ffffff;
 }

 .btn-light-custom:hover {
     background: transparent;
     color: #ffffff;
 }


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

 .intro-section {
     padding: 110px 0;
     background: #f7f7f5;
 }

 .section-title {
     color: #000;
     font-size: clamp(36px, 4vw, 54px);
     line-height: 1.12;
     letter-spacing: -2px;
     font-weight: 700;
     margin-bottom: 25px;
 }

 .section-title span {
     color: #E00827;
 }

 .intro-text {
     font-size: 17px;
     line-height: 1.9;
     color: #666;
     max-width: 600px;
 }

 .text-link {
     display: inline-flex;
     gap: 10px;
     align-items: center;
     color: #000;
     font-size: 13px;
     font-weight: 700;
     border-bottom: 1px solid #E00827;
     padding-bottom: 7px;
     margin-top: 15px;
 }

 .text-link i {
     color: #E00827;
     transition: 0.3s ease;
 }

 .text-link:hover i {
     transform: translateX(5px);
 }


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

 .products-section {
     padding: 120px 0;
 }

 .section-heading {
     max-width: 760px;
 }

 .section-heading.text-center {
     margin-left: auto;
     margin-right: auto;
 }

 .section-heading>p {
     line-height: 1.8;
     color: #777;
 }

 .product-card {
     background: #ffffff;
     border: 1px solid #e4e4e1;
     height: 100%;
     transition: 0.4s ease;
 }

 .product-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.10);
 }

 .product-image {
     height: 270px;
     overflow: hidden;
     position: relative;
 }

 .product-image img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     transition: transform 0.6s ease;
 }

 .product-number {
     position: absolute;
     top: 18px;
     right: 18px;
     width: 42px;
     height: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #E00827;
     color: white;
     font-size: 12px;
     font-weight: 700;
 }

 .product-content {
     padding: 28px;
 }

 .product-content h3 {
     font-size: 21px;
     color: #000;
     margin-bottom: 12px;
 }

 .product-content p {
     font-size: 14px;
     line-height: 1.7;
     color: #777;
     margin-bottom: 22px;
 }

 .product-link {
     color: #000;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .product-link i {
     color: #E00827;
     margin-left: 7px;
 }

 .home-product-collection {
     margin-top: 52px;
 }

 .home-product-collection-heading {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 24px;
     margin-bottom: 24px;
     padding-bottom: 18px;
     border-bottom: 1px solid #e8e8e5;
 }

 .home-product-collection-heading .section-label {
     margin-bottom: 8px;
 }

 .home-product-collection-heading h3 {
     margin: 0 0 6px;
     color: #161616;
     font-size: clamp(22px, 3vw, 30px);
     font-weight: 700;
 }

 .home-product-collection-heading p {
     margin: 0;
     color: #777;
     font-size: 14px;
     line-height: 1.6;
 }

 .home-product-collection-heading > .product-link {
     flex: 0 0 auto;
     padding-bottom: 4px;
 }

 .home-featured-product-image {
     display: block;
     background: #f7f7f5;
 }

 .home-featured-product-image img {
     padding: 20px;
 }

 .home-featured-product-image:hover img {
     transform: scale(1.04);
 }

 .home-product-image-placeholder {
     display: flex;
     width: 100%;
     height: 100%;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 8px;
     color: #8b8b87;
     font-size: 13px;
 }

 .home-product-image-placeholder i {
     color: #b2b2ad;
     font-size: 28px;
 }

 .home-featured-product-category {
     display: block;
     margin-bottom: 8px;
     color: #e00827;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
 }

 .home-featured-product-image + .product-content h3 {
     min-height: 0;
     overflow-wrap: anywhere;
 }

 @media (max-width: 575px) {
     .home-product-collection-heading {
         align-items: flex-start;
         flex-direction: column;
         gap: 14px;
     }

     .home-product-collection-heading > .product-link {
         padding-bottom: 0;
     }
 }


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

 .about-section {
     padding: 120px 0;
     background: #f7f7f5;
 }

 .about-image {
     position: relative;
     padding-right: 40px;
     padding-bottom: 40px;
 }

 .about-image img {
     width: 100%;
     height: 600px;
     object-fit: cover;
 }

 .experience-box {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 190px;
     min-height: 150px;
     padding: 25px;
     background: #E00827;
     color: white;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .experience-box strong {
     font-size: 50px;
     line-height: 1;
 }

 .experience-box span {
     margin-top: 8px;
     font-size: 12px;
     line-height: 1.5;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .about-text {
     font-size: 15px;
     line-height: 1.9;
     color: #666;
 }

 .about-features {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
     margin-top: 25px;
 }

 .about-features div {
     font-size: 13px;
     font-weight: 600;
     color: #000
 }

 .about-features i {
     color: #E00827;
     margin-right: 7px;
 }


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

 .services-section {
     padding: 120px 0;
 }

 .service-card {
     height: 100%;
     border: 1px solid #e4e4e1;
     padding: 35px 28px;
     transition: 0.3s ease;
 }

 .service-card:hover {
     background: #000;
     color: white;
     transform: translateY(-5px);
 }

 .service-icon {
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #f7f7f5;
     color: #E00827;
     font-size: 25px;
     margin-bottom: 25px;
 }

 .service-card h3 {
     color: #000;
     font-size: 20px;
     margin-bottom: 15px;
 }

 .service-card:hover h3 {
     color: white;
 }

 .service-card p {
     color: #777;
     font-size: 14px;
     line-height: 1.8;
 }

 .service-card:hover p {
     color: #aaa;
 }


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

 .cta-section {
     padding: 0 0 120px;
 }

 .cta-box {
     min-height: 320px;
     padding: 60px;
     background:
         linear-gradient(110deg,
             rgba(0, 0, 0, 0.96),
             rgba(30, 30, 30, 0.88));

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

 .cta-box h2 {
     color: white;
     font-size: clamp(34px, 4vw, 52px);
     line-height: 1.1;
     letter-spacing: -2px;
     margin: 0;
 }

 .not-found-page {
     display: flex;
     min-height: min(68vh, 680px);
     align-items: center;
     padding: 90px 0;
     background:
         radial-gradient(ellipse at 85% 20%, rgba(224, 8, 39, 0.08), transparent 35%),
         #f7f7f5;
 }

 .not-found-content {
     max-width: 680px;
     margin: 0 auto;
     text-align: center;
 }

 .not-found-content h1 {
     margin: 0;
     color: #111;
     font-size: clamp(42px, 7vw, 76px);
     font-weight: 700;
     letter-spacing: -3px;
     line-height: 1.05;
 }

 .not-found-content h1 span {
     color: #e00827;
 }

 .not-found-content p {
     max-width: 500px;
     margin: 22px auto 0;
     color: #666;
     font-size: 16px;
     line-height: 1.8;
 }

 .not-found-actions {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 24px;
     flex-wrap: wrap;
     margin-top: 32px;
 }

 .not-found-products-link {
     color: #111;
     font-size: 13px;
     font-weight: 700;
     text-decoration: underline;
     text-decoration-color: #e00827;
     text-underline-offset: 6px;
 }


 /* =========================================================
   BLOG
========================================================= */

 .blog-section {
     padding: 120px 0;
     background: #f7f7f5;
 }

 .blog-card {
     background: white;
     height: 100%;
     overflow: hidden;
 }

 .blog-card>img {
     width: 100%;
     height: 260px;
     object-fit: cover;
     transition: 0.5s ease;
 }

 .blog-card:hover>img {
     transform: scale(1.03);
 }

 .blog-content {
     padding: 28px;
 }

 .blog-content span {
     color: #E00827;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 1.5px;
 }

 .blog-content h3 {
     color: #000;
     font-size: 20px;
     line-height: 1.4;
     margin: 12px 0 20px;
 }

 .blog-content a {
     color: #000;
     font-size: 12px;
     font-weight: 700;
 }

 .blog-content a i {
     color: #E00827;
     margin-left: 7px;
 }


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

 .contact-section {
     padding: 120px 0;

 }

 .contact-description {
     font-size: 15px;
     line-height: 1.8;
     max-width: 480px;
 }

 .contact-info {
     margin-top: 35px;
 }

 .contact-item {
     display: flex;
     align-items: center;
     gap: 18px;
     margin-bottom: 25px;
 }

 .contact-icon {
     width: 52px;
     height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #f7f7f5;
     color: #E00827;
     font-size: 19px;
 }

 .contact-item small {
     display: block;
     color: #999;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 1px;
     margin-bottom: 5px;
 }

 .contact-item a,
 .contact-item p {
     color: #000;
     margin: 0;
     font-size: 14px;
     font-weight: 500;
 }

 .home-contact-panel {
     display: grid;
     grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
     overflow: hidden;
     border: 1px solid #e8e8e5;
     border-radius: 20px;
     background: #fff;
     box-shadow: 0 22px 60px rgba(0, 0, 0, .07);
 }

 .home-contact-copy {
     padding: clamp(32px, 5vw, 64px);
 }

 .home-contact-copy .section-title {
     max-width: 560px;
     margin: 12px 0 16px;
 }

 .home-contact-copy .contact-description {
     color: #6d6d6d;
 }

 .home-contact-copy .contact-info {
     display: grid;
     gap: 12px;
     margin-top: 30px;
 }

 .home-contact-copy .contact-item {
     min-width: 0;
     margin: 0;
     padding: 14px;
     border: 1px solid #efefec;
     border-radius: 12px;
     color: inherit;
     text-decoration: none;
     transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
 }

 .home-contact-copy a.contact-item:hover {
     transform: translateX(3px);
     border-color: #f2c4cb;
     background: #fff9fa;
 }

 .home-contact-copy .contact-icon {
     flex: 0 0 44px;
     width: 44px;
     height: 44px;
     border-radius: 12px;
 }

 .home-contact-copy .contact-item > span:nth-child(2) {
     display: grid;
     min-width: 0;
     gap: 4px;
 }

 .home-contact-copy .contact-item small {
     margin: 0;
     color: #898989;
     font-size: 9px;
 }

 .home-contact-copy .contact-item strong {
     overflow-wrap: anywhere;
     color: #171717;
     font-size: 13px;
     font-weight: 600;
 }

 .contact-item-arrow {
     margin-left: auto;
     color: #e00827;
 }

 .home-contact-cta {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     padding: clamp(32px, 5vw, 58px);
     background:
         radial-gradient(circle at 100% 0, rgba(224, 8, 39, .18), transparent 42%),
         #171717;
     color: #fff;
 }

 .home-contact-cta-icon {
     display: grid;
     width: 52px;
     height: 52px;
     margin-bottom: 25px;
     place-items: center;
     border: 1px solid rgba(255, 255, 255, .2);
     border-radius: 15px;
     background: rgba(255, 255, 255, .08);
     color: #fff;
     font-size: 22px;
 }

 .home-contact-cta-label {
     margin-bottom: 10px;
     color: #ff8798;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 1.5px;
 }

 .home-contact-cta h3 {
     max-width: 400px;
     margin: 0 0 14px;
     color: #fff;
     font-family: "Playfair Display", serif;
     font-size: clamp(28px, 3vw, 38px);
     font-weight: 500;
     line-height: 1.2;
 }

 .home-contact-cta p {
     max-width: 400px;
     margin: 0 0 25px;
     color: #c5c5c5;
     font-size: 14px;
     line-height: 1.8;
 }

 .home-contact-cta > a {
     display: inline-flex;
     min-height: 48px;
     align-items: center;
     gap: 12px;
     padding: 0 18px;
     background: #e00827;
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .7px;
     text-decoration: none;
     text-transform: uppercase;
     transition: background .2s ease, transform .2s ease;
 }

 .home-contact-cta > a:hover {
     transform: translateY(-2px);
     background: #bd061f;
     color: #fff;
 }

 .home-contact-cta-note {
     margin-top: 28px;
     color: #929292;
     font-size: 11px;
     letter-spacing: .3px;
 }

 .contact-form-wrapper {
     background: #f7f7f5;
     padding: 45px;
 }

 .contact-form-wrapper label {
     display: block;
     color: #000;
     font-size: 12px;
     font-weight: 600;
     margin-bottom: 8px;
 }

 .form-control {
     border-radius: 0;
     border: 1px solid #ddd;
     min-height: 50px;
     padding: 12px 15px;
     font-size: 13px;
     box-shadow: none !important;
 }

 .form-control:focus {
     border-color: #E00827;
 }

 textarea.form-control {
     min-height: 140px;
     resize: vertical;
 }

 @media (max-width: 991px) {
     .home-contact-panel {
         grid-template-columns: 1fr;
     }

     .home-contact-cta {
         min-height: 360px;
     }
 }

 @media (max-width: 575px) {
     .home-contact-copy {
         padding: 30px 22px;
     }

     .home-contact-copy .contact-item {
         gap: 12px;
         padding: 12px;
     }

     .home-contact-copy .contact-icon {
         flex-basis: 40px;
         width: 40px;
         height: 40px;
     }

     .home-contact-cta {
         min-height: 0;
         padding: 34px 24px;
     }
 }


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

 .footer {
     background: #d8d8d8;
     color: #000000;
     padding: 80px 0 0;
 }

 .footer-logo {
     display: inline-block;
     color: white;
     font-size: 24px;
     font-weight: 800;
     letter-spacing: 1px;
     margin-bottom: 20px;
 }

 .footer-logo span {
     color: #E00827;
 }

 .footer p {
     max-width: 370px;
     font-size: 13px;
     line-height: 1.8;
     color: #000;
 }

 .footer-social {
     display: flex;
     gap: 10px;
     margin-top: 25px;
     color: #000;
 }

 .footer-social a {
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #444;
     color: #000;
     transition: 0.3s ease;

 }

 .footer-social a:hover {
     background: #E00827;
     border-color: #E00827;
     color: #fff;
 }

 .footer h5 {
     color: #000;
     font-size: 13px;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 22px;
 }

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

 .footer li {
     margin-bottom: 12px;
     font-size: 13px;
 }

 .footer li a {
     color: #000;
     transition: 0.3s ease;
 }

 .footer li a:hover {
     color: #E00827;
 }

 .footer-contact li {
     display: flex;
     gap: 10px;
     color: #000;
 }

 .footer-contact i {
     color: #E00827;
 }

 .footer-bottom {
     border-top: 1px solid #292929;
     margin-top: 60px;
     min-height: 70px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     font-size: 11px;
 }

 .footer-bottom div {
     display: flex;
     gap: 20px;
 }

 .footer-bottom a {
     color: #000;
 }

 .footer-bottom a:hover {
     color: #E00827;
 }


 /* =========================================================
   SEARCH MODAL
========================================================= */

 .search-modal {
     border-radius: 0;
     border: 0;
     padding: 15px;
 }

 .search-input {
     display: flex;
     border: 1px solid #ddd;
 }

 .search-input input {
     border: 0;
     flex: 1;
     min-height: 55px;
 }

 .search-input button {
     width: 60px;
     border: 0;
     background: #000;
     color: white;
 }


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

 @media (max-width: 991px) {

     .top-bar-inner {
         justify-content: center;
     }

     .top-left {
         display: none;
     }

     .main-navbar {
         min-height: 72px;
     }

     .main-navbar .container {
         position: relative;
     }

     .main-navbar .navbar-collapse {
         margin: 8px 0 14px;
         padding: 8px 14px 12px;
         border: 1px solid #ececea;
         border-radius: 14px;
         background: #fff;
         box-shadow: 0 16px 38px rgba(0, 0, 0, .12);
     }

     .main-navbar .navbar-nav {
         gap: 0;
         padding: 0;
     }

     .main-navbar .navbar-nav .nav-item + .nav-item {
         border-top: 1px solid #f0f0ee;
     }

     .main-navbar .navbar-nav .nav-link {
         display: flex;
         min-height: 48px;
         align-items: center;
         padding: 12px 13px !important;
         border-radius: 8px;
         color: #282828 !important;
         font-size: 14px;
         font-weight: 600;
         transition: background-color .2s ease, color .2s ease;
     }

     .main-navbar .navbar-nav .nav-link:hover,
     .main-navbar .navbar-nav .nav-link.active {
         background: #fff1f3;
         color: #d50724 !important;
     }

     .main-navbar .navbar-toggler {
         display: grid;
         width: 44px;
         height: 44px;
         padding: 0;
         place-items: center;
         border: 1px solid #e9e9e6;
         border-radius: 11px;
         background: #fff;
         box-shadow: 0 4px 12px rgba(0, 0, 0, .06) !important;
     }

     .main-navbar .navbar-toggler:focus-visible {
         outline: 2px solid #e00827;
         outline-offset: 2px;
     }

     .nav-link::after {
         display: none;
     }

     .search-btn {
         margin-bottom: 15px;
     }

     .hero-section,
     .min-vh-hero {
         min-height: 650px;
     }

     .hero-content h1 {
         letter-spacing: -2px;
     }

     .about-image img {
         height: 500px;
     }

     .cta-box {
         flex-direction: column;
         align-items: flex-start;
     }

 }


 @media (max-width: 767px) {

     .top-bar {
         display: none;
     }

     .main-navbar {
         min-height: 68px;
     }

     .hero-section,
     .min-vh-hero {
         min-height: 600px;
     }

     .hero-overlay {
         background:
             linear-gradient(90deg,
                 rgba(0, 0, 0, 0.82),
                 rgba(0, 0, 0, 0.60));
     }

     .hero-content h1 {
         font-size: 48px;
     }

     .hero-content p {
         font-size: 15px;
     }

     .intro-section,
     .products-section,
     .about-section,
     .services-section,
     .blog-section,
     .contact-section {
         padding: 80px 0;
         overflow: hidden;
     }

     .section-title {
         font-size: 38px;
     }

     .product-image {
         height: 240px;
     }

     .about-image {
         padding-right: 20px;
         padding-bottom: 30px;
     }

     .about-image img {
         height: 420px;
     }

     .experience-box {
         width: 160px;
         min-height: 125px;
         padding: 20px;
     }

     .experience-box strong {
         font-size: 40px;
     }

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

     .cta-section {
         padding-bottom: 80px;
     }

     .cta-box {
         padding: 40px 30px;
     }

     .contact-form-wrapper {
         padding: 30px 20px;
     }

     .footer {
         padding-top: 60px;
     }

     .footer-bottom {
         flex-direction: column;
         justify-content: center;
         padding: 25px 0;
         text-align: center;
     }

 }


 @media (max-width: 480px) {

     .container {
         padding-left: 20px;
         padding-right: 20px;
     }

     .logo-main,
     .logo-sub {
         font-size: 19px;
     }

     .hero-content h1 {
         font-size: 41px;
     }

     .hero-content p {
         font-size: 14px;
     }

     .hero-buttons {
         flex-direction: column;
         align-items: stretch;
     }

     .hero-buttons .btn {
         text-align: center;
     }

     .section-title {
         font-size: 34px;
     }

     .product-image {
         height: 220px;
     }

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

     .footer-bottom div {
         flex-direction: column;
         gap: 8px;
     }

 }


 /* Page styles: page-contact */
 @scope (body.page-contact) {
     /* =========================================
   OFFICE CARE
   CONTACT PAGE
========================================= */

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

     .contact-hero {
         min-height: 500px;

         display: flex;
         align-items: center;

         position: relative;

         background-image:
             url("https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=2200&q=85");

         background-size: cover;
         background-position: center;
     }

     .contact-hero-overlay {
         position: absolute;
         inset: 0;

         background:
             linear-gradient(90deg,
                 rgba(0, 0, 0, .72),
                 rgba(0, 0, 0, .28),
                 rgba(0, 0, 0, .12));
     }

     .contact-hero-content {
         position: relative;

         max-width: 700px;

         padding: 90px 0;
     }

     .hero-label {
         display: block;

         color: #fff;

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

         letter-spacing: 2px;

         margin-bottom: 18px;
     }

     .contact-hero h1 {
         font-family: "Playfair Display", serif;

         color: #fff;

         font-size: clamp(55px, 7vw, 88px);

         line-height: 1;

         font-weight: 500;

         margin: 0 0 22px;
     }

     .contact-hero p {
         color: rgba(255, 255, 255, .85);

         font-size: 17px;

         line-height: 1.8;

         margin-bottom: 30px;
     }

     .hero-breadcrumb {
         display: flex;
         align-items: center;

         gap: 12px;

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

         font-size: 11px;

         letter-spacing: 1px;

         font-weight: 600;
     }

     .hero-breadcrumb a {
         color: #fff;
     }


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

     .contact-intro {
         padding: 100px 0 60px;
     }

     .section-label {
         display: block;

         color: #E00827;

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

         letter-spacing: 2px;

         margin-bottom: 17px;
     }

     .section-title {
         font-family: "Playfair Display", serif;

         font-size: clamp(38px, 4.5vw, 58px);

         line-height: 1.12;

         font-weight: 500;

         max-width: 800px;

         margin: 0;
     }

     .section-title span {
         display: block;

         color: #888;
     }

     .intro-text {
         color: #5d5d5d;

         font-size: 15px;

         line-height: 1.9;

         margin: 0;

         max-width: 500px;
     }


     /* =========================================
   CONTACT DETAILS
========================================= */

     .contact-details {
         padding: 30px 0 100px;
     }

     .contact-info-grid {
         display: grid;

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

         gap: 20px;
     }

     .contact-info-card {
         padding: 35px;

         background: #f7f7f5;

         border-radius: 14px;

         display: flex;

         gap: 22px;

         min-height: 240px;

         transition: all .3s ease;
     }

     .contact-info-card:hover {
         transform: translateY(-5px);

         background: #f2f2f0;

         box-shadow:
             0 15px 35px rgba(0, 0, 0, .06);
     }

     .contact-icon {
         flex: 0 0 48px;

         width: 48px;
         height: 48px;

         background: #E00827;

         color: #fff;

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

         font-size: 19px;

         border-radius: 50%;
     }

     .contact-card-label {
         display: block;

         color: #E00827;

         font-size: 10px;

         font-weight: 700;

         letter-spacing: 1.5px;

         margin-bottom: 8px;
     }

     .contact-info-card h3 {
         font-family: "Playfair Display", serif;

         font-size: 24px;

         margin: 0 0 12px;
     }

     .contact-info-card p {
         color: #5d5d5d;

         font-size: 13px;

         line-height: 1.7;

         margin-bottom: 18px;
     }

     .contact-info-card a {
         display: inline-flex;

         align-items: center;

         gap: 8px;

         color: #171717;

         font-size: 11px;

         font-weight: 700;

         letter-spacing: .8px;
     }

     .contact-info-card a:hover {
         color: #E00827;
     }


     /* =========================================
   FORM SECTION
========================================= */

     .contact-form-section {
         padding: 100px 0;

         background: #f7f7f5;
     }

     .contact-form-wrapper {
         background: #fff;

         padding: 50px;

         border-radius: 16px;
     }

     .contact-form-wrapper h2 {
         font-family: "Playfair Display", serif;

         font-size: 42px;

         font-weight: 500;

         margin: 0 0 12px;
     }

     .form-intro {
         color: #5d5d5d;

         font-size: 14px;

         line-height: 1.8;

         margin-bottom: 35px;
     }


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

     .contact-form-wrapper label {
         display: block;

         font-size: 11px;

         font-weight: 700;

         letter-spacing: .5px;

         margin-bottom: 8px;
     }

     .contact-form-wrapper label span {
         color: #E00827;
     }

     .contact-form-wrapper .form-control,
     .contact-form-wrapper .form-select {
         min-height: 52px;

         border: 1px solid #e4e4e1;
         ;

         border-radius: 0;

         padding: 14px 16px;

         font-size: 13px;

         color: #171717;

         box-shadow: none;
     }

     .contact-form-wrapper textarea.form-control {
         min-height: 150px;

         resize: vertical;
     }

     .contact-form-wrapper .form-control:focus,
     .contact-form-wrapper .form-select:focus {
         border-color: #E00827;

         box-shadow:
             0 0 0 3px rgba(224, 8, 39, .08);
     }

     .contact-form-wrapper .form-control::placeholder {
         color: #aaa;
     }


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

     .submit-button {
         border: none;

         min-height: 54px;

         padding: 0 28px;

         background: #E00827;

         color: #fff;

         font-size: 11px;

         font-weight: 700;

         letter-spacing: 1px;

         display: inline-flex;

         align-items: center;

         gap: 12px;

         cursor: pointer;

         transition: all .25s ease;
     }

     .submit-button:hover {
         background: #b90620;
     }

     .submit-button i {
         transition: transform .25s ease;
     }

     .submit-button:hover i {
         transform: translateX(5px);
     }


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

     .form-message {
         margin-top: 20px;

         font-size: 13px;

         display: none;

         padding: 13px 16px;

         background: #f2f8f3;

         color: #198754;
     }


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

     .contact-side {
         height: 100%;

         display: flex;

         flex-direction: column;

         gap: 25px;
     }


     /* =========================================
   MAP
========================================= */

     .map-wrapper {
         width: 100%;

         height: 380px;

         overflow: hidden;

         border-radius: 16px;

         background: #ddd;
     }

     .map-wrapper iframe {
         display: block;
     }


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

     .about-contact {
         background: #171717;

         color: #fff;

         padding: 38px;

         border-radius: 16px;

         flex: 1;
     }

     .about-contact .section-label {
         color: #fff;
     }

     .about-contact h3 {
         font-family: "Playfair Display", serif;

         font-size: 31px;

         line-height: 1.2;

         font-weight: 500;

         margin-bottom: 17px;
     }

     .about-contact p {
         color: #aaa;

         font-size: 13px;

         line-height: 1.8;

         margin-bottom: 25px;
     }

     .about-contact p strong {
         color: #fff;
     }

     .about-contact>a {
         display: inline-flex;

         align-items: center;

         gap: 10px;

         color: #fff;

         font-size: 10px;

         font-weight: 700;

         letter-spacing: 1px;

         transition: all .25s ease;
     }

     .about-contact>a:hover {
         color: #E00827;
     }

     .about-contact>a i {
         transition: transform .25s ease;
     }

     .about-contact>a:hover i {
         transform: translateX(5px);
     }

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

     .contact-visit-section {
         padding: 95px 0;
         background: #f7f7f5;
     }

     .contact-visit-heading {
         max-width: 680px;
         margin: 0 auto 38px;
         text-align: center;
     }

     .contact-visit-heading h2 {
         margin: 10px 0 12px;
         color: #171717;
         font-family: "Playfair Display", serif;
         font-size: clamp(34px, 5vw, 48px);
         font-weight: 500;
         line-height: 1.15;
     }

     .contact-visit-heading h2 span {
         color: #e00827;
     }

     .contact-visit-heading p {
         margin: 0;
         color: #6d6d6d;
         font-size: 15px;
         line-height: 1.8;
     }

     .contact-visit-card {
         display: grid;
         grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
         overflow: hidden;
         border: 1px solid #e9e9e5;
         border-radius: 20px;
         background: #fff;
         box-shadow: 0 22px 60px rgba(0, 0, 0, .08);
     }

     .contact-visit-map {
         min-height: 470px;
         background: #e6e6e2;
     }

     .contact-visit-map iframe {
         display: block;
         width: 100%;
         height: 100%;
         min-height: inherit;
         border: 0;
     }

     .contact-visit-content {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
         padding: clamp(30px, 5vw, 58px);
     }

     .contact-visit-mark {
         display: grid;
         width: 52px;
         height: 52px;
         margin-bottom: 24px;
         place-items: center;
         border-radius: 16px;
         background: #fff0f2;
         color: #e00827;
         font-size: 22px;
     }

     .contact-visit-content .contact-card-label {
         margin-bottom: 10px;
     }

     .contact-visit-content h3 {
         margin: 0 0 14px;
         color: #171717;
         font-family: "Playfair Display", serif;
         font-size: clamp(27px, 3vw, 36px);
         font-weight: 500;
         line-height: 1.2;
     }

     .contact-visit-content > p {
         margin: 0 0 24px;
         color: #6d6d6d;
         font-size: 14px;
         line-height: 1.8;
     }

     .contact-visit-address {
         display: grid;
         gap: 7px;
         width: 100%;
         padding: 18px 0;
         border-top: 1px solid #ecece8;
         border-bottom: 1px solid #ecece8;
         color: #5d5d5d;
         font-size: 13px;
         line-height: 1.7;
     }

     .contact-visit-address strong {
         color: #171717;
         font-size: 12px;
     }

     .contact-visit-actions {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: 18px 24px;
         margin-top: 25px;
     }

     .contact-visit-directions,
     .contact-visit-about {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         font-size: 11px;
         font-weight: 700;
         letter-spacing: .7px;
         text-decoration: none;
         text-transform: uppercase;
     }

     .contact-visit-directions {
         min-height: 48px;
         padding: 0 18px;
         background: #e00827;
         color: #fff;
         transition: background .2s ease, transform .2s ease;
     }

     .contact-visit-directions:hover {
         transform: translateY(-2px);
         background: #b90620;
         color: #fff;
     }

     .contact-visit-about {
         color: #222;
         transition: color .2s ease;
     }

     .contact-visit-about:hover {
         color: #e00827;
     }


     /* =========================================
   QUICK CONTACT
========================================= */

     .quick-contact {
         padding: 75px 0;

         background: #E00827;

         color: #fff;
     }

     .quick-contact-inner {
         display: flex;

         align-items: center;

         justify-content: space-between;

         gap: 30px;
     }

     .quick-contact-inner>div:first-child span {
         font-size: 10px;

         font-weight: 700;

         letter-spacing: 1.8px;

         opacity: .8;
     }

     .quick-contact-inner h2 {
         font-family: "Playfair Display", serif;

         font-size: 40px;

         font-weight: 500;

         margin: 10px 0 0;
     }

     .quick-contact-buttons {
         display: flex;

         gap: 10px;
     }

     .quick-contact-buttons a {
         min-width: 135px;

         padding: 15px 20px;

         background: #fff;

         color: #171717;

         display: flex;

         align-items: center;

         justify-content: center;

         gap: 9px;

         font-size: 12px;

         font-weight: 700;

         transition: all .25s ease;
     }

     .quick-contact-buttons a:hover {
         background: #171717;

         color: #fff;
     }


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

     @media (max-width: 991px) {

         .contact-hero {
             min-height: 460px;
         }

         .contact-intro {
             padding: 75px 0 45px;
         }

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

         .contact-info-card {
             min-height: auto;
         }

         .contact-visit-section {
             padding: 75px 0;
         }

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

         .contact-visit-map {
             min-height: 380px;
         }

         .quick-contact-inner h2 {
             font-size: 34px;
         }

     }


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

     @media (max-width: 767px) {

         .contact-hero {
             min-height: 420px;
         }

         .contact-hero-content {
             padding: 65px 0;
         }

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

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

         .contact-intro {
             padding: 65px 0 35px;
         }

         .section-title {
             font-size: 40px;
         }

         .intro-text {
             margin-top: 15px;
         }

         .contact-details {
             padding: 25px 0 70px;
         }

         .contact-info-card {
             padding: 28px;
         }

         .contact-visit-section {
             padding: 60px 0;
         }

         .contact-visit-map {
             min-height: 310px;
         }

         .contact-visit-content {
             padding: 30px 24px;
         }

         .map-wrapper {
             height: 320px;
         }

         .about-contact {
             padding: 30px;
         }

         .quick-contact {
             padding: 60px 0;
         }

         .quick-contact-inner {
             flex-direction: column;

             align-items: flex-start;
         }

         .quick-contact-inner h2 {
             font-size: 32px;
         }

         .quick-contact-buttons {
             width: 100%;
         }

         .quick-contact-buttons a {
             flex: 1;
         }

     }


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

     @media (max-width: 480px) {

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

         .contact-info-card {
             flex-direction: column;
         }

         .contact-form-wrapper h2 {
             font-size: 31px;
         }

         .submit-button {
             width: 100%;

             justify-content: center;
         }

         .quick-contact-buttons {
             flex-direction: column;
         }

         .quick-contact-buttons a {
             width: 100%;
         }

     }
 }


 /* Page styles: page-product-detail */
 @scope (.page-product-detail) {
     .product-detail-page {
         font-family: "Inter", sans-serif;
         color: #1A1A1A;
         background: #fff;
     }

     .product-detail-page img {
         max-width: 100%;
     }

     .product-detail-page button {
         font-family: inherit;
     }


     /* =========================================
   BREADCRUMB
========================================= */

     .product-breadcrumb {
         padding: 22px 0;
         background: #F7F7F5;
         border-bottom: 1px solid #E4E4E1;
     }

     .product-breadcrumb .breadcrumb {
         font-size: 12px;
         text-transform: uppercase;
         letter-spacing: .6px;
     }

     .product-breadcrumb a {
         color: #777;
         text-decoration: none;
     }

     .product-breadcrumb a:hover {
         color: #E00827;
     }

     .product-breadcrumb .active {
         color: #222;
     }


     /* =========================================
   PRODUCT SECTION
========================================= */

     .product-section {
         padding: 70px 0 90px;
     }


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

     .product-gallery {
         position: sticky;
         top: 100px;
     }


     /* Main Image */

     .main-product-image {
         width: 100%;
         height: 590px;
         background: #f5f5f3;
         position: relative;
         overflow: hidden;
     }

     .main-product-image img {
         width: 100%;
         height: 100%;
         object-fit: contain;
         display: block;
         transition: opacity .2s ease;
     }

     .main-product-image-placeholder {
         display: flex;
         width: 100%;
         height: 100%;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 12px;
         color: #777;
     }

     .main-product-image-placeholder i {
         font-size: 48px;
     }


     /* Gallery arrows */

     .gallery-arrow {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);

         width: 46px;
         height: 46px;

         border: none;
         background: rgba(255, 255, 255, .95);

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

         color: #111;
         font-size: 18px;

         z-index: 5;

         opacity: 0;
         transition: all .25s ease;
     }

     .main-product-image:hover .gallery-arrow {
         opacity: 1;
     }

     .gallery-arrow:hover {
         background: #E00827;
         color: #fff;
     }

     .gallery-prev {
         left: 20px;
     }

     .gallery-next {
         right: 20px;
     }


     /* Image counter */

     .image-counter {
         position: absolute;

         right: 18px;
         bottom: 18px;

         background: rgba(0, 0, 0, .7);
         color: #fff;

         padding: 7px 12px;

         font-size: 12px;
         letter-spacing: .5px;
     }


     /* =========================================
   THUMBNAILS
========================================= */

     .product-thumbnails {
         display: grid;
         grid-template-columns: repeat(5, 1fr);
         gap: 12px;

         margin-top: 15px;
     }

     .thumbnail {
         height: 100px;

         padding: 0;

         border: 1px solid #E4E4E1;
         background: #f5f5f3;

         overflow: hidden;

         cursor: pointer;

         transition: all .25s ease;
     }

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

         display: block;

         transition: transform .3s ease;
     }

     .thumbnail:hover img {
         transform: scale(1.05);
     }

     .thumbnail:hover {
         border-color: #999;
     }

     .thumbnail.active {
         border: 2px solid #E00827;
     }


     /* =========================================
   PRODUCT INFORMATION
========================================= */

     .product-information {
         padding-top: 5px;
     }

     .product-category {
         color: #E00827;

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

         letter-spacing: 1.5px;

         margin-bottom: 15px;
     }

     .product-title {
         font-family: "Playfair Display", serif;

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

         font-weight: 600;

         margin-bottom: 18px;

         color: #1A1A1A;
     }


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

     .product-rating {
         display: flex;
         align-items: center;
         gap: 8px;

         font-size: 14px;

         margin-bottom: 18px;
     }

     .stars {
         color: #e5a400;
         letter-spacing: 2px;
     }

     .review-count {
         color: #888888;
     }


     /* =========================================
   PRODUCT CODE
========================================= */

     .product-code {
         font-size: 13px;
         color: #888888;

         margin-bottom: 22px;
     }

     .product-code strong {
         color: #1A1A1A;
     }


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

     .product-price {
         font-size: 32px;
         font-weight: 700;

         color: #1A1A1A;

         margin-top: 5px;
     }

     .product-price-panel {
         margin-top: 26px;
         padding: 20px 22px;
         border: 1px solid #ececea;
         border-left: 3px solid #e00827;
         background: #fafaf9;
     }

     .price-current-row,
     .price-amount-row {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
         gap: 12px;
     }

     .price-current-row {
         justify-content: space-between;
         margin-bottom: 8px;
     }

     .price-current-label {
         color: #707070;
         font-size: 11px;
         font-weight: 600;
         letter-spacing: .7px;
         text-transform: uppercase;
     }

     .price-current {
         color: #171717;
         font-size: clamp(28px, 3vw, 36px);
         font-weight: 700;
         line-height: 1.15;
         letter-spacing: -.5px;
     }

     .price-currency {
         margin-right: 3px;
         color: #666;
         font-size: 13px;
         font-weight: 600;
         letter-spacing: 0;
         vertical-align: middle;
     }

     .price-original {
         color: #888;
         font-size: 15px;
         text-decoration: line-through;
         text-decoration-thickness: 1px;
     }

     .price-original .price-currency {
         color: inherit;
         font-size: 10px;
     }

     .price-discount-badge {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         padding: 19px 19px;
         background: #fff0f1;
         color: #c9001d;
         font-size: 10px;
         font-weight: 700;
         letter-spacing: .3px;
     }

     .price-savings {
         margin: 10px 0 0;
         color: #5f6f52;
         font-size: 12px;
     }

     .price-savings strong {
         color: #3d5b2c;
         font-weight: 700;
     }

     .price-unavailable {
         margin: 5px 0 0;
         color: #171717;
         font-size: 20px;
         font-weight: 600;
     }

     .currency {
         font-size: 15px;
         font-weight: 600;

         margin-right: 4px;
     }

     .price-note {
         color: #888888;
         font-size: 12px;

         margin-top: 3px;
     }


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

     .product-description {
         margin-top: 28px;

         color: #5D5D5D;

         font-size: 15px;
         line-height: 1.8;
     }

     .product-description p {
         margin-bottom: 12px;
     }


     /* =========================================
   AVAILABILITY
========================================= */

     .availability {
         margin-top: 22px;

         color: #188038;

         font-size: 14px;
         font-weight: 600;

         display: flex;
         align-items: center;
         gap: 8px;
     }


     /* =========================================
   DIVIDER
========================================= */

     .product-divider {
         height: 1px;
         background: #E4E4E1;

         margin: 28px 0;
     }


     /* =========================================
   PURCHASE
========================================= */

     .purchase-row {
         display: flex;
         align-items: flex-end;
         gap: 15px;

         margin-bottom: 15px;
     }

     .quantity-wrapper {
         flex: 1;
     }

     .quantity-wrapper label {
         display: block;

         font-size: 12px;
         font-weight: 600;

         margin-bottom: 7px;

         text-transform: uppercase;
         letter-spacing: .7px;
     }


     /* Quantity */

     .quantity-control {
         display: flex;

         height: 50px;

         border: 1px solid #E4E4E1;
     }

     .quantity-control button {
         width: 45px;

         border: none;
         background: #f7f7f5;

         cursor: pointer;

         font-size: 18px;
     }

     .quantity-control button:hover {
         background: #eee;
     }

     .quantity-control input {
         width: 55px;

         border: none;

         text-align: center;

         font-size: 15px;
         font-weight: 600;

         outline: none;
     }

     .quantity-control input::-webkit-outer-spin-button,
     .quantity-control input::-webkit-inner-spin-button {
         -webkit-appearance: none;
         margin: 0;
     }


     /* Wishlist */

     .wishlist-detail {
         width: 50px;
         height: 50px;

         border: 1px solid #E4E4E1;

         background: #fff;

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

         font-size: 19px;

         cursor: pointer;

         transition: all .25s ease;
     }

     .wishlist-detail:hover,
     .wishlist-detail.active {
         border-color: #E00827;
         color: #E00827;
     }


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

     .add-cart-btn {
         width: 100%;
         height: 54px;

         border: none;

         background: #E00827;
         color: #fff;

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

         letter-spacing: .3px;

         cursor: pointer;

         transition: all .25s ease;

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

         gap: 9px;
     }

     .add-cart-btn:hover {
         background: #E00827;
     }


     /* =========================================
   FEATURES
========================================= */

     .product-features {
         margin-top: 30px;

         border-top: 1px solid #E4E4E1;
     }

     .feature-item {
         display: flex;
         align-items: center;

         gap: 15px;

         padding: 18px 0;

         border-bottom: 1px solid #E4E4E1;
     }

     .feature-item>i {
         width: 38px;
         height: 38px;

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

         background: #F7F7F5;

         color: #E00827;

         font-size: 17px;
     }

     .feature-item strong {
         display: block;

         font-size: 13px;
         font-weight: 600;
     }

     .feature-item span {
         display: block;

         color: #888888;

         font-size: 12px;

         margin-top: 2px;
     }


     /* =========================================
   PRODUCT DETAILS
========================================= */

     .product-details-section {
         background: #F7F7F5;

         padding: 80px 0;
     }

     .product-tabs {
         background: #fff;
     }


     /* Tabs */

     .product-tabs .nav-tabs {
         border-bottom: 1px solid #E4E4E1;

         padding: 0 35px;
     }

     .product-tabs .nav-link {
         border: none;

         border-bottom: 2px solid transparent;

         border-radius: 0;

         color: #777;

         padding: 20px 25px;

         font-size: 13px;
         font-weight: 600;

         background: transparent;
     }

     .product-tabs .nav-link:hover {
         color: #1A1A1A;
     }

     .product-tabs .nav-link.active {
         color: #E00827;

         border-bottom-color: #E00827;

         background: transparent;
     }


     /* Tab content */

     .product-tabs .tab-content {
         padding: 40px;
     }

     .product-tabs h3 {
         font-family: "Playfair Display", serif;

         font-size: 27px;

         margin-bottom: 18px;
     }

     .product-tabs p {
         color: #5D5D5D;

         line-height: 1.8;

         font-size: 14px;

         max-width: 900px;
     }


     /* =========================================
   SPECIFICATIONS
========================================= */

     .specifications-table {
         max-width: 850px;

         border-top: 1px solid #E4E4E1;
     }

     .spec-row {
         display: grid;
         grid-template-columns: 1fr 1fr;

         padding: 15px 0;

         border-bottom: 1px solid #E4E4E1;

         font-size: 14px;
     }

     .spec-row span {
         color: #888888;
     }

     .spec-row strong {
         font-weight: 600;
     }

     .related-products-section {
         padding: 7px 0 105px;
         background: #f7f7f5;
     }

     .related-products-heading {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 24px;
         margin-bottom: 32px;
     }

     .related-products-eyebrow {
         display: block;
         margin-bottom: 10px;
         color: #e00827;
         font-size: 10px;
         font-weight: 700;
         letter-spacing: 1.5px;
         text-transform: uppercase;
     }

     .related-products-heading h2 {
         margin: 0;
         color: #171717;
         font-size: clamp(28px, 3vw, 38px);
         font-weight: 600;
         letter-spacing: -0.7px;
     }

     .related-products-heading p {
         margin: 8px 0 0;
         color: #777;
         font-size: 14px;
     }

     .related-products-all {
         display: inline-flex;
         align-items: center;
         gap: 9px;
         padding-bottom: 5px;
         border-bottom: 1px solid #bcbcb8;
         color: #222;
         font-size: 12px;
         font-weight: 600;
         text-decoration: none;
         white-space: nowrap;
         transition: color .2s ease, border-color .2s ease;
     }

     .related-products-all:hover {
         border-color: #e00827;
         color: #e00827;
     }

     .related-product-card {
         height: 100%;
         overflow: hidden;
         border: 1px solid #e7e7e3;
         background: #fff;
         transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
     }

     .related-product-card:hover {
         transform: translateY(-5px);
         border-color: transparent;
         box-shadow: 0 16px 38px rgba(0, 0, 0, .09);
     }

     .related-product-image {
         position: relative;
         display: flex;
         height: 230px;
         align-items: center;
         justify-content: center;
         overflow: hidden;
         background: #f7f7f5;
         text-decoration: none;
     }

     .related-product-image img {
         width: 100%;
         height: 100%;
         object-fit: contain;
         padding: 14px;
         transition: transform .3s ease;
     }

     .related-product-card:hover .related-product-image img {
         transform: scale(1.035);
     }

     .related-product-placeholder {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 8px;
         color: #888;
         font-size: 12px;
     }

     .related-product-placeholder i {
         font-size: 30px;
     }

     .related-product-arrow {
         position: absolute;
         right: 14px;
         bottom: 14px;
         display: grid;
         width: 36px;
         height: 36px;
         place-items: center;
         background: #fff;
         color: #171717;
         transition: background .2s ease, color .2s ease;
     }

     .related-product-card:hover .related-product-arrow {
         background: #e00827;
         color: #fff;
     }

     .related-product-content {
         padding: 20px;
     }

     .related-product-category {
         display: block;
         margin-bottom: 8px;
         color: #e00827;
         font-size: 9px;
         font-weight: 700;
         letter-spacing: 1.2px;
         text-transform: uppercase;
     }

     .related-product-content h3 {
         min-height: 44px;
         margin: 0;
         font-size: 15px;
         font-weight: 600;
         line-height: 1.5;
     }

     .related-product-content h3 a {
         color: #171717;
         text-decoration: none;
     }

     .related-product-content h3 a:hover {
         color: #e00827;
     }

     .related-product-code {
         display: block;
         margin-top: 8px;
         color: #888;
         font-size: 11px;
     }

     .related-product-link {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         margin-top: 18px;
         padding-top: 13px;
         width: 100%;
         border-top: 1px solid #ececea;
         color: #222;
         font-size: 11px;
         font-weight: 700;
         text-decoration: none;
         transition: color .2s ease;
     }

     .related-product-link:hover {
         color: #e00827;
     }


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

     .product-cta {
         padding: 75px 0;

         background: #171717;

         color: #fff;
     }

     .cta-inner {
         display: flex;
         align-items: center;
         justify-content: space-between;

         gap: 30px;
     }

     .cta-small {
         font-size: 11px;

         letter-spacing: 1.8px;

         color: #aaa;

         font-weight: 600;
     }

     .cta-inner h2 {
         font-family: "Playfair Display", serif;

         font-size: 36px;

         font-weight: 500;

         margin: 10px 0 0;
     }

     .cta-button {
         min-width: 160px;

         padding: 15px 25px;

         background: #E00827;

         color: #fff;

         text-decoration: none;

         text-align: center;

         font-size: 13px;
         font-weight: 600;

         transition: all .25s ease;
     }

     .cta-button:hover {
         background: #fff;
         color: #111;
     }


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

     @media (max-width: 991px) {

         .product-section {
             padding: 50px 0 70px;
         }

         .product-gallery {
             position: relative;
             top: auto;
         }

         .main-product-image {
             height: 500px;
         }

         .product-title {
             font-size: 40px;
         }

         .product-information {
             padding-top: 20px;
         }

         .product-tabs .nav-tabs {
             padding: 0 20px;
         }

         .product-tabs .tab-content {
             padding: 30px;
         }

     }


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

     @media (max-width: 767px) {

         .product-breadcrumb {
             padding: 15px 0;
         }

         .product-breadcrumb .breadcrumb {
             font-size: 10px;
         }

         .product-section {
             padding: 30px 0 50px;
         }

         .main-product-image {
             height: 370px;
         }

         .gallery-arrow {
             opacity: 1;

             width: 40px;
             height: 40px;
         }

         .product-thumbnails {
             gap: 8px;
         }

         .thumbnail {
             height: 70px;
         }

         .product-title {
             font-size: 34px;
         }

         .product-price {
             font-size: 28px;
         }

         .product-price-panel {
             margin-top: 20px;
             padding: 17px;
         }

         .price-current {
             font-size: 30px;
         }

         .product-tabs .nav-tabs {
             padding: 0 10px;

             overflow-x: auto;
             flex-wrap: nowrap;
         }

         .product-tabs .nav-link {
             padding: 16px 15px;

             white-space: nowrap;
         }

         .product-tabs .tab-content {
             padding: 25px 20px;
         }

         .related-products-section {
             padding: 48px 0 56px;
         }

         .related-products-heading {
             align-items: flex-start;
             flex-direction: column;
             margin-bottom: 24px;
         }

         .spec-row {
             grid-template-columns: 1fr;

             gap: 5px;
         }

         .cta-inner {
             flex-direction: column;
             align-items: flex-start;
         }

         .cta-inner h2 {
             font-size: 29px;
         }

         .cta-button {
             width: 100%;
         }

     }


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

     @media (max-width: 480px) {

         .main-product-image {
             height: 300px;
         }

         .product-thumbnails {
             grid-template-columns: repeat(5, 1fr);
         }

         .thumbnail {
             height: 58px;
         }

         .product-title {
             font-size: 29px;
         }

         .purchase-row {
             gap: 10px;
         }

     }
 }


 /* Page styles: page-products */
 @scope (body.page-products) {

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



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

     .section-label {
         display: inline-flex;

         align-items: center;

         gap: 10px;

         margin-bottom: 20px;

         color: #E00827;

         font-size: 11px;

         font-weight: 700;

         letter-spacing: 2.2px;
     }

     .section-label::before {
         content: "";

         width: 28px;
         height: 2px;

         background: #E00827;
     }


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

     .products-hero {
         position: relative;

         min-height: 470px;

         display: flex;

         align-items: center;

         background-image: url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2000&q=85");

         background-size: cover;

         background-position: center;
     }

     .products-hero-overlay {
         position: absolute;

         inset: 0;

         background:
             linear-gradient(90deg,
                 rgba(0, 0, 0, 0.72),
                 rgba(0, 0, 0, 0.38),
                 rgba(0, 0, 0, 0.12));
     }

     .products-hero .container {
         position: relative;

         z-index: 2;
     }

     .products-hero-content {
         color: white
     }

     .hero-eyebrow {
         display: block;

         margin-bottom: 20px;

         color: rgba(255, 255, 255, 0.72);

         font-size: 11px;

         font-weight: 600;

         letter-spacing: 3px;
     }

     .products-hero h1 {
         margin: 0 0 25px;

         font-family: "Playfair Display", serif;

         font-size: clamp(50px, 7vw, 82px);

         line-height: 1;

         font-weight: 600;

         letter-spacing: -3px;
     }

     .breadcrumb-custom {
         display: flex;

         align-items: center;

         gap: 13px;

         font-size: 11px;

         font-weight: 600;

         letter-spacing: 1.5px;
     }

     .breadcrumb-custom a {
         color: white;

         transition: 0.3s ease;
     }

     .breadcrumb-custom a:hover {
         color: #E00827;
     }

     .breadcrumb-custom span:last-child {
         color: rgba(255, 255, 255, 0.55);
     }


     /* =========================================================
   PRODUCTS MAIN
========================================================= */

     .products-main {
         background: white
     }

     .products-heading {
         display: flex;

         align-items: flex-end;

         justify-content: space-between;

         gap: 50px;

         margin-bottom: 65px;
     }

     .products-heading h2 {
         margin: 0;

         max-width: 650px;

         font-family: "Playfair Display", serif;

         font-size: clamp(42px, 5vw, 62px);

         line-height: 1.08;

         font-weight: 600;

         letter-spacing: -2px;
     }

     .products-heading h2 span {
         display: block;

         color: #E00827;
     }

     .products-heading>p {
         max-width: 410px;

         margin: 0 0 5px;

         color: #5D5D5D;

         font-size: 14px;

         line-height: 1.8;
     }


     /* =========================================================
   CATEGORY SIDEBAR
========================================================= */

     .category-sidebar {
         position: sticky;

         top: 110px;

         border: 1px solid #e4e4e1;

         background: white;
     }

     .category-sidebar-header {
         display: flex;

         align-items: center;

         justify-content: space-between;

         padding: 23px 24px;

         background: #1A1A1A;

         color: white;

         font-size: 11px;

         font-weight: 700;

         letter-spacing: 1.5px;
     }

     .category-sidebar-header i {
         color: #E00827;

         font-size: 17px;
     }

     .category-group {
         border-bottom: 1px solid #e4e4e1;
     }

     .category-toggle {
         width: 100%;

         border: 0;

         background: white;

         display: flex;

         align-items: center;

         justify-content: space-between;

         padding: 20px 24px;

         color: #1A1A1A;

         font-size: 14px;

         font-weight: 600;

         text-align: left;

         transition: 0.3s ease;
     }

     .category-toggle:hover {
         color: #E00827;
     }

     .category-toggle i {
         font-size: 12px;

         transition: transform 0.3s ease;
     }

     .category-toggle:not(.collapsed) i {
         transform: rotate(180deg);
     }

     .category-link {
         position: relative;

         display: flex;

         align-items: center;

         justify-content: space-between;

         padding: 9px 24px 9px 38px;

         color: #5D5D5D;

         font-size: 13px;

         transition:
             color 0.3s ease,
             padding-left 0.3s ease;
     }

     .category-link::before {
         content: "";

         position: absolute;

         left: 24px;

         top: 50%;

         width: 0;

         height: 1px;

         background: #E00827;

         transition: width 0.3s ease;
     }

     .category-link span {
         color: #A0A0A0;

         font-size: 10px;
     }

     .category-link:hover,
     .category-link.active {
         padding-left: 48px;

         color: #E00827;
     }

     .category-link:hover::before,
     .category-link.active::before {
         width: 14px;
     }

     .category-link.active span {
         color: #E00827;
     }

     .view-all-products {
         width: 100%;

         border: 0;

         background: #F7F7F5;

         padding: 18px 24px;

         display: flex;

         align-items: center;

         justify-content: space-between;

         color: #1A1A1A;

         font-size: 12px;

         font-weight: 700;

         text-decoration: none;

         transition: 0.3s ease;
     }

     .view-all-products:hover {
         background: #E00827;

         color: white
     }

     .view-all-products i {
         transition: transform 0.3s ease;
     }

     .view-all-products:hover i {
         transform: translateX(5px);
     }


     /* =========================================================
   PRODUCTS TOOLBAR
========================================================= */

     .products-toolbar {
         display: flex;

         align-items: center;

         justify-content: space-between;

         gap: 20px;

         padding-bottom: 22px;

         margin-bottom: 30px;

         border-bottom: 1px solid #e4e4e1;
     }

     .products-count {
         color: #888888;

         font-size: 12px;
     }

     .products-count strong {
         color: #1A1A1A;
     }

     .products-toolbar-right {
         display: flex;

         align-items: center;

         gap: 12px;
     }

     .search-products {
         position: relative;
     }

     .search-products i {
         position: absolute;

         left: 14px;

         top: 50%;

         transform: translateY(-50%);

         color: #999;

         font-size: 13px;
     }

     .search-products input {
         width: 190px;

         height: 40px;

         border: 1px solid #e4e4e1;

         outline: none;

         padding: 0 12px 0 38px;

         color: #1A1A1A;

         font-size: 12px;

         background: white;

         transition: 0.3s ease;
     }

     .search-products input:focus {
         border-color: #E00827;
     }

     .product-sort {
         height: 40px;

         min-width: 155px;

         border: 1px solid #e4e4e1;

         background: white;

         color: #5D5D5D;

         padding: 0 12px;

         outline: none;

         font-size: 12px;

         cursor: pointer;
     }

     .product-sort:focus {
         border-color: #E00827;
     }


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

     .product-card {
         height: 100%;

         background: white;

         border: 1px solid #e4e4e1;

         transition:
             transform 0.35s ease,
             box-shadow 0.35s ease,
             border-color 0.35s ease;
     }

     .product-card-link {
         display: block;
         height: 100%;
         color: inherit;
         text-decoration: none;
     }

     .product-card-link:hover {
         color: inherit;
     }

     .product-card-link:focus-visible {
         outline: 3px solid #e00827;
         outline-offset: 3px;
     }

     .product-card:hover {
         transform: translateY(-7px);

         border-color: transparent;

         box-shadow: 0 18px 45px rgba(0, 0, 0, 0.10);
     }

     .product-image {
         position: relative;

         height: 285px;

         overflow: hidden;

         background: #F7F7F5;
     }

     .product-image img {
         width: 100%;
         height: 100%;

         object-fit: contain;

         transition: transform 0.55s ease;
     }

     .product-tag {
         position: absolute;

         top: 16px;
         left: 16px;

         padding: 7px 10px;

         background: white;

         color: #1A1A1A;

         font-size: 9px;

         font-weight: 700;

         letter-spacing: 1px;
     }

     .wishlist-btn {
         position: absolute;

         top: 15px;
         right: 15px;

         width: 38px;
         height: 38px;

         border: 0;

         display: flex;

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

         background: white;

         color: #1A1A1A;

         font-size: 16px;

         cursor: pointer;

         transition:
             background 0.3s ease,
             color 0.3s ease,
             transform 0.3s ease;
     }

     .wishlist-btn:hover,
     .wishlist-btn.active {
         background: #E00827;

         color: white;

         transform: scale(1.05);
     }

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

     .product-content {
         padding: 22px;
     }

     .product-category {
         display: block;

         margin-bottom: 9px;

         color: #E00827;

         font-size: 9px;

         font-weight: 700;

         letter-spacing: 1.3px;

         text-transform: uppercase;
     }

     .product-content h3 {
         /* min-height: 43px; */

         /* margin: 0 0 20px; */

         color: #1A1A1A;

         font-size: 15px;

         /* line-height: 1.45; */

         font-weight: 600;
     }

     .product-footer {
         display: flex;

         align-items: center;

         justify-content: space-between;

         gap: 10px;

         padding-top: 16px;

         border-top: 1px solid #e4e4e1;
     }

     .product-price {
         color: #1A1A1A;

         font-size: 16px;

         font-weight: 700;
     }

     .product-price small {
         margin-right: 2px;

         color: #888888;

         font-size: 9px;

         font-weight: 600;

         letter-spacing: 0.5px;
     }

     .add-cart-btn {
         border: 0;

         display: inline-flex;

         align-items: center;

         gap: 7px;

         padding: 10px 12px;

         background: #1A1A1A;

         color: white;

         font-size: 10px;

         font-weight: 600;

         cursor: pointer;

         transition: 0.3s ease;
     }

     .add-cart-btn:hover {
         background: #E00827;
     }

     .add-cart-btn i {
         font-size: 13px;
     }


     /* =========================================================
   NO PRODUCTS
========================================================= */

     .no-products {
         display: none;

         padding: 80px 20px;

         text-align: center;

         border: 1px solid #e4e4e1;
     }

     .no-products.show {
         display: block;
     }

     .no-products i {
         display: block;

         margin-bottom: 18px;

         color: #B0B0B0;

         font-size: 38px;
     }

     .no-products h3 {
         margin-bottom: 8px;

         font-size: 20px;
     }

     .no-products p {
         margin: 0;

         color: #888888;

         font-size: 13px;
     }


     /* =========================================================
   PAGINATION
========================================================= */

     .products-pagination {
         display: flex;

         align-items: center;

         justify-content: center;

         gap: 8px;

         margin-top: 55px;
     }

     .pagination-btn,
     .pagination-next {
         height: 42px;

         min-width: 42px;

         border: 1px solid #e4e4e1;

         background: white;

         color: #5D5D5D;

         font-size: 11px;

         font-weight: 600;

         cursor: pointer;

         transition: 0.3s ease;
     }

     .pagination-btn:hover,
     .pagination-btn.active {
         border-color: #1A1A1A;

         background: #1A1A1A;

         color: white
     }

     .pagination-next {
         display: inline-flex;

         align-items: center;

         gap: 10px;

         padding: 0 16px;

         border: 0;

         background: transparent;

         color: #1A1A1A;
     }

     .pagination-next:hover {
         color: #E00827;
     }


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

     .products-cta {
         padding: 0 0 110px;

         background: white
     }

     .products-cta-inner {
         position: relative;

         display: flex;

         align-items: center;

         justify-content: space-between;

         gap: 40px;

         padding: 65px 70px;

         overflow: hidden;

         background: rgb(224, 8, 39);
         ;

         color: white
     }

     .products-cta-inner::after {
         content: "";

         position: absolute;

         width: 400px;
         height: 400px;

         border: 1px solid rgba(255, 255, 255, 0.1);

         border-radius: 50%;

         right: -180px;
         top: -220px;
     }

     .products-cta-inner>div {
         position: relative;

         z-index: 2;
     }

     .products-cta-inner span {
         display: block;

         margin-bottom: 13px;

         color: rgba(255, 255, 255, 0.65);

         font-size: 10px;

         font-weight: 700;

         letter-spacing: 2px;
     }

     .products-cta-inner h2 {
         max-width: 650px;

         margin: 0;

         font-family: "Playfair Display", serif;

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

         line-height: 1.15;

         font-weight: 500;
     }

     .cta-button {
         position: relative;

         z-index: 3;

         flex-shrink: 0;

         display: inline-flex;

         align-items: center;

         gap: 13px;

         padding: 16px 23px;

         background: white;

         color: #1A1A1A;

         font-size: 12px;

         font-weight: 700;

         transition: 0.3s ease;
     }

     .cta-button:hover {
         background: #1A1A1A;

         color: white;

         transform: translateY(-3px);
     }


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

     .mobile-filter-btn {
         display: none;

         width: 100%;

         align-items: center;

         justify-content: space-between;

         margin-bottom: 25px;

         padding: 15px 18px;

         border: 1px solid #e4e4e1;

         background: white;

         color: #1A1A1A;

         font-size: 12px;

         font-weight: 600;
     }

     .mobile-filter-btn>i:first-child {
         color: #E00827;
     }

     .mobile-category-filter {
         width: 310px;
     }

     .mobile-category-filter .offcanvas-header {
         padding: 25px;

         border-bottom: 1px solid #e4e4e1;
     }

     .mobile-category-filter h5 {
         margin: 0;

         font-size: 17px;

         font-weight: 700;
     }

     .mobile-category-filter .offcanvas-body {
         padding: 10px 25px;
     }

     .mobile-category-link {
         display: flex;

         align-items: center;

         padding: 16px 0;

         border-bottom: 1px solid #e4e4e1;

         color: #1A1A1A;

         font-size: 13px;

         transition: 0.3s ease;
     }

     .mobile-category-link:hover,
     .mobile-category-link.active {
         color: #E00827;

         padding-left: 7px;
     }


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

     @media (max-width: 991px) {

         .section-padding {
             padding: 85px 0;
         }

         .products-hero {
             min-height: 420px;
         }

         .products-heading {
             align-items: flex-start;

             flex-direction: column;

             gap: 20px;

             margin-bottom: 45px;
         }

         .products-heading>p {
             max-width: 650px;
         }

         .category-sidebar {
             display: none;
         }

         .mobile-filter-btn {
             display: flex;
         }

         .products-toolbar {
             margin-top: 10px;
         }

     }


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

     @media (max-width: 767px) {

         .section-padding {
             padding: 70px 0;
         }

         /* Hero */

         .products-hero {
             min-height: 360px;

             background-position: 60% center;
         }

         .products-hero h1 {
             font-size: 48px;

             letter-spacing: -2px;
         }

         .hero-eyebrow {
             font-size: 9px;

             letter-spacing: 2px;
         }


         /* Heading */

         .products-heading h2 {
             font-size: 42px;
         }


         /* Toolbar */

         .products-toolbar {
             align-items: flex-start;

             flex-direction: column;

             gap: 15px;
         }

         .products-toolbar-right {
             width: 100%;
         }

         .search-products {
             flex: 1;
         }

         .search-products input {
             width: 100%;
         }

         .product-sort {
             min-width: 145px;
         }


         /* Product */

         .product-image {
             height: 300px;
         }


         /* CTA */

         .products-cta {
             padding-bottom: 70px;
         }

         .products-cta-inner {
             align-items: flex-start;

             flex-direction: column;

             padding: 45px 30px;
         }

         .cta-button {
             width: 100%;

             justify-content: center;
         }


     }


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

     @media (max-width: 480px) {

         .products-hero {
             min-height: 330px;
         }

         .products-hero h1 {
             font-size: 41px;
         }

         .breadcrumb-custom {
             font-size: 9px;
         }

         .products-heading h2 {
             font-size: 36px;
         }

         .products-heading>p {
             font-size: 13px;
         }

         .mobile-category-filter {
             width: 85vw;
         }

         .product-image {
             height: 270px;
         }

         .product-footer {
             align-items: flex-start;

             flex-direction: column;
         }

         .add-cart-btn {
             width: 100%;

             justify-content: center;
         }

         .products-pagination {
             margin-top: 40px;
         }

     }
 }


 /* Page styles: page-what-we-do */
 @scope (body.page-what-we-do) {
     /* =========================================
   OFFICE CARE
   WHAT WE DO PAGE
========================================= */




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


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

     .services-hero {
         min-height: 520px;

         position: relative;

         display: flex;
         align-items: center;

         background-image:
             url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2200&q=85");

         background-size: cover;
         background-position: center;
     }

     .services-hero-overlay {
         position: absolute;

         inset: 0;

         background:
             linear-gradient(90deg,
                 rgba(0, 0, 0, .72),
                 rgba(0, 0, 0, .28),
                 rgba(0, 0, 0, .12));
     }

     .services-hero-content {
         position: relative;

         max-width: 720px;

         padding: 90px 0;
     }

     .hero-label {
         display: inline-block;

         color: #fff;

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

         letter-spacing: 2px;

         margin-bottom: 18px;
     }

     .services-hero h1 {
         color: #fff;

         font-family: "Playfair Display", serif;

         font-size: clamp(55px, 7vw, 88px);

         line-height: 1;

         font-weight: 500;

         margin: 0 0 22px;
     }

     .services-hero p {
         max-width: 600px;

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

         font-size: 17px;

         line-height: 1.8;

         margin-bottom: 30px;
     }

     .hero-breadcrumb {
         display: flex;
         align-items: center;

         gap: 12px;

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

         font-size: 11px;

         letter-spacing: 1px;

         font-weight: 600;
     }

     .hero-breadcrumb a {
         color: #fff;
     }


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

     .services-intro {
         padding: 105px 0 65px;
     }

     .section-label {
         display: block;

         color: #E00827;

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

         letter-spacing: 2px;

         margin-bottom: 17px;
     }

     .section-title {
         font-family: "Playfair Display", serif;

         font-size: clamp(38px, 4.5vw, 58px);

         line-height: 1.12;

         font-weight: 500;

         margin: 0;

         max-width: 750px;
     }

     .section-title span {
         color: #888;
     }

     .section-title .red {
         color: #E00827;
     }

     .section-intro-text {
         color: #555555;

         font-size: 15px;

         line-height: 1.9;

         margin: 0;

         max-width: 500px;
     }


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

     .services-section {
         padding: 35px 0 110px;

         background: #fff;
     }

     .services-grid {
         display: grid;

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

         gap: 25px;
     }


     /* =========================================
   SERVICE CARD
========================================= */
     .service-card {
         background: #f7f7f5;
         border-radius: 16px;
         overflow: hidden;

         border: 1px solid transparent;

         transition:
             transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
             box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
             border-color 0.5s ease;

         will-change: transform, box-shadow;
     }

     .service-card:hover {
         transform: translateY(-6px) !important;

         box-shadow:
             0 18px 45px rgba(0, 0, 0, 0.09);

         border-color: #eee;
     }

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

     .service-image {
         height: 260px;

         position: relative;

         overflow: hidden;

         background: #ddd;
     }

     .service-image img {
         width: 100%;
         height: 100%;

         object-fit: cover;

         display: block;

         transition: transform .6s ease;
     }

     .service-card:hover .service-image img {
         transform: scale(1.06);
     }

     .service-number {
         position: absolute;

         top: 18px;
         right: 18px;

         width: 43px;
         height: 43px;

         border-radius: 50%;

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

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

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

         color: #222;

         letter-spacing: .5px;
     }


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

     .service-content {
         padding: 30px 30px 32px;
     }

     .service-category {
         display: block;

         font-size: 10px;

         color: #E00827;

         font-weight: 700;

         letter-spacing: 1.5px;

         margin-bottom: 12px;
     }

     .service-content h3 {
         font-family: "Playfair Display", serif;

         font-size: 25px;

         line-height: 1.2;

         font-weight: 600;

         margin: 0 0 15px;

         color: #171717;
     }

     .service-content p {
         color: #555555;

         font-size: 13px;

         line-height: 1.75;

         margin: 0 0 25px;

         min-height: 70px;
     }


     /* =========================================
   SERVICE LINK
========================================= */

     .service-link {
         display: inline-flex;

         align-items: center;

         gap: 10px;

         color: #E00827;

         font-size: 10px;

         font-weight: 700;

         letter-spacing: 1.2px;

         transition: all .25s ease;
     }

     .service-link i {
         font-size: 14px;

         transition: transform .25s ease;
     }

     .service-link:hover {
         color: #E00827;
     }

     .service-link:hover i {
         transform: translateX(5px);
     }


     /* =========================================
   UNIQUE SECTION
========================================= */

     .unique-section {
         padding: 115px 0;

         background: #f7f7f5;
     }

     .unique-image {
         position: relative;

         padding-right: 35px;
     }

     .unique-image>img {
         width: 100%;

         height: 600px;

         object-fit: cover;

         border-radius: 16px;
     }

     .unique-image-card {
         position: absolute;

         right: 0;
         bottom: 40px;

         width: 190px;

         padding: 25px;

         background: #E00827;

         color: #fff;

         border-radius: 12px;

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

     .unique-image-card strong {
         display: block;

         font-family: "Playfair Display", serif;

         font-size: 46px;

         line-height: 1;

         margin-bottom: 7px;
     }

     .unique-image-card span {
         display: block;

         font-size: 11px;

         text-transform: uppercase;

         letter-spacing: 1px;

         line-height: 1.5;
     }


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

     .unique-title {
         font-family: "Playfair Display", serif;

         font-size: clamp(38px, 4vw, 56px);

         line-height: 1.12;

         font-weight: 500;

         margin-bottom: 25px;
     }

     .unique-title span {
         color: #888;
     }

     .unique-description {
         color: #555555;

         font-size: 14px;

         line-height: 1.9;

         max-width: 600px;

         margin-bottom: 35px;
     }


     /* =========================================
   HIGHLIGHTS
========================================= */

     .unique-highlights {
         display: grid;

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

         gap: 15px;

         margin-bottom: 35px;
     }

     .highlight-item {
         display: flex;

         align-items: center;

         gap: 13px;

         padding: 14px;

         background: #fff;

         border-radius: 10px;
     }

     .highlight-icon {
         flex: 0 0 40px;

         width: 40px;
         height: 40px;

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

         background: #f3f3f1;

         color: #E00827;

         font-size: 16px;
     }

     .highlight-item strong {
         display: block;

         font-size: 12px;

         font-weight: 700;

         margin-bottom: 3px;
     }

     .highlight-item span {
         display: block;

         font-size: 11px;

         color: #888;
     }


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

     .unique-button {
         display: inline-flex;

         align-items: center;

         gap: 12px;

         padding: 15px 24px;

         background: #171717;

         color: #fff;

         font-size: 11px;

         font-weight: 700;

         letter-spacing: 1px;

         transition: all .25s ease;
     }

     .unique-button:hover {
         background: #E00827;

         color: #fff;
     }

     .unique-button i {
         transition: transform .25s ease;
     }

     .unique-button:hover i {
         transform: translateX(5px);
     }


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

     .services-cta {
         background: #171717;

         padding: 80px 0;
     }

     .services-cta-inner {
         display: flex;

         align-items: center;

         justify-content: space-between;

         gap: 30px;
     }

     .services-cta-inner span {
         color: #999;

         font-size: 10px;

         letter-spacing: 1.8px;

         font-weight: 700;
     }

     .services-cta-inner h2 {
         color: #fff;

         font-family: "Playfair Display", serif;

         font-size: 40px;

         font-weight: 500;

         margin: 10px 0 0;
     }

     .services-cta-inner>a {
         display: inline-flex;

         align-items: center;

         gap: 12px;

         padding: 16px 27px;

         background: #E00827;

         color: #fff;

         font-size: 12px;

         font-weight: 700;

         white-space: nowrap;

         transition: all .25s ease;
     }

     .services-cta-inner>a:hover {
         background: #fff;

         color: #111;
     }


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

     @media (max-width: 991px) {

         .services-hero {
             min-height: 470px;
         }

         .services-intro {
             padding: 80px 0 50px;
         }

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

         .unique-section {
             padding: 80px 0;
         }

         .unique-image>img {
             height: 500px;
         }

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


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

     @media (max-width: 767px) {

         .services-hero {
             min-height: 420px;
         }

         .services-hero-content {
             padding: 70px 0;
         }

         .services-hero h1 {
             font-size: 55px;
         }

         .services-hero p {
             font-size: 14px;
         }

         .services-intro {
             padding: 65px 0 35px;
         }

         .section-title {
             font-size: 40px;
         }

         .section-intro-text {
             margin-top: 15px;
         }

         .services-section {
             padding: 25px 0 70px;
         }

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

             gap: 20px;
         }

         .service-image {
             height: 250px;
         }

         .service-content {
             padding: 27px;
         }

         .service-content p {
             min-height: auto;
         }

         .unique-section {
             padding: 70px 0;
         }

         .unique-image {
             padding-right: 15px;
             padding-bottom: 30px;
         }

         .unique-image>img {
             height: 400px;
         }

         .unique-image-card {
             right: 0;
             bottom: 0;

             width: 165px;

             padding: 20px;
         }

         .unique-image-card strong {
             font-size: 38px;
         }

         .unique-title {
             font-size: 40px;
         }

         .unique-highlights {
             grid-template-columns: 1fr;
         }

         .unique-button {
             width: 100%;

             justify-content: center;
         }

         .services-cta {
             padding: 65px 0;
         }

         .services-cta-inner {
             flex-direction: column;

             align-items: flex-start;
         }

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

         .services-cta-inner>a {
             width: 100%;

             justify-content: center;
         }
     }


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

     @media (max-width: 480px) {

         .services-hero h1 {
             font-size: 46px;
         }

         .services-hero-content {
             padding: 55px 0;
         }

         .service-image {
             height: 220px;
         }

         .service-content h3 {
             font-size: 23px;
         }

         .unique-image>img {
             height: 340px;
         }

         .unique-title {
             font-size: 34px;
         }

     }
 }


 /* Page styles: page-who-we-are */
 @scope (body.page-who-we-are) {
     .section-label {
         display: inline-flex;
         align-items: center;
         gap: 10px;

         color: #E00827;

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

         letter-spacing: 2px;

         margin-bottom: 22px;
     }

     .section-label::before {
         content: "";

         width: 28px;
         height: 2px;

         background: #E00827;
     }



     .about-hero {
         position: relative;
         min-height: 500px;
         display: flex;
         align-items: center;

         background-size: cover;
         background-position: center;
     }

     .about-hero-overlay {
         position: absolute;

         inset: 0;

     }

     .about-hero .container {
         position: relative;
         z-index: 2;
     }

     .about-hero-content {
         max-width: 750px;

         color: #fff;
     }

     .hero-eyebrow {
         display: inline-block;

         font-size: 12px;
         font-weight: 600;

         letter-spacing: 3px;

         margin-bottom: 20px;

         color: rgba(255, 255, 255, 0.75);
     }

     .about-hero h1 {
         font-size: clamp(48px, 7vw, 86px);

         line-height: 1.02;

         font-weight: 700;

         letter-spacing: -3px;

         margin-bottom: 28px;
     }

     .breadcrumb-custom {
         display: flex;
         align-items: center;
         gap: 13px;

         font-size: 12px;
         font-weight: 600;

         letter-spacing: 1.5px;
     }

     .breadcrumb-custom a {
         color: #fff;

         transition: 0.3s ease;
     }

     .breadcrumb-custom a:hover {
         color: #E00827;
     }

     .breadcrumb-custom span:last-child {
         color: rgba(255, 255, 255, 0.6);
     }


     /* =========================================================
   STORY SECTION
   ========================================================= */

     .story-section {
         background: #fff;
     }

     .story-image-wrap {
         position: relative;

         padding-right: 35px;
         padding-bottom: 35px;
     }

     .story-image-wrap::after {
         content: "";

         position: absolute;

         right: 0;
         bottom: 0;

         width: 75%;
         height: 75%;

         background: #f3f3f1;

         z-index: 0;
     }

     .story-image {
         position: relative;

         z-index: 1;

         width: 100%;
         height: 570px;

         object-fit: cover;
     }

     .story-year-card {
         position: absolute;

         z-index: 3;

         left: -25px;
         bottom: 55px;

         width: 145px;
         height: 145px;

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

         background: #E00827;

         color: #fff;

         box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
     }

     .story-year-card span {
         font-size: 12px;

         letter-spacing: 2px;

         text-transform: uppercase;

         opacity: 0.8;

         margin-bottom: 4px;
     }

     .story-year-card strong {
         font-size: 38px;

         line-height: 1;

         font-weight: 700;
     }

     .story-content {
         padding-left: 30px;
     }

     .story-content h2 {
         font-family: "Playfair Display", serif;

         font-size: clamp(42px, 5vw, 64px);

         line-height: 1.08;

         font-weight: 600;

         letter-spacing: -2px;

         margin-bottom: 25px;

         color: #000;
         ;
     }

     .story-content h2 span {
         display: block;

         color: #E00827;
     }

     .story-content h3 {
         font-size: 18px;

         line-height: 1.5;

         font-weight: 700;

         margin-bottom: 22px;

         color: #000;
         ;
     }

     .story-content p {
         color: #555555;

         font-size: 15px;

         line-height: 1.9;

         margin-bottom: 18px;
     }

     .story-content strong {
         color: #000;
         ;
     }

     .story-signature {
         display: flex;

         align-items: center;

         gap: 15px;

         margin-top: 30px;
     }

     .signature-line {
         width: 42px;
         height: 1px;

         background: #E00827;
     }

     .story-signature strong {
         display: block;

         font-size: 14px;

         letter-spacing: 1px;
     }

     .story-signature small {
         display: block;

         margin-top: 3px;

         color: #888888;

         font-size: 11px;

         letter-spacing: 0.5px;
     }


     /* =========================================================
   STATS
   ========================================================= */

     .stats-section {
         background: #f7f7f5;

         padding: 25px 0 70px;
     }

     .stats-grid {
         display: grid;

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

         gap: 1px;

         background: #e4e4e1;

         border: 1px solid #e4e4e1;
     }

     .stat-card {
         background: #fff;

         min-height: 235px;

         padding: 38px 30px;

         display: flex;
         flex-direction: column;
         justify-content: center;

         transition:
             transform 0.35s ease,
             box-shadow 0.35s ease;
     }

     .stat-card:hover {
         position: relative;

         z-index: 2;

         transform: translateY(-8px);

         box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
     }

     .stat-icon {
         width: 46px;
         height: 46px;

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

         margin-bottom: 25px;

         background: #FBE8EB;

         color: #E00827;

         font-size: 19px;
     }

     .stat-number {
         font-size: 46px;

         line-height: 1;

         font-weight: 700;

         letter-spacing: -2px;

         color: #000;
         ;

         margin-bottom: 10px;
     }

     .stat-number span {
         color: #E00827;
     }

     .stat-title {
         font-size: 13px;

         color: #888888;

         font-weight: 500;

         letter-spacing: 0.3px;
     }


     /* =========================================================
   PHILOSOPHY
   ========================================================= */

     .philosophy-section {
         background: #fff;
     }

     .philosophy-box {
         position: relative;

         display: flex;

         gap: 45px;

         padding: 75px 80px;

         background: #000;
         ;

         overflow: hidden;
     }

     .philosophy-box::before {
         content: "";

         position: absolute;

         width: 350px;
         height: 350px;

         border-radius: 50%;

         right: -150px;
         top: -170px;

         background: rgba(224, 8, 39, 0.14);
     }

     .philosophy-box::after {
         content: "";

         position: absolute;

         width: 220px;
         height: 220px;

         border-radius: 50%;

         left: -100px;
         bottom: -120px;

         border: 1px solid rgba(255, 255, 255, 0.08);
     }

     .philosophy-mark {
         position: relative;

         z-index: 2;

         flex-shrink: 0;

         width: 60px;
         height: 60px;

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

         background: #E00827;

         color: #fff;

         font-size: 28px;
     }

     .philosophy-content {
         position: relative;

         z-index: 2;

         max-width: 850px;
     }

     .philosophy-content .section-label {
         color: rgba(255, 255, 255, 0.65);
     }

     .philosophy-content .section-label::before {
         background: #E00827;
     }

     .philosophy-content h2 {
         color: #fff;

         font-family: "Playfair Display", serif;

         font-size: clamp(32px, 4vw, 50px);

         line-height: 1.25;

         font-weight: 500;

         letter-spacing: -1px;

         margin-bottom: 25px;
     }

     .philosophy-content p {
         max-width: 780px;

         color: rgba(255, 255, 255, 0.62);

         font-size: 15px;

         line-height: 1.8;

         margin: 0;
     }


     /* =========================================================
   TEAM
   ========================================================= */

     .team-section {
         background: #f7f7f5;

         padding-top: 100px;
     }

     .team-heading {
         display: flex;

         align-items: flex-end;
         justify-content: space-between;

         gap: 50px;

         margin-bottom: 55px;
     }

     .team-heading h2 {
         font-family: "Playfair Display", serif;

         font-size: clamp(40px, 5vw, 62px);

         line-height: 1.08;

         font-weight: 600;

         letter-spacing: -2px;

         margin: 0;
     }

     .team-heading h2 span {
         color: #E00827;
     }

     .team-heading>p {
         max-width: 430px;

         margin: 0 0 5px;

         color: #555555;

         font-size: 14px;

         line-height: 1.8;
     }

     .team-image-wrap {
         position: relative;

         width: 100%;

         min-height: 560px;

         overflow: hidden;
     }

     .team-image-wrap>img {
         width: 100%;
         height: 560px;

         object-fit: cover;

         object-position: center;
     }

     .team-overlay {
         position: absolute;

         inset: 0;

         display: flex;
         align-items: flex-end;

         background:
             linear-gradient(0deg,
                 rgba(0, 0, 0, 0.75),
                 rgba(0, 0, 0, 0.05) 70%);
     }

     .team-overlay-content {
         padding-bottom: 65px;

         color: #fff;
     }

     .team-overlay-content span {
         display: block;

         font-size: 11px;

         font-weight: 600;

         letter-spacing: 2px;

         color: rgba(255, 255, 255, 0.65);

         margin-bottom: 15px;
     }

     .team-overlay-content h3 {
         max-width: 700px;

         margin: 0;

         font-family: "Playfair Display", serif;

         font-size: clamp(32px, 5vw, 55px);

         line-height: 1.15;

         font-weight: 500;
     }


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

     .about-cta {
         background: #fff;
     }

     .about-cta-box {
         position: relative;

         display: flex;

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

         gap: 50px;

         padding: 70px 75px;

         background: #E00827;

         overflow: hidden;
     }

     .about-cta-box::after {
         content: "";

         position: absolute;

         width: 400px;
         height: 400px;

         right: -180px;
         top: -250px;

         border-radius: 50%;

         border: 1px solid rgba(255, 255, 255, 0.16);
     }

     .light-label {
         color: rgba(255, 255, 255, 0.75);
     }

     .light-label::before {
         background: #fff;
     }

     .about-cta-box h2 {
         position: relative;

         z-index: 2;

         max-width: 650px;

         color: #fff;

         font-family: "Playfair Display", serif;

         font-size: clamp(35px, 4vw, 55px);

         line-height: 1.15;

         font-weight: 500;

         letter-spacing: -1px;

         margin-bottom: 18px;
     }

     .about-cta-box p {
         position: relative;

         z-index: 2;

         max-width: 620px;

         color: rgba(255, 255, 255, 0.78);

         font-size: 14px;

         line-height: 1.7;

         margin: 0;
     }

     .cta-button {
         position: relative;

         z-index: 3;

         flex-shrink: 0;

         display: inline-flex;

         align-items: center;

         gap: 14px;

         padding: 16px 25px;

         background: #fff;

         color: #000;
         ;

         font-size: 13px;

         font-weight: 700;

         transition:
             background 0.3s ease,
             color 0.3s ease,
             transform 0.3s ease;
     }

     .cta-button:hover {
         background: #000;
         ;

         color: #fff;

         transform: translateY(-3px);
     }

     .cta-button i {
         font-size: 17px;
     }


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

     @media (max-width: 991px) {

         .section-padding {
             padding: 85px 0;
         }

         /* Hero */

         .about-hero {
             min-height: 440px;
         }

         .about-hero h1 {
             letter-spacing: -2px;
         }


         /* Story */

         .story-image {
             height: 500px;
         }

         .story-content {
             padding-left: 0;
         }


         /* Stats */

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


         /* Philosophy */

         .philosophy-box {
             padding: 55px 45px;
         }


         /* Team */

         .team-section {
             padding-top: 80px;
         }

         .team-heading {
             align-items: flex-start;

             flex-direction: column;

             margin-bottom: 40px;
         }

         .team-heading>p {
             max-width: 650px;
         }

         .team-image-wrap,
         .team-image-wrap>img {
             min-height: 500px;
             height: 500px;
         }


         /* CTA */

         .about-cta-box {
             align-items: flex-start;

             flex-direction: column;

             padding: 55px 45px;
         }

     }


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

     @media (max-width: 767px) {

         .section-padding {
             padding: 70px 0;
         }


         /* Hero */

         .about-hero {
             min-height: 390px;

             background-position: 60% center;
         }

         .about-hero h1 {
             font-size: 48px;

             letter-spacing: -2px;

             margin-bottom: 20px;
         }

         .hero-eyebrow {
             font-size: 10px;

             letter-spacing: 2px;
         }


         /* Story */

         .story-image-wrap {
             padding-right: 20px;
             padding-bottom: 20px;
         }

         .story-image {
             height: 430px;
         }

         .story-year-card {
             left: -5px;
             bottom: 30px;

             width: 115px;
             height: 115px;
         }

         .story-year-card strong {
             font-size: 30px;
         }

         .story-content h2 {
             font-size: 43px;
         }

         .story-content h3 {
             font-size: 17px;
         }

         .story-content p {
             font-size: 14px;

             line-height: 1.8;
         }


         /* Stats */

         .stats-section {
             padding: 15px 0 50px;
         }

         .stats-grid {
             grid-template-columns: 1fr;
         }

         .stat-card {
             min-height: 190px;

             padding: 30px;
         }

         .stat-number {
             font-size: 42px;
         }


         /* Philosophy */

         .philosophy-box {
             flex-direction: column;

             gap: 25px;

             padding: 40px 30px;
         }

         .philosophy-mark {
             width: 52px;
             height: 52px;

             font-size: 23px;
         }

         .philosophy-content h2 {
             font-size: 32px;
         }


         /* Team */

         .team-section {
             padding-top: 70px;
         }

         .team-heading h2 {
             font-size: 43px;
         }

         .team-image-wrap,
         .team-image-wrap>img {
             min-height: 450px;
             height: 450px;
         }

         .team-overlay-content {
             padding-bottom: 40px;
         }


         /* CTA */

         .about-cta-box {
             padding: 45px 30px;
         }

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

         .cta-button {
             width: 100%;

             justify-content: center;
         }


     }


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

     @media (max-width: 480px) {

         .about-hero {
             min-height: 350px;
         }

         .about-hero h1 {
             font-size: 42px;
         }

         .breadcrumb-custom {
             font-size: 10px;
         }

         .story-image {
             height: 360px;
         }

         .story-content h2 {
             font-size: 38px;
         }

         .story-content h3 {
             font-size: 16px;
         }

         .story-year-card {
             width: 100px;
             height: 100px;
         }

         .story-year-card strong {
             font-size: 27px;
         }

         .team-image-wrap,
         .team-image-wrap>img {
             min-height: 380px;
             height: 380px;
         }

         .team-heading h2 {
             font-size: 37px;
         }

         .team-overlay-content h3 {
             font-size: 31px;
         }

     }










     /* The Team That Makes It Happen */
     .who-team-section {
         position: relative;
         background: #ffffff;
     }

     .who-team-header {
         min-height: 360px;
         padding: 5rem 0 10rem;
         background: #A3080C;
         color: #ffffff;
         text-align: center;
     }

     .who-team-header .container {
         display: flex;
         align-items: center;
         flex-direction: column;
     }

     .who-team-kicker {
         display: inline-block;
         margin: 0 0 1.25rem;
         padding: 0.55rem 0.85rem;
         background: rgba(0, 0, 0, 0.22);
         color: #f0d9d9;
         font-family: 'Montserrat', Arial, sans-serif;
         font-size: 0.75rem;
         font-weight: 700;
         letter-spacing: 0.08em;
     }

     .who-team-header h2 {
         margin: 0;
         color: #ffffff;
         font-size: clamp(2rem, 4vw, 2.8rem);
         font-weight: 800;
     }

     .who-team-cards {
         display: grid;
         max-width: 960px;
         grid-template-columns: repeat(2, minmax(0, 420px));
         justify-content: center;
         gap: clamp(1.5rem, 4vw, 3rem);
         margin-top: -8rem;
         padding-bottom: 5rem;
     }

     .who-team-card {
         overflow: hidden;
         border: 8px solid #ffffff;
         border-radius: 10px;
         background: #ffffff;
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     }

     .who-team-photo {
         position: relative;
         aspect-ratio: 4 / 3;
         max-height: 330px;
         overflow: hidden;
         background: #eeeeee;
     }

     .who-team-photo img {
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover;
         object-position: center top;
         transition: transform 0.35s ease;
     }

     .who-team-card:hover .who-team-photo img {
         transform: scale(1.06);
     }

     .who-team-overlay {
         position: absolute;
         inset: auto 0 0;
         padding: 4rem 1.5rem 1.5rem;
         background: linear-gradient(transparent, rgba(16, 16, 16, 0.88));
         color: #ffffff;
         opacity: 0;
         transform: translateY(1rem);
         transition: opacity 0.35s ease, transform 0.35s ease;
     }

     .who-team-card:hover .who-team-overlay,
     .who-team-card:focus-within .who-team-overlay {
         opacity: 1;
         transform: translateY(0);
     }

     .who-team-name {
         margin: 0 0 0.3rem;
         font-family: 'Montserrat', Arial, sans-serif;
         font-size: 1.2rem;
         font-weight: 700;
     }

     .who-team-position {
         margin: 0;
         color: #ffcc66;
         font-size: 0.78rem;
         font-weight: 700;
         letter-spacing: 0.1em;
         text-transform: uppercase;
     }

     @media (max-width: 767.98px) {
         .who-team-header {
             min-height: 330px;
             padding: 4rem 0 9rem;
         }

         .who-team-kicker {
             max-width: 320px;
             font-size: 0.68rem;
             line-height: 1.5;
         }

         .who-team-cards {
             grid-template-columns: minmax(0, 420px);
             margin-top: -7rem;
             padding-bottom: 4rem;
         }

         .who-team-overlay {
             opacity: 1;
             transform: translateY(0);
         }
     }
 }