/*	------------------------ General -------------------------- */

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1170px;
    }

    .container-fluid {
        max-width: calc(100% - 120px);
    }
}




@media(min-width: 992px) {
    .container-fluid {
        max-width: calc(100% - 60px);
    }
}

@media(min-width: 1000px) {
    .container-fluid {
        max-width: calc(100% - 120px);
    }
}

@media (min-width: 1600px) {
    .container-fluid {
        max-width: calc(100% - 360px);
    }
}


:root {

    /* ── Brand Colours ── */
    --color-primary: #FFD000;
    --color-primary-dark: #E7B500;
    --color-secondary: #0066CC;
    --color-secondary-dark: #1D4591;

    /* Neutral */
    --text: #ffffff;
    --bg: #110E19;

    /* Radius / Shadow */
    --radius-sm: 8px;
    --radius-md: 10px;
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.08);

    /* Headlines */
    --fs-h1: clamp(28px, 3vw, 45px);
    /* 45px - Banner Title, Number Counter */
    --fs-h2: clamp(22px, 2.4vw, 35px);
    /* 35px - Section Title */
    --fs-h3: clamp(18px, 2vw, 30px);
    /* 30px - Contact Us "Connect With Us" */
    --fs-f30: clamp(17px, 1.9vw, 30px);
    /* 28px - */
    /* Titles */
    --fs-f35: clamp(24px, 3.15vw, 35px);
    
    --fs-f20: clamp(16px, 1.8vw, 20px);
    /* 20px - Homepage "What Makes Us Different" */
    --fs-f18: clamp(15px, 1.6vw, 18px);
    /* 18px - Footer "Follow Us" */
    --fs-f16: clamp(14px, 1.5vw, 16px);
    /* 16px - Points / Product Category */
    --fs-t14: clamp(12px, 1.3vw, 14px);
    /* 14px - Testimonial Name / Footer Title */

    /* Body Text */
    --fs-p16: clamp(14px, 1.5vw, 16px);
    /* 16px - Button text */
    --fs-p14: clamp(12px, 1.3vw, 14px);
    /* 14px - Paragraph / Date */
    --fs-t12: clamp(10px, 1vw, 12px);
    /* 12px - Description */

    /* Line-height */
    --lh-normal: 1.5;
    --lh-title: 1.2;

    /* Button */
    --btn-h: 44px;
    --btn-px: 24px;
    --btn-radius: 8px;
    --btn-border: 1px;
}


body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--fs-p14);
}

/* ============================================
   Typography Classes (Design System)
   ============================================ */

/* H1 Headline - 45px Bold (Banner Title, Number Counter) */
.h1,
h1 {
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: var(--lh-title);
}

/* H2 Headline - 35px ExtraBold (Section Title) */
.h2,
h2 {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: var(--lh-title);
}

/* H3 / Text - 30px Bold (Contact Us "Connect With Us") */
.h3,
h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-title);
    font-weight: 800;
}


.h4,
h4,
.title-lg {
    font-size: var(--fs-f30);
    line-height: var(--lh-normal);
    font-weight: 700;
}

.title-xl {
    font-size: var(--fs-f35);
    line-height: var(--lh-normal);
    font-weight: 700;
}


/* Title-20 - 20px Bold (Homepage & About Us - What Makes Us Different) */
.title {
    font-size: var(--fs-f20);
    line-height: var(--lh-normal);
    font-weight: 700;
}

/* Title-16 Bold variant (Product Category) */
.title-sm {
    font-size: var(--fs-f16);
    line-height: var(--lh-normal);
    font-weight: 700;
}

/* Paragraph - 14px Regular (Content) */
.p,
p {
    font-size: var(--fs-p14);
    font-weight: 400;
    /* Regular */
}

/* Title-14 SemiBold (Testimonial Name) */
.title-14 {
    font-size: var(--fs-t14);
    line-height: var(--lh-title);
    font-weight: 600;
    /* SemiBold */
}

/* Footer "Follow Us" - 18px Bold */
.footer-follow-title {
    font-size: var(--fs-f18);
    line-height: var(--lh-title);
    font-weight: 700;
    margin-right: 60px;
    margin-bottom: 0;
    color: #fff !important;
    /* Bold */
}

/* Footer Title - 14px Bold */
.footer-title {
    font-size: var(--fs-t14);
    line-height: var(--lh-title);
    font-weight: 600;
    /* Bold */
}

/* Date - 14px SemiBold (Pink color for dates) */
.date {
    font-size: var(--fs-p14);
    font-weight: 600;
    /* SemiBold */
    color: var(--color-accent);
}

/* Description - 12px Regular */
.description {
    font-size: var(--fs-t12);
    font-weight: 400;
    /* Regular */
}

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

.tag {
    font-weight: 400;
    font-size: 14px;
    color: #000;
}

.light-text {
    font-weight: 300;
    font-size: 12px;
    color: #000;
}

.cta-text {
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}

section {
    padding-top: 60px;
    padding-bottom: 60px;
}

@media (max-width: 575.9px) {
    section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}


h2:has(+ p) {
    margin-bottom: 12px;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    cursor: default;
}

a:hover {
    color: var(--color-primary);
}

.datepicker.datepicker-dropdown.dropdown-menu {
    z-index: 9999 !important;
}


/* ============================================
   Button Styles (SCCL Design System)
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 25px;
    border-radius: var(--btn-radius);
    font-size: var(--fs-p16);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: var(--btn-border) solid transparent;
    transition: all 160ms ease;
    user-select: none;
}

/* .btn:active {
    transform: translateY(1px);
} */

/* Primary Button - Green filled with white text */
.btn-primary {
    background: var(--color-primary);
    color: #000000;
    border-color: var(--color-primary);
}

/* Primary Hover: Dark green background */
.btn-primary:hover {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary)
}

/* Primary Clicked/Active: Dark green */
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus,
.btn-primary.focus {
    background: var(--color-primary) !important;
    color: #000000 !important;
    border-color: var(--color-primary) !important;
}

/* Primary Outlined variant - Green border, green text, white bg */
.btn-primary-outlined {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-primary-outlined:hover {
    background: var(--color-primary);
    color: #000000;
}

/* Secondary Button - "Read More >" link style with green text */
.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: none;
    padding: 0;
    height: auto;
    font-weight: 600;
    gap: 4px;
}

/* Secondary Hover: darker green */
.btn-secondary:hover {
    color: var(--color-secondary);
    background: transparent;
}

/* Secondary Active */
.btn-secondary:active,
.btn-secondary.active {
    color: var(--color-secondary);
    background: transparent;
}

/* Tertiary Button - Outline style (for F7F7F7 box contexts) */
.btn-tertiary {
    background: transparent;
    color: var(--color-primary);
    padding: 0;
    height: auto;
    border: 0;
    border-radius: 0;
    text-decoration: none;
    font-weight: 600;
    gap: 4px;
}

.btn-tertiary:hover {
    color: var(--color-secondary);
}

/* Disabled State */
.btn[disabled],
.btn.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}


/* 

.button{
	background-color: #734F0D;
	color: white;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	text-shadow: none;
	padding: 0 25px;
	letter-spacing: 0;
	text-transform: uppercase;
	line-height: 1;
	height: 36px;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}
.button:hover{background-color: #CC9739;}
.button2{
	background-color: #5B5B5B;
	color: white;
}
.button2:hover{
	background-color: #CC9739;
}
.button3{
	background-color: #CC9739;
	color: #fff;
	border-radius: 100px;
	border: none;
	font-size: 16px;
	text-shadow: none;
	padding: 0 35px;
	letter-spacing: 0;
	text-transform: none;
	display: inline-block;
	height: 50px;
	line-height: 50px;
}
.button3:hover{
	background-color: #734F0D;
}
.button4{
	background-color: #fff;
	color: #000;
	border-radius: 100px;
	border: none;
	font-size: 16px;
	text-shadow: none;
	padding: 0 35px;
	letter-spacing: 0;
	text-transform: none;
	display: inline-block;
	height: 50px;
	line-height: 50px;
}
.button4:hover{
	background-color: #734F0D;
}
.button-outlined{
	background-color: transparent;
	color: #000;
	border-radius: 100px;
	border: 1px solid #CC9739;
	font-size: 16px;
	text-shadow: none;
	padding: 20px 35px;
	letter-spacing: 0;
	text-transform: none;
	display: inline-block;
	height: auto;
	line-height: 1.3;
	text-decoration: none;
}
.button-outlined:hover{
	background-color: #CC9739;
	color: #fff;
}

.button3 + .button-outlined{
	padding-top: 0;
	padding-bottom: 0;
	height: 50px;
	line-height: 50px;
} */

.link {
    color: #CC9739;
    border-bottom: 1px solid #CC9739;
}

.linkarrow {
    color: #CC9739;
    border-bottom: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.linkarrow:after {
    content: '\203A';
    position: relative;
    display: inline-block;
    font-size: 18px;
    line-height: normal;
    margin-left: 5px;
    font-weight: 100;
}

.link.textWhite {
    color: #fff;
    border-bottom: 1px solid #fff;
}

.bg-grey {
    background-color: #f2f2f2;
}

.loadingDiv {
    display: none;
}

#noticeDivSubscription {
    max-width: 420px;
    margin-right: 0;
    margin-left: auto;
    padding: 0.5rem 1rem;
    margin-top: 10px;
}

#noticeDiv,
#noticeDiv2,
#noticeDivApplication {
    display: none;
    margin-right: 0;
    margin-left: auto;
    padding: 0.5rem 1rem;
    margin-top: 10px;
}

.text-right {
    text-align: right;
}

.style-msg {
    margin: 10px auto;
    padding: 5px;
}

.font-weight-800 {
    font-weight: 800;
}

.font-weight-700 {
    font-weight: 700;
}

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

.font-weight-500 {
    font-weight: 500;
}

.mt-35 {
    margin-top: 35px;
}

.mr-20 {
    margin-right: 20px;
}

.mb-0 {
    margin-bottom: 0;
}

.textWhite {
    color: white;
}

/* Pagination */
.own-pagination {
    margin-top: 60px;
    margin-inline: auto;
}

@media (max-width: 575.9px) {
    .own-pagination {
        margin-top: 30px;
    }
}

.own-pagination nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.own-pagination nav a,
.own-pagination nav strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0 10px;
    text-decoration: none;
    color: #000;
    transition: all 0.3s ease;
}

.own-pagination nav strong {
    background: var(--color-primary);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
}

.own-pagination nav a:hover {
    color: var(--color-primary);
}

.own-pagination nav a i {
    color: #CECECE;
    transition: color 0.3s ease;
}

.own-pagination nav a:hover i {
    color: var(--color-primary);
}

.own-pagination .pagination {
    gap: 8px;
}

.own-pagination .page-link {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    color: #555;
    font-weight: 500;
    font-size: 18px;
    background: transparent;
}

.own-pagination .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.own-pagination .page-link:hover {
    background: #f0f0f0;
    color: #333;
}

.own-pagination .page-item.active .page-link:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}


/*	------------------------ General END -------------------------- */

/*	------------------------ Header -------------------------- */

.top-message {
    background-color: var(--color-primary-dark);
}

.top-message .flexbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.top-message .content p {
    color: #000;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0;
}

.top-message .content p a {
    color: #555;
    font-weight: 700;
}

.countdownbox {
    display: flex;
}

.countdownbox .box {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
}

.countdownbox .box:last-child {
    margin-right: 0;
}

.countdownbox .countdown {
    background-color: #ffffff;
    padding: 1px;
    border-radius: 5px;
    color: #242422;
    width: 45px;
    text-align: center;
}

.countdownbox .countdown+span {
    font-size: 12px;
    color: white;
    font-weight: 300;
    line-height: 1;
    margin-top: 3px;
}

#logo img {
    width: auto;
    height: 25px;
}

.header-outter-flexbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}

.header-inner-flexbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    /*width: calc(100% - 550px);*/
    /*width: calc(100% - 300px);*/
}

#primary-menu-container {}

#primary-menu-container .outter-flexbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

#primary-menu>div>ul {
    justify-content: flex-end;
    padding: 0;
    gap: 30px;
}

#primary-menu>div>ul>li {}

.top-search-open .header-inner-flexbox {
    /*width: calc(100% - 475px);*/
    flex-wrap: nowrap;
    /* overflow: hidden; */
    /*   -webkit-transition: width .3s ease;*/
    /*-o-transition: width .3s ease;*/
    /*transition: width .3s ease;*/
}

#primary-menu>div>ul>li>a {
    color: #fff;
    font-size: var(--fs-p14) !important;
    text-transform: uppercase;
    letter-spacing: 1.12px;;
}

/* ================================================================
   Mega-menu — Products (category sidebar + featured products) and
   Services (featured cards only)
   ================================================================ */

/* Nav items with a mega panel anchor the dropdown to the header, not the li.
   Both the li and the menu wrapper div (position:relative further down) must be
   static so the absolute panel climbs up to #header and spans the full width. */
#primary-menu>div>ul>li.mega-li {
    position: static !important;
}

#primary-menu>div:has(ul.mega-dropdown) {
    position: static;
}

/* Override theme's default dropdown sizing/positioning for mega panels */
#primary-menu>div>ul>li>ul.mega-dropdown,
#primary-menu>div>ul>li>ul.mega-dropdown.menu-pos-invert {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    background: #110E19;
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.35) !important;
    left: 0 !important;
    right: 0 !important;
    top: 100%;
    /* restarts every time superfish flips display:none -> block */
    animation: megaSlideDown .4s cubic-bezier(.4, 0, .2, 1);
}

@keyframes megaSlideDown {
    from {
        clip-path: inset(0 0 100% 0);
        transform: translateY(-12px);
    }

    to {
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }
}

/* Single list item that holds the panel layout */
#primary-menu ul.mega-dropdown>li.mega-menu-inner {
    display: block !important;
    padding: 0 !important;
    background: #110E19 !important;
    width: 100% !important;
}

#primary-menu ul.mega-dropdown .mega-flex {
    display: flex;
    align-items: stretch;
}

/* ── LEFT column: categories ── */
#primary-menu ul.mega-dropdown .mega-cat-col {
    width: 240px;
    flex-shrink: 0;
    padding: 15px 10px 15px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -15px;
}

#primary-menu ul.mega-dropdown .mega-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 15px;
    margin: 0;
    border-radius: 8px;
    color: #FFF;
    font-size: var(--fs-p14);
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
}

#primary-menu ul.mega-dropdown .mega-cat-name {
    flex: 1;
}

#primary-menu ul.mega-dropdown .mega-cat-toggle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: inherit;
    transition: transform .2s ease;
}

#primary-menu ul.mega-dropdown .mega-cat-group.open .mega-cat-toggle {
    transform: rotate(180deg);
}

#primary-menu ul.mega-dropdown .mega-cat-item:hover,
#primary-menu ul.mega-dropdown .mega-cat-item.is-current {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-primary);
    text-decoration: none;
}

/* Child categories (accordion) */
#primary-menu ul.mega-dropdown .mega-cat-children {
    display: none;
    padding: 2px 6px 6px 6px;
}

#primary-menu ul.mega-dropdown .mega-cat-group.open .mega-cat-children {
    display: block;
}

#primary-menu ul.mega-dropdown .mega-cat-child {
    display: block;
    margin: 0;
    padding: 8px 14px 8px 26px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--fs-p14);
    font-weight: 400;
    text-decoration: none;
    transition: background .15s, color .15s;
}

#primary-menu ul.mega-dropdown .mega-cat-child:hover,
#primary-menu ul.mega-dropdown .mega-cat-child.is-current {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-primary);
    text-decoration: none;
}

/* ── RIGHT column: featured cards (also full panel for services) ── */
/* Stack all category groups in the same grid cell so the wrap keeps the
   height of the tallest group — empty categories don't shrink the panel */
#primary-menu ul.mega-dropdown .mega-featured-wrap {
    flex: 1;
    min-width: 0;
    display: grid;
}

#primary-menu ul.mega-dropdown .mega-featured-wrap>.mega-prod-group {
    grid-area: 1 / 1;
}

#primary-menu ul.mega-dropdown .mega-featured-col {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 30px;
    align-items: stretch;
    justify-content: center;
}

/* Products panel: cards align left; per-category groups toggled by sidebar hover */
#primary-menu ul.mega-dropdown-product .mega-featured-col {
    justify-content: flex-start;
}

#primary-menu ul.mega-dropdown .mega-prod-group {
    visibility: hidden;
}

#primary-menu ul.mega-dropdown .mega-prod-group.is-active {
    visibility: visible;
}

#primary-menu ul.mega-dropdown .mega-cat-item.is-hovered {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-primary);
}

#primary-menu ul.mega-dropdown .mega-prod-empty {
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--fs-p14);
    padding: 20px 0;
    align-self: center;
}

#primary-menu ul.mega-dropdown .mega-featured-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 190px;
    max-width: 230px;
    margin: 0;
    padding: 14px 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

#primary-menu ul.mega-dropdown .mega-featured-card:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

#primary-menu ul.mega-dropdown .mega-featured-img {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    background: #FFF;
}

#primary-menu ul.mega-dropdown .mega-featured-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Service cards: photos look better cropped edge-to-edge */
#primary-menu ul.mega-dropdown-service .mega-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#primary-menu ul.mega-dropdown .mega-featured-name {
    color: #FFF;
    font-size: var(--fs-p14);
    font-weight: 500;
    text-align: center;
    margin-top: auto;
}

#primary-menu ul.mega-dropdown .mega-featured-card:hover .mega-featured-name {
    color: var(--color-primary);
}

.header-outter-flexbox .topinfo {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

/* Sticky Header */
/* The markup wraps only the header inside #wrapper (page content is a sibling after it),
   so a sticky header's containing block (#wrapper) is too short and it scrolls away.
   #wrapper carries no styling of its own — make it boxless so the header's containing
   block becomes <body> (full page height) and position: sticky works across the page. */
#wrapper {
    display: contents;
}

#header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #110E19;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 8px 16px 0 rgba(0, 0, 0, 0.08);
}

#header.transparent-header{
    background-color: transparent;
    box-shadow: none;
    margin-bottom: -100px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 992px) {
    #header.transparent-header{
        margin-bottom: unset;
    background-color: #110E19;

    }    
}

/* Home page: fill the transparent header with black once the user scrolls down,
   or while a mega menu is open (superfish tags the li with .sfHover) */
#header.transparent-header.scrolled,
#header.transparent-header:has(li.mega-li.sfHover) {
    background-color: #110E19;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 8px 16px 0 rgba(0, 0, 0, 0.08);
}

#header .header-info {
    height: 100%;
    width: 100%;
    justify-content: flex-end;
}

.header-outter-flexbox .top-contact {
    background-color: #F6F6F6;
}

#header .header-info .infobox.top-contact .flexbox {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    padding: 20px;
    border-inline-end: 1px solid #CECECE;
}

#header .header-info .infobox.top-contact .flexbox svg {
    margin-right: 10px;
    width: 15px;
}

#header .header-info .infobox.top-contact .flexbox .text {
    line-height: normal;
}

#header .header-info .infobox.top-contact .flexbox .text span {
    display: block;
    color: black;
    letter-spacing: 1.3px;
    font-size: 13px
}

#header .header-info .infobox.top-contact .flexbox .text span.number,
#header .header-info .infobox.top-contact .flexbox .dropdown-label {
    font-weight: 500;
    letter-spacing: 0;
    font-size: 13px
}

#header .header-info .infobox.others>div:not(.top-cart-content) {
    height: 100%;
}

#header .header-info .infobox.others ul {
    height: 100%;
}


#primary-menu>div>ul>li:first-child>a {
    padding-left: 0;
}

#primary-menu>div>ul>li>a>img {
    height: 14px;
}

#primary-menu ul li a+ul.category-nav:before {
    content: '';
    position: absolute;
    top: -7px;
    left: 60px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
    z-index: 1;
}

#primary-menu ul li span {
    display: block;
}

#primary-menu ul li span svg {
    height: 10px;
    width: auto;
}


#primary-menu ul li span svg path {
    stroke: #000;
}

#primary-menu ul ul.category-nav {
    /*display: flex;*/
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    width: max-content;
    max-width: 660px;
    top: 55px;
    z-index: 2;
    border-top: none;
    border-radius: 8px;
    padding: 5px 10px;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.15));
}

#primary-menu ul ul.category-nav li {
    flex: 0 0 33.3333%;
}

#primary-menu ul ul.category-nav li a {
    padding: 10px;
    margin: 0;
}

#primary-menu ul ul a {
    display: flex;
    justify-content: space-between;
    font-family: 'Montserrat', sans-serif !important;
    color: #000;
    padding: 7.5px 15px;
    font-size: var(--fs-p16);
    margin: 0 15px 0 20px;
    font-weight: 400;
}

.mobile-drawer .navigation>ul>li.current>a,
.mobile-drawer .navigation>ul>li>ul>li.current>a,
.mobile-drawer .navigation>ul>li>ul>li>ul>li.current>a,
.mobile-drawer .navigation>ul>li>a:hover {
    color: var(--color-primary);
}

.mobile-drawer .navigation>ul>li>a:hover,
.mobile-drawer .navigation>ul>li>ul>li>a:hover,
.mobile-drawer .navigation>ul>li>ul>li>ul>li>a:hover {
    color: #fff;
}

.mobile-drawer .navigation>ul>li>a,
.mobile-drawer .navigation>ul>li>ul>li>a,
.mobile-drawer .navigation>ul>li>ul>li>ul>li>a {
    color: #fff;
}

.mobile-drawer .navigation>ul>li>ul>li>a.category-name {
    padding-left: 15px;
}

.mobile-drawer .infobox.top-contact .flexbox .text span {
    letter-spacing: unset;
    font-size: unset;
}


/* ============================================
   Submenu Dropdown Styling (SCCL Pill Style)
   ============================================ */

#primary-menu>div>ul>li>ul,
.corporate-units-dropdown ul {
    display: none;
    position: absolute;
    top: 100%;
    /* left: 100%; */
    /* transform: translateX(-50%); */
    background-color: #fff;
    border: 0;
    padding: 0;
    min-width: 150px;
    width: auto;
    z-index: 200;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 8px 16px 0 rgba(0, 0, 0, 0.08);
}

/* Triangle pointer */
/* #primary-menu>div>ul>li>ul::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--color-secondary);
} */

#primary-menu>div>ul>li:hover>ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

#primary-menu>div>ul>li>ul>li,
.corporate-units-dropdown ul li {
    float: none;
    margin: 0;
    border: none;
    background-color: #fff;
    ;
}

#primary-menu>div>ul>li>ul>li>a,
.corporate-units-dropdown ul li a {
    display: block;
    color: #000;
    font-weight: 400;
    font-size: var(--fs-p16);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    height: auto;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 30px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#primary-menu>div>ul>li>ul>li>a:hover,
.corporate-units-dropdown ul li a:hover {
    background-color: var(--color-primary);
    color: #fff;
}

#primary-menu>div>ul>li>ul>li.current>a,
.corporate-units-dropdown ul li.current a {
    background-color: var(--color-primary);
    color: #fff;
}

/* Nested submenu (third level) */
#primary-menu>div>ul>li>ul>li>ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-primary);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

#primary-menu>div>ul>li>ul>li:hover>ul {
    display: block;
}

#primary-menu>div>ul>li>ul>li>ul>li>a,
.corporate-units-dropdown ul li ul li a {
    padding: 10px 20px !important;
}

.searchbutton {
    border: none;
    /*border-radius: 0 8px 8px 0;*/
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    padding: 0;
}

.searchbutton svg path{
    stroke: #fff;
}

.searchbutton span {
    color: var(--bg);
}

#header .header-info .infobox.others .searchbutton svg#search_icon {
    height: 13px;
    padding-left: 0;
    padding-right: 5px;
    width: auto;
    display: block;
}

.mobile-drawer .searchbutton svg#search_icon {
    height: 13px;
    padding-left: 0;
    padding-right: 5px;
    width: auto;
    display: block;
}

#top-cart {
    position: relative;
}

#header .header-info .infobox.others li#top-cart svg {
    padding-right: 15px;
}

#top-cart #cartQty {
    top: 15px;
    right: -10px;
}

/* --- Desktop: Search open state --- */

/* Global Search Overlay Styles */
/* Fullscreen overlay */
.global-search-overlay {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 99999;
    display: none;
    overflow-y: auto;
}

.global-search-overlay.is-open {
    display: block;
}

/* Inner layout */
.global-search-inner {
    padding-top: 80px;
    padding-bottom: 40px;
}

/* Top bar (X | input | Clear) */
.global-search-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.btn-search-close,
.btn-search-clear {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #000;
}

.btn-search-close {
    font-size: 24px;
    line-height: 1;
}

.global-search-input-wrap {
    flex: 1 1 auto;
}

.global-search-input {
    width: 100%;
    border: 1px solid #CECECE;
    border-radius: 8px;
}

/* Tabs row */
.global-search-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #CECECE;
}

.global-search-tabs .search-tab {
    border: 0;
    background: transparent;
    padding: 8px 12px;
    cursor: pointer;
    color: #555;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.global-search-tabs .search-tab .tab-count {
    margin-left: 4px;
}

.global-search-tabs .search-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Sections */

.search-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.search-section-header h4 {
    margin: 0;
}

.search-see-all {
    color: var(--color-primary);
}

/* Card list */
.search-section-body {
    display: flex;
    flex-direction: column;
}

/* Individual result card */
.search-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    border-bottom: 1px solid #CECECE;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.search-card-main {
    flex: 1 1 auto;
}

.search-card-title:hover {
    color: var(--color-primary);
}

.search-card-meta {
    color: #555;
}

/* Placeholder image area */
.search-card-thumb {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: #f2f2f2;
    margin-left: 16px;
    flex-shrink: 0;
}

/* Tab visibility logic */
.search-section.hidden {
    display: none;
}

/* When overlay open, prevent body scrolling */
body.search-open {
    overflow: hidden;
}

/* Mobile search bar */
#mobile-search-bar {
    background: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.mobile-search-inner {
    position: relative;
}

.mobile-search-input {
    padding-right: 40px;
}

.mobile-search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
}

.search-loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #555;
    font-size: 14px;
}

.search-loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #CECECE;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: searchSpinnerRotate 0.8s linear infinite;
}

@keyframes searchSpinnerRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Global Search Overlay Styles End */


/* Smooth transitions for menu and search column */
#primary-menu>div>ul>li>a {
    transition: padding .3s ease;
}

.topinfo>.col-2 {
    transition: flex-basis .3s ease, max-width .3s ease;
}

#primary-menu.col-8 {
    transition: flex-basis .3s ease, max-width .3s ease;
}

/* Keep menu visible but compress link padding */
.top-search-open #primary-menu>div>ul>li>a {
    padding-left: 3px;
    padding-right: 3px;
}

/* Expand the search column */
.top-search-open .topinfo>.col-2 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
}

/* Compress menu column */
.top-search-open #primary-menu.col-8 {
    flex-basis: 50%;
    max-width: 50%;
}

/* Hide the Get A Quote button to make room */
.top-search-open .header-btn-contact {
    display: none !important;
}

.top-search-open .searchbutton {
    border-radius: 0 8px 8px 0;
}

/* Search icon: hide when open */
.top-search-open .searchbutton svg {
    display: none;
}

/* Close icon: show when open */
.searchbutton .search-close-icon {
    display: none !important;
}

.top-search-open .searchbutton .search-close-icon {
    display: block !important;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.top-search-open #top-search form {
    width: 100%;
    -webkit-transition: width .3s ease;
    -o-transition: width .3s ease;
    transition: width .3s ease;
    animation-delay: 2s;
}

.top-search-open #top-search form input {
    width: calc(100% - 30px);
    padding: 12px 16px;
    -webkit-transition: width .3s ease;
    -o-transition: width .3s ease;
    transition: width .3s ease;
    animation-delay: 2s;
}

/* .highlight-buttons ul {
    width: 300px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    margin: 0;
}

.highlight-buttons>ul li {
    width: calc(50% - 10px);
    text-align: center;
    position: relative;
}

.highlight-buttons>ul li>a {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-content: flex-start;
}

.highlight-buttons>ul li>a:has(i) {
    padding-right: 20px;
}

.highlight-buttons ul li i {
    position: relative;
    font-size: 14px !important;
    top: 1px;
    width: 14px;
    text-align: center;
    margin-left: 5px;
    margin-right: 0;
    -webkit-transition: line-height .4s ease;
    -o-transition: line-height .4s ease;
    transition: line-height .4s ease;
}

.highlight-buttons ul {
    list-style: none;
    height: 50px;
}

.highlight-buttons ul ul {
    display: none;
    position: absolute;
    width: 220px;
    background-color: #FFF;
    box-shadow: 0px 13px 42px 11px rgba(0, 0, 0, 0.05);
    border: 1px solid #EEE;
    border-top: 2px solid #ac8c5e;
    height: auto;
    z-index: 199;
    top: auto;
    top: 48px;
    right: 0;
    margin: 0;
    padding: 0;
}

.highlight-buttons ul ul a {
    font-size: 14px;
    font-weight: 500;
    height: auto;
    color: #666;
    padding: 10px 15px;
    border: 0;
    letter-spacing: 0;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.highlight-buttons ul ul li:hover>a {
    color: #734F0D;
    padding-left: 18px;
} */

/*mega menu styling*/
#primary-menu-container .container-fluid {
    position: relative;
}

body.stretched #header.full-header #primary-menu ul li.mega-menu .mega-menu-content {
    width: 100% !important;
    margin: 0;
}

#primary-menu ul li .mega-menu-content {
    display: none;
    position: absolute;
    background-color: #FFF;
    border: none;
    height: auto;
    z-index: 199;
    top: 0px;
    margin: 0;
    left: 0;
    max-height: 550px;
    width: 765px;
    overflow: hidden;
    box-shadow: 0px 12px 30px 0px rgba(0, 0, 0, 0.30);
}

.mega-menu-content>.row {
    margin-left: 0;
    margin-right: 0;
}

.mega-menu-content>.row>.megamenu-listcol {
    background-color: #fff;
    padding: 30px 0 10px;
    /*width: 28%;*/
    overflow-y: auto;
}

.mega-menu-content>.row>.megamenu-contentcol {
    /*width: 72%;*/
    padding: 0;
}

.mega-menu-content>.row>.megamenu-contentcol .contentheader {
    position: relative;
    height: 100%;
    background-color: #F5F5F5;
    padding: 30px;
}

.mega-menu-content>.row>.megamenu-contentcol .contentheader .imagecol {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.mega-menu-content>.row>.megamenu-contentcol .contentheader img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mega-menu-content>.row>.megamenu-contentcol .contentheader .imagecol::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.61) 0%, rgba(0, 0, 0, 0.00) 100%);
    z-index: 1;
}

.mega-menu-content>.row>.megamenu-contentcol .contentheader .hc {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 20px 0 20px 30px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    height: 100%;
}

.mega-menu-content>.row>.megamenu-contentcol .contentheader .hc>div {
    background-color: #e78238;
    border-radius: 10px;
    display: inline-block;
    color: white;
    font-size: 16px;
    padding: 5px 20px;
    margin-bottom: 20px;
}

.mega-menu-content>.row>.megamenu-contentcol .contentheader .hc>h3 {
    margin-bottom: 20px;
    color: #FFF;
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.mega-menu-content>.row>.megamenu-contentcol .contentheader .hc>p {
    color: black;
    font-size: 15px;
}

#primary-menu .mega-menu-content>.row>.megamenu-contentcol .contentheader .hc .button {
    padding: 15px 24px;
    color: white;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    height: auto;
}

.mega-menu-content>.row>.megamenu-listcol .sticky {
    position: sticky;
    top: 0;
    left: 0;
}

#primary-menu ul li>.mega-menu-content .magemenu-category-title {
    color: rgba(0, 0, 0, 0.5);
    font-weight: 600;
    padding: 10px 30px;
    cursor: default;
    margin-bottom: 10px;
    font-size: 16px;
}

#primary-menu ul li>.mega-menu-content .magemenu-category-title+.row {
    margin: 0;
    padding-bottom: 30px;
}

#primary-menu ul li>.mega-menu-content .magemenu-category-title+.row>.col-md-6 {
    padding: 0;
}

#primary-menu ul li>.mega-menu-content .megamenu-listcol ul {
    top: 0;
    width: 100%;
    box-shadow: none;
    padding: 0 30px;
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    overflow: hidden;
}

#primary-menu ul li>.mega-menu-content ul>li {
    border-radius: 0;
    max-width: 50%;
    flex: 0 0 48%;
}

#primary-menu ul li>.mega-menu-content ul>li>a {
    color: black;
    text-transform: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
    font-size: 14px;
}

#primary-menu ul li>.mega-menu-content ul>li>a span {
    display: block;
    transition: all .2s ease-in-out;
}

#primary-menu ul li>.mega-menu-content ul>li>a span img {
    filter: none;
    max-height: 10px;
    width: 100%;
}

#primary-menu ul li .mega-menu-content ul>li.current>a,
#primary-menu ul li .mega-menu-content ul>li:hover>a {
    color: #B68009;
    background-color: transparent;
}

.mega-menu-content>.row>.megamenu-listcol::-webkit-scrollbar {
    width: 6px;
}

.mega-menu-content>.row>.megamenu-listcol::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mega-menu-content>.row>.megamenu-listcol::-webkit-scrollbar-thumb {
    background: #B68009;
}

.mega-menu-content>.row>.megamenu-listcol::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.megamenu-copyright {
    border-top: 1px solid #CECECE;
    padding: 20px 30px;
}

.megamenu-copyright .socialmedia {
    margin: 0;
}

.megamenu-copyright .socialmedia .col {
    padding-right: 3px;
    padding-left: 3px;
    max-width: 30px;
}

#primary-menu .megamenu-copyright .socialmedia .col a:has(svg) {
    padding: 0;
}

.megamenu-copyright .socialmedia svg {
    fill: #D1D1D1;
    margin-bottom: 12px;
}

.megamenu-copyright .socialmedia+p {
    font-size: 10px;
    font-weight: 300;
    line-height: normal;
}

.specialtiesmegamenu .magemenu-category-title+.row ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.mega-menu-content>.row>.megamenu-listcol .row>.col-md-12 {
    padding: 0;
}

/*#primary-menu ul li.specialtiesmegamenu .mega-menu-content{display: block !important; opacity: 0; z-index: 0;}*/
#primary-menu .specialtiesmegamenu .magemenu-category-title+.row ul li {
    max-width: 25%;
    flex: 0 0 23.5%;
}

.contentstart {
    position: relative;
    z-index: 2;
    background: var(--bg);
}

.contentstart:has(.modal.show) {
    z-index: auto;
}

#primary-menu>div:has(ul) {
    position: relative;
    /* width: calc(100% + 100px); */
}

/* #primary-menu > div > ul{width: calc(100% - 100px);} */


/*	------------------------ Header END -------------------------- */

/*	------------------------ Footer -------------------------- */


.ctabox {
    position: relative;
    overflow: hidden;
    /* background image */
    background: url("../images/layout/bg-cta.webp") center bottom / cover no-repeat;
    min-height: 580px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    color: #fff;
    z-index: 0;
}



.ctabox .content {
    z-index: 2;
}

.ctabox .h2 {
    max-width: 1000px;
    justify-self: center;
}

.ctabox .content p{
    color: #fff;
}

#footer {
    color: #000;
    background-color: #110E19;
}

#copyright {
    color: #fff;
}

#footer h4 {
    color: var(--color-primary);
    text-transform: uppercase;
}

#merchantimg img {
    max-height: 23px;
}

.address p {
    font-size: 16px;
    color: #fff;
}

#footer .footer-widgets-wrap {
    padding: 60px 0;
    color: #fff;
}

#footer .footer-widgets-wrap>.row {
    justify-content: space-between;
    position: relative;
}

.standard-logo img{
    height: 45px;
}

/* Vertical divider between the brand column and the link columns (tablet/desktop).
   Absolutely positioned so it overlays the column gap instead of taking a grid slot
   (an in-flow element in a col-4 + col-8 row overflows 12 cols and wraps to its own line). */
@media (min-width: 768px) {
    #footer .vertical-line {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 33.333%;
        width: 1px;
        padding: 0;
        background: rgba(217, 217, 217, 0.20);
    }
}

@media (max-width: 767.98px) {
    #footer .vertical-line {
        display: none;
    }
}

/*#footer .socialmedia{margin-top: 18px;}*/
#footerSocialContacts .socialmedia {
    justify-content: flex-end;
}

#footerSocialContacts .socialmedia .col {
    padding-right: 3px;
    padding-left: 3px;
    max-width: 20%;
}

#footerSocialContacts .socialmedia .col:first-child {
    padding-left: calc(var(--bs-gutter-x) * .5);
}

#footerSocialContacts .socialmedia .col:last-child {
    padding-right: calc(var(--bs-gutter-x) * .5);
}

.socialmedia a {
    display: block;
}

.socialmedia a svg {
    width: 100%;
    max-width: 20px;
    height: auto;
    /*margin-right: 6px;*/
    /*margin-top: 6px;*/
    fill: #fff;
    -webkit-transition: fill .3s ease;
    -o-transition: fill .3s ease;
    transition: fill .3s ease;
    margin-bottom: 15px;
}

#footer .widget.contact svg {
    margin-right: 10px;
}

.contact-icons{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.contact-icons svg {
    /* margin-right: 10px; */
    height: 35px;
    width: auto;
}

.contact-icons svg path {
    fill: #fff;
}


.socialmedia a:hover svg {
    fill: #CC9739;
    -webkit-transition: fill .3s ease;
    -o-transition: fill .3s ease;
    transition: fill .3s ease;
}

#footer .widget_links a {
    color: inherit;
    -webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
}

#footer .widget_links a:hover {
    color: var(--color-primary);
    -webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
}

.company-profile {
    display: flex;
    gap: 10px;
    flex-direction: column;
    margin-top: 20px;
}

#subscription {
    background-color: #f5f5f5;
    padding-top: 23px;
    padding-bottom: 23px;
}

#subscription .row {
    align-items: center;
}

#subscription h4,
#subscription form {
    margin-bottom: 0;
}

#subscription form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
}

#subscription form input {
    width: calc(100% - 95px);
    max-width: 325px;
    border-radius: 8px 0 0 8px;
    height: 55px;
    padding-left: 25px;
    border-right: none;
}

#subscription form button {
    height: 55px;
}

#footerSocialContacts {
    margin-top: 60px;
    margin-bottom: 15px;
}

#footerCompContacts .col {
    flex: 0 0 21%;
    max-width: 21%;
    min-width: 195px;
}

#footerCompContacts .col.email {
    flex: 0 0 26%;
    max-width: 26%;
}

#footerCompContacts .flexbox {
    justify-content: center;
    margin-bottom: 15px;
}

#footerCompContacts .flexbox svg {
    height: 23px;
    width: 23px;
    margin-right: 10px;
    object-fit: contain;
}

#footerCompContacts a .text {
    width: calc(100% - 33px);
}

#footerCompContacts a .text .number {
    color: #000;
}

#footerCompContacts a:hover .text .number {
    color: #CC9739;
}

#footerCart svg {
    fill: #ac8c5e;
    max-width: 29px;
}

#copyrights {
    border-top: 1px solid rgba(217, 217, 217, 0.20);
    background-color: #110E19;
    color: #fff;
}

#copyrights .col-12 {
    padding: 20px 0;
}

#copyrights a:hover {
    color: var(--color-primary);
}

@media (max-width: 575.9px) {
    .company-profile {
        margin-top: 0;
    }
}

.vertical-line{
    border-right: 1px solid rgba(217, 217, 217, 0.20); 
    margin: 0 30px;
}

/*	------------------------ Footer END -------------------------- */


/*	------------------------ Home -------------------------- */

.contentstart.home-bg {
    background-image: url("../images/layout/home-bg.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #110E19;
}


#slider {
    position: relative;
    aspect-ratio: 2600 / 1100;
}



#slider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.8;
    background: linear-gradient(0deg, rgba(22, 16, 9, 0.00) 73.17%, #161009 96.91%);
    pointer-events: none;
    z-index: 3;
    /* above bg image, below swiper-pagination & caption */
}

/* Mobile: put the dark gradient INSIDE each slide — above the image but below
   the caption (.container-fluid is z-index:2) — so the caption text sits on top
   of the gradient instead of appearing tinted by a slider-level overlay. */
#sliderm .swiper-slide.dark::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.8;
    background: linear-gradient(0deg, rgba(22, 16, 9, 0.00) 73.17%, #161009 96.91%);
    pointer-events: none;
    z-index: 1;
}

#slider .swiper-pagination,
#sliderm .swiper-pagination {
    width: unset;
    bottom: 80px !important;
    text-align: center;
    left: unset;
    right: 80px;
}

#slider .swiper-pagination span,
#sliderm .swiper-pagination span {
    border: 2px solid var(--color-primary-dark);
    background-color: transparent;
}

#slider .swiper-pagination span.swiper-pagination-bullet-active,
#sliderm .swiper-pagination span.swiper-pagination-bullet-active {
    background-color: var(--color-primary);
}

#slider .swiper-slide-bg {
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
}

/* Gradient overlay on all banner slides */
#slider .swiper-slide.dark::before,
#sliderm .swiper-slide.dark::before {
    /* content: '';
    position: absolute;
    inset: 0;
    opacity: 0.6;
    background: linear-gradient(0, #000 0%, rgba(0, 0, 0, 0.00) 100%);
    z-index: 1;
    pointer-events: none; */
}

/* Ensure caption sits above the overlay */
#slider .swiper-slide .container-fluid,
#sliderm .swiper-slide .container-fluid {
    position: relative;
    z-index: 2;
}

.swiper-slide-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

#slider a:has(> .slider-caption),
#sliderm a:has(> .slider-caption) {
    display: block;
    width: 100%;
    height: 100%;
}

#slider a .slider-caption,
#sliderm a .slider-caption,
.slider-caption-container {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
}

.slider-caption h2 {
    text-align: unset;
}

.slider-caption p {
    font-size: var(--fs-f16);
    margin-bottom: 30px;
    max-width: unset;
}

/* Hero caption entrance — fadeInUp on the active slide, re-triggered per slide by Swiper JS */
#slider .slider-caption-container,
#sliderm .slider-caption-container {
    opacity: 0;
}

.slider-caption-container{
    z-index: 4;    
}

#slider .swiper-slide-active .slider-caption-container.slide-animate,
#sliderm .swiper-slide-active .slider-caption-container.slide-animate {
    animation: heroFadeInUp 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes heroFadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#slider~#content,
#sliderm~#content {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #f9f9f9;
}

#sliderm {
    position: relative;
    aspect-ratio: 1550 / 600;
}

#sliderm .swiper-slide-bg {
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
}

#sliderm .slider-caption {
    max-width: 100%;
    padding-top: 60px;
    position: relative;
    left: auto;
    top: auto;
}

#slider .swiper-navs {
    position: absolute;
    bottom: 30px;
    left: calc(50% + 56px + 12px);
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
}

.slider-brand-logo {
    position: absolute;
    top: 5%;
    right: 5%;
    z-index: 10;
    pointer-events: none;
}

.slider-brand-logo svg {
    max-width: 150px;
    width: 7vw;
    height: auto;
}

#slider .slider-arrow-left,
#slider .slider-arrow-right {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #000;
    font-weight: 400;

}

#slider .slider-arrow-left:hover,
#slider .slider-arrow-right:hover {
    background: var(--color-primary);
    color: #fff;
}

#slider .slider-arrow-left:hover svg path,
#slider .slider-arrow-right:hover svg path {
    stroke: #fff;
}

#slider .slider-arrow-left i,
#slider .slider-arrow-right i {
    font-size: 30px;
}


#sliderm .swiper-pagination span.swiper-pagination-bullet-active {
    background-color: var(--color-primary);
}

.owl-nav.disabled {
    display: none;
}

@media(max-width:575.9px) {


    .owl-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 20px;
    }

    .owl-dots .owl-dot,
    .blogs-hero-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #cecece;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .owl-dots .owl-dot:hover {
        background-color: var(--color-secondary);
    }

    .owl-dots .owl-dot.active {
        background-color: var(--color-primary);
    }
}

/* ── PRODUCT THUMBNAIL STRIP (below hero slider) ── */
.prod-strip {
    background: #110E19;
    padding: 0;
    overflow: hidden;
    padding: 25px 0;
}

.prod-strip__scroll-box {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.prod-strip__scroll-text {
    display: flex;
    position: relative;
    /* left is animated by JS */
}

.prod-strip__track {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.prod-strip__item {
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    padding: 0 15px;
    border-radius: 8px;
}

.prod-strip__item img {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    aspect-ratio: 1 / 1;
}

@media (max-width: 767.98px) {
    .prod-strip__item img {
        width: 72px;
        height: 72px;
    }
}

/* ============================================
   Homepage: Accent Colors
   ============================================ */
.text-yellow {
    color: var(--color-primary);
}

/* =======================================================
   .glass — Figma glass effect
   =======================================================
   Matches the Figma "Glass" effect panel:
     Light       -45° / 80%   → rim highlight (::after ring)
     Refraction   80          → SVG displacement (JS, footer.php)
     Depth        20          → refraction band width (JS)
     Dispersion   50          → RGB channel split (JS)
     Frost         4          → backdrop blur 4px
     Splay         0          → highlight tight on rim, no spread

   CHROME  → JS injects per-element SVG feDisplacementMap +
             backdrop-filter:url(#id). Adds class
             .glass--svg to the element when active.

   OTHERS  → CSS fallback: frost blur only (no refraction).
   ======================================================= */

/* ── Base: fill + frost (all browsers) ── */
.glass {
    position: relative;
    overflow: hidden;

    /* Fill */
    background: rgba(0, 0, 0, 0.2);

    /* Frost 4 — fallback; Chrome JS overrides with refraction + frost */
    backdrop-filter:
        blur(4px) saturate(1.2);
    -webkit-backdrop-filter:
        blur(4px) saturate(1.2);

    /* Depth shading inside the pane */
    box-shadow:
        inset 0 0 4px 1px rgba(0, 0, 0, 0.18),
        inset 0 0 14px 2px rgba(0, 0, 0, 0.22);
}

/* ── Light: -45° at 80% — 1px rim highlight.
      Gradient runs top-left → bottom-right (135deg = light at -45°):
      bright where the light hits, faint bounce on the far edge.
      Splay 0 → ring only, no inner glow. ── */
.glass::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.18) 20%,
        rgba(255, 255, 255, 0.04) 45%,
        rgba(255, 255, 255, 0.02) 60%,
        rgba(255, 255, 255, 0.16) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}



/* -------------------------------------------------------
   Modifier: brighter white inside border
   (.glass + .glass-border) — same shadow stack, higher α
   ------------------------------------------------------- */
.glass-border {
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.32),
        inset -1px -1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.18),
        inset 0 0 8px 1px rgba(100, 140, 255, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.30),
        0 8px 20px rgba(0, 0, 0, 0.35),
        0 20px 40px rgba(0, 0, 0, 0.30);
}


/* -------------------------------------------------------
   Modifier: gold gradient inside border
   (.glass + .glass-border-gold)
   Uses ::before mask — works alongside .glass's ::after
   ------------------------------------------------------- */
.glass-border-gold {
    position: relative;
    border: 1px solid transparent;
    background-clip: padding-box;
}

.glass-border-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(231, 181, 0, 0.50) 0%, rgba(231, 181, 0, 0.20) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Hero slider: desktop slider is d-lg-block (>=992) and the mobile slider is
   d-md-none (<768), which left a blank hero on tablet. Show the desktop hero
   across the 768-991 gap so every width has a banner. */
@media (min-width: 768px) and (max-width: 991.98px) {
    #slider.slider-element {
        display: block !important;
    }
}

/* ── JUST LAUNCHED ── */


.hp-launched .hp-section-header h2 {
    color: #fff;
    font-size: var(--fs-h2);
    font-weight: 800;
    margin-bottom: 20px;
}

.hp-launched .hp-section-header p {
    margin-bottom: 60px;
    max-width: 1100px;
    margin-inline: auto;
}

/* ── Product card ── */
.hp-prod-card {
    position: relative;
    /* stacking context for ::before gradient border */
    background: #110E19;
    border-radius: 16px;
    /* no overflow:hidden here — it would clip the ::before gradient border */
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 240ms ease;
    /* whole card is a link — reset anchor styling */
    text-decoration: none;
    color: inherit;
}

.hp-prod-card:hover,
.hp-prod-card:focus {
    text-decoration: none;
    color: inherit;
}

/*
 * Gradient border technique:
 * A 1px padding ::before layer carries the gradient; the CSS mask cuts out
 * the content area so only the 1px ring is visible. Works with border-radius.
 * Colors: var(--color-primary-dark) = #E7B500
 */
.hp-prod-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(180deg,
            rgba(231, 181, 0, 0.50) 0%,
            rgba(231, 181, 0, 0.20) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 240ms ease;
    z-index: 0;
}


/* Image area — clips to its own box so the card's ::before border stays visible */
.hp-prod-card__img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* round only the top corners to follow the card shape */
    border-radius: 12px 12px 0 0;
    max-height: 300px;
}

.hp-prod-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 380ms ease;
    padding: 1px 1px 0 1px;
    border-radius: 16px 16px 0 0;
    max-height: 300px;
}


/* Card body */
.hp-prod-card__body {
    position: relative;
    z-index: 1;
    padding: 35px 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hp-prod-card__name {
    font-size: var(--fs-f20);
    font-weight: 700;
    color: #fff;
    line-height: var(--lh-title);
    margin-bottom: 12px;
}

.hp-prod-card__desc {
    font-size: var(--fs-p14);
    flex: 1;
    margin-bottom: 60px;
}

/* push the button to the bottom so it aligns across cards regardless of body length */
.hp-prod-card__btn {
    margin-top: auto;
}

/* Tighten the over-large desktop spacing on small screens */
@media (max-width: 767.98px) {
    .hp-launched .hp-section-header p {
        margin-bottom: 40px;
    }

    .hp-prod-card__body {
        padding: 28px 24px;
    }

    .hp-prod-card__desc {
        margin-bottom: 32px;
    }
}


/* ── SEE IT IN ACTION ── */
.hp-see-action {
    position: relative;
    overflow: visible;
}

/* Wave decorations — positioned freely via .hp-wave-1 / .hp-wave-2 in markup */
.hp-wave {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
}

/* Adjust these per-project as needed */
.hp-wave-1 {
    z-index: -1;
    left: 0;
    top: 33%;
}

.hp-wave-2 {
    z-index: -2;
    top: 45%;
    right: 0;
}

.hp-wave-3 {
    z-index: -1;
    left: 0;
    top: 60%;
    width: 100%;
}

.hp-wave-4 {
    z-index: -1;
    left: 0;
    top: 65%;
    width: 100%;
}


.hp-wave-5{
    z-index: -1;
    left: 0;
    bottom: 1%;
}

.hp-wave-6 {
    z-index: -1;
    right: 0;
    bottom: -4%;
}

.hp-wave-7 {
    z-index: -1;
    right: 0;
    top: 4%;
}

.hp-wave-8 {
    right: -38%;
    z-index: -1;
    top: 24%;
}

.hp-wave-9 {
    left: -13%;
    bottom: -55%;
}

.hp-wave-10 {
    right: -27%;
    z-index: -1;
    bottom: -12%;
}

.hp-wave-11 {
    right: -3%;
    z-index: -1;
    top: 33%
}

.hp-wave-12 {
    left: -2%;
    bottom: -13%;
}

.hp-wave-13 {
    right: -3%;
    z-index: -1;
    bottom: -35%;
}

.hp-wave img {
    display: block;
    width: 100%;
    height: auto;
}

.hp-glow {
    position: absolute;
    z-index: -10;
    pointer-events: none;
    filter: blur(150px);
    opacity: var(--go, 0.4);
    transform: rotate(var(--grotate, 0deg));
    transform-origin: center;

    width: var(--gw, 309px);
    height: var(--gh, 211px);
    border-radius: var(--gr, 319px);

    top: var(--gt, auto);
    bottom: var(--gb, auto);
    left: var(--gl, auto);
    right: var(--grt, auto);
}

/* Colour variants */
.hp-glow--purple {
    background: #8124E0;
}

/* #8124E033 */
.hp-glow--yellow {
    background: #E7B500;
}

/* #E7B500 @ 30% */
.hp-glow--blue {
    background: #0069C4;
}

/* #0069C4 @ 20% */

@media (max-width: 575.98px) {
    .hp-glow {
        display: none !important;
    }
    
    .home-content,
    .aboutus-content,
    .product-content,
    .service-content,
    .service-detail-content,
    .gallery-content,
    .blogs-content,
    .faq-content {
        background-color: #110E19;
        background-image: url('../images/layout/home-bg.webp');
        background-repeat: repeat-y;
        background-position: center top;
        background-size: 100% auto;
    }
}


.hp-see-action>.container-fluid {
    position: relative;
    z-index: 1;
}

/* Section header (left col) */
.hp-see-action__hd {
    margin-bottom: 60px;
}

.hp-see-action__hd h2 {
    color: #fff;
}

.hp-see-action__hd .btn-primary-outlined {
    margin-top: 60px;
}

/* Fill, frost, rim light and refraction come from .glass —
   markup is <div class="hp-ac glass">. */
.hp-ac {
    position: relative;
    border-radius: 16px;
    padding: 65px 80px 35px 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(0, 102, 204, 0.20) 0%, rgba(17, 14, 25, 0.00) 100%);
    isolation: isolate; /* keeps the ::before hover wash inside the card */
    transition: transform 240ms ease;
    box-shadow: inset 0 0 4px 1px rgba(255, 255, 255, 0.18),
        inset 0 0 14px 2px rgba(0, 0, 0, 0.22);
}

/* Hover — blue wash fades in over the glass (Figma hover state) */
/* .hp-ac::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
    z-index: -1;
} */

.hp-ac:hover {
    background: linear-gradient(180deg, #06C 0%, rgba(17, 14, 25, 0.00) 100%);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    /* glass off — JS sets the SVG refraction inline, hence !important */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* glass rim light fades out on hover */
.hp-ac.glass::after {
    transition: opacity 240ms ease;
}

.hp-ac:hover::after {
    opacity: 0;
}

/* Default card — normal state (left col) */
.hp-ac--default {
    margin-top: 32px;
}

/* Card top row: title + play btn */
.hp-ac__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-right: 50px;
}

.hp-ac__title {
    font-size: var(--fs-f20);
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: var(--lh-title);
    flex: 1;
}

/* SVG play button */
.hp-ac__play {
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: opacity 180ms ease, transform 180ms ease;
    position: absolute;
    top: 30px;
    right: 30px;
}

.hp-ac__play:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* The SVG has opacity 0.5 on the <g> — hover lifts it */
.hp-ac__play:hover svg g {
    opacity: 1;
}

/* Description */
.hp-ac__desc {
    font-size: var(--fs-p14);
    margin: 0;
}

.hp-ac--active .hp-ac__desc {
    color: #FFFFFF;
}

/* Image / video preview */
.hp-ac__img {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
    min-height: 480px;
}

/* Absolutely fill the box so a portrait video can't inflate the card to its
   intrinsic height — it just covers whatever height the card has. */
.hp-ac__img img,
.hp-ac__img video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Video lightbox (pops out from card) ── */
.hp-video-lb {
    position: fixed;
    z-index: 99999;
    background: #000;
    border-radius: 16px;
    display: none;
    /* shown by JS */
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hp-video-lb__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF26;
    border: 1px solid #FFFFFF4D;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: background 180ms ease, opacity 200ms ease;
}

/* show close btn only when fully expanded */
.hp-video-lb.is-expanded .hp-video-lb__close {
    opacity: 1;
    pointer-events: all;
}

.hp-video-lb__close:hover {
    background: #FFFFFF40;
}

.hp-video-lb__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
}

.hp-video-lb__frame {
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.hp-video-lb__frame iframe,
.hp-video-lb__frame video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.hp-video-lb__frame video {
    object-fit: contain;
    background: #000;
}

/* Prevent body scroll while lightbox open */
.hp-no-scroll {
    overflow: hidden;
}

/* ── WE MAKE EVERY PROJECT BETTER ── */
.hp-features {
    position: relative;
    overflow: visible;
}

.hp-features>.container-fluid {
    position: relative;
    z-index: 1;
}

.hp-features__hd {
    margin-bottom: 60px;
}

.hp-features__hd h2 {
    margin-bottom: 10px;
}

.hp-features__hd .hp-subtitle {
    max-width: 1100px;
    margin: 0 auto;
}

/* Row of 5 (wraps responsively) */
.hp-features__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
    justify-content: center;
}


.hp-features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: unset;
}

/* Icon card — gradient border via ::before mask, dark glass fill */
.hp-features__card {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.20);
    background-clip: padding-box;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: transform 240ms ease, opacity 240ms ease;
}

/* Gradient border ring */
.hp-features__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(180deg, #FFC800 0%, #D5BBF2 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* gradient border replaces the glass white rim (markup adds .glass) */
.hp-features__card.glass::after {
    content: none;
}

/* SVG icon sizing inside the feature card */
.hp-features__card svg {
    width: 52px;
    height: auto;
    display: block;
}

.hp-features__label {
    color: #fff;
    font-size: var(--fs-p14);
    font-weight: 500;
    line-height: var(--lh-normal);
    margin: 0;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .hp-features__grid {
        gap: 50px;
    }

    .hp-features__grid--five {
        gap: 25px;
    }
}

@media (max-width: 991.98px) {
    .hp-features__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 30px;
    }
    
    .hp-ac{
        padding: 30px;
    }
    
    .hp-ac__desc{
        padding-right: 30px;
    }
}

@media (max-width: 767.98px) {
    .hp-see-action__hd {
        margin-bottom: 20px;
    }
    
    .hp-ac__desc{
        padding-right: 0px;
    }

    .hp-ac {
        padding: 40px;
    }

    .hp-see-action__hd .btn-primary-outlined{
        margin-top: 0;
    }

    .hp-ac__img{
        min-height: 250px;
    }

    .hp-features__card{
        height: 90px;
        width: 90px;
    }

    .hp-features__card svg{
        width: 45px;
    }
}

@media (max-width: 575.98px) {
    .hp-features__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        justify-content: center;
    }

    .hp-features__grid:not(.hp-features__grid--five) > *:last-child:nth-child(odd) {
            grid-column: 1 / -1;
            justify-self: center;
            /*width: calc((100% - 25px) / 2);*/
        }

    /* Home page variant: 5 items as row 1 = 2 icons, row 2 = 3 icons */
    .hp-features__grid--five {
        grid-template-columns: repeat(6, 1fr);
    }

    .hp-features__grid--five .hp-features__item:nth-child(1),
    .hp-features__grid--five .hp-features__item:nth-child(2) {
        grid-column: span 3;
    }

    .hp-features__grid--five .hp-features__item:nth-child(3),
    .hp-features__grid--five .hp-features__item:nth-child(4),
    .hp-features__grid--five .hp-features__item:nth-child(5) {
        grid-column: span 2;
    }

    .hp-features__hd {
        margin-bottom: 36px;
    }

    

    .hp-ac {
        padding: 30px;
    }

    .hp-ac__img img{
        min-height: 200px;
    }
    
    .hp-ac__play{
        top: 20px;
        right: 30px;
    }
    
    .hp-ac__play svg{
        width: 45px;
        height: 45px;
    }
    
    .hp-ac__desc{
        text-align: justify;
    }
}



/* ============================================
   Homepage: Section 5 - Behind The Technology
   ============================================ */
.hp-tech {
    position: relative;
    overflow: hidden;
}

.hp-tech .container-fluid {
    position: relative;
    z-index: 1;
}

.hp-tech__hd {
    margin-bottom: 40px;
}

/* Shared card base — background handled by .glass when combined */
.hp-tech__card {
    position: relative;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.20);
    /* fallback if .glass not present */
    background-clip: padding-box;
    border: 1px solid transparent;
    overflow: hidden;
}

/* When .glass is applied, let .glass own the background.
   Frost is 1px less here (3px) — Chrome path reads data-glass-frost="3",
   this rule covers the non-Chrome fallback. */
.hp-tech__card.glass {
    background: rgba(0, 0, 0, 0.2);
    background-clip: border-box;
    backdrop-filter: blur(3px) saturate(1.2);
    -webkit-backdrop-filter: blur(3px) saturate(1.2);
}


.hp-tech__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(231, 181, 0, 0.50) 0%, rgba(231, 181, 0, 0.20) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* ---- Top row: 2 wide landscape cards ---- */
.hp-tech__row--top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.hp-tech__wide-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 30px 30px 30px 45px;
    height: 100%;
    position: relative;
    z-index: 1;
}

.hp-tech__card--wide .hp-tech__text {
    flex: 1;
    min-width: 0;
}

.hp-tech__card--wide .hp-tech__img {
    flex-shrink: 0;
    width: 220px;
    text-align: center;
}

.hp-tech__card--wide .hp-tech__img img {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    display: block;
}

/* ---- Bottom row: 3 tall portrait cards ---- */
.hp-tech__row--bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.hp-tech__card--tall {
    display: flex;
    flex-direction: column;
    padding: 55px 80px 70px 80px;

}

.hp-tech__img--tall {
    overflow: hidden;
    position: relative;
    z-index: 1;
    width: auto;
    min-height: 250px;
    max-height:250px;
    flex-shrink: 0;
    padding: 0;
    margin-bottom: 30px;
}

.hp-tech__img--tall img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.hp-tech__text--tall {
    position: relative;
    z-index: 1;
}

.hp-tech__text.hp-tech__text--tall{
    text-align: center;    
}

/* Shared text styles */
.hp-tech__title {
    color: #fff;
    margin-bottom: 20px;
}

.hp-tech__desc {
    margin: 0;
}

/* Responsive */
@media (max-width: 991.98px) {
    .hp-tech__row--top {
        grid-template-columns: 1fr;
    }

    .hp-tech__card--tall{
        padding: 30px;
    }
}



@media (max-width: 575.98px) {
    .hp-tech__row--bottom {
        grid-template-columns: 1fr;
    }

    .hp-tech__wide-inner,
    .hp-tech__card--tall{
        padding: 30px;
    }

    .hp-tech__card--wide .hp-tech__img{
        height: unset;
    }

    .hp-tech__wide-inner{
        flex-direction: column-reverse;
    }

    .hp-tech__img--tall {
        height: 200px;
        max-height: 200px;
    }
    
    /* Behind The Technology — mobile swiper */
	.hp-tech__mobile .swiper-slide {
	    height: auto;
	}
	
	.hp-tech__mobile .hp-tech__card {
	    height: 100%;
	}
	
	.hp-tech__pagination {
	    position: static;
	    text-align: center;
	    margin-top: 24px;
	}
	
	.hp-tech__pagination .swiper-pagination-bullet {
	    width: 10px;
	    height: 10px;
	    background: rgba(255, 255, 255, 0.35);
	    opacity: 1;
	}
	
	.hp-tech__pagination .swiper-pagination-bullet-active {
	    background: #f5c200;
	}
}


/* ============================================
   Homepage: Section — Who We Built For (video bg)
   ============================================ */
.hp-who-for {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-who-for__video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hp-who-for__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hp-who-for__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.hp-who-for__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 80px 20px;
}

.hp-who-for__title {
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 32px;
    line-height: 1.3;
}

.hp-who-for__accent {
    color: #f5c200;
}

.hp-who-for__btn {
    display: inline-block;
    background: #f5c200;
    color: #000;
    font-weight: 700;
    font-size: 1rem;
    padding: 13px 40px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    letter-spacing: 0.02em;
}

.hp-who-for__btn:hover,
.hp-who-for__btn:focus {
    background: #d4a800;
    color: #111;
    text-decoration: none;
}

@media (max-width: 767px) {
    .hp-who-for {
        min-height: 320px;
    }

    .hp-who-for__title {
        font-size: 1.5rem;
    }

    .hp-who-for__content {
        padding: 60px 16px;
    }
}

@media (max-width: 480px) {
    .hp-who-for__title {
        font-size: 1.25rem;
    }
}

/* ============================================
   Homepage: Section — Reels Showcase
   ============================================ */
.hp-reels {
    position:   relative;
    background: #183C7F;
    overflow:   hidden;
}

/* ── Top glow ──────────────────────────── */
.hp-reels::before {
    content:       '';
    position:      absolute;
    top:           -120px;
    left:          50%;
    transform:     translateX(-50%);
    width:         100%;
    height:        300px;
    border-radius: 1647px;
    background:    rgba(124, 185, 238, 0.35);
    filter:        blur(150px);
    pointer-events: none;
    z-index:       0;
}

.hp-reels__hd {
    position: relative;
    z-index:  1;
}

.hp-reels__title {
    margin-bottom: 20px;
}

.hp-reels__accent {
    color: #f5c200;
}

.hp-reels__desc {
    margin-bottom: 60px;
}

/* ── Swiper container ──────────────────── */
.hp-reels__slider {
    position:       relative;
    z-index:        1;
    width:          100%;
    overflow: visible !important;
    /*padding-bottom: 75px !important;*/
}

/* ── Each reel card ────────────────────── */
.hp-reels .swiper-slide.hp-reel-card {
    width: auto     ;
    height:     480px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow:   hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    transform:  scale(0.9);
    background: #000;
}

/*.swiper-slide.hp-reel-card.swiper-slide-prev,*/
/*.swiper-slide.hp-reel-card.swiper-slide-next{*/
/*     transform:  scale(0.9);*/
/*}*/


.hp-reels .swiper-slide-active.hp-reel-card {
    transform:  scale(1.04);
}

.hp-reel-card__inner {
    position: relative;
    width:    100%;
    height:   100%;
}

.hp-reel-card__link {
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
}

.hp-reel-card__video {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    display:  block;
    /*object-fit: fill;*/
    aspect-ratio: 9 / 16;
    background: #000;
}

.hp-reel-card .instagram-media,
.hp-reel-card__iframe {
    display: none !important;
}

.hp-swiper-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    /* hidden until the slider is hovered */
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease, background 180ms ease, color 180ms ease;
}

.hp-swiper-nav--prev { left: 20px; }
.hp-swiper-nav--next { right: 20px; }

.hp-swiper-nav:hover {
    background: var(--color-primary);
    color: #000;
}

/* Swiper flags the end button as disabled when loop is off — keep it hidden */
.hp-swiper-nav.swiper-button-disabled {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

/* reveal while hovering the slider */
.hp-reels__slider:hover .hp-swiper-nav,
.hp-testimonials-slider:hover .hp-swiper-nav {
    opacity: 1;
    visibility: visible;
}


/* ── Pagination dots ─────────────────── */
.hp-reels .swiper-pagination-bullet {
    width:      10px;
    height:     10px;
    background: rgba(255, 255, 255, 0.35);
    opacity:    1;
}

.hp-reels .swiper-pagination-bullet-active {
    background: #f5c200;
}

/* ── Responsive ──────────────────────── */
@media (max-width: 767px) {


    .hp-reels .swiper-slide.hp-reel-card {
        width:  140px;
        height: 248px;
    }
}


@media(max-width: 575.98px){
    .hp-reels__slider,
    .hp-tech__mobile .swiper-slide{
        padding-bottom: 45px !important;
    }
}


/* ============================================
   Homepage: Section - Explore Our Services
   ============================================ */
.hp-services {
    position: relative;
    overflow: hidden;
}

.hp-services .container-fluid {
    position: relative;
    z-index: 1;
}


.hp-services-header h2 {
    margin-bottom: 10px;
}


.hp-services-header p {
    margin-bottom: 60px;
}

.hp-services-list {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.hp-services-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 60px;
}

.hp-services-item-reverse .hp-services-image {
    order: 2;
}

.hp-services-item-reverse .hp-services-content {
    order: 1;
}

.hp-services-image {
    max-height: 300px;
    width: 100%;
    aspect-ratio:  4 / 3;
    overflow: hidden;
    border-radius: 16px;
    background: #101c38;
}

.hp-services-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hp-services-content {
    max-width: 620px;
}

.hp-services-title {
    margin-bottom: 20px;
}

.hp-services-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 60px;
}

.hp-services-btn {
    min-width: 200px;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    background: rgba(17, 14, 25, 0.72);
}

.hp-services-btn:hover,
.hp-services-btn:focus {
    color: #000;
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.hp-services-wave {
    left: 0;
    bottom: -30px;
    width: min(760px, 62vw);
}

@media (max-width: 991.98px) {
    .hp-services-header {
        margin-bottom: 30px;
    }

    .hp-services-list {
        gap: 60px;
    }

    .hp-services-item {
        gap: 36px;
    }
}

@media (max-width: 767.98px) {
    .hp-services-item {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hp-services-item-reverse .hp-services-image,
    .hp-services-item-reverse .hp-services-content {
        order: initial;
    }

    .hp-services-content {
        max-width: none;
    }

    .hp-services-desc {
        margin-bottom: 28px;
    }

    .hp-services-btn {
        min-width: 160px;
    }

    .hp-services-wave {
        width: 130vw;
        bottom: -10px;
    }
}

@media (max-width: 575.98px){
    .hp-services-title{
        margin-bottom: 10px;
    }
}

/* ============================================
   Homepage: Section - About 3CM
   ============================================ */
.hp-about {
    position: relative;
    min-height: clamp(620px, 54.17vw, 780px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: url("../images/layout/hp-about-bg.webp");
    background-repeat: no-repeat;
    background-size: cover;
}



.hp-about-title {
    margin-bottom: 20px;
}

.hp-about-desc {
    margin-bottom: 30px;
}

.hp-about-stats {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
}

.hp-about-stat {
    align-items: center;
    gap: 20px;
    width: 100%;
}

.hp-about-number {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.hp-about-number > span {
    line-height: 1;
}

.hp-about-plus {
    color: var(--color-primary);
    font-size: 100%;
    font-weight: 700;
    line-height: 1;
}


.hp-about-stat p {
    margin: 0;
}

.hp-about-btn {
    min-width: 175px;
}

@media (max-width: 991.98px) {
}

@media (max-width: 767.98px) {
    .hp-about {
        min-height: 0;
        padding: 60px 0;
        background-position: 67% center;
    }

    .hp-about:before {
        background: rgba(3, 2, 2, 0.84);
    }

    .hp-about-content {
        width: 100%;
        max-width: 520px;
    }

    .hp-about-number{
        font-size: 28px;
    }
}

@media (max-width: 575.98px) {
    .hp-about {
        padding: 45px 0;
        background-image: url(../images/layout/about-bg-mb.webp);
        min-height: 750px;
        align-items: flex-start;
    }


    .hp-about-btn {
        min-width: 150px;
    }

    .hp-about-number{
        font-size: 22px;
        justify-content: flex-end;
    }
    
    .hp-about-stat{
        gap: 10px;
        
    }
}

/* ============================================
   Homepage: Section 6 - Testimonials
   ============================================ */
.hp-testimonials {
    position: relative;
    overflow: hidden;
}

.hp-testimonials .container-fluid {
    position: relative;
    z-index: 2;
    overflow: hidden;
}


.hp-testimonials-header h2 {
    margin-bottom: 20px;
}

.hp-testimonials-header p {
    margin-bottom: 60px;
    max-width: 1100px;
    margin-inline: auto;
}

.hp-testimonials-slider {
    overflow: visible;
    padding: 0 0 60px;
}

.hp-testimonials-slide {
    height: auto;
}

.hp-testimonials-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 350px;
    padding: 40px;
    border: 0.5px solid #06C;
    border-radius: 16px;
    background: rgba(17, 14, 25, 0.40);
    display: flex;
    flex-direction: column;
    
}

.hp-testimonials-quote {
    position: absolute;
    top: 40px;
    right: 38px;
}

.hp-testimonials-quote svg {
    width: 48px;
    height: auto;
}

.hp-testimonials-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 70px;
    margin-bottom: 25px;
}

.hp-testimonials-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    overflow: hidden;
    border-radius: 50%;
    padding: 0;
    background: #fff;
}

.hp-testimonials-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 50%;
}

.hp-testimonials-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
}

.hp-testimonials-stars svg {
    width: 13px;
    height: 13px;
}

.hp-testimonials-name {
    margin: 0;
}

.hp-testimonials-text {
    margin: 0;
}

.hp-testimonials-pagination {
    position: absolute;
    bottom: 0 !important;
    left: 0 !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.hp-testimonials-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 !important;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    background: transparent;
    opacity: 1;
}

.hp-testimonials-pagination .swiper-pagination-bullet-active {
    background: var(--color-primary);
}

.hp-testimonials-wave {
    z-index: -1;
    left: -9%;
    top: 5%;
    width: 118%;
    pointer-events: none;
    transform-origin: center;
}

.hp-testimonials-wave img {
    width: 100%;
    display: block;
}

@media (max-width: 991.98px) {
    .hp-testimonials {
        min-height: 620px;
        padding-top: 80px;
    }

    .hp-testimonials-card {
        padding: 32px;
    }
}

@media (max-width: 767.98px) {
    .hp-testimonials {
        min-height: 0;
        padding: 60px 0 50px;
    }

    .hp-testimonials-header {
        margin-bottom: 40px;
    }

    .hp-testimonials-header h2 br {
        display: none;
    }

    .hp-testimonials-card {
        min-height: 300px;
    }

    .hp-testimonials-wave {
        left: -55%;
        bottom: 55px;
        width: 220%;
    }
}

@media (max-width: 575.98px) {
    .hp-testimonials-card {
        min-height: 330px;
        padding: 28px 24px;
        margin-bottom: 45px;
    }

    .hp-testimonials-quote {
        top: 28px;
        right: 24px;
    }

    .hp-testimonials-quote svg {
        width: 40px;
    }

    .hp-testimonials-user{
        padding-right: 35px;
    }
    
    .hp-reels__desc,
    .hp-services-header p,
    .hp-testimonials-header p{
        margin-bottom: 30px;
    }
    
    .hp-reels__title,
    .hp-about-title,
    .hp-section-header h2,
    .hp-launched .hp-section-header h2 {
        margin-bottom: 10px;
    }
}

/* ============================================
   Homepage: Section 7 - CTA Elevate
   ============================================ */
.cta-elevate {
    position: relative;
    background-image: url('../images/layout/cta-elevate-bg.webp');
    background-size: cover;
    background-position: center;
    color: #fff;
}

.cta-elevate-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.cta-elevate .container-fluid {
    position: relative;
    z-index: 1;
}

.cta-elevate-content {
    max-width: 600px;
    margin: 0 auto;
}

.cta-elevate-title {
    color: #fff;
    font-weight: 700;
    margin-bottom: 30px;
}

@media (max-width: 575.98px) {
    .cta-elevate {
        padding: 60px 0;
    }
}


.cta-what-makes-different {
    background: #F5F5F5;
    color: #000;
    min-height: unset;
}

.cta-what-makes-different .wmud-title,
.cta-what-makes-different .wmud-desc {
    color: #000;
}

.cta-what-makes-different .wmud-title {
    font-weight: 800;
}

.cta-what-makes-different .wmud-desc {
    margin-bottom: 50px;
}

.cta-what-makes-different .wmud-point-icon img {
    filter: brightness(0) saturate(100%) invert(33%) sepia(28%) saturate(910%) hue-rotate(52deg) brightness(92%) contrast(90%);
}


.cta-what-makes-different .wmud-point-title {
    font-weight: 400;
    color: #000;
    font-size: var(--fs-t14);
}

.cta-what-makes-different .wmud-points {
    gap: unset;
    margin-bottom: 0;
}

.cta-what-makes-different .wmud-points>.col {
    position: relative;
}

.cta-what-makes-different .wmud-points>.col::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 0;
    width: 1px;
    height: calc(100% - 30px);
    background: #E4E4E4;
}

.cta-what-makes-different .wmud-points>.col:last-child::after {
    display: none;
}

.cta-what-makes-different .wmud-point {
    max-width: unset;
    padding: 15px 30px;

}

.cta-what-makes-different .wmud-point:last-child {
    border: 0;
}

@media (max-width: 991px) {
    .cta-what-makes-different .wmud-point {
        padding: 15px 20px;
    }

    .cta-what-makes-different .wmud-points>.col:nth-child(3)::after {
        display: none;
    }
}

@media (max-width: 575px) {
    .cta-what-makes-different .wmud-points>.col::after {
        display: none;

    }

    .cta-what-makes-different .wmud-point {
        padding: 15px 10px;
    }
}


/*	------------------------ Home END -------------------------- */


/* ============================================
   Product Page: Top Hero
   ============================================ */

.product-content{
    position: relative;
    overflow: hidden;
}

.product-hero {
    position: relative;
    overflow: hidden;
}



.product-hero-header h1 {
    margin-bottom: 20px;
}

.product-hero-header p {
    margin-bottom: 60px;

}

.product-hero-slider-wrap {
    position: relative;
    margin: 0 auto;
}

.product-hero-slider {
    overflow: hidden;
    border-radius: 16px;
}

.product-hero-card {
    position: relative;
    overflow: hidden;
    min-height: 380px;
   border-radius: 16px;
    border: 1px solid #06C;
    background: #110E19;
}

/* product image confined to the right side of the card (content sits on the left) */
.product-hero-image,
.product-hero-shade {
    position: absolute;
    top: 0;
    right: 0;
    width: 52%;
    height: 100%;
}

.product-hero-shade{
    right: 5px;
}

.product-hero-image {
    display: block;
    object-fit: cover;
    object-position: center;
}

/* fade the image's left edge into the dark card */
.product-hero-shade {
    background: linear-gradient(90deg,
        #110E19 0%,
        rgba(17, 14, 25, 0.75) 16%,
        rgba(17, 14, 25, 0) 46%);
}

.product-hero-content {
    position: relative;
    z-index: 1;
    width: 48%;
    min-height: 380px;
    padding: 68px 0 58px 65px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.product-hero-content h2 {
    margin-bottom: 10px;
    color: #fff;
    font-size: var(--fs-f30);
}

.product-hero-price {
    margin-bottom: 10px;
}

.product-hero-desc {
    margin-bottom: 30px;
}

.product-hero-content .btn-primary-outlined {
    min-width: 180px;
}

.product-hero-prev,
.product-hero-next {
    position: absolute;
    z-index: 4;
    top: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 160ms ease, background 160ms ease;
}

.product-hero-prev {
    left: -72px;
}

.product-hero-next {
    right: -72px;
}

.product-hero-prev:hover,
.product-hero-next:hover {
    background: var(--color-primary);
    color: #000;
}

.product-hero-prev i,
.product-hero-next i {
    font-size: 22px;
    line-height: 1;
}

@media (max-width: 1199.98px) {
    .product-hero-slider-wrap {
        max-width: calc(100% - 100px);
    }

    .product-hero-prev {
        left: -58px;
    }

    .product-hero-next {
        right: -58px;
    }
}

@media (max-width: 767.98px) {

    .product-hero-header {
        margin-bottom: 30px;
    }

    .product-hero-card {
        min-height: 460px;
    }

    /* image sits in the bottom half of the card */
    .product-hero-image {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 50%;
        object-position: center;
    }

    /* black gradient over the top of the image so the photo shows in the lower half */
    .product-hero-shade {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg,
            #110E19 0%,
            rgba(17, 14, 25, 0.85) 5%,
            rgba(17, 14, 25, 0) 100%);
    }

    .product-hero-content {
        width: 100%;
        min-height: 0;
        justify-content: flex-start;
        padding: 36px 28px 20px;
    }

    .product-hero-prev,
    .product-hero-next {
        width: 38px;
        height: 38px;
    }

    .product-hero-prev {
        left: -20px;
    }

    .product-hero-next {
        right: -20px;
    }
}

@media (max-width: 575.98px) {
    
    .product-hero-slider-wrap{
        max-width: 100%;
        
    }

    .product-hero-card {
        min-height: 580px;
        margin-bottom: 45px;
    }

    .product-hero-content {
        width: 100%;
        padding: 30px;
    }

    .product-hero-content .btn {
        min-width: 150px;
    }

    .product-hero-header p{
        margin-bottom: 30px;
    }
}


/* ============================================
   Product Page: Product Listing
   ============================================ */
.product-listing {
    position: relative;
    overflow: hidden;
}

.product-listing .container-fluid {
    position: relative;
    z-index: 2;
}

.product-listing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 55px;
}

.product-listing-header h2 {
    margin: 0;
    color: #fff;
}

.product-listing-sort {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.product-listing-sort label {
    margin: 0;
    font-size: var(--fs-f16);
}

.product-listing-sort .form-select {
    width: auto;
    min-width: 145px;
    padding: 5px 35px 5px 10px;
    font-size: var(--fs-f16);
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #06C;
    background-color: #1E1A2B;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 11px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--text);
}

.product-listing-sort .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: none;
}

.product-listing-sort .form-select option {
    color: #fff;
    background: #111a31;
}

.product-listing-grid {
    row-gap: 80px;
}

.product-listing-hidden {
    display: none;
}

.product-listing-item {
    display: flex;
}

.product-listing-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* whole card is a link — reset anchor styling */
    text-decoration: none;
    color: inherit;
}

.product-listing-card:hover,
.product-listing-card:focus {
    text-decoration: none;
    color: inherit;
}

.product-listing-image {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: transparent;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow:
       inset 10px 0 14px -12px rgba(0, 0, 0, 0.75),
        inset 0 10px 14px -12px rgba(0, 0, 0, 0.75),
        inset -8px 0 8px -12px rgba(255, 255, 255, 0.55),
        inset 0 -8px 8px -12px rgba(255, 255, 255, 0.55),
        0 6px 14px rgba(0, 0, 0, 0.15);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.product-listing-image.glass::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 1px solid transparent;
    border-radius: inherit;
    pointer-events: none;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.8) 1%,
        rgba(255, 255, 255, 0.6) 10%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.6) 90%,
        rgba(255, 255, 255, 0.8) 99%,
        rgba(255, 255, 255, 1) 100%
    ) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
}


.product-listing-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    padding: 22px;
    object-fit: contain;
}

.product-listing-content {
    flex: 1;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.product-listing-content h3 {
    margin-bottom: 20px;
}

.product-listing-content p {
    min-height: 50px;
    margin-bottom: 60px;
    overflow: hidden;
    display: -webkit-box;
    margin-bottom: 30px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.product-listing-content .btn {
    min-width: 175px;
    margin-top: auto;
}

.product-listing-pagination {
    position: relative;
    z-index: 2;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-listing-pagination button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-t12);
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}

.product-listing-pagination button:hover {
    color: var(--color-primary);
}

.product-listing-pagination button.active {
    background: var(--color-primary);
    color: #000;
    font-weight: 700;
}

.product-listing-wave {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.product-listing-wave img {
    width: 100%;
    display: block;
}

.product-listing-wave-left {
    left: -10%;
    bottom: 110px;
    width: 50%;
    transform: rotate(8deg);
}

.product-listing-wave-right {
    right: -12%;
    bottom: 20px;
    width: 58%;
    transform: rotate(-8deg);
}

@media (max-width: 991.98px) {

    .product-listing-grid {
        row-gap: 50px;
    }

    .product-listing-content p {
        margin-bottom: 30px;
    }

}

@media (max-width: 767.98px) {
    .product-listing-header {
        align-items: flex-start;
        margin-bottom: 40px;
    }

    .product-listing-grid {
        row-gap: 30px;
    }

    .product-listing-image img {
        padding: 10px;
    }
}

@media (max-width: 575.98px) {

    .product-listing-sort {
        width: 100%;
        justify-content: flex-end;
    }

    .product-listing-sort .form-select {
        min-width: 155px;
    }
    
    .product-listing-content{
        align-items: center;
        text-align: center;
    }

    .product-listing-content p {
        min-height: 0;
        margin-bottom: 30px;
    }

    .product-listing-content .btn {
        min-width: unset;
    }

    .product-listing-pagination {
        margin-top: 55px;
    }

    .product-listing-wave-left {
        left: -55%;
        width: 145%;
    }

    .product-listing-wave-right {
        right: -65%;
        width: 155%;
    }

    .hp-wave-5{
        bottom: 18%;
    }

    .hp-wave-6{
        bottom: 40%;
    }
}



/*  ------------------------ Gallery Page ------------------- */
.gallery-content {
    position: relative;
    overflow: hidden;
}

.gallery-content .container-fluid {
    position: relative;
    z-index: 2;
}

.gallery-glow-top {
    --gw: 720px;
    --gh: 480px;
    --gr: 720px;
    --gt: -180px;
    --gl: 24%;
    --go: 0.18;
}

.gallery-glow-left {
    --gw: 560px;
    --gh: 880px;
    --gr: 880px;
    --gt: 34%;
    --gl: -28%;
    --go: 0.16;
}

.gallery-glow-bottom {
    --gw: 620px;
    --gh: 520px;
    --gr: 620px;
    --gb: -180px;
    --grt: -18%;
    --go: 0.14;
}

.gallery-heading {
    max-width: 1100px;
    margin: 0 auto 30px;
}

.gallery-heading h1 {
    margin-bottom: 20px;
}

.gallery-heading p,
.gallery-intro-text {
    margin: 0 auto;
    max-width: 1100px;
}

.gallery-showcase {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: clamp(290px, 32vw, 400px);
    margin-left: calc(50% - 50vw);
    display: grid;
    place-items: center;
    overflow: hidden;
    perspective: clamp(1200px, 95vw, 1900px);
    mask-image: none;
    -webkit-mask-image: none;
    margin-bottom: 30px;    
}

.gallery-showcase::before,
.gallery-showcase::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: clamp(70px, 10vw, 200px);
    pointer-events: none;
}

.gallery-showcase::before {
    left: 0;
    background: linear-gradient(90deg, #110E19 0%, rgba(17, 14, 25, 0) 100%);
}

.gallery-showcase::after {
    right: 0;
    background: linear-gradient(270deg, #110E19 0%, rgba(17, 14, 25, 0) 100%);
}

.gallery-showcase-track {
    --gallery-card-width: clamp(240px, 26vw, 450px);
    --gallery-radius: 50vw;
    position: relative;
    width: var(--gallery-card-width);
    aspect-ratio: 0.82;
    display: grid;
    transform-style: preserve-3d;
    animation: gallery-showcase-spin 36s linear infinite;
}

.gallery-showcase-item {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 16px;
    backface-visibility: hidden;
    aspect-ratio: 1 / 1;
    transform:
        rotateY(calc(var(--gallery-index) * 360deg / var(--gallery-count)))
        translateZ(var(--gallery-radius))
        rotateY(180deg);
}

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

@keyframes gallery-showcase-spin {
    to {
        transform: rotateY(-360deg);
    }
}

.gallery-projects {
    position: relative;
}

.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 60px;
}

.gallery-filter-button {
    flex: 1 1 auto;
    text-align: center;
}

/* Mobile category dropdown — same look as the product/blog sort select */
.gallery-filter-select {
    display: none;
    margin-bottom: 40px;
}

.gallery-filter-select .form-select {
    width: 100%;
    padding: 10px 35px 10px 14px;
    font-size: var(--fs-f16);
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #06C;
    background-color: #1E1A2B;
    color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 11px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.gallery-filter-select .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: none;
}

.gallery-filter-select .form-select option {
    color: #fff;
    background: #111a31;
}

@media (max-width: 767.98px) {
    .gallery-filter {
        display: none;
    }

    .gallery-filter-select {
        display: block;
    }
}

/* .gallery-filter-button {
    min-height: 50px;
    padding: 10px 16px;
    border: 1px solid var(--color-primary);
    border-radius: 7px;
    background: rgba(13, 13, 31, 0.72);
    color: var(--color-primary);
    font-size: var(--fs-f16);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.gallery-filter-button:hover,
.gallery-filter-button.active {
    background: var(--color-primary);
    color: #080808;
    box-shadow: 0 6px 20px rgba(231, 181, 0, 0.14);
} */

.gallery-project-grid {
    row-gap: 30px;
}

.gallery-project-item {
    min-width: 0;
}

.gallery-project-image {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    aspect-ratio: 8 / 9;
    border-radius: 16px;
}


.gallery-project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
}

.gallery-project-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 300ms ease;
}

.gallery-project-item:hover .gallery-project-image img {
    transform: scale(1.035);
}

.gallery-project-title {
    overflow: hidden;
    display: -webkit-box;
    margin: 20px 0 0;
    color: #fff;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.gallery-project-pagination {
    position: relative;
    z-index: 3;
    min-height: 30px;
    margin-top: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gallery-project-pagination button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-project-pagination button:hover {
    color: var(--color-primary);
}

.gallery-project-pagination button.active {
    background: var(--color-primary);
    color: #000;
    font-weight: 700;
}

.gallery-wave {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.gallery-wave img {
    width: 100%;
    display: block;
}

.gallery-wave-intro {
    right: -15%;
    bottom: -80px;
    width: 48%;
    transform: rotate(11.009deg);
    opacity: 0.58;
}

.gallery-wave-left {
    left: -24%;
    bottom: -80px;
    width: 48%;
    transform: rotate(11.009deg);
    opacity: 0.72;
}

.gallery-wave-right {
    right: -22%;
    bottom: -65px;
    width: 48%;
    transform: rotate(-11.009deg);
    opacity: 0.72;
}

@media (max-width: 1199.98px) {
    .gallery-filter {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .gallery-filter-button {
        padding-inline: 10px;
        font-size: var(--fs-t14);
    }

    .gallery-project-grid {
        row-gap: 50px;
    }
}

@media (max-width: 991.98px) {

    .gallery-showcase {
        width: 100%;
        height: 390px;
        margin-left: 0;
    }

    .gallery-showcase-track {
        --gallery-card-width: clamp(240px, 38vw, 340px);
        --gallery-radius: calc(var(--gallery-card-width) * 1.5);
        aspect-ratio: 0.66;
        /* taller cards → bigger image; radius still scales with width so cards don't overlap */
    }

    .gallery-showcase-item {
        aspect-ratio: auto;
    }

    .gallery-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-filter-button:last-child {
        grid-column: 1 / -1;
    }

}

@media (max-width: 575.98px) {

    .gallery-heading h1 {
        margin-bottom: 15px;
    }

    .gallery-showcase {
        width: calc(100% + 60px);
        height: 380px;
        margin-left: -30px;
        /* perspective: 1100px; */
        margin-right: -30px
    }

    .gallery-showcase-track {
        --gallery-card-width: clamp(200px, 58vw, 280px);
        --gallery-radius: calc(var(--gallery-card-width) * 1.45);
        aspect-ratio: 0.6;
        /* more portrait → the centered image is much taller */
    }

    .gallery-showcase-item {
        border-radius: 12px;
        aspect-ratio: auto;
    }

    .gallery-intro-text {
        margin-top: 35px;
    }

    .gallery-projects {
        padding-top: 0px;
    }

    .gallery-filter {
        grid-template-columns: 1fr;
        margin-bottom: 40px;
    }

    .gallery-filter-button:last-child {
        grid-column: auto;
    }

    .gallery-project-grid {
        row-gap: 30px;
    }

    .gallery-project-image {
        aspect-ratio: 4 / 3;
    }

    .gallery-project-title {
        min-height: 0;
        margin-top: 15px;
    }

    .gallery-project-pagination {
        margin-top: 55px;
    }

    .gallery-wave-intro,
    .gallery-wave-left,
    .gallery-wave-right {
        width: 100%;
    }

    .gallery-showcase::before,
    .gallery-showcase::after{
      top: 30px;
      bottom: 30px;  
    }
}

/*  ------------------------ End Gallery Page --------------- */


/*  ------------------------ Service Listing Page ------------------- */

.service-content{
    position: relative;
    overflow: hidden;
}


/*  ------------------------ End Service Listing Page --------------- */

/*  ------------------------ Service Details Page --------------------*/


.service-detail-content {
position: relative;
overflow: hidden;
}

.service-detail-content .hp-wave {
z-index: -1;
}

.service-detail-content .hp-wave img {
width: 620px;
max-width: 70vw;
}

.service-detail-head {
text-align: center;
max-width: 900px;
margin: 0 auto 40px;
}

.service-detail-head .service-title {
margin-bottom: 15px;
}



/* Carousel */
.service-carousel-section .service-slide img {
width: 100%;
height: 520px;
object-fit: cover;
border-radius: 16px;
}

.service-carousel-section .owl-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
pointer-events: none;
padding: 0 10px;
left: 0;
right: 0;
}

.service-carousel-section .owl-nav button {
pointer-events: auto;
width: 45px;
height: 45px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.16)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.08));
transition: all 0.3s ease;
border: none;
}

.service-carousel-section .owl-nav button:hover {
background: var(--color-primary);
}

/* Carousel dots: hidden on desktop, shown only below 768px */
.service-carousel-section .owl-dots {
text-align: center;
}

#service-carousel {
padding: 0 90px;
}


/* CKEditor content body */

.service-detail-body img {
max-width: 100%;
height: auto;
}

.service-detail-body h2,
.service-detail-body h3 {
margin-bottom: 20px;
}

.service-detail-body ul li,
.service-detail-body ol li {
font-size: var(--fs-p14);
}


/* FAQ accordion from CKEditor (.toggle markup) — styled like the FAQ page.
 The editor outputs bare .toggle items with no .faq-list wrapper, so we
 re-apply the same look here (white titles, circular +/- on the right). */
.service-detail-body .toggle {
margin: 0 auto;
max-width: 900px;
border-bottom: 1px solid rgba(206, 206, 206, 0.40);
}

.service-detail-body .toggle .togglet,
.service-detail-body .toggle .toggleta {
position: relative;
background-color: transparent;
padding: 20px 50px 20px 30px;
color: #fff;
font-size: var(--fs-f16);
font-weight: 400;
cursor: pointer;
}

/* open state — question goes yellow */
.service-detail-body .toggle .toggleta {
color: var(--color-primary);
font-weight: 600;
}

.service-detail-body .toggle .togglec {
padding: 0 50px 20px 30px;
font-size: var(--fs-p14);
text-align: left;
}

.service-detail-body .toggle .togglec p:last-child {
margin-bottom: 0;
}

/* plus / minus circle on the right */
.service-detail-body .toggle .togglet i {
position: absolute;
left: auto;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 25px;
height: 25px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
border-radius: 50%;
font-size: 18px;
color: #fff;
}

.service-section.service-section--howitworks img {
max-height: 800px;
}

.service-detail-body .toggle .togglet i.toggle-open {
display: none;
background: var(--color-primary);
border-color: var(--color-primary);
color: #110E19;
}

.service-detail-body .toggle .toggleta i.toggle-closed {
display: none;
}

.service-detail-body .toggle .toggleta i.toggle-open {
display: flex;
}

@media (max-width: 767px) {

    .service-detail-body .toggle .togglet,
    .service-detail-body .toggle .toggleta {
      padding: 15px 40px 15px 0;
    }
    
    .service-detail-body .toggle .togglec {
      padding: 0 40px 15px 0;
    }
    
    .service-section.service-section--howitworks img{
        max-height: 250px;
        object-fit: cover;
        object-position: center;
        border-radius: 16px;
    }
}

.cta-wrapper {
border-radius: 8px;
background: #0B3F71;
padding: 30px;
padding-inline: 60px;
color: #fff;
}

.cta-section h2 {
font-size: var(--fs-24);
}

.cta-section .btn {
background-color: var(--color-tertiary);
color: #fff;
}

.cta-section .btn:hover {
background-color: #fff;
color: var(--color-tertiary);
}

.related-services {
border-top: 1px solid #CECECE;
}

.related-services .service-card {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.related-services .service-card img {
width: 100%;
height: 180px;
object-fit: cover;
}

.related-services .service-card .card-body {
padding: 15px;
}

@media (max-width: 991.98px) {
.service-carousel-section .service-slide img {
  height: 360px;
}
}

@media (max-width: 575.98px) {
#service-carousel {
  padding: 0;
}

.service-carousel-section .service-slide img {
  height: 220px;
}


.service-carousel-section .owl-nav {
  display: none;
}
}

body.service-detail-body {
background: #110E19;
color: #fff;
}

.service-section {
padding: 60px 0;
}

.service-section:last-child {
margin-bottom: 0;
}

.service-section.service-section--richtext p:last-child {
margin-bottom: 0;
}

.service-section .btgrid .row {
margin-top: 10px;
}

.service-section--features .col-md-4 {
margin-bottom: 30px;
}

/* subtitle reused from the product styles, lightened for the dark page */
.service-detail-body .pd-section-subtitle {
color: #fff;
}

/* ── Feature card — icon box + title + description ────────────── */
.svc-feature {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 5px 0;
}

/* the icon box — its own styling (blue rounded square, yellow mark) */
.svc-feature__icon {
flex: 0 0 60px;
width: 60px;
height: 60px;
border-radius: 16px;
background: rgba(0, 102, 204, 0.50);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.svc-feature__icon i {
color: var(--color-primary, #FFD000);
font-size: 26px;
line-height: 1;
}

.svc-feature__icon img {
width: 30px;
height: 30px;
object-fit: contain;
}

.svc-feature__body {
flex: 1;
min-width: 0;
}

.svc-feature__title {
margin: 0;
color: #fff;
}

.svc-feature__desc {
margin: 0;
}


.service-section.service-section--howitworks .row {
--bs-gutter-x: 50px;
}


.service-section--howitworks ol>li {
margin-bottom: 30px;
color: #fff;
}

.service-section--howitworks ol>li:last-child {
margin-bottom: 0;
}

/* the auto number ("1.", "2." …) — bold and white like the title */
.service-section--howitworks ol>li::marker {
color: #fff;
font-size: var(--fs-f20);
font-weight: 700;
}

/* the bold first line reads as the step title */
.service-section--howitworks ol>li strong {
color: #fff;
font-size: var(--fs-f20);
font-weight: 700;
}


@media (max-width: 575.98px){
    .service-section{
        padding: 0 0 60px;
    }
}
/*	------------------------ Service Details Page End -------------------------- */



/*	------------------------ About Us -------------------------- */


/* Breadcrumb */
#bread_contact_banner {
    background-color: transparent;
    padding: 15px 0;
    top: auto;
    text-align: center;
    position: relative;
    border: none;
}

.topcrumb {
    padding: 0;
}

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

.topcrumb ul li {
    display: inline-block;
    /*color: var(--text);*/
    font-size: var(--fs-t12);
}

/* .topcrumb ul li a {
    color: #555;
} */

#banner.aboutuspage {
    position: relative;
    z-index: 1;
}

@media(min-width: 768px) {
    #banner.aboutuspage {
        aspect-ratio: 1440 / 615;
        background-size: cover;
        background-position: top right;
        background-image: url('../images/layout/aboutus-banner.webp');
    }
}

/* ============================================
   Page: About Us
   ============================================ */
.aboutus-content {
    position: relative;
    overflow: hidden;
}

.aboutus-content .hp-wave-about-1 {
    top: 38%;
    right: 0;
    left:0; 
}

.aboutus-content .hp-wave-about-2 {
    bottom: -4%;
    left: 0;
    right: 0;
}

.aboutus-content .hp-wave-about-3 {
    bottom: -17%;
    left: 0;
    right: 0;
}

.aboutus-content section {
    position: relative;
    z-index: 1;
}

/* shared centered section heading */
.aboutus-section-head {
    margin: 0 auto 30px;
}

.aboutus-section-head h2 {
    color: #fff;
    margin-bottom: 15px;
}

.aboutus-section-head p {
    color: #fff;
    margin-bottom: 0;
    max-width: 1100px;
    margin-inline: auto;
}

/* ── Hero Banner ── */
.aboutus-hero {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.15) 100%),
        url('../images/layout/about-bg.webp') no-repeat center / cover,
        #110E19;
    min-height: 480px;
    display: flex;
    align-items: center;
}

.aboutus-hero .container-fluid {
    width: 100%;
}

.aboutus-hero-text {
    max-width: 540px;
}

.aboutus-hero-text h1 {
    color: #fff;
    margin-bottom: 15px;
}

.aboutus-hero-text p {
    font-size: var(--fs-p14);
    margin-bottom: 0;
}

/* ── Stats Bar ── */
.aboutus-stats {
    background: #1F1052;
}

.aboutus-stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.aboutus-stat-number {
    font-size: var(--fs-h2);
    font-weight: 800;
    color: #fff;
    line-height: var(--lh-title);
    white-space: nowrap;
}

.aboutus-stat-label {
    margin-bottom: 0;
}

/* ── Vision / Mission / Core Values ── */

.aboutus-vmc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Card — glass fill (markup adds .glass), gradient border via ::before */
.aboutus-vmc-card {
    position: relative;
    border-radius: 10px;
    padding: 30px 25px;
}

/* gradient border — same gradient as the icon */
.aboutus-vmc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1px;
    background: linear-gradient(180deg, #FFC800 0%, #D5BBF2 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* gradient border replaces the glass white rim */
.aboutus-vmc-card.glass::after {
    content: none;
}

/* gradient icon — SVG used as a mask so the original color doesn't matter */
.aboutus-vmc-icon {
    display: block;
    width: 50px;
    height: 40px;
    margin: 0 auto 15px;
    background: linear-gradient(180deg, #FFC800 0%, #D5BBF2 100%);
    -webkit-mask: var(--icon) no-repeat center / contain;
    mask: var(--icon) no-repeat center / contain;
}

.aboutus-vmc-title {
    color: #fff;
    font-size: var(--fs-f20);
    font-weight: 700;
    margin-bottom: 10px;
}

.aboutus-vmc-card p {
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--fs-p14);
    margin-bottom: 0;
}

/* ── Achievements ── */

.aboutus-ach-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.aboutus-ach-text h2 {
    color: #fff;
    margin-bottom: 20px;
}

.aboutus-ach-text p {
    margin-bottom: 15px;
}

.aboutus-ach-text p:last-child {
    margin-bottom: 0;
}

.aboutus-ach-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 30px;
}

.aboutus-ach-item:last-child {
    margin-bottom: 0;
}

.aboutus-ach-icon {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 102, 204, 0.50);
    border-radius: 10px;
}

.aboutus-ach-icon svg {
    width: 20px;
    height: 20px;
}

.aboutus-ach-icon svg path {
    fill: #FFC107;
}

.aboutus-ach-title {
    color: #fff;
    font-size: var(--fs-p14);
    font-weight: 700;
    margin-bottom: 5px;
}

.aboutus-ach-info p {
    font-size: var(--fs-p14);
    margin-bottom: 0;
}

/* ── Meet Our Team ── */

.aboutus-team-card {
    background: #fff;
    border-radius: 20px;
    padding: 80px 30px;
    margin: 0 auto;
}

.aboutus-team-card .aboutus-section-head h2 {
    color: #110E19;
}

.aboutus-team-card .aboutus-section-head p {
    color: #000;
}

.aboutus-team-image {
    border-radius: 10px;
    overflow: hidden;
}

.aboutus-team-image img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* ── Trusted By Our Clients ── */

.aboutus-clients-carousel {
    position: relative;
    margin: 0 auto;
}


.aboutus-client-card {
    background: #fff;
    border-radius: 5px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.aboutus-client-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* carousel arrows */
.aboutus-clients-carousel .owl-nav button.owl-prev,
.aboutus-clients-carousel .owl-nav button.owl-next,
.blog-related-carousel .owl-nav button.owl-prev,
.blog-related-carousel .owl-nav button.owl-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.60);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.aboutus-clients-carousel .owl-nav button.owl-prev{
    left: -60px;
}

.aboutus-clients-carousel .owl-nav button.owl-next{
    right: -60px;
}

/* ── CTA Banner ── */
.aboutus-cta {
    background:
        linear-gradient(0deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
        url('../images/layout/about-cta.webp') no-repeat center / cover,
        #110E19;
    min-height: 420px;
    display: flex;
    align-items: center;
}

.aboutus-cta .container-fluid {
    width: 100%;
}

.aboutus-cta-content h2 {
    color: #fff;
    margin-bottom: 15px;
}

.aboutus-cta-content p {
    font-size: var(--fs-p14);
    margin-bottom: 20px;
}

/* responsive */
@media (max-width: 991.98px) {
    .aboutus-ach-row {
        grid-template-columns: 1fr;
    }

    .aboutus-vmc-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .aboutus-clients-carousel .owl-nav button.owl-prev {
        left: -15px;
    }

    .aboutus-clients-carousel .owl-nav button.owl-next {
        right: -15px;
    }
}

@media (max-width: 767.98px) {
    .aboutus-hero {
        min-height: 300px;
    }

    .aboutus-stats-grid {
        
    }

    .aboutus-stat-item {
        justify-content: flex-start;
    }

    .aboutus-team-card {
        padding: 20px 10px;
    }

    .aboutus-client-card{
        height: unset;
        max-height: 125px;
    }
}

@media (max-width: 575.98px){
    .aboutus-hero {
        min-height: 550px;
        background: url(../images/layout/about-bg-mb.webp) center bottom / cover no-repeat;
        align-items: flex-start;
    }
}





/*	------------------------ About Us END -------------------------- */


/*  ------------------------ Product Detail -------------------------- */

.sidebar {
    position: sticky;
    top: calc(75px + 30px);
}

/* ── Panel wrapper ─────────────────────────────────────────────── */
.categories-panel {
    border-radius: 8px;
    /* padding-block: 15px; */
    margin-bottom: var(--space);
    background-color: #F5F5F5;
}

.categories-panel:has(.fabric-special-panel) {
    background: transparent;
}



.categories-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.categories-panel-header img {
    width: 18px;
    height: auto;
}

/* ── Root list ─────────────────────────────────────────────────── */
.cat-root-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #000;
}

.cat-root {
    background: #F5F5F5;
    margin-inline: 30px;
    margin-bottom: 20px;
}

.cat-root.fabric-root {
    margin-inline: 0;
    background: transparent;
}

.cat-root:first-child {
    margin-top: 20px;
}

.cat-root:last-child {
    border-bottom: none;
    margin-bottom: 20px;
}

.cat-root.is-active>.cat-root-row,
.cat-root:has(.is-active)>.cat-root-row {
    background: #FFF;
    border-radius: 8px;
    padding: 15px;
    margin-inline: -15px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.06);
}

.cat-root>.cat-root-row.fabric-root-row,
.cat-root>.cat-root-row.fabric-root-row {
    background: var(--color-secondary);
    margin-inline: 0;
    border-radius: 8px;
    padding: 15px 30px;
    /* margin-inline: -15px; */
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.06);
}


.cat-root-row.fabric-root-row .cat-root-link {
    color: #fff;

}


.cat-root.is-open>.cat-root-row {
    margin-bottom: 20px;
}

.cat-root-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: margin-bottom 0.35s ease;
}



.cat-root-row:not(:has(+ .cat-sub-list)) {
    padding-right: 20px;
}

.cat-root-link {
    font-size: var(--fs-t16);
    font-weight: 500;
    color: #000;
    text-decoration: none;
    transition: color .15s, font-weight .1s;
}

.cat-root.is-open>.cat-root-row .cat-root-link,
.cat-root:has(.is-active)>.cat-root-row .cat-root-link {
    font-size: var(--fs-t16);
    font-weight: 700;
    color: #000;
}

.cat-root.is-open>.cat-root-row .cat-root-link.fabric-root-link,
.cat-root:has(.is-active)>.cat-root-row .cat-root-link.fabric-root-link {
    color: #fff;
}



.cat-root.is-active>.cat-root-row .cat-root-link {
    font-size: var(--fs-t16);
    font-weight: 700;
    color: #000;
}

.cat-root.is-active>.cat-root-row .cat-root-link.fabric-root-link {
    color: #fff;
}

.fabric-root .cat-sub-list {
    padding-inline: 30px;
}

.cat-root-link:hover {
    font-size: var(--fs-t16);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.cat-sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        max-height 410ms ease,
        opacity 350ms ease,
        transform 350ms ease;
}

.cat-sub-list.is-open {
    max-height: 800px;
    opacity: 1;
    transform: translateY(0);
}

/* ── Sub item row ── grey background ── */
.cat-sub-item {
    /* background: #F5F5F5; */
    margin-bottom: 20px;
}

.cat-sub-item:last-child {
    margin-bottom: 0;
}

.cat-sub-list:has(.cat-sub-list.is-open) {
    margin-bottom: 20px;
}

.cat-sub-item.is-open>.cat-sub-row {
    margin-bottom: 20px;
}

.cat-sub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
}

/* indent levels */
.cat-sub-list>.cat-sub-item>.cat-sub-row {
    padding: 0 0 0 10px;
}

.cat-sub-list>.cat-sub-item>.cat-sub-row:last-child {
    margin-bottom: 0;
}

.cat-sub-list .cat-sub-list>.cat-sub-item>.cat-sub-row {
    padding-left: 20px;
    padding-right: 0;
}

.cat-sub-list .cat-sub-list .cat-sub-list>.cat-sub-item>.cat-sub-row {
    padding-left: 30px;
    padding-right: 0;
}

.cat-sub-list .cat-sub-list .cat-sub-list .cat-sub-list>.cat-sub-item>.cat-sub-row {
    padding-left: 40px;
    padding-right: 0;
}


/* ── Sub link: default ── */
.cat-sub-link {
    font-size: var(--fs-t16);
    font-weight: 500;
    color: #000;
    text-decoration: none;
    transition: color .15s, font-weight .1s;
}

/* Sub open (its own sub showing) → 600 + green */
.cat-sub-item.is-open>.cat-sub-row>.cat-sub-link,
.cat-sub-item.is-open>.cat-sub-row .cat-sub-link {
    font-size: var(--fs-t16);
    font-weight: 600;
    color: var(--color-primary);
}

/* Sub active (current page) */
.cat-sub-item.is-active>.cat-sub-row>.cat-sub-link,
.cat-sub-item.is-active>.cat-sub-link {
    font-size: var(--fs-t16);
    font-weight: 600;
    color: var(--color-primary);
}

/* Sub link hover */
.cat-sub-link:hover {
    font-size: var(--fs-t16);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

/* Base reset for all */
.cat-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: none;
    transition: background .15s, color .15s, border-color .15s;
}

.cat-toggle-btn i {
    font-size: 12px;
}

/* Root toggle — circle with black border */
.cat-root-row .cat-toggle-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #000;
    color: #000;
    background: transparent;

}

.cat-root-row .cat-toggle-btn.fabric-toggle-btn {
    border: 2px solid #fff;
    color: #fff;
}

/* Root open → filled green circle */
.cat-root.is-open>.cat-root-row .cat-toggle-btn {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Root toggle hover */
.cat-root-row .cat-toggle-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Sub toggle — plain icon, no circle, no border */
.cat-sub-row .cat-toggle-btn {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #333;
    padding: 2px 4px;
}

.cat-sub-row .cat-toggle-btn i {
    font-size: 13px;
}

/* Sub open → green icon */
.cat-sub-item.is-open>.cat-sub-row .cat-toggle-btn {
    color: var(--color-primary);
}

/* Sub toggle hover */
.cat-sub-row .cat-toggle-btn:hover {
    color: var(--color-primary);
    background: transparent;
    border: none;
}

/* ── Scroll ─────────────────────────────────────────────────────── */
.cat-bg {
    overflow-y: auto;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .cat-root {
        margin-inline: 15px;
    }

    .sidebar-widgets-wrap {
        margin: 0;
    }
}

@media (max-width: 1366px) {
    .cat-toggle-btn i {
        font-size: 12px;
    }
}

@media(max-width: 768px) {

    /* =========================
   MOBILE CATEGORY DROPDOWN
========================= */
    .category-filter-dropdown {
        position: relative;
    }

    .category-dropdown-toggle {
        display: flex;
        align-items: center;
        border-radius: 8px;
        font-weight: 500;
        background: #CECECE;
        width: 250px;
        color: #000
    }

    .category-dropdown-toggle:hover,
    .category-dropdown-toggle:focus,
    .category-dropdown-toggle:active {
        background-color: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
    }

    .category-dropdown-menu {
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 2;
        display: none;
        background: #fff;
        border: 1px solid #CECECE;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        max-height: none;
        overflow: hidden;
    }

    .category-dropdown-menu.is-open {
        display: block;
    }

    .category-dropdown-menu-list {
        padding: 0;
        border-radius: 8px;

    }

    .mobile-cat-current-root-title {
        padding: 15px 20px;
        font-weight: 800;
        /* letter-spacing: 0.04em; */
        text-transform: uppercase;
        color: #fff;
        border-bottom: 1px solid #CECECE;
        background: var(--color-secondary)
    }

    .mobile-cat-filter-list-wrap {
        padding: 0 10px 10px 10px;
        border-radius: 8px;

    }

    .mobile-cat-filter-list {
        max-height: 320px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-cat-filter-list,
    .mobile-cat-submenu {
        list-style: none;
        margin: 0;
        padding: 0;
    }


    .mobile-cat-item {
        border-bottom: 1px solid #CECECE;
    }

    .mobile-cat-submenu.is-open .mobile-cat-item {
        border-bottom: 1px solid transparent;
    }

    .mobile-cat-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .mobile-cat-link {
        display: block;
        flex: 1 1 auto;
        padding: 15px;
        color: #000;
    }

    .mobile-cat-link:hover,
    .mobile-cat-link:focus {
        color: var(--color-primary);
        text-decoration: none;
    }

    .mobile-cat-toggle {
        flex: 0 0 auto;
        border: 0;
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #000;
        transition: color 0.25s ease, transform 0.25s ease;
    }

    .mobile-cat-toggle:hover {
        color: #000;
    }

    .mobile-cat-item.is-active>.mobile-cat-row>.mobile-cat-link {
        font-weight: 700;
        color: #000;
    }

    .mobile-cat-item.is-first-level>.mobile-cat-row>.mobile-cat-link {
        font-weight: 600;
    }

    .mobile-cat-submenu {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0.25s ease;
        background: #fff;
    }

    .mobile-cat-submenu.is-open {
        max-height: 1200px;
        opacity: 1;
        visibility: visible;
    }

    .mobile-cat-submenu .mobile-cat-link {
        padding: 10px 20px;
    }

    .mobile-cat-submenu .mobile-cat-submenu .mobile-cat-link {
        padding-left: 40px;
    }

    .mobile-cat-submenu .mobile-cat-submenu .mobile-cat-submenu .mobile-cat-link {
        padding-left: 52px;
    }

    .mobile-cat-item.is-open>.mobile-cat-row .mobile-cat-toggle {
        color: #000;
    }
}

.product-detail-section {
    overflow: visible !important;
}

.pdv-editor h3,
.pdv-editor h4 {
    font-weight: 700;
    color: #000;
    margin: 20px 0 10px;
}

.pdv-editor h3 {
    font-size: var(--fs-t20);
}

.pdv-editor h4 {
    font-size: var(--fs-f18);
}

.pdv-editor p {
    /* margin-bottom: 30px; */
}

.pdv-editor p:last-child {
    margin-bottom: 0;
}

.pdv-editor table {
    width: 100% !important;
    /* min-width: 600px; */
    border-collapse: collapse;
    margin: 0;
    font-size: var(--fs-t16);
    text-align: center;
}

.pdv-table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 20px;
}

.pdv-table-responsive table {
    margin: 0;
}

.pdv-editor table th,
.pdv-editor table td {
    border: 1px solid #CECECE;
    padding: 10px 14px;
    white-space: nowrap;
}

.pdv-editor table th {
    background: #F7F7F7;
    font-weight: 800;
    text-align: center;
}


/* owl wrap */
/* .pdv-owl-wrap { flex: 1; min-width: 0; position: relative; } */
.pdv-owl-wrap .owl-carousel .item img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

.pdv-owl-wrap .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    color: #000;
    font-size: 14px;
    transition: background .15s;
    margin: 0;
    border: 0;
}

.pdv-owl-wrap .owl-nav .owl-prev:hover,
.pdv-owl-wrap .owl-nav .owl-next:hover {
    background: var(--color-primary);
    color: #fff;
}

.pdv-owl-wrap .owl-nav .owl-prev:hover svg path,
.pdv-owl-wrap .owl-nav .owl-next:hover svg path {
    stroke: #fff;
}


.pdv-owl-wrap .owl-nav .owl-prev {
    left: 10px;
}

.pdv-owl-wrap .owl-nav .owl-next {
    right: 10px;
}

/* pdf panel */
.pdv-pdf-panel {
    border-radius: 16px;
    background: #F7F7F7;
    padding: 60px 30px;
    height: calc(100% - 51px);
}

.pdv-pdf-panel h4 {
    font-size: var(--fs-p16);
    font-weight: 800;
    margin-bottom: 10px;
}

.pdv-pdf-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: pdvpdf;
}

.pdv-pdf-list li {
    counter-increment: pdvpdf;
    display: flex;
    align-items: flex-start;
    margin-bottom: 5px;
}

.pdv-pdf-list li::before {
    content: counter(pdvpdf) ".";
    color: #000;
    flex-shrink: 0;
    margin-right: 5px;
}

.pdv-pdf-list a {
    color: #000;
    text-decoration: none;
    word-break: break-word;
}

.pdv-pdf-list a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.pdv-pdf-list li:hover::before {
    color: var(--color-primary);
}

/* enquire */

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .pdv-layout {
        flex-direction: column;
    }

    .pdv-sidebar {
        width: 100%;
        position: static;
        margin-bottom: 24px;
    }

    .pdv-content {
        padding-left: 0;
    }

    .pdv-owl-wrap .owl-carousel .item img {
        height: 500px;
        object-fit: cover;
    }
}

@media (max-width: 767.98px) {
    .pdv-media-box {
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {

    .pdv-owl-wrap .owl-carousel .item img {
        height: 450px;
    }

    /* .pdv-table-responsive {
        margin-bottom: 16px;
    } */

    .pdv-editor table th,
    .pdv-editor table td {
        white-space: nowrap;
    }
}

.pdv-gallery-owl .owl-dots {
    text-align: center;
    margin-top: 30px;
}

.pdv-gallery-owl .owl-dots .owl-dot {
    background: transparent;
    border: none;
    padding: 0;
}

.pdv-gallery-owl .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #CECECE;
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
    transition: all 0.3s ease;
}

.pdv-gallery-owl .owl-dots .owl-dot.active span {
    background: #000;
    width: 10px;
    height: 10px;
}


/* --------------------------- Product Detail End -------------------------- */


/*	------------------------ Gallery Page -------------------------- */


.pg-title,
.pg-side-title {
    font-weight: 800;
    margin-bottom: 10px;
}

.pg-desc,
.pg-content-intro p {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.pg-recent-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
}

.pg-recent-card,
.pg-grid-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
}

.pg-recent-card {
    aspect-ratio: 0.82;
}

.pg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 280px;
    grid-auto-flow: dense;
    gap: 16px;
}

.pg-grid-item {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.pg-recent-card img,
.pg-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

/* If a square image lands in a wide spot, revert to 1×1 */
.pg-grid-item:nth-child(12n + 2).aspect-square {
    grid-column: span 1;
    grid-row: span 1;
}

/* If a landscape image lands in a tall spot, revert to 1×1 */
.pg-grid-item:nth-child(12n + 4).aspect-landscape {
    grid-column: span 1;
    grid-row: span 1;
}


.pg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 280px;
    grid-auto-flow: dense;
    gap: 16px;
}

.pg-grid-item {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

/* Default: Square images stay as 1×1 */
.pg-grid-item.aspect-square {
    grid-column: span 1;
    grid-row: span 1;
}

/* Landscape images get 2 columns */
.pg-grid-item.aspect-landscape {
    grid-column: span 2;
    grid-row: span 1;
}

/* Portrait images get 2 rows */
.pg-grid-item.aspect-portrait {
    grid-column: span 1;
    grid-row: span 2;
}

.pg-recent-card img,
.pg-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.pg-recent-card:hover img,
.pg-grid-item:hover img {
    transform: scale(1.05);
}

.pg-recent-card:hover img,
.pg-grid-item:hover img {
    transform: scale(1.05);
}

.pg-recent-card span {
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: #fff;
    font-size: var(--fs-p16);
    font-weight: 700;
}



.pg-filter-box {
    border-radius: 8px;
    background: #F5F5F5;
    padding: 15px 0;
    position: sticky;
    top: calc(75px + 30px);
    z-index: 10;
    /* Keeps it above moving elements if any */
}

.pg-filter-box a {
    display: block;
    margin: 30px;
    color: #000;
    font-size: var(--fs-p16);
    transition: all 0.1s ease;
}

.pg-filter-box a:hover {
    color: var(--color-primary);
    font-weight: 600;
}

.pg-filter-box a.active {
    color: #000;
    background: #fff;
    margin-inline: 15px;
    padding: 15px;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.06);
}

.pg-filter-box a.active:first-child,
.pg-filter-box a:first-child {
    margin-top: 15px;
}

.pg-filter-box a.active:last-child,
.pg-filter-box a:last-child {
    margin-bottom: 15px;
}

.pg-ajax-loader {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 0 8px;
    color: #666;
    font-size: 14px;
    font-weight: 600;
}

.pg-ajax-loader.is-visible {
    display: flex;
}

.pg-ajax-loader__icon {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(0, 0, 0, 0.14);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: pgAjaxSpin .7s linear infinite;
}

@keyframes pgAjaxSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 991.98px) {
    .pg-recent-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 150px;
    }

    .pg-grid-item:nth-child(n) {
        grid-column: span 1;
        grid-row: span 1;
    }
}

@media (max-width: 575.98px) {

    .pg-recent-row {
        grid-template-columns: 1fr;
    }

    .pg-grid-item:nth-child(n) {
        grid-column: span 1;
        grid-row: span 1;
    }
}


/*	------------------------ Gallery Page END -------------------------- */


/*	------------------------ Blog Page -------------------------- */

.blogs-content {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.blogs-content .container-fluid {
    position: relative;
    z-index: 2;
}

.blogs-glow-top {
    --gw: 660px;
    --gh: 620px;
    --gr: 660px;
    --gt: -24%;
    --grt: -20%;
    --go: 0.16;
}

.blogs-glow-left {
    --gw: 520px;
    --gh: 820px;
    --gr: 820px;
    --gt: 28%;
    --gl: -28%;
    --go: 0.15;
}

.blogs-glow-right {
    --gw: 560px;
    --gh: 760px;
    --gr: 760px;
    --gb: 2%;
    --grt: -24%;
    --go: 0.13;
}

.blogs-wave-top {
    z-index: 1;
    top: 23%;
    right: -15%;
    width: 55%;
    transform: rotate(8deg);
    opacity: 0.62;
}

.blogs-wave-left {
    z-index: 1;
    left: -16%;
    bottom: 1%;
    width: 48%;
    transform: rotate(11deg);
    opacity: 0.7;
}

.blogs-wave-right {
    z-index: 1;
    right: -25%;
    bottom: -1%;
    width: 50%;
    transform: rotate(-11deg);
    opacity: 0.68;
}

.blogs-latest {
    position: relative;
}

.blogs-heading {
    margin: 0 auto 60px;
}

.blogs-heading h1 {
    margin-bottom: 20px;
    color: #fff;
}

.blogs-heading p {
    margin-bottom: 0;
    max-width: 1100px;
    margin-inline: auto;
}

.blogs-latest-slider-wrap {
    position: relative;
}

.blogs-latest-slider {
    overflow: hidden;
    border-radius: 16px;
}

.blogs-latest-card {
    height: 430px;
    display: flex;
    gap: 0;
}

.blogs-latest-image {
    flex: 0 0 66%;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
}

.blogs-latest-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.blogs-latest-info {
    flex: 1;
    min-width: 0;
    padding: 55px 50px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(0, 102, 204, 0.20) 0%, rgba(17, 14, 25, 0) 100%);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.blogs-date {
    margin-bottom: 10px;
    font-size: var(--fs-t14);
    font-weight: 400;
}

.blogs-latest-info h2 {
    overflow: hidden;
    display: -webkit-box;
    max-height: calc(1.35em * 3);
    margin-bottom: 10px;
    color: #fff;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.blogs-latest-desc {
    overflow: hidden;
    display: -webkit-box;
    max-height: calc(1.6em * 3);
    margin-bottom: 60px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.blogs-read-more {
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.blogs-read-more:hover{
    color: var(--color-primary)
}

.blogs-read-more:hover span{
    text-decoration: underline;
}

.blogs-read-more i {
    font-size: 18px;
}

.blogs-latest-navigation {
    position: relative;
    z-index: 3;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.blogs-latest-prev,
.blogs-latest-next,
.service-carousel-section .owl-nav button,
.aboutus-clients-carousel .owl-nav button.owl-prev,
.aboutus-clients-carousel .owl-nav button.owl-next,
.blog-related-carousel .owl-nav button.owl-prev,
.blog-related-carousel .owl-nav button.owl-next{
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}

.blogs-latest-prev:hover,
.blogs-latest-next:hover,
.aboutus-clients-carousel .owl-nav button:hover.owl-prev,
.aboutus-clients-carousel .owl-nav button:hover.owl-next,
.blog-related-carousel .owl-nav button:hover.owl-prev,
.blog-related-carousel .owl-nav button:hover.owl-next{
    background: var(--color-primary);
    color: #000;
}

.blog-related-carousel .owl-nav button.owl-prev{
    left: -20px;
}

.blog-related-carousel .owl-nav button.owl-next{
    right: -20px;
}


.blog-related-carousel .owl-nav button.owl-prev,
.blog-related-carousel .owl-nav button.owl-next{
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease, background 180ms ease, color 180ms ease;
}

/* visible while hovering the carousel */
.blog-related-carousel:hover .owl-nav button.owl-prev,
.blog-related-carousel:hover .owl-nav button.owl-next{
    opacity: 1;
    visibility: visible;
}

/* Lightbox (Magnific Popup) arrows — same round white button style as the carousels */
.mfp-wrap .mfp-arrow {
    width: 44px;
    height: 44px;
    margin: -22px 0 0;
    top: 50%;
    opacity: 1;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    transition: background-color 180ms ease;
}

.mfp-wrap .mfp-arrow:hover,
.mfp-wrap .mfp-arrow:focus {
    opacity: 1;
    background-color: var(--color-primary);
}

/* drop the default CSS triangles — the chevron comes from the background image */
.mfp-wrap .mfp-arrow:before,
.mfp-wrap .mfp-arrow:after {
    display: none;
}

.mfp-wrap .mfp-arrow-left {
    left: 25px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='15 18 9 12 15 6'/%3e%3c/svg%3e");
}

.mfp-wrap .mfp-arrow-right {
    right: 25px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='9 18 15 12 9 6'/%3e%3c/svg%3e");
}

#blogs-latest-pagination.swiper-pagination,
#product-hero-pagination.swiper-pagination {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 5;
}

#blogs-latest-pagination .swiper-pagination-bullet,
#product-hero-pagination .swiper-pagination-bullet {
    background: transparent;
    border: 2px solid #FFD943;
    opacity: 1;
}

#blogs-latest-pagination .swiper-pagination-bullet-active,
#product-hero-pagination .swiper-pagination-bullet-active {
    background: #FFD943;
    border: 2px solid #FFD943;
    opacity: 1;
}

/* mobile: show dots, hide arrows */
@media (max-width: 575px) {
    #blogs-latest-pagination.swiper-pagination,
    #product-hero-pagination.swiper-pagination {
        display: block;
    }
    .blogs-latest-navigation,
    .product-hero-prev,
    .product-hero-next {
        display: none;
    }
}

/* tablet/desktop: show arrows, hide dots */
@media (min-width: 576px) {
    #blogs-latest-pagination.swiper-pagination,
    #product-hero-pagination.swiper-pagination {
        display: none;
    }
}

.blogs-listing {
    position: relative;
    padding: 35px 0 120px;
}

.blogs-listing-header {
    margin-bottom: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.blogs-listing-header h2 {
    margin-bottom: 0;
    color: #fff;
}

.blogs-sort {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blogs-sort label {
    margin-bottom: 0;
    font-size: var(--fs-f16);
}

.blogs-sort .form-select {
    width: auto;
    min-width: 145px;
    padding: 5px 35px 5px 10px;
    border: 1px solid #06C;
    border-radius: 10px;
    background-color: #1E1A2B;
    color: #fff;
    font-size: var(--fs-f16);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");

}

.blogs-sort .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: none;
}

.blogs-sort .form-select option {
    background: #111a31;
    color: #fff;
}

/* Mobile sort icon button + menu (blog & product listings) */
.sort-icon-btn {
    border: none;
    background-color: transparent;
    color: #fff;
    cursor: pointer;
}

.sort-icon-btn:focus {
    outline: none;
    border-color: var(--color-primary);
}

.sort-mobile .dropdown-menu {
    background-color: #1E1A2B;
    border: 1px solid #06C;
    border-radius: 10px;
    padding: 6px;
    min-width: 160px;
}

.sort-mobile .dropdown-item {
    color: #fff;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: var(--fs-f16);
}

.sort-mobile .dropdown-item:hover,
.sort-mobile .dropdown-item:focus {
    background-color: rgba(0, 102, 204, 0.25);
    color: var(--color-primary);
}

.blogs-listing-row {
    row-gap: 70px;
}

.blogs-listing-item {
    display: flex;
}

.blogs-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.blogs-card-image {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
}

.blogs-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 102, 204, 0.12) 0%, rgba(17, 14, 25, 0) 100%);
    pointer-events: none;
}

.blogs-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 300ms ease;
}


.blogs-card-content {
    flex: 1;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.blogs-card-content .blogs-date {
    margin-bottom: 10px;
}

.blogs-card-content h3 {
    overflow: hidden;
    display: -webkit-box;
    margin-bottom: 10px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.blogs-card-content h3 a {
    color: inherit;
}

.blogs-card-desc {
    overflow: hidden;
    display: -webkit-box;
    margin-bottom: 30px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.blogs-card-content .blogs-read-more {
    margin-top: auto;
}

.blogs-listing-pagination {
    position: relative;
    z-index: 3;
    margin-top: 85px;
}

.blogs-listing-pagination nav,
.blogs-listing-pagination .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.blogs-listing-pagination a,
.blogs-listing-pagination strong {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blogs-listing-pagination a:hover {
    color: var(--color-primary);
}

.blogs-listing-pagination strong {
    background: var(--color-primary);
    color: #000;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .blogs-latest-card {
        height: 390px;
    }

    .blogs-latest-image {
        flex-basis: 58%;
    }

    .blogs-latest-info {
        padding: 40px 32px;
    }

    .blogs-listing-row {
        row-gap: 55px;
    }
}

@media (max-width: 767.98px) {

    .blogs-heading {
        margin-bottom: 30px;
    }

    .blogs-latest-card {
        height: auto;
        flex-direction: column;
    }

    .blogs-latest-image {
        flex: none;
        width: 100%;
        aspect-ratio: 16 / 10;
        border-radius: 16px;
    }

    .blogs-latest-info {
        padding: 32px 25px;
    }

    .blogs-latest-desc {
        margin-bottom: 28px;
    }

    .blogs-listing {
        padding-bottom: 90px;
    }

    .blogs-listing-header {
        margin-bottom: 40px;
    }
}

@media (max-width: 575.98px) {
    .blogs-heading h1 {
        margin-bottom: 15px;
    }

    .blogs-latest-info {
        padding: 25px 20px 30px;
    }

    .blogs-latest-navigation {
        margin-top: 22px;
    }

    .blogs-latest-prev,
    .blogs-latest-next {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }
    
    .blogs-latest-card{
        margin-bottom: 45px;
    }

    .blogs-listing {
        padding-top: 15px;
    }


    .blogs-sort {
        width: 100%;
        justify-content: flex-end;
    }

    .blogs-listing-row {
        row-gap: 45px;
    }

    .blogs-card-image {
        aspect-ratio: 4 / 3;
    }

    .blogs-card-content h3,
    .blogs-card-desc {
        min-height: 0;
    }

    .blogs-listing-pagination {
        margin-top: 55px;
    }

    .blogs-wave-left,
    .blogs-wave-right {
        width: 100%;
    }
}

#st-1 .st-btn {
    border-radius: 50% !important;
    background-color: #ECECEC !important;
    display: inline-flex !important;
}

#st-1 .st-btn>img {
    display: inline-block;
    height: 20px;
    width: 20px;
    position: relative;
    top: 10px;
    vertical-align: top;
}

#st-1 .st-btn img {
    filter: brightness(0);
}

.blog-detail-content {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.blog-detail-content .container-fluid {
    position: relative;
    z-index: 2;
}

.blog-detail-glow-top {
    --gw: 620px;
    --gh: 620px;
    --gr: 620px;
    --gt: -18%;
    --grt: -18%;
}

.blog-detail-glow-left {
    --gw: 520px;
    --gh: 760px;
    --gr: 760px;
    --gt: 25%;
    --gl: -28%;
}

.blog-detail-glow-right {
    --gw: 560px;
    --gh: 740px;
    --gr: 740px;
    --gb: 2%;
    --grt: -50%;
}

.blog-detail-wave-left {
    z-index: 1;
    left: 0%;
    bottom: -10%;
}

.blog-detail-wave-right {
    z-index: 1;
    right: 0%;
    bottom: -8%;
}

.blog-detail-main {
    position: relative;
    padding-bottom: 90px;
}

.blog-detail-header {
    margin-bottom: 55px;
}

.blog-detail-date {
    margin-bottom: 10px;
}

.blog-detail-header h1 {
    margin-bottom: 35px;
}

.blog-detail-share {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-detail-share>span:first-child {
    margin-right: 5px;
}

.blog-detail-share a,
.blog-detail-share button {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease;
}

.blog-detail-share a:hover,
.blog-detail-share button:hover,
.blog-detail-share button.copied {
    background: #fff;
    color: #111;
    transform: translateY(-2px);
}

.blog-detail-x {
    font-size: 16px;
    font-weight: 700;
}

.blog-detail-share-status {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 4;
    display: none;
    padding: 7px 12px;
    border: 1px solid rgba(255, 208, 0, 0.45);
    border-radius: 20px;
    background: rgba(17, 14, 25, 0.94);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    color: var(--color-primary);
    font-size: var(--fs-t12);
    font-weight: 600;
    white-space: nowrap;
    transform-origin: left center;
}

.blog-detail-share-status.animate {
    animation: blog-share-status 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.blog-detail-share-status.error {
    border-color: rgba(255, 112, 112, 0.45);
    color: #ff7070;
}

.blog-detail-copy.copied {
    animation: blog-copy-pulse 450ms ease-out;
}

@keyframes blog-share-status {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.88);
    }

    65% {
        opacity: 1;
        transform: translateY(-2px) scale(1.04);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes blog-copy-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 7px rgba(255, 208, 0, 0.16);
    }

    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

.blog-detail-copy-manual {
    position: absolute;
    top: calc(100% + 34px);
    left: 0;
    z-index: 3;
    width: min(360px, 100%);
    padding: 8px 10px;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    background: #110E19;
    color: #fff;
    display: none;
    font-size: var(--fs-t12);
}

.blog-detail-copy-manual.show {
    display: block;
}

.blog-detail-cover {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 7;
    margin-bottom: 55px;
    border-radius: 16px;
}

.blog-detail-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.blog-detail-body a {
    color: var(--color-primary);
    text-decoration: underline;
}

.blog-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

.blog-detail-gallery {
    margin-top: 45px;
}

.blog-detail-gallery a {
    overflow: hidden;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
}

.blog-detail-gallery img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.blog-detail-back {
    margin-top: 80px;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.blog-detail-back:hover {
    color: var(--color-primary);
}

.blog-detail-back:hover span {
    text-decoration: underline;
}

.blog-detail-sidebar {
    position: sticky;
    top: 110px;
}

.blog-detail-sidebar h2 {
    margin-bottom: 20px;
}

.blog-detail-side-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-detail-side-card {
    overflow: hidden;
    border: 1px solid rgba(206, 206, 206, 0.40);
    border-radius: 16px;
}

.blog-detail-side-date {
    margin: 0;
    padding: 15px 20px 0;
}

.blog-detail-side-card h3 {
    overflow: hidden;
    display: -webkit-box;
    margin: 5px 20px 15px;
    font-size: var(--fs-f14);
    font-weight: 700;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.blog-detail-side-card h3 a {
    /*color: #fff;*/
}

.blog-detail-side-link {
    padding: 15px 20px;
    border-top: 1px solid rgba(206, 206, 206, 0.40);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.blog-detail-side-link.active,
.blog-detail-side-link:hover {
    background: var(--color-primary);
    color: #000;
}

.blog-detail-related {
    position: relative;
}

.blog-detail-related-heading {
    margin-bottom: 55px;
}

.blog-detail-related-heading h2 {
    margin-bottom: 0;
    color: inherit;
}

@media (max-width: 991.98px) {
    .blog-detail-main {
        padding-bottom: 70px;
    }

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

    .blog-detail-cover {
        margin-bottom: 40px;
    }

    .blog-detail-sidebar {
        position: static;
        margin-top: 35px;
    }

    .blog-detail-side-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .blog-detail-side-card {
        width: calc(50% - 9px);
    }

    .blog-detail-related {
        padding: 75px 0 100px;
    }
}

@media (max-width: 767.98px) {
    .blog-detail-header h1 {
        margin-bottom: 28px;
    }

    .blog-detail-cover {
        aspect-ratio: 16 / 9;
    }

    .blog-detail-related-heading {
        margin-bottom: 40px;
    }
}

@media (max-width: 575.98px) {
    .blog-detail-main {
        padding-bottom: 55px;
    }

    .blog-detail-header {
        margin-bottom: 30px;
    }

    .blog-detail-share {
        flex-wrap: wrap;
        gap: 10px;
    }

    .blog-detail-share>span:first-child {
        flex: 0 0 100%;
        margin: 0 0 4px;
    }

    .blog-detail-share-status {
        top: calc(100% + 8px);
    }

    .blog-detail-share a,
    .blog-detail-share button {
        width: 38px;
        height: 38px;
    }

    .blog-detail-cover {
        margin-bottom: 35px;
        border-radius: 12px;
    }

    .blog-detail-body {
        line-height: 1.65;
    }

    .blog-detail-side-list {
        flex-direction: column;
    }

    .blog-detail-side-card {
        width: 100%;
    }

    .blog-detail-related {
        padding: 60px 0 80px;
    }

    .blog-detail-wave-left {
        left: -35%;
        width: 90%;
    }

    .blog-detail-wave-right {
        right: -45%;
        width: 100%;
    }
}

@media(max-width: 575.98px) {
    #st-1 .st-btn {
        padding: 0 7.5px;
        height: 35px;
        line-height: 35px;
    }

    #st-1 .st-btn>img {
        display: inline-block;
        height: 20px;
        width: 20px;
        position: relative;
        top: 7.5px;
        vertical-align: top;
    }
}

/*	------------------------ Blog Page END -------------------------- */


/*	------------------------ Contact US -------------------------- */
/* Contact Banner */
#contact-banner {
    width: 100%;
    height: auto;
    background-image: url('../images/layout/banner-contact-us.webp');
    background-size: cover;
    background-position: center 70%;
    min-height: 400px;
}

/* Contact Info Bar */
#contact-info-bar {
    background-color: #F1F6FF;
}

#contact-info-bar .row {
    --bs-gutter-x: 75px;
}

#contact-info-bar .title-col {
    background-color: transparent;
    display: flex;
    align-items: center;
    margin-bottom: 45px;
}

#contact-info-bar .title-box {
    color: #000;
}

#contact-info-bar .title-box h2 {
    color: #000;
    margin-bottom: 15px;
}

#contact-info-bar .title-box p {
    margin-bottom: 0;
}

#contact-info-bar .info-card-wrapper {
    position: relative;
    height: 100%;

}

#contact-info-bar .info-card-wrapper::before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    width: 50%;
    height: 95%;
    z-index: 0;
    border-radius: 0 40px;
    background: #08A3D3;
}

#contact-info-bar .info-card {
    position: relative;
    padding: 60px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0 32px 0 0;
    z-index: 2;
    background: #FFF;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08), 0 0 4px 0 rgba(0, 0, 0, 0.04);
}

#contact-info-bar .info-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

#contact-info-bar .info-header .icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
}

#contact-info-bar .info-header .icon svg {
    width: 22px;
    height: 22px;
}

#contact-info-bar .info-header h4 {
    margin-bottom: 0;
}

#contact-info-bar .info-content {
    padding-left: 34px;
    color: #555;
}

#contact-info-bar .info-content p {
    margin-bottom: 0;
}

#contact-info-bar .info-content p.note {
    margin-top: 10px;
}

#contact-info-bar .info-content a {
    text-decoration: none;
}

#contact-info-bar .info-content a:hover {
    color: var(--color-primary);
}

#contact-info-bar .contact-group {
    display: block;
}

/* Contact Form Section */
#contact-form-section {
    padding-top: 0;
    padding-bottom: 0;
}

#contact-form-section .form-wrapper {
    width: 100%;
}

#contact-form-section .form-image {
    width: 100%;
    height: 100%;
}

#contact-form-section .form-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 38% center;
}

#contact-form-section .form-container {
    background-color: #FAFAFA;
    height: 100%;
}

#contact-form-section .form-container h2 {
    color: #000;
    margin-bottom: 30px;
}

#contact-form-section .form-container p {
    color: #000;
    margin-bottom: 5px;
    font-weight: 400;
    font-size: var(--fs-24);
}

#contact-form-section .form-group {
    margin-bottom: 30px;
}

#contact-form-section .form-group label {
    display: block;
    color: #000;
    font-weight: 600;
    font-size: var(--fs-f16);
    margin-bottom: 8px;
}

#contact-form-section .form-group .form-control {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    font-size: var(--fs-f16);
    border-radius: 8px;
    border: 1px solid #CECECE;
    background: #FFF;
}

#contact-form-section .form-group .form-control:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary);
}


#contact-form-section .form-group textarea.form-control {
    resize: vertical;
    min-height: 100px;
}


#contact-form-section .loadingDiv {
    color: #fff;
}


/* ── LEFT: Form side ─────────────────────────────────────────────── */

.contact-form-side .contact-title {
    font-weight: 800;
    margin-bottom: 20px;
}


.contact-form-side .contact-desc {
    font-size: var(--fs-t16);
    color: #000;
    margin-bottom: 30px;
}

/* Form fields */
.contact-form-side .form-group {
    margin-bottom: 15px;
}

.contact-form-side .form-control {
    border: 1px solid #CECECE;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: var(--fs-p14);
    background: #fff;
    width: 100%;
    transition: border-color .2s;
    -webkit-appearance: none;
}

.contact-form-side .form-control.enquiry-select {
    background: #F7F7F7;
    appearance: none;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
    font-size: var(--fs-p14);
    color: #555;
    background-size: 16px 12px;
    font-weight: 400;
}

.contact-form-side .form-control:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: none;
}

.contact-form-side .form-control::placeholder {
    color: #555;
}

/* Select arrow */
.contact-select-wrap {
    position: relative;
}

.contact-select-wrap select {
    cursor: pointer;
    padding-right: 40px;
}

/* Two-col row */
.contact-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form-side textarea.form-control {
    resize: none;
    height: 120px;
}


/* ── RIGHT: Info side ────────────────────────────────────────────── */
.contact-info-side {
    background: #F2E9EC;
    border-radius: 0 0 0 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contact-info-side .info-title {
    font-weight: 800;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 30px;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-item .info-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.info-item .info-icon svg,
.info-item .info-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}


.info-item .info-label {
    font-size: var(--fs-t16);
    margin-bottom: 10px;
    font-weight: 600;
}

.info-item .info-text {
    font-size: var(--fs-t14);
    margin-bottom: 0;
}

.info-item .info-text a {
    color: #000;
    text-decoration: none;
}

.info-item .info-text a:hover {
    color: var(--color-primary);
}

/* Notice / loading */
#noticeDiv {
    margin: 0 0 12px;
}

.loadingDiv {
    display: none;
    padding: 8px 0;
    color: #888;
    font-size: 14px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
.table-striped > tbody > tr:nth-of-type(odd) > *{
    background-color: var(--bg);
    color: #fff;
}

.table > :not(caption) > * > *{
    background-color: var(--bg);
    color: #fff;
}

@media (max-width: 767.98px) {
    .contact-row-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media(max-width: 575.98px) {
    .contact-form-side .form-control {
        padding: 15px;
    }
}



/* Map Section */
#contact-map-section {
    padding-bottom: 0;
}

#contact-map-section .social-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

#contact-map-section .social-row h3 {
    margin-right: 20px;
}


.social-row .social-icon {
    height: 50px;
    position: relative;
    margin: 0;
    border: none;
    cursor: pointer;
    /* padding: 5px; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.social-row .social-icon svg {
    transition: transform .25s ease;

}


.social-row .social-icon:hover {
    transform: scale(1.1);
}

.mapiframediv iframe {
    width: 100%;
    height: 100%;
}

.mapiframediv {
    display: block;
    width: 100%;
    height: 450px;
    position: relative;
}

/* Contact Page Responsive */
@media (max-width: 991.9px) {
    #contact-info-bar .info-card {
        padding: 20px;
    }


    #contact-form-section .form-image {
        min-height: 300px;
    }
}

@media (max-width: 767.9px) {
    #contact-banner .banner-image {
        max-height: 300px;
    }

    #contact-info-bar .info-header {
        margin-bottom: 5px;
    }

    #contact-info-bar .col-md-4 {
        margin-bottom: 15px;
    }

    #contact-info-bar .col-md-4:last-child {
        margin-bottom: 0;
    }

    #contact-info-bar .info-card {
        min-height: 200px;
    }
}

@media (max-width: 575.9px) {
    #contact-banner {
        background-position: 40% center;
        min-height: 300px;
    }

    #contact-info-bar .info-header .icon svg {
        width: 18px;
        height: 18px;
    }

    #contact-info-bar .row {
        --bs-gutter-x: 30px;
    }

}

/* Contact Page Redesign */
.contact-page {
    position: relative;
    overflow: hidden;
}

.contact-page .container-fluid {
    position: relative;
    z-index: 2;
}

.contact-page-glow-left {
    --gw: 520px;
    --gh: 680px;
    --gr: 680px;
    --gt: 5%;
    --gl: -25%;
    --go: 0.2;

}

.contact-page-glow-left-1 {
    --gw: 520px;
    --gh: 680px;
    --gr: 680px;
    --gt: 35%;
    --gl: -30%;
    --go: 0.2;

}

.contact-page-glow-left-2 {
    --gw: 520px;
    --gh: 680px;
    --gr: 680px;
    --gt: 68%;
    --gl: -25%;
    --go: 0.2;
}

.contact-page-glow-right {
    --gw: 560px;
    --gh: 700px;
    --gr: 700px;
    --gt: 8%;
    --grt: -28%;
    --go: 0.2;
}

.contact-page-glow-right-1 {
    --gw: 560px;
    --gh: 700px;
    --gr: 700px;
    --gt: 47%;
    --grt: -28%;
    --go: 0.2;
}

.contact-page-wave-right {
    z-index: 1;
    top: 2%;
    right: 0;
    left: 0;
}

.contact-page-main {
    padding-bottom: 110px;
}

.contact-page-heading {
    margin-bottom: 55px;
}

.contact-page-heading h1 {
    margin-bottom: 20px;
}

.contact-page-heading p {
    max-width: 920px;
    margin: 0 auto;
    color: #CECECE;
}

.contact-page-map {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 410px;
    margin-bottom: 30px;
    border-radius: 16px;
    background: #0B0C11;
}

.contact-page-map::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, #FFC800 0%, #D5BBF2 100%);
    pointer-events: none;
    -webkit-mask:
        linear-gradient(#FFFFFF 0 0) content-box,
        linear-gradient(#FFFFFF 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.contact-page-map iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    filter: invert(92%) hue-rotate(0deg) brightness(88%) contrast(115%) saturate(110%);
}

.contact-page-info-row {
    position: relative;
    z-index: 2;
}

.contact-page-card {
    position: relative;
    width: 100%;
    min-height: 300px;
    padding: 35px 30px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.contact-page-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, #FFC800 0%, #D5BBF2 100%);
    pointer-events: none;
    -webkit-mask:
        linear-gradient(#FFFFFF 0 0) content-box,
        linear-gradient(#FFFFFF 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.contact-page-card-icon {
    width: auto;
    height: 50px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-page-card-icon svg {
    height: 100%;
}

.contact-page-card-icon svg path {
    /* fill: var(--color-primary); */
}

.contact-page-card h2 {
    margin-bottom: 10px;
}

.contact-page-card p {
    margin-bottom: 0;
}


.contact-page-card p a:hover {
    color: var(--color-primary);
}

.contact-page-email-title {
    margin-top: 28px;
}

.contact-page-map-links {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.contact-page-map-links a {
    color: #E4E4E4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: underline;
}

.contact-page-map-links a:hover {
    color: var(--color-primary);
}

.contact-page-map-links svg {
    width: 30px;
    height: 30px;
}

.contact-page-social {
    margin-top: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.contact-page-social h2 {
    margin: 0 15px 0 0;
}

.contact-page-social a {
    width: 50px;
    height: 50px;
    display: inline-flex;
    transition: transform 200ms ease;
}

.contact-page-social a:hover {
    transform: translateY(-4px);
}

.contact-page-social svg {
    width: 100%;
    height: 100%;
}

#contact-form-section.contact-page-form {
    padding: 0;
    background: #FFFFFF;
}

.contact-page-form-image {
    width: 100%;
    height: 100%;
    min-height: 900px;
}

.contact-page-form-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.contact-page-form-content {
    width: 100%;
    height: 100%;
    min-height: 760px;
    padding: 60px;
    background: #FFFFFF;
    color: #111111;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-page-form-label {
    margin-bottom: 5px;
    color: #000;
}

.contact-page-form-content h2 {
    margin-bottom: 30px;
    color: #000;
}

.contact-page-form-content .form-group {
    margin-bottom: 30px;
}

.contact-page-form-content label {
    margin-bottom: 10px;
    color: #000;
    display: block;
    font-weight: 600;
}

.contact-page-form-content .form-control {
    width: 100%;
    min-height: 50px;
    padding: 12px 15px;
    border: 1px solid #CECECE;
    border-radius: 8px;
    background: #FFFFFF;
    color: #000;
    box-shadow: none;
}

.contact-page-form-content .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px #FFF0A3;
}

.contact-page-form-content select.form-control {
    cursor: pointer;
}

.contact-page-form-content textarea.form-control {
    min-height: 125px;
    resize: vertical;
}

.contact-page-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
}

.contact-page-form #noticeDiv {
    margin: 0 0 20px;
}

.contact-page-form .loadingDiv {
    display: none;
    padding: 12px 0;
    color: #555555;
}

@media (max-width: 991.98px) {
    .contact-page-main {
        padding-bottom: 85px;
    }

    .contact-page-map {
        height: 350px;
    }

    .contact-page-card {
        min-height: 280px;
        padding: 30px 20px;
    }

    .contact-page-form-image,
    .contact-page-form-content {
        min-height: 620px;
    }
}

@media (max-width: 767.98px) {
    .contact-page-heading {
        margin-bottom: 40px;
    }

    .contact-page-map {
        height: 310px;
    }

    .contact-page-card {
        min-height: 250px;
    }

    .contact-page-social {
        margin-top: 65px;
    }

    .contact-page-form-image {
        min-height: 440px;
    }

    .contact-page-form-content {
        min-height: 0;
        padding: 60px 30px;
    }
}

@media (max-width: 575.98px) {
    .contact-page-main {
        padding-bottom: 65px;
    }

    .contact-page-map {
        height: 270px;
        border-radius: 12px;
    }

    .contact-page-social {
        flex-wrap: wrap;
        gap: 15px;
    }

    .contact-page-social h2 {
        flex: 0 0 100%;
        margin: 0 0 10px;
        text-align: center;
    }

    .contact-page-form-image {
        min-height: unset;
        max-height: 250px;
    }

    .contact-page-form-content {
        padding: 45px 20px;
    }

    .contact-page-wave-left {
        left: -45%;
        width: 110%;
    }

    .contact-page-wave-right {
        right: -55%;
        width: 120%;
    }
    
    /*.contact-page-card{*/
    /*    flex-direction: row;*/
    /*    text-align: left;*/
    /*    align-items: flex-start;*/
    /*    justify-content: center;*/
    /*    gap: 30px;*/
    /*    min-height: 200px;*/
    /*}*/
    
    /*.contact-page-card .contact-page-card-icon{*/
    /*    height: 30px;*/
    /*    margin-bottom: 0;*/
    /*}*/
    
    /*.contact-page-map-links{*/
    /*    justify-content: flex-start;*/
    /*}*/
}

/*	------------------------ Contact Page END -------------------------- */


/*	------------------------ Cart -------------------------- */

#content.cart_view,
#content.billing_view {
    padding-top: 30px;
    padding-bottom: 30px;
}

.process-steps {
    padding: 0;
}

ul.process-steps.process-3 {
    max-width: 780px;
    margin: 0 auto 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
}

.process-steps.process-3 li {
    float: none;
    width: 100%;
    flex: 0 0 33.3333%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
}

.process-steps.process-3 li:first-child {
    justify-content: flex-start;
}

.process-steps.process-3 li:last-child {
    justify-content: flex-end;
}

.process-steps li h6 {
    margin: 15px 0 0 0;
    padding: 0 10px;
}

.process-steps li .innerbox {
    z-index: 2;
    position: relative;
}

#content.cart_view .process-steps li:after,
#content.cart_view .process-steps li:before,
#content.billing_view .process-steps li:after,
#content.billing_view .process-steps li:before {
    width: calc(100% - 53px);
}


#content.cart_view .cart .quantity .plus,
#content.cart_view .cart .quantity .minus {
    border: none;
    display: block;
    cursor: pointer;
    background-color: transparent;
    color: #fff;
    font-weight: 100;
    line-height: 1;
    text-align: center;
    padding: 0;
    height: 100%;
    width: calc((100% - 35px) / 2);
}

#content.cart_view .cart .quantity .minus {
    font-size: 14px;
}

#content.cart_view .cart .quantity .plus {
    font-size: 22px;
}

#content.cart_view .cart .quantity .plus:hover,
#content.cart_view .cart .quantity .minus:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#content.cart_view .cart .quantity .qty {
    border: 1px solid #cecece;
    background-color: transparent;
    height: 100%;
    width: 35px;
    font-size: 14px;
    text-align: center;
    line-height: 1;
    margin-bottom: 0;
    font-weight: 600;
    color: #fff;
}

#content.cart_view .cart .quantity {
    margin: 0;
    height: 35px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

#content.cart_view .subDisc del {
    font-size: 13px;
}

#content.cart_view .subDisc strong {
    font-weight: 700;
}

#addVouc .button3 {
    display: flex;
    text-align: center;
    height: 100%;
    width: 100%;
    font-weight: 700;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.cart_totals td {
    padding: 20px 0;
    color: #fff;
}

.cart_totals .cart tr:first-child td {
    border-top: 1px solid #d6d6d6;
}

.cart_totals .cart tr:last-child td {
    border-bottom: none;
}

.cart_totals .cart td strong {
    font-weight: 600;
}

.cart_totals .cart tr td:last-child {
    text-align: right;
}

.cart_totals .cart tr:last-child td:last-child .amount.color.lead {
    font-size: 16px;
    color: #fff;
}

#mycarttotal {
    font-size: 20px;
    font-weight: 600;
}

#sttotal2 {
    color: #fff;
    line-height: 25px;
    display: inline-block;
    padding-right: 10px;
}

.cartDiv .attrDesc {
    font-size: 14px;
}

.cartTerms {
    font-size: 12px;
    color: #555555;
}

.cartTerms .pTitle {
    color: #555555;
    font-weight: bold;
}

#voucher.form-control {
    height: 45px;
    border-radius: 8px;
}

#voucher+.button {
    text-transform: uppercase;
    font-weight: 700;
    width: 100%;
    height: 100%;
}

/*	------------------------ Cart END -------------------------- */


/*	------------------------ Billing END -------------------------- */

.buyforrow+hr {
    border-top: 1px solid #d6d6d6;
    margin-top: 25px;
    margin-bottom: 35px;
    opacity: 1;
}

.billing_view label {
    color: #233745;
    font-weight: 600;
}

.billing_view form#ePayment {
    max-width: 900px;
    margin: 15px auto 0;
}

.billing_view form#ePayment>.row,
.billing_view form#ePayment>.buyfordiv {
    max-width: 740px;
    margin: 0 auto;
}

#someoneelse {
    max-width: 740px;
    margin: 0 auto;
}

label .error {
    color: red;
}

.billing_view form#ePayment h4 {
    margin-bottom: 5px;
}

.billing_view form#ePayment h4+.row label {
    margin-top: 20px;
    margin-bottom: 8px;
}

.billing_view .style-msg {
    margin: 0 auto 35px;
    max-width: 780px;
}

/*	------------------------ Billing END -------------------------- */


/*	------------------------ Confirm -------------------------- */

.custinfo {
    color: #242422;
}

.custinfo strong {
    font-weight: 600;
}

.whitespace {
    white-space: nowrap;
}

.confirm_view table {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

.confirm_view table th {
    background-color: var(--color-primary-dark);
    color: #000;
    padding: 10px;
    font-weight: 600;
}

.confirm_view table td {
    padding: 15px;
    border-bottom: 1px solid #d6d6d6;
    background-color: var(--bg);
    color: #fff;
}

.confirm_view img.displayImg {
    height: 75px;
    width: 75px;
    object-fit: cover;
}

.confirm_view td:has(img)+td a {
    font-weight: 600;
    color: #fff;
}

.confirm_view .td-qty .qty {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border: 1px solid #cecece;
    background-color: transparent;
    height: 100%;
    width: 35px;
    height: 35px;
    font-size: 14px;
    text-align: center;
    line-height: 1;
    font-weight: 600;
    color: #242422;
}

.confirm_view td.td-qty+td,
.confirm_view td.td-qty+td+td {
    font-weight: 600;
    color: #242422;
}

.confirm_view table td .subDisc {
    font-size: 14px;
}

.confirm_view .subDisc del {
    color: #242422;
}

.confirm_view table td .subDisc span {
    color: #ec2227;
}

.confirm_view .subDisc strong {
    font-weight: 700;
    color: #fff;
}

.confirm_view #sttotal {
    font-size: 15px;
    color: #fff;
    line-height: 25px;
}

.confirm_view .subtotal {
    color: #fff;
    padding: 5px 20px;
    float: right;
    margin-top: 0;
    font-size: 16px;
    font-weight: 600;
}

.confirm_view .discount {
    color: #fff;
    /*background-color:#ebebeb;*/
    float: right;
    margin-top: 0;
    width: 100%;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
}

.confirm_view .discountcon {
    padding: 5px 20px;
}

.confirm_view .tax {
    color: #fff;
    padding: 5px 20px;
    float: right;
    width: 100%;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
}

.confirm_view #sttotal2 {
    color: #000;
    font-size: 14px;
}

.confirm_view .subtotal #sttotal,
.confirm_view .discount #sttotal,
.confirm_view .tax #sttotal {
    font-size: 14px;
    color: #fff;
    line-height: 25px;
    font-weight: normal;
}

.confirm_view #mycarttotal {
    font-size: 16px;
}

.confirm_view .ttotal {
    color: #000;
    background-color: var(--color-primary-dark);
    float: right;
    margin-top: 5px;
    margin-bottom: 30px;
    line-height: 25px;
    width: 100%;
    text-align: right;
}

.confirm_view .ttotalcon {
    padding: 5px 20px;
    font-size: 18px;
    font-weight: 600;
}

.confirm_view .ttotalcon #mycarttotal {
    font-size: 18px;
}


/*	------------------------ Confirm END -------------------------- */


/*	------------------------ Responsive -------------------------- */

@media(min-width: 1600px) {
    #content.bloglistview .featured3blogs {
        justify-content: flex-start;
    }

    #content.bloglistview a:has(.smallcontent) {
        margin-bottom: 15px;
    }

    #content.bloglistview a:has(.smallcontent):last-child {
        margin-bottom: 0;
    }
}

@media(max-width: 1399.9px) {

    /* h1,
    .h1 {
        font-size: 35px;
    }

    h2,
    .h2 {
        font-size: 24px;
    }

    h3,
    .h3 {
        font-size: 20px;
    } */


    .bannerstyle {
        padding-right: 15px;
        padding-left: 15px;
    }

    .facilitiespage.bannerstyle {
        padding: 0;
    }

    .container-fluid {
        max-width: calc(100% - 30px);
    }
}

@media(min-width: 1200px) and (max-width: 1399.9px) {
    #content.homepage .col-xl-3 {
        width: 30%;
    }

    #content.aboutuspage .container-fluid {
        max-width: calc(100% - 60px);
    }
}

@media(min-width: 768px) and (max-width: 1199.9px) {
    #content.homepage .col-xl-3 {
        width: 40%;
    }

    #content.homepage {
        background-size: 60% auto !important;
    }
}

@media(max-width: 1199.9px) {

    /*.top-search-open .header-inner-flexbox{width: calc(100% - 450px);}*/
    /*.header-inner-flexbox{width: calc(100% - 200px);}*/
    #primary-menu>div>ul>li>a {
        padding: 20px 5px;
    }

    .top-search-open #top-search form {
        width: 100%;
    }

    #header .header-info .infobox.others svg {
        padding: 0 10px;
    }

    #primary-menu ul li a+ul.category-nav:before {
        left: 50px;
    }


    #slider~#content,
    #sliderm~#content {}

    /*padding-top: 40px; padding-bottom: 40px;*/

    .product-desc .product-title {
        font-size: 22px;
    }

    #settingstandard {
        aspect-ratio: auto;
        position: relative;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #settingstandard:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-image: url('../images/layout/settingstandard.webp?v1');
        background-position: right top;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #banner.aboutuspage {
        background-position: center top;
    }

    #banner.aboutuspage .container-fluid {
        height: auto;
    }

    #content.aboutuspage .container-fluid {
        max-width: calc(100% - 30px);
        margin-top: -40px;
        padding-top: 40px;
    }

    #content.doctordetailpage .box .scheduletable {
        padding: 20px;
    }

    #content.bloglistview .featured3blogs {
        flex-direction: row;
        flex-wrap: wrap;
    }

    #content.bloglistview a:has(.smallcontent) {
        max-width: 33.3333%;
    }

    #banner.contactuspage .container-fluid .row>.col-12 {
        max-width: 50%;
    }

    #banner.contactuspage {
        aspect-ratio: auto;
        background-position: center top;
    }

    .contact_grid {
        padding: 25px 10px;
        align-content: center;
    }

    .contactinfo-section .contact_grid .iconbox {
        width: 40px;
        height: 40px;
    }

    .contactinfo-section .contact_grid .textbox {
        padding-left: 10px;
        width: calc(100% - 40px);
    }

    .contactinfo-section .contact_grid .textbox a {
        font-size: 20px;
    }

    .addtocart_button .button {
        padding: 15px 35px;
        width: auto;
    }
}

@media(max-width: 991.9px) {
    #primary-menu-container {
        display: none;
    }

    #header {
        position: sticky;
        top: 0;
        z-index: 999;
        background-color: #110E19;
        border-bottom: 1px solid #CECECE;
    }

    .top-message .flexbox {
        justify-content: center;
    }

    .top-message .content p {
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
    }

    .top-message .content p a {
        white-space: nowrap;
    }


    .slider-caption h2 {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .slider-caption .button3,
    .button,
    .button2,
    .button3,
    .button-outlined,
    .button3+.button-outlined {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding: 0 20px;
    }

    .docSearchForm input {
        padding: 0 15px;
        width: 30%;
        font-size: 14px;
    }

    .docSearchForm select {
        padding: 0 15px;
        width: 32%;
        font-size: 14px;
    }

    .docSearchForm a#docSubmit {
        font-size: 16px;
        font-weight: 600;
        margin-left: 0;
        padding-left: 15px;
    }

    .docSearchForm a#docSubmit span {
        margin-top: 0;
        margin-left: 5px;
    }

    .docSearchForm a#docSubmit svg {
        width: 20px;
    }

    #searchdoctorform+section,
    #searchdoctorform+div {
        margin-top: 0;
        padding-top: 40px;
    }

    #content.homepage {
        aspect-ratio: auto;
        position: relative;
    }

    #content.homepage:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        width: 60%;
        height: 100%;
        background-image: url(../images/layout/WELLNESS_LOUNGE.webp?v1);
        background-position: right top;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #content.homepage .content {
        padding-top: 0;
        padding-bottom: 0;
    }

    #settingstandard:after {
        background-position: center top;
    }

    #whyus .pointsrow .content {
        padding: 40px 20px;
    }


    .facilities_slider {
        margin-top: 30px;
    }

    .facilities_slider .oc-item .facilitycontent {
        width: calc(100% - 50px);
    }

    #content.doctordetailpage .box .schedulebutton {
        height: auto;
    }

    #content.doctordetailpage .box .bookappointment {
        height: auto;
    }

    #content.bloglistview .smallcontent {
        flex-direction: column;
        max-height: max-content;
    }

    #content.bloglistview .smallcontent .imagecol {
        width: 100%;
    }

    #content.bloglistview .smallcontent .textcol {
        width: 100%;
    }

    .contact_grid {
        padding: 25px 5px;
    }

    .contactinfo-section .contact_grid .textbox a {
        font-size: 16px;
    }

    .product_detail_view .blog_side_cat {
        margin-top: 30px;
    }
}

@media(max-width: 916.9px) {}

@media(max-width: 864.9px) {
    /* #header .header-info .infobox {
        padding: 0 10px;
    }

    #header .header-info .infobox.top-contact .flexbox .text {
        padding-right: 7px;
    }

    #header .header-info .infobox.top-contact .flexbox .text span {
        font-size: 11px;
    }

    #header .header-info .infobox.others svg {
        padding: 0 10px;
        height: 20px;
    } */
}

@media(max-width: 767.9px) {

    /* h2,
    .h2 {
        font-size: 24px;
    }

    h3,
    .h3,
    .homeproduct .product-desc .product-title,
    .homeproduct .product-desc .product-price ins {
        font-size: 18px;
    }

    h4,
    .h4 {
        font-size: 16px;
    }

    h5,
    .h5,
    .homeproduct .product-desc .product-price del {
        font-size: 14px;
    }

    h6,
    .h6 {
        font-size: 14px;
    } */

    small,
    .sm-text {
        font-size: 10px;
    }

    #sliderm {
        aspect-ratio: 1350 / 600;
    }

    #sliderm .swiper-pagination {
        bottom: 20px !important;    
        width: 100%;
        left: unset;
        right: unset;
    }

    .tag,
    .homeproduct .discount-tag .percentage,
    .product_detail_view .product-desc1 .prodCat {
        font-size: 10px;
    }

    .light-text {
        font-size: 10px;
    }

    .cta-text,
    .button {
        font-size: 14px;
    }

    #footerSocialContacts .socialmedia {
        justify-content: flex-start;
        margin-top: 15px;
    }

    #footerSocialContacts .socialmedia .col {
        max-width: max-content;
    }

    #footerSocialContacts .socialmedia a {
        margin-right: 10px;
    }

    #footerSocialContacts .socialmedia a svg {
        width: 20px;
    }

    .docSearchForm {
        padding: 0;
        border-radius: 15px;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .docSearchForm input {
        width: 100%;
        padding-top: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #dddddd;
    }

    .docSearchForm select {
        width: 50%;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .docSearchForm select:first-of-type {
        border-left: none;
    }

    .docSearchForm a#docSubmit {
        width: 100%;
    }

    #content.homepage {
        padding-bottom: 0 !important;
    }

    #content.homepage:after {
        position: relative;
        width: 100%;
        bottom: 0;
        aspect-ratio: 957 / 708;
    }

    #content.homepage .content p:has(.button3) {
        margin-top: 20px;
        margin-bottom: 40px !important;
    }


    #settingstandard .container-fluid>.row {
        align-items: flex-start;
    }

    #settingstandard .flexbox {
        flex-direction: row;
        flex-wrap: wrap;
    }

    #settingstandard .flexbox .box {
        margin-bottom: 15px;
    }

    #settingstandard .flexbox .box:last-child {
        margin-bottom: 0;
    }

    #settingstandard .flexbox span.number {
        font-size: 40px;
    }

    #settingstandard {
        aspect-ratio: 9 / 10;
        position: relative;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #settingstandard:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-image: url('../images/layout/RB-Home-Btm.webp?v1');
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #whyus .pointsrow.row>.col-12:nth-child(1),
    #whyus .pointsrow.row>.col-12:nth-child(2) {
        margin-bottom: 24px;
    }



    .ctabox {
        background-position-x: 20%;

    }

    .ctabox .content .h1,
    .ctabox .content .h3,
    .ctabox .content p {
        justify-content: center;
    }

    #banner.aboutuspage {
        aspect-ratio: 900 / 1200;
        background-size: cover;
        background-position: bottom center;
        background-image: url(../images/layout/RB-About-top.webp);
    }

    #banner.aboutuspage h3+svg {
        position: absolute;
        bottom: 80px;
    }

    #visionmission .imagecol {
        margin-bottom: 30px;
    }

    #obesity_treatment_survivor {
        background-color: #8a8f88;
        background-image: url(../images/layout/RB-About-Btm-Obesity-mobile3.webp);
        background-size: cover;
        background-position: center bottom;
        aspect-ratio: 900 / 1000;
    }

    .bannerstyle .container-fluid {
        aspect-ratio: 900 / 1000;
        background-size: cover;
        background-position: center 90% !important;
        overflow: hidden;
        position: relative;
    }

    .bannerstyle .container-fluid:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.61) 0%, rgba(0, 0, 0, 0.00) 100%);
        z-index: 1;
    }

    .bannerstyle .container-fluid>* {
        z-index: 2;
        position: relative;
    }

    .pointsrow .content {
        padding: 35px 20px;
    }

    .specialtypointsrow .content {
        padding: 20px;
    }

    .verticaltabs .nav-underline .nav-link {
        font-size: 14px;
        padding: 10px 15px;
    }

    .verticaltabs .nav-underline .nav-link:after {
        font-size: 20px;
    }

    .specialtytablerow .col-12 .content {
        margin-bottom: 15px;
    }

    .specialtytablerow .col-12:last-child .content {
        margin-bottom: 0;
    }

    .specialtytablerow .col-12 .content p:last-child {
        border-bottom: 1px solid #cecece;
    }

    .facilitiespage.bannerstyle .container-fluid {
        aspect-ratio: 900 / 1000 !important;
        background-size: cover;
        background-position: center 90% !important;
        overflow: hidden;
        position: relative;
        align-content: flex-start !important;
    }

    .facilitiespage.bannerstyle .container-fluid:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.61) 0%, rgba(0, 0, 0, 0.00) 100%);
        z-index: 1;
    }

    .facilitiespage.bannerstyle .container-fluid>* {
        z-index: 2;
        position: relative;
    }

    .facilitiespage.bannerstyle .container-fluid svg {
        position: absolute;
        bottom: 60px;
    }

    #facilities .content .content {
        height: auto;
        margin-bottom: 15px;
    }

    #facilities .content .col-12:last-child .content {
        margin-bottom: 0;
    }

    #content.bloglistview .smallcontent .textcol {
        padding: 15px;
    }

    #banner.contactuspage {
        position: relative;
        aspect-ratio: 9 / 12;
        background-position: center 70%;
        background-size: cover;
        background-image: url('../images/layout/contact-banner-m.webp');
    }

    #banner.contactuspage:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 80%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.61) 0%, rgba(0, 0, 0, 0.00) 100%);
        z-index: 1;
    }

    #banner.contactuspage .container-fluid {
        position: relative;
        z-index: 2;
    }

    #banner.contactuspage .container-fluid .row {
        align-items: flex-start;
    }

    #banner.contactuspage .container-fluid .row>.col-12 {
        max-width: 100%;
    }

    .contactinfo-section:nth-child(2) {
        border: none;
        border-top: 1px solid #CECECE;
        border-bottom: 1px solid #CECECE;
    }

    #careerbanner .flexbox {
        flex-direction: row;
        flex-wrap: wrap;
    }

    #careerbanner {
        aspect-ratio: 9 / 10;
        background-size: cover;
        background-position: center bottom;
        background-image: url('../images/layout/RB-Contact-Career-Btm.webp');
    }

    #content.product_detail_view .content:has(> .titlesec) {
        padding-left: 0;
        padding-right: 0;
    }

    #content.product_detail_view .titlesec {
        margin-top: 30px;
    }

    #reports .middlecol {
        padding-top: 30px;
    }

    .widget>h4 {
        margin-top: 20px;
    }

    .footer-follow-title {
        margin-bottom: 10px;
    }

}

@media(max-width: 604.9px) {

    #sliderm {
        aspect-ratio: 1350 / 600;
    }

    #sliderm .swiper-pagination {
        bottom: 20px !important;
    }
}

@media(max-width: 575.9px) {



    .ctabox {
        padding: 60px 0;
        min-height: 750px;
        background: url(../images/layout/bg-cta-mb.webp) left bottom -50px / cover no-repeat;
    }

    .container {
        max-width: calc(100% - 30px);
    }

    #sliderm .slider-caption {
        padding-top: 40px;
    }


    #footer .footer-widgets-wrap>.row>.col {
        width: 100%;
    }

    #footer .footer-widgets-wrap {
        padding: 30px 0;
    }

    .widget_links li {
        padding-top: 5px;
    }

    .docSearchForm input {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #featured-package .product-price del {
        font-size: 12px;
    }

    #sliderm,
    #banner.aboutuspage {
        aspect-ratio: 900 / 1300;
    }

    .slider-caption h2 {
        /*font-size: 18px;*/
    }

    #settingstandard {
        aspect-ratio: 9 / 16;
    }

    #obesity_treatment_survivor {
        aspect-ratio: 900 / 1100;
    }

    .bannerstyle .container-fluid {
        aspect-ratio: 900 / 1100;
        padding: 60px 40px !important;
    }


    .pointsrow .col:last-child .content,
    .pointsrow .col-12:last-child .content {
        margin-bottom: 0;
    }

    .specialtypointsrow .content {
        height: auto;
        margin-bottom: 15px;
    }

    .specialtypointsrow .col:last-child .content,
    .specialtypointsrow .col-12:last-child .content {
        margin-bottom: 0;
    }

    .verticaltabs .tab-content {
        margin-top: 30px;
    }

    .facilitiespage.bannerstyle .container-fluid {
        aspect-ratio: 900 / 1100 !important;
    }

    .blog_side_cat {
        margin-bottom: 30px;
    }

    #content.bloglistview .bigcontent .imagecol,
    #content.bloglistview a:has(.smallcontent) {
        margin-bottom: 15px;
    }

    #content.bloglistview .bigcontent .imagecol img,
    #content.bloglistview .smallcontent .imagecol {
        aspect-ratio: 6 / 4;
    }

    #content.bloglistview a:has(.smallcontent) {
        max-width: 100%;
        width: 100%;
    }

    .blogdetailview .flexbox:has(.titlesec) {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .blogdetailview .flexbox .titlesec,
    .blogdetailview .flexbox .sharesec {
        width: 100%;
    }

    .blogdetailview .flexbox .sharesec {
        justify-content: center;
    }

    .blogdetailview .flexbox {
        margin-bottom: 30px;
    }

    .blog_side_cat h4 {
        margin-bottom: 20px;
    }

    .blogdetailview .blog_side_cat {
        margin-top: 30px;
    }

    #banner.contactuspage {
        aspect-ratio: 9 / 15;
    }
}

@media(max-width: 514.9px) {
    .ctabox .content {
        width: 100%;
    }
}

@media(max-width: 476.9px) {
    #header .header-info .infobox.others svg {
        padding: 0 8px;
    }

    #header .header-info .infobox.others li#top-cart svg {
        padding-right: 0;
    }

    #sliderm,
    #banner.aboutuspage {
        aspect-ratio: 900 / 1300;
    }

    #settingstandard {
        aspect-ratio: 9 / 20;
    }

    #obesity_treatment_survivor {
        aspect-ratio: 900 / 1200;
    }

    .bannerstyle .container-fluid {
        aspect-ratio: 900 / 1300;
        padding: 60px 30px !important;
    }

    .bannerstyle .container-fluid .content {
        padding: 0 20px !important;
    }

    .facilitiespage.bannerstyle .container-fluid {
        aspect-ratio: 900 / 1300 !important;
    }

    #updates .newsrow h4 {
        height: auto;
    }

    section {
        overflow: hidden;
    }

    #banner.contactuspage {
        aspect-ratio: 9 / 19;
    }

    #logo img {
        height: 25px;
    }
}

@media(max-width: 359.9px) {}

@media(max-width: 333.9px) {
    .header-inner-flexbox {
        /*width: calc(100% - 85px);*/
    }
}

@media(max-width: 279.9px) {

    #primary-menu-trigger,
    #page-submenu-trigger {
        width: 35px;
    }
}

/* ----------------------- Mobile Header Layout (< 992px) ----------------------- */
@media (max-width: 991.98px) {
    #header {
        border-bottom: 0;
    }

    .global-search-inner {
        padding-top: 60px 0;
    }

    #header .header-outter-flexbox {
        display: block;
        height: auto;
        padding: 10px 0;
    }

    #header .header-inner-flexbox {
        width: 100%;
    }

    #header .mobile-header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Hamburger menu - Left */
    #header #primary-menu-trigger {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        order: 1;
        width: 40px;
        height: 40px;
    }

    /* Logo - Center */
    #header #logo {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        order: 2;
        margin: 0;
    }

    #header #logo img {
        max-width: 200px;
    }

    /* Mobile Search Trigger - Right */
    #mobile-search-trigger,
    #top-search-trigger-m {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: auto;
        height: 40px;
        cursor: pointer;
        order: 3;
    }

    #top-search-trigger-m:hover i,
    #mobile-search-trigger:hover i {
        color: var(--color-primary);
    }

    /* Mobile: account / cart / logout icons */
    #header .mobile-header-icons {
        display: flex;
        align-items: center;
        gap: 12px;
        order: 4;
        margin-left: 12px;
    }

    #header .mobile-header-icons .mhi-icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: #fff;
    }

    #header .mobile-header-icons .mhi-icon svg {
        width: 20px;
        height: 20px;
    }

    #header .mobile-header-icons .mhi-cart-qty {
        position: absolute;
        top: -7px;
        right: -9px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: red;
        color: #fff;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
        font-weight: 700;
    }

    .top-search-open .mobile-header-icons {
        display: none !important;
    }

    /* Mobile Search Form - hidden by default */
    #mobile-search-form {
        display: none !important;
    }

    /* When search is open on mobile */
    .top-search-open #primary-menu-trigger,
    .top-search-open #logo,
    .top-search-open #top-search-trigger-m,
    .top-search-open #mobile-search-trigger {
        display: none !important;
    }

    .top-search-open #mobile-search-form {
        display: flex !important;
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    #mobile-search-form form {
        flex: 1;
        display: flex;
        align-items: center;
        background-color: #f5f5f5;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 0;
    }

    #mobile-search-form form input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        padding: 10px 14px;
        font-size: 14px;
        color: #333;
        font-family: 'Inter', sans-serif;
    }

    #mobile-search-form form input::placeholder {
        color: #999;
    }

    #mobile-search-form .mobile-search-submit {
        border: none;
        background: transparent;
        padding: 10px 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    #mobile-search-form .mobile-search-submit svg {
        width: 16px;
        height: 16px;
    }

    #mobile-search-close {
        border: none;
        background: transparent;
        padding: 8px;
        cursor: pointer;
        font-size: 18px;
        color: #333;
        display: flex;
        align-items: center;
    }
}

/* Desktop: Hide mobile search trigger */
@media (min-width: 992px) {

    #top-search-trigger-m,
    #mobile-search-trigger {
        display: none !important;
    }
}

/*	------------------------ Responsive END -------------------------- */

.floating-action-buttons {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.whatsapp-button {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.whatsapp-button:hover {
    transform: scale(1.1);
}

.whatsapp-button svg {
    width: 50px;
    height: 50px;
}

#gotoTop {
    position: static;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #595959;
    border-radius: 50%;
    color: #595959;
    font-size: 30px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    line-height: unset;
}

#gotoTop.show {
    opacity: 1;
    visibility: visible;
}

#gotoTop:hover {
    background: var(--color-primary);
    color: #000;
    border-color: var(--color-primary);
}

/* Mobile responsive */
@media (max-width: 767.98px) {
    .floating-action-buttons {
        bottom: 20px;
        right: 20px;
        gap: 12px;
    }

    .whatsapp-button {
        width: 50px;
        height: 50px;
    }

    .whatsapp-button svg {
        width: 50px;
        height: 50px;
    }

    #gotoTop {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
}

/* Continuous linear scroll for gallery carousel */
.recent-gallery-carousel .owl-stage {
    transition-timing-function: linear !important;
}





.hp-section-tag {
    display: inline-block;
    font-size: var(--fs-t12);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* ============================================
   Page: FAQ
   ============================================ */
.faq-content {
    position: relative;
    overflow: hidden;
}

.faq-content .hp-wave-faq {
    bottom: -46%;
    right: 0;
    left: 0;
}

.faq-section {
    position: relative;
    z-index: 1;
}

.faq-heading {
    margin: 0 auto 60px;
}

.faq-heading h1 {
    margin-bottom: 20px;
    color: #fff;
}

.faq-list {
    margin: 0 auto;
}

/* intro paragraph typed in CKEditor above the toggles */
.faq-list > p {
    text-align: center;
    font-size: var(--fs-p14);
    margin-bottom: 30px;
}

/* ── Accordion rows (CKEditor .toggle markup) ──
   Overrides the theme defaults (css/theme/style.css):
   no grey title bg, icon moves to the right as a circle. */
.faq-list .toggle {
    margin: 0;
    border-bottom: 1px solid rgba(206, 206, 206, 0.40);
}

.faq-list .toggle .togglet,
.faq-list .toggle .toggleta {
    background-color: transparent;
    padding: 20px 50px 20px 30px;
    color: #fff;
    font-size: var(--fs-f16);
    font-weight: 400;
}

/* open state — question goes yellow */
.faq-list .toggle .toggleta {
    color: var(--color-primary);
    font-weight: 600;
}

.faq-list .toggle .togglec {
    padding: 0 50px 20px 30px;
    font-size: var(--fs-p14);
    text-align: left;
}

.faq-list .toggle .togglec p:last-child {
    margin-bottom: 0;
}


/* ── Plus / minus circle on the right ── */
.faq-list .toggle .togglet i {
    left: auto;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
}

.faq-list .toggle .togglet i.toggle-open {
    display: none;
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #110E19;
}

.faq-list .toggle .toggleta i.toggle-closed {
    display: none;
}

.faq-list .toggle .toggleta i.toggle-open {
    display: flex;
}

@media (max-width: 767px) {
    .faq-list .toggle .togglet,
    .faq-list .toggle .toggleta {
        padding: 15px 40px 15px 0;
        line-height: var(--lh-normal);
    }

    .faq-list .toggle .togglec {
        padding: 0 40px 15px 0;
    }
}



/* ============================================
   Page: Product Detail
   ============================================ */

/* ── Top buy area ── */
.product-detail-content{
    position: relative;
    overflow: hidden;
    background-color: #fff;
    color: #000;
}

.pd-main {
    position: relative;
    z-index: 2;
}

/* Gallery */
.pd-gallery {
    display: flex;
    align-items: stretch;
    gap: 20px;
    border-radius: 16px;
}

.pd-gallery-thumbs-wrap {
    position: relative;
    flex: 0 0 76px;
    width: 76px;
    height: 416px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.pd-gallery-thumbs {
    position: absolute;
    top: 38px;
    left: 0;
    width: 340px;
    height: 76px;
    transform: rotate(90deg) translateY(-76px);
    transform-origin: top left;
    overflow: hidden;
}

.pd-gallery-thumbs .owl-stage-outer {
    overflow: hidden;
}

.pd-gallery-thumbs .owl-item {
    height: 76px;
}

.pd-gallery-thumbs .owl-item .pd-thumb {
    transform: rotate(-90deg);
}

.pd-gallery-arrow {
    position: relative;
    z-index: 3;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #000;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 200ms ease, background 200ms ease;
}

.pd-gallery-arrow:hover {
    color: #ffffff;
    background: var(--color-primary);
}

.pd-gallery-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #06C;
    background: #FFF;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 8px 16px 0 rgba(0, 0, 0, 0.08);
}

.pd-gallery-main a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.pd-gallery-main img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.pd-thumb {
    display: block;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 1px solid #d8dce5;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pd-thumb.active,
.pd-thumb:hover {
    border-color: #06C;
}

@media (max-width: 767.98px) {
    .pd-gallery {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .pd-gallery-thumbs-wrap {
        width: 100%;
        height: 76px;
        flex-basis: auto;
        flex-direction: row;
    }

    .pd-gallery-thumbs {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 76px);
        height: 76px;
        transform: none;
        transform-origin: center;
    }

    .pd-gallery-thumbs .owl-item .pd-thumb {
        transform: none;
    }

    .pd-thumb {
        width: 76px;
        height: 76px;
    }

    .pd-gallery-prev i,
    .pd-gallery-next i {
        transform: rotate(-90deg);
    }
}

/* Buy box */
.pd-buybox {
    padding-left: 0;
}

.pd-title {
    margin-bottom: 10px;
}

.pd-short-desc p{
    margin-bottom: 20px;
    text-align: justify;
}

.pd-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.pd-price ins {
    text-decoration: none;
    font-size: var(--fs-h3);
    font-weight: 800;
    /*color: #E7B500;*/
}

.pd-price del {
    color: #000;
    font-size: var(--fs-f16);
}

.pd-desc {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 25px;
}

/* Attribute chips */
.packageAttrRow {
    margin-top: 6px;
}

.packageprodAttrlabel {
    display: block;
    color: #000;
    font-size: var(--fs-f16);
    font-weight: 700;
    margin-bottom: 10px;
}

.pd-main .optionsList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.pd-attr {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.pd-attr input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pd-attr .titlebox {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: #555;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.pd-attr:hover .titlebox,
.pd-attr.active .titlebox,
.pd-attr input:checked+.titlebox {
    border-color: var(--color-primary);
}

.pd-attr-name {
    display: block;
    color: inherit;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.pd-attr.active .pd-attr-name,
.pd-attr input:checked+.titlebox .pd-attr-name {
    color: #000;
    font-weight: 700;
}

.pd-attr-price {
    display: none;
}

.pd-select {
    width: 100%;
    height: var(--btn-h);
    padding: 0 15px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
}

.pd-select option {
    color: #000;
}

@media (max-width: 575px) {
    .pd-main .optionsList {
        gap: 10px;
    }

    .pd-attr .titlebox {
        min-height: 46px;
        padding: 0 18px;
    }

    .pd-attr-name {
        font-size: var(--fs-f16);
    }
}

/* Price summary box */
.pd-pricebox {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.pd-pricebox .flexbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.pd-pricebox .ordertotal {
    margin-bottom: 0;
}

.pd-pricebox hr {
    border-color: rgba(255, 255, 255, 0.12);
    margin: 15px 0;
}

.pd-pricebox .displayprice {
    font-weight: 700;
}

/* Quantity + buttons */
.pd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 25px;
    flex-direction: column;
}

.quantity-box{
    display:flex;
    align-items: center;
}

.quantity-box .quantitytext {
    display: block;
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--fs-f16);
}

.pd-main .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    overflow: hidden;
}

.pd-main .quantity input.minus,
.pd-main .quantity input.plus {
    width: 44px;
    height: 44px;
    border: 0;
    background-color: #fff;
    color: #000;
    font-size: 18px;
    cursor: pointer;
}

.pd-main .quantity input.qty {
    border: 0;
    border-radius: 100px;
    border: 1px solid #D9D9D9;
    background: transparent;
    text-align: center;
    padding: 5px; 
    font-size: var(--fs-f20);
    line-height: var(--lh-normal);
    font-weight: 700;
    max-width: 80px;
}

.addtocart_button {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    width: 100%;
}

/* Both buttons share the row and fill the full width (per design) */
.addtocart_button .btn {
    flex: 1 1 0;
    min-width: 0;
}

/* "Add to Cart" — white button, dark text + cart icon (per design) */
.addtocart_button .add {
    flex: 2 1 0;
    padding: 30px;
    border-color: #000;
    color: #000;
}

.addtocart_button .buy {
    flex: 3 1 0;
    padding: 30px;
}

/* The icon/cart partial is hardcoded white for the dark header — recolor it
   to follow the button text colour so it shows on the white button. */
.addtocart_button .addtocart_icon {
    display: inline-flex;
    align-items: center;
}

.addtocart_button .addtocart_icon svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.addtocart_button .addtocart_icon svg path {
    /*stroke: currentColor;*/
}

.addtocart_button .addtocart_icon svg path[fill="white"] {
    fill: currentColor;
}

.loadingDiv {
    display: none;
    color: rgba(255, 255, 255, 0.6);
}

.pd-soldout {
    color: #ff6b6b;
    font-weight: 700;
    margin-top: 20px;
}

.pd-brochure {
    margin-top: 15px;
}

.pd-brochure a {
    color: var(--color-primary);
    font-weight: 600;
}

#noticeDiv2.successmsg {
    margin-top: 15px;
}

#noticeDiv2.errormsg {
    color: #ff6b6b;
    margin-top: 15px;
}

/* ── Dynamic sections (Figma light theme) ── */
.pd-section {
    position: relative;
    z-index: 2;
    background: #ffffff;
    color: #000;
}

.pd-section .nav-item .nav-link{
    color: #000;
}

.pd-section .nav-item .nav-link.active {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.pd-section.pd-section--features::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;          /* ← only 30px tall */
    background: linear-gradient(0deg, #06C 0%, rgba(24, 60, 127, 0.00) 100%);
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}
.pd-section--collage {
    background: #f4f5f7;
}

/* optional per-section full-width background.
   color mode -> inline background-color (wins over the base .pd-section white).
   image mode -> --pd-bg-d / --pd-bg-m inline vars applied here; mobile overrides in the media query below. */
.pd-section.pd-section--bg {
    background-image: var(--pd-bg-d, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.pd-section-title {
    margin-bottom: 30px;
    color: #000;
}

.pd-section-title:has(+ .pd-section-subtitle) {
    margin-bottom: 10px;
}

.pd-section-subtitle {
    margin: 0 auto 30px;
}

/* Intro */
.pd-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
}

.pd-intro--has-video {
    grid-template-columns: 1fr 1.1fr;
}

.pd-intro-title {
    color: #000;
    margin-bottom: 10px;
}

.pd-intro-subtitle {
    color: #000;
    font-weight: 600;
    margin-bottom: 20px;
}

.pd-intro-body {
    color: #000;
}

.pd-intro-body p {
    margin-bottom: 15px;
}

.pd-intro-media .pd-video {
    margin: 0;
}

.pd-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px 0;
    background: #000000;
}

.pd-video iframe,
.pd-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* Feature icon grid (horizontal cards) */
.pd-feature-grid > [class*="col"] {
    display: flex;
}

.pd-feature-grid > [class*="col"] > .pd-feature {
    width: 100%;
}

.pd-feature {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    border-radius: 20px;
    border: 0;
    background: rgba(240, 240, 240, 0.3);
    box-shadow: -27px 66px 29px 0 rgba(145, 145, 145, 0.01), -2px 4px 10px 0 rgba(145, 145, 145, 0.05);
    backdrop-filter: blur(12.5px);
    -webkit-backdrop-filter: blur(12.5px);
    overflow: hidden;
    border:1px solid #cecece ;
    transition: transform 0.3s ease;
}

.pd-feature:hover {
    transform: scale(1.02);
    box-shadow:
        8px 10px 5px -6px rgba(0, 0, 0, 0.1);
}

/*.pd-feature::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    padding: 1px;*/
/*    border-radius: inherit;*/
/*    background: conic-gradient(*/
/*        from -92deg,*/
/*        rgba(64, 64, 64, 0.5) 3%,*/
/*        rgba(64, 64, 64, 0.35) 9%,*/
/*        rgba(255, 255, 255, 0.5) 17%,*/
/*        rgba(255, 255, 255, 0.5) 30%,*/
/*        rgba(64, 64, 64, 0.35) 52%,*/
/*        rgba(249, 249, 249, 0.8) 58%,*/
/*        rgba(255, 255, 255, 0.5) 80%,*/
/*        rgba(249, 249, 249, 0.5) 91%*/
/*    );*/
/*    -webkit-mask:*/
/*        linear-gradient(#fff 0 0) content-box,*/
/*        linear-gradient(#fff 0 0);*/
/*    -webkit-mask-composite: xor;*/
/*    mask-composite: exclude;*/
/*    pointer-events: none;*/
/*}*/

.pd-feature-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pd-feature-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd-feature-title {
    font-weight: 700;
    color: #000;
}

.pd-feature-desc {
    color: #777777;
    font-size: var(--fs-p14);
}

/* Image showcase — stacked typed rows (highlight / video+text / image+text) */
.pd-showcase {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pd-sc-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #e9ebef;
}

.pd-sc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Type 1: full-width image with overlay text */
.pd-sc-highlight {
    /*min-height: 350px;*/
    /*max-height: 450px;*/
    width: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #1f2128;
}

.pd-sc-highlight-bg {
    display: block;
    position: relative;
    inset: 0;
}

.pd-sc-highlight-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pd-sc-highlight--right .pd-sc-highlight-bg::after {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.08) 62%);
}

.pd-sc-highlight-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-sc-highlight-text {
    position: relative;
    z-index: 1;
    width: min(520px, 55%);
    min-height: 460px;
    padding: 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pd-sc-highlight--right .pd-sc-highlight-text {
    margin-left: auto;
}

/* Types 2 & 3: split text card + media */
.pd-sc-split {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
    min-height: 350px;
    align-items: stretch;
    max-height: 450px;
}

.pd-sc-split--right{
    grid-template-columns: 1.5fr 1fr;
}

.pd-sc-split--right .pd-sc-textcard {
    order: 2;
}

.pd-sc-textcard {
    background: linear-gradient(210deg, #2f6fd0 0%, #183C7F 100%);
    color: #ffffff;
    border-radius: 20px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pd-sc-text {
    color: #fff;
    margin: 0;
}

.pd-sc-text p:last-child {
    margin-bottom: 0;
}

.pd-sc-media {
    border-radius: 20px;
    overflow: hidden;
    min-height: 240px;
}

.pd-sc-media .pd-sc-img,
.pd-sc-media .pd-video {
    height: 100%;
    margin: 0;
    border-radius: 20px;
}

.pd-sc-media .pd-sc-img img {
    aspect-ratio: 5 / 3;
}

@media (max-width: 767.98px) {

    .pd-sc-split {
        grid-template-columns: 1fr;
    }

    .pd-sc-highlight {
        min-height: unset;
    }

    .pd-sc-highlight-text {
        width: 100%;
        min-height: 360px;
        padding: 30px;
    }

    .pd-sc-split--right .pd-sc-textcard {
        order: 0;
    }

    .pd-sc-split{
        gap:0;
    }

    .pd-sc-media, .pd-sc-media .pd-sc-img, .pd-sc-media .pd-video{
        border-radius: 0 0 20px 20px;
        min-height: unset;
    }
    
    .pd-sc-textcard{
        border-radius: 20px 20px 0 0;
    }
}

@media (max-width: 575.98px) {
    .pd-sc-highlight-bg{
        position: relative;
    }

    .pd-sc-highlight-bg img{
        object-fit: contain;
    }

    .pd-feature-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .pd-feature{
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px 10px;
        gap: 10px;
    }
    
    .addtocart_button .add,
    .addtocart_button .buy{
        padding: 0;
    }

    .pd-intro--has-video .pd-intro-text{
        text-align: center;
    }

    .pd-feature:before{
        background:conic-gradient(
        from -53deg,
        rgba(64, 64, 64, 0.5) 3%,
        rgba(64, 64, 64, 0.35) 8%,
        rgba(255, 255, 255, 0.5) 17%,
        rgba(255, 255, 255, 0.5) 30%,
        rgba(64, 64, 64, 0.35) 52%,
        rgba(249, 249, 249, 0.8) 58%,
        rgba(255, 255, 255, 0.5) 80%,
        rgba(249, 249, 249, 0.5) 91%
    );
    }
    
    .pd-section{
        padding: 30px 0;
    }
    
    .pd-section--features,
    .pd-section--collage,
    .pd-section--steplist{
        padding-bottom: 60px;
    }

    /* mobile-specific section background image (falls back to the desktop one) */
    .pd-section.pd-section--bgm {
        background-image: var(--pd-bg-m, var(--pd-bg-d, none));
    }

}

/* Parameter table */
.pd-paramtable {
    margin: 0 auto;
    border-radius: 16px;
    
}

.pd-paramtable table {
    width: 100%;
    border: 1px solid #CECECE;
    border-radius: 16px;
    border-collapse: collapse;
    margin-bottom: 0;
    border-collapse: separate; 
      border-spacing: 0;          
      overflow: hidden;          
}

.pd-paramtable thead th {
    background: #183C7F;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    padding: 15px;
    border: 1px solid #183C7F;
}

.pd-paramtable tbody th,
.pd-paramtable tbody td {
    padding: 15px 20px;
    border-bottom: 1px solid #e3e6ea;
    color: #000;
    vertical-align: top;
    text-align: center;
}

.pd-paramtable tbody tr:last-child th,
.pd-paramtable tbody tr:last-child td {
    border-bottom: 0;
}

.pd-paramtable tbody th {
    width: 50%;
    font-weight: 500;
    border-right: 1px solid #CECECE;
}

/* Step list (image cards with overlay caption) */
.pd-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.pd-step-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #000;
}

.pd-step-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-step-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    padding: 30px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.95) 100%);
}

.pd-step-no {
    align-self: flex-start;
    background: var(--color-primary-dark);
    color: #fff;
    font-weight: 700;
    padding: 0 10px;
    border-radius: 16px;
}

.pd-step-title {
    color: #ffffff;
    font-size: var(--fs-f16);
    margin: 0;
}

.pd-step-desc {
    color: #fff;
    font-size: var(--fs-p14);
    margin: 0;
    min-height: 42px;
}

@media (max-width: 767.98px) {
    .pd-intro--has-video {
        grid-template-columns: 1fr;
    }
}

/* Related products */
.pd-related {
    position: relative;
    z-index: 2;
    background: #f4f4f4;
    overflow: hidden;
}

.pd-related-head {
    text-align: center;
    margin-bottom: 42px;
}

.pd-related-heading {
    margin: 0;
    color: #000000;
}

.pd-related-heading span {
    color: var(--color-primary);
}

.pd-related-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 320px;
    padding: 40px;
    overflow: hidden;
    margin-bottom: 24px;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0 8px 16px 0 rgba(0, 0, 0, 0.08);
}

.pd-related-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.pd-related-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pd-related-body {
    color: #000000;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.pd-related-title {
    margin: 0 0 20px;
}

.pd-related-title a {
    color: inherit;
    text-decoration: none;
}

.pd-related-desc {
    min-height: 48px;
    margin: 0 0 60px;
    color: #000000;
}

/* card is a flex column so the button can sit at the bottom regardless of title length */
.pd-related-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pd-related-btn {
    margin-top: auto;
    align-self: flex-start;
}


/* equal-height cards in the owl carousel so the Shop Now buttons align */
#pd-related-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

#pd-related-carousel .owl-item {
    display: flex;
}

#pd-related-carousel .pd-related-item {
    display: flex;
    width: 100%;
}

@media (max-width: 991.98px) {

    .pd-related-image {
        height: 260px;
        padding: 32px;
    }
}

@media (max-width: 575.98px) {
    .pd-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .addtocart_button .btn {
        flex: 1 1 100%;
    }

    .pd-related-head {
        margin-bottom: 28px;
    }

    .pd-related-image {
        height: 240px;
    }

    .pd-related-desc {
        margin-bottom: 28px;
    }

    .pd-steps{
        grid-template-columns: repeat(2, 1fr);
    }

    .pd-step-overlay{
        padding: 10px;
        gap: 10px;
    }
    
    #pd-related-carousel.owl-carousel .owl-stage-outer{
        overflow: visible;
    }
}