:root {
    --first-color: #46280E;
    --light-color: linen;
    --secondry-color: #4D5A27;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--first-color);
    background: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

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

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

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

section {
    position: relative;
}

.sectionSpace {
    padding: 50px 0;
}

.sectionLight {
    background: var(--light-color);
}

.sectionDark {
    color: var(--light-color);
    background: var(--secondry-color);
}

.sectionHead {
    margin-bottom: 45px;
}

.sectionTag {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
    color: var(--first-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sectionTag::before {
    content: "";
    width: 35px;
    height: 1px;
    background: currentColor;
}

.sectionDark .sectionTag {
    color: var(--light-color);
}

.sectionTitle {
      color: var(--first-color);
    font-family: "Libre Baskerville", serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 35px;
    /* text-align:center; */
}

.sectionh3 {
    color: var(--first-color);
    font-family: "Libre Baskerville", serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.22;
    max-width: 600px;
}

.sectionDark .sectionTitle {
    color: var(--light-color);
}

.sectionText {
    max-width: 680px;
    margin: 18px 0 0;
    color: rgba(36, 53, 44, .7);
    font-size: 16px;
    margin-bottom: 10px;
}

.sectionDark .sectionText {
    color: rgba(244, 239, 229, .7);
}

.mainBtn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid var(--secondry-color);
    color: var(--light-color);
    background: var(--secondry-color);
    font-size: 15px;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: .2px;
    transition: color .3s ease, background .3s ease, transform .3s ease;
}

.mainBtn:hover {
    color: var(--secondry-color);
    background: transparent;
    transform: translateY(-2px);
}

/* .mainBtnLight {
    border-color: var(--secondry-color);
    color: #fff;
    background: var(--secondry-color);
} */

.mainBtnLight:hover {
    color: var(--secondry-color);
    background: transparent;
}

.mainBtnOutline {
    color: var(--secondry-color);
    background: transparent;
}

.mainBtnOutline:hover {
    color: var(--light-color);
    background: var(--secondry-color);
}

.mainBtn svg {
    transition: transform .25s ease;
}

.mainBtn:hover svg {
    transform: translateX(4px);
}

.serviceDetailPage {
    min-height: calc(100vh - 120px);
    background: var(--light-color);
}

.serviceDetailContent {
    max-width: 760px;
    margin-top: 38px;
    padding: 32px;
    border: 1px solid rgba(36, 53, 44, .14);
    border-radius: 6px 48px 6px 6px;
    background: #fff;
}

.serviceDetailContent h2 {
    margin: 0 0 12px;
    font-family: "Libre Baskerville", serif;
    font-size: 24px;
}

.serviceDetailContent p {
    margin: 0 0 24px;
    color: rgba(36, 53, 44, .7);
}


/* =========================================================
           REVEAL ANIMATION
        ========================================================== */

.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.show {
    opacity: 1;
    transform: translateY(0);
}

.revealDelay1 {
    transition-delay: .1s;
}

.revealDelay2 {
    transition-delay: .2s;
}

.revealDelay3 {
    transition-delay: .3s;
}


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

.topBar {
    position: relative;
    z-index: 99;
    color: var(--light-color);
    background: var(--first-color);
    border-bottom: 1px solid rgba(244, 239, 229, .12);
}

.topBarInner {
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.topBarLeft,
.topBarRight {
    display: flex;
    align-items: center;
    gap: 15px;
}

.topBarItem {
       display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.topBarItem svg {
    flex: 0 0 auto;
}


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

.mainHeader {
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid rgba(36, 53, 44, .1);
    transition: box-shadow .3s ease;
}

.mainHeader.scrolled {
    box-shadow: 0 8px 30px rgba(36, 53, 44, .08);
}

.headerInner {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.desktopNav {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
}

.desktopNav>li {
    position: relative;
}

.desktopNav>li>a {
      display: flex;
    align-items: center;
    gap: 5px;
    color: var(--first-color);
    font-size: 14px;
    font-weight: 600;
    transition: opacity .2s ease;
    padding: 0px;
}


.desktopNav>li:hover>a,
.desktopNav>li>a:hover,
.desktopNav>li.active>a {
       color: #849a41;
}

.topbarmenu{
        margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    list-style: none;
}
.topbarmenu>li>a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    transition: opacity .2s ease;
    padding: 0px;
}
.topbarmenu>li:hover>a, .topbarmenu>li>a:hover, .topbarmenu>li.active>a {
       color: #849a41;
}

.topbarDivider {
    color: rgba(255, 255, 255, .7);
}


.navDropdown {
    position: absolute;
    top: 100%;
    left: -20px;
    width: 275px;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(36, 53, 44, .1);
    background: #fff;
    box-shadow: 0 18px 45px rgba(36, 53, 44, .11);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .25s ease;
}

.desktopNav li:hover>.navDropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navDropdown a {
    display: block;
    padding: 11px 13px;
    color: var(--first-color);
    font-size: 13px;
    font-weight: 500;
    transition: padding .2s ease, background .2s ease;
}

.navDropdown a:hover {
    padding-left: 18px;
    background: var(--light-color);
}

.headerBtn {
    margin-left: 15px;
}

.menuButton {
    display: none;
    width: 45px;
    height: 45px;
    margin-left: 15px;
    padding: 0;
    border: 1px solid rgba(36, 53, 44, .15);
    background: transparent;
}

.menuButton span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 5px auto;
    background: var(--first-color);
    transition: .25s ease;
}


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

.heroSection {
    position: relative;
    overflow: hidden;
    background: var(--light-color);
    padding: 20px 0px 70px 0px;
}

.heroLayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    margin: auto;
}

.heroSection::before {
    content: "";
    position: absolute;
    top: -180px;
    left: -150px;
    width: 540px;
    height: 540px;
    border: 1px solid rgba(244, 239, 229, .12);
    border-radius: 50%;
}

.heroSection::after {
    content: "";
    position: absolute;
    right: -250px;
    bottom: -300px;
    width: 680px;
    height: 680px;
    border: 1px solid rgba(244, 239, 229, .13);
    border-radius: 50%;
}

.heroContent {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 700px;
    padding: 24px 20px 24px 0;
    color: var(--first-color);
}

.heroVisual {
    position: relative;
    padding: 0px 40px;
    min-width: 0;
}

.heroSlider,
.heroSlider .swiper-wrapper,
.heroSlider .swiper-slide {
    width: 100%;
    height: 100%;
}

.heroSlider {
    min-height: 480px;
}

.heroVisual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.heroSlider .swiper-pagination {
    right: 18px;
    bottom: 18px;
    left: auto;
    width: auto;
}

.heroSlider .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    opacity: .65;
    background: #fff;
}

.heroSlider .swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 10px;
    opacity: 1;
}

.heroSlider .swiper-pagination-bullet:focus-visible,
.mainBtn:focus-visible,
.menuButton:focus-visible,
.mobileMenuClose:focus-visible,
.mobileDropdownButton:focus-visible {
    outline: 3px solid rgba(77, 90, 39, .45);
    outline-offset: 3px;
}

.heroTag {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #fff;
    border: 1px solid;
    padding: 5px 10px;
    border-radius: 999px;
    width: fit-content;
    color: var(--first-color);
}

.heroContent .heroTag {
    color: var(--first-color);
}


.heroTitle {
    margin: 0;
    max-width: 800px;
    color: var(--first-color);
    font-family: "Libre Baskerville", serif;
    font-size: clamp(40px, 3vw, 76px);
    font-weight: 700;
    line-height: 1.08;
}

.heroText {
    max-width: 650px;
    margin: 18px 0 24px;
    color: rgba(36, 53, 44, .7);
    font-size: 16px;
}

.heroButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.heroTrust {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.heroTrustItem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border: 1px solid rgba(36, 53, 44, .18);
    color: rgba(36, 53, 44, .8);
    font-size: 13px;
    border-radius: 30px;
    background: #fff;
}

.heroTrustIcon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: var(--light-color);
    background: var(--first-color);
    font-size: 10px;
    font-weight: 700;
}


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

.heroCurve {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 50px;
    pointer-events: none;
}

.heroCurve svg {
    width: 100%;
    height: 100%;
    display: block;
}


/* =========================================================
           FLOATING SERVICE STRIP
        ========================================================== */

.quickServices {
    position: relative;
    z-index: 10;
    margin-top: -42px;
}

.quickServiceWrap {
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 28px 28px 10px 10px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(36, 53, 44, .12);
}

.quickServiceItem {
    position: relative;
    min-height: 145px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 25px;
    border-right: 1px solid rgba(36, 53, 44, .1);
    transition: background .3s ease;
}

.quickServiceItem:last-child {
    border-right: 0;
}

.quickServiceItem:hover {
    background: var(--light-color);
}

.quickIcon {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 18px 18px 18px 5px;
    color: var(--light-color);
    background: var(--first-color);
}

.quickServiceItem strong {
    display: block;
    margin-bottom: 3px;
    color: var(--first-color);
    font-family: "Libre Baskerville", serif;
    font-size: 15px;
}

.quickServiceItem span {
    display: block;
    color: rgba(36, 53, 44, .6);
    font-size: 11px;
    line-height: 1.5;
}

/* =========================================================
           Hero Slider
        ========================================================== */


.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}




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

.aboutSection {
    overflow: hidden;
}

.aboutVisual {
    position: relative;
    padding-right: 75px;
}

.aboutMainImage {
    width: 100%;
    height: 100%;
    border-radius: 3px 105px 3px 3px;
    object-fit: cover;
}

.aboutSmallImage {
    position: absolute;
    right: 0;
    bottom: 0px;
    width: 200px;
    height: 200px;
    padding: 7px;
    border-radius: 75px 3px 3px 3px;
    object-fit: cover;
    background: #fff;
}


.aboutVisual {
    width: 45%;
        aspect-ratio: 1.1;
}

.aboutContent {
    display: block;
}

.aboutVisual img {
    max-width: 100%;
}

.aboutFloatWrap::after {
    content: "";
    display: block;
    clear: both;
}


@media (max-width: 991px) {
    .aboutVisual {
        float: none;
        width: 100%;
        margin: 0 0 30px;
    }
}

.aboutContent .sectionText,
.aboutContent .sectionTitle,
.aboutContent .sectionh3 {
    max-width: 100%;
}


/* =========================================================
           PRODUCT CATEGORY
        ========================================================== */

.productSection {
    position: relative;
    overflow: hidden;
}

.productCurve {
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    width: 100%;
    height: 80px;
}

.productHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.productGrid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
}

.productCard {
    position: relative;
    grid-column: span 4;
    overflow: hidden;
    border-radius: 8px 60px 8px 8px;
    background: var(--first-color);
    isolation: isolate;
}

.productCardLarge {
    grid-column: span 6;
}

.productCard img {
    position: relative;
    z-index: -2;
    display: block;
    width: 100%;
    transition: transform .65s ease;
}

.productCard::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(36, 53, 44, .02) 20%,
            rgba(36, 53, 44, .88) 100%);
}

.productCard:hover img {
    transform: scale(1.06);
}

.productCardContent {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px;
    color: var(--light-color);
}

.productLabel {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .85;
}

.productCard .titleh3 {
    margin: 0;
    font-family: "Libre Baskerville", serif;
    font-size: 23px;
    font-weight: 700;
}

.productCard p {
    max-width: 430px;
    margin: 8px 0 0;
    color: rgba(244, 239, 229, .72);
    font-size: 16px;
}

.productMore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(244, 239, 229, .65);
    font-size: 14px;
    font-weight: 500;
}


/* =========================================================
           FEATURE / BENEFITS CARDS
        ========================================================== */

.benefitSection {
    overflow: hidden;
}

.benefitCard {
    height: 100%;
    padding: 35px 28px;
    border: 1px solid rgba(244, 239, 229, .15);
    border-radius: 35px 6px 35px 6px;
    transition:
        transform .3s ease,
        background .3s ease;
}

.benefitCard:hover {
    transform: translateY(-7px);
    background: rgba(244, 239, 229, .06);
}

.benefitIcon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 25px;
    place-items: center;
    border-radius: 20px 20px 20px 5px;
    color: var(--first-color);
    background: var(--light-color);
}

.benefitCard .cardh3 {
    color: var(--light-color);
    margin: 0;
    font-family: "Libre Baskerville", serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;

}

.benefitCard p {
    margin: 0;
    color: rgba(244, 239, 229, .64);
    font-size: 16px;
}


/* =========================================================
           STATS
        ========================================================== */

.statsSection {
    padding: 50px 0px;
    background: var(--light-color);
}

.statsWrap {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    border-radius: 80px 8px 80px 8px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(36, 53, 44, .09);
}

.statItem {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    text-align: center;
    border-right: 1px solid rgba(36, 53, 44, .1);
}

.statItem:last-child {
    border-right: 0;
}

.statValue {
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: var(--first-color);
    font-family: "Libre Baskerville", serif;
    font-size: 35px;
    font-weight: 700;
    line-height: 1;
}

.statItem span {
    display: block;
    margin-top: 10px;
    color: rgba(36, 53, 44, .58);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}


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


.serviceCard {
    position: relative;
    height: 100%;
    min-height: 315px;
    overflow: hidden;
    padding: 34px 30px;
    border: 1px solid rgba(36, 53, 44, .13);
    border-radius: 8px 55px 8px 8px;
    background: #fff;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        color .35s ease,
        background .35s ease;
}

.serviceCard:hover {
    color: var(--light-color);
    background: var(--secondry-color);
    border-color: var(--first-color);
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(36, 53, 44, .12);
}

.serviceNumber {
    display: block;
    margin-bottom: 15px;
    color: rgba(36, 53, 44, .35);
    font-family: "Libre Baskerville", serif;
    font-size: 38px;
    line-height: 1;
}

.serviceCard:hover .serviceNumber {
    color: rgba(244, 239, 229, .35);
}

.serviceCard h3 {
    margin: 0;
    font-family: "Libre Baskerville", serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}

.serviceCard p {
    margin: 0;
    color: rgba(36, 53, 44, .65);
    font-size: 16px;
    transition: color .3s ease;
}

.serviceCard:hover p {
    color: rgba(244, 239, 229, .68);
}

.serviceCardArrow {
    position: absolute;
    right: 22px;
    bottom: 15px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: var(--light-color);
    background: var(--secondry-color);
    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;
}

.serviceCard:hover .serviceCardArrow {
    color: var(--first-color);
    background: var(--light-color);
    transform: rotate(-30deg);
}


/* =========================================================
           WHY CHOOSE
        ========================================================== */

.whySection {
    overflow: hidden;
}

.whyImageWrap {
    position: relative;
}

.whyMainImage {
    width: 100%;
    height: 650px;
    border-radius: 120px 8px 8px 8px;
    object-fit: cover;
}

.whyFloatingCard {
    position: absolute;
    right: -20px;
    bottom: 45px;
    width: 310px;
    padding: 25px;
    border-radius: 55px 8px 55px 8px;
    color: var(--light-color);
    background: var(--first-color);
    box-shadow: 0 18px 40px rgba(36, 53, 44, .16);
}

.whyFloatingCard strong {
    display: block;
    margin-bottom: 5px;
    font-family: "Libre Baskerville", serif;
    font-size: 22px;
}

.whyFloatingCard .why-float-para {
    color: rgba(244, 239, 229, .7);
    font-size: 16px;
}

.whyContent {
    padding-left: 50px;
}

.whyList {
    margin-top: 30px;
}

.whyItem {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(36, 53, 44, .12);
}

.whyItemIcon {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border-radius: 16px 16px 16px 4px;
    color: var(--light-color);
    background: var(--secondry-color);
}

.whyItemIcon svg {
    width: 20px;
    height: 20px;
}

.whyItem .why-title {
    margin: 0 0 5px;
    font-family: "Libre Baskerville", serif;
    font-size: 17px;
    font-weight: 700;
}

.whyItem p {
    margin: 0;
    color: rgba(36, 53, 44, .63);
    font-size: 16px;
}


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

.workSection {
    overflow: hidden;
}

.workGrid {
    display: grid;
        grid-template-columns: 1.35fr 1fr 1fr;
    gap: 16px;
    margin-top: 42px;
}

.workCard {
    position: relative;
    overflow: hidden;
    border-radius: 5px 45px 5px 5px;
}

.workCard:first-child {
    grid-row: span 2;
    border-radius: 5px 75px 5px 5px;
}

.workCard img {
    display: block;
    width: 100%;
    transition: transform .55s ease;
}

.workCard:hover img {
    transform: scale(1.055);
}

.workOverlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    color: var(--light-color);
    background: linear-gradient(180deg,
            transparent 38%,
            rgba(36, 53, 44, .88));
}

.workInfo {
    transform: translateY(8px);
    transition: transform .3s ease;
}

.workCard:hover .workInfo {
    transform: translateY(0);
}

.workInfo .workh3 {
    margin: 0;
    font-family: "Libre Baskerville", serif;
    font-size: 23px;
    font-weight: 700;
}

.workInfo p {
    max-width: 430px;
    margin: 8px 0 0;
    color: rgba(244, 239, 229, .72);
    font-size: 16px;
}


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

.processSection {
    overflow: hidden;
}

.processGrid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 45px;
}

.processGrid::before {
    content: "";
    position: absolute;
    top: 39px;
    right: 9%;
    left: 9%;
    height: 1px;
    background: rgba(36, 53, 44, .16);
}

.processItem {
    position: relative;
    z-index: 2;
    padding: 0 25px;
    text-align: center;
}

.processNumber {
    display: grid;
    width: 78px;
    height: 78px;
    margin: 0 auto 26px;
    place-items: center;
    border: 8px solid var(--light-color);
    border-radius: 50%;
    color: var(--light-color);
    background: var(--secondry-color);
    font-family: "Libre Baskerville", serif;
    font-size: 21px;
    font-weight: 700;
}

.processItem .process-title {
    margin: 0 0 8px;
    font-family: "Libre Baskerville", serif;
    font-size: 18px;
    font-weight: 700;
}

.processItem p {
    max-width: 300px;
    margin: auto;
    color: rgba(36, 53, 44, .62);
    font-size: 16px;
}


/* =========================================================
           VIDEO SECTION
        ========================================================== */

.videoSection {
    overflow: hidden;
}

.videoCard {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 100px 10px 10px;
    background:
        linear-gradient(rgba(36, 53, 44, .32),
            rgba(36, 53, 44, .7)),
        url("https://rajchickandblindshop.com/wp-content/uploads/2025/06/54f59764a3139ca94ca60aa605420fad.jpg") center/cover no-repeat;
        aspect-ratio: 1 / 1;
}

.videoPlay {
    display: grid;
    width: 95px;
    height: 95px;
    place-items: center;
    border: 1px solid rgba(244, 239, 229, .65);
    border-radius: 50%;
    color: var(--first-color);
    background: var(--light-color);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.videoPlay:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 15px rgba(244, 239, 229, .12);
}

.videoContent {
    padding-left: 50px;
}

.socialList {
    margin-top: 30px;
}

.socialLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(244, 239, 229, .18);
    color: var(--light-color);
}

.socialLink strong {
    font-family: "Libre Baskerville", serif;
    font-size: 20px;
}

.socialLink span {
    color: rgba(244, 239, 229, .6);
    font-size: 16px;
}

.socialLinkArrow {
    font-size: 21px;
    transition: transform .25s ease;
}

.socialLink:hover .socialLinkArrow {
    transform: translate(4px, -4px);
}


/* =========================================================
           TESTIMONIALS
        ========================================================== */

.testimonialCard {
    height: 100%;
    padding: 32px;
    border: 1px solid rgba(36, 53, 44, .12);
    border-radius: 42px 6px 42px 6px;
    background: #fff;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
        height: 290px;
}

.testimonialCard:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(36, 53, 44, .08);
}

.testimonialQuote {
    margin-bottom: 23px;
    color: var(--secondry-color);
    font-family: "Libre Baskerville", serif;
    line-height: 1;
    position: absolute;
    top: 15px;
    right: 15px;
    transform: rotate(180deg);
}

.testimonialQuote svg {
    width: 35px;
    height: 35px;
}

.testimonialQuote svg path {
    fill: var(--secondry-color);
}

.testimonialCard p {
    margin: 0;
    color: rgba(36, 53, 44, .63);
    font-size: 16px;
    margin-bottom: 10px;
}

.testimonialStars {
    margin-bottom: 15px;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--secondry-color);
}

.testimonialStars svg {
    width: 18px;
    height: 18px;
    margin-right: 0px
}

.testimonialStars svg path {
    fill: var(--secondry-color);
}

.testimonialUser {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonialAvatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: var(--light-color);
    background: var(--secondry-color);
    font-family: "Libre Baskerville", serif;
    font-size: 13px;
    font-weight: 700;
}

.testimonialUser strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
}




/* =========================================================
           FAQ
        ========================================================== */

.faqSection {
    overflow: hidden;
}

.faqIntro {
    position: sticky;
    top: 125px;
}

.faqContactCard {
    margin-top: 30px;
    padding: 25px;
    border-radius: 40px 6px 40px 6px;
    color: var(--light-color);
    background: #fff;
}

.faqContactCard strong {
    display: block;
    margin-bottom: 7px;
    font-family: "Libre Baskerville", serif;
    font-size: 20px;
    color: var(--first-color);
}

.faqContactCard p {
    margin: 0;
    color: rgba(36, 53, 44, .63);
    font-size: 16px;
    margin-bottom: 10px;
}

.faqAccordion .accordion-item {
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid rgba(36, 53, 44, .13);
    border-radius: 6px 30px 6px 6px;
    background: #fff;
}

.faqAccordion .accordion-button {
    padding: 20px 22px;
    color: var(--secondry-color);
    background: #fff;
    box-shadow: none;
    font-family: "Libre Baskerville", serif;
    font-size: 18px;
    font-weight: 500;
}

.faqAccordion .accordion-button:not(.collapsed) {
    color: var(--light-color);
    background: var(--secondry-color);
}

.faqAccordion .accordion-button::after {
    filter: none;
}

.faqAccordion .accordion-button:not(.collapsed)::after {
    filter: invert(1);
}

.faqAccordion .accordion-body {
    padding: 18px 22px 22px;
    color: rgba(36, 53, 44, .7);
    font-size: 16px;
    font-weight: 500;
}


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

.ctaSection {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    color: var(--light-color);
    background:
        linear-gradient(90deg,
            rgba(36, 53, 44, .96),
            rgba(36, 53, 44, .83)),
        url("assets/images/cta-bg.webp") center/cover no-repeat;
}

.ctaSection::before {
    content: "";
    position: absolute;
    top: -250px;
    right: -170px;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(244, 239, 229, .12);
    border-radius: 50%;
}

.ctaContent {
    position: relative;
    z-index: 3;
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.ctaContent .content-title {
    margin: 0;
    color: var(--light-color);
    font-family: "Libre Baskerville", serif;
    font-size: 35px;
    font-weight: 700;
    line-height: 1.25;
}

.ctaContent p {
    max-width: 680px;
    margin: 17px auto 28px;
    color: rgba(244, 239, 229, .72);
    font-size: 16px;
}

.ctaButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.ctaButtons .mainBtn:hover {
        background: #fff;
    border-color: #fff
}


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

.contactSection {
    overflow: hidden;
}

.contactInfo {
    padding-right: 40px;
}

.contactDetails {
    margin-top: 30px;
}

.contactItem {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(244, 239, 229, .16);
}

.contactIcon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 15px 15px 15px 4px;
    color: var(--first-color);
    background: var(--light-color);
}

.contactItem span {
    display: block;
    margin-bottom: 3px;
    color: var(--first-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.contactItem strong,
.contactItem a {
    color: var(--first-color);
    font-size: 16px;
    font-weight: 500;
}

.contactForm {
    position: relative;
    padding: 45px;
    border-radius: 8px 75px 8px 8px;
    color: var(--first-color);
    background: var(--light-color);
    margin-top: 20px;
}

.whatsappForm {
    position: relative;
    color: var(--first-color);
}

.contactForm .form-heading {
    margin: 0 0 7px;
    font-family: "Libre Baskerville", serif;
    font-size: 27px;
    font-weight: 700;
}

.contactForm>p {
    margin: 0 0 27px;
    color: rgba(36, 53, 44, .62);
    font-size: 16px;
}

.phone-group1 {
    position: relative;
    z-index: 99;
}
.contact-phone-group input{
    height: 50px;
}

.formLabel {
    display: block;
    margin-bottom: 6px;
    color: var(--first-color);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.formControl {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid rgba(36, 53, 44, .17);
    border-radius: 0;
    outline: none;
    color: var(--first-color);
    background: rgba(255, 255, 255, .55);
    font-size: 15px;
    transition: border .2s ease;
}

textarea.formControl {
    height: 110px;
    padding-top: 13px;
    resize: vertical;
}

.formControl:focus {
    border-color: var(--first-color);
}


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

.footer {
    padding: 75px 0 25px;
    color: var(--light-color);
    background: var(--secondry-color);
    border-top: 1px solid rgba(244, 239, 229, .13);
}

.footerBrand {
    max-width: 390px;
}

.footerBrand img {
    margin-bottom: 15px;
    padding: 10px;
    background: #fff;
    border-radius: 6px;
    width: 220px;
    height: auto;
}

.footerBrand h3 {
    margin: 0 0 15px;
    font-family: "Libre Baskerville", serif;
    font-size: 22px;
    line-height: 1.45;
}

.footerBrand p {
    margin: 0;
    color: rgba(244, 239, 229, .62);
    font-size: 16px;
}

.footerTitle {
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

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

.footerLinks li {
    margin-bottom: 8px;
}

.footerLinks a {
    color: rgba(244, 239, 229, .62);
    font-size: 15px;
    transition: color .2s ease, padding .2s ease;
}

.footerLinks a:hover {
    padding-left: 4px;
    color: var(--light-color);
}

.footerBottom {
    margin-top: 55px;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(244, 239, 229, .13);
    color: rgba(244, 239, 229, .45);
    font-size: 15px;
}


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

.floatingActions {
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.floatingButton {
    display: grid;
    width: 55px;
    height: 55px;
    place-items: center;
    border-radius: 50%;
    transition: transform .25s ease;
    animation: pulse-ring 2s infinite;
    background: red;
    border-radius: 50%;
    color: var(--gm-white);
    background: #25d366;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.28), 0 3px 10px rgba(20, 39, 17, 0.14);
    cursor: pointer;
}

.floatingButton svg {
    width: 24px;
    height: 24px;
}

.floatingButton svg path {
    fill: #fff;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}


.floatingButton:hover {
    color: var(--light-color);
    transform: translateY(-3px);
}

#scrollTopButton {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
}

#scrollTopButton.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}



.backToTopBtn {
    position: relative;
    width: 45px;
    height: 45px;
    padding: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--first-color);
    border-radius: 50%;
    color: var(--light);
    background: #ffff;

    cursor: pointer;
    box-shadow:
        0 8px 20px rgba(36, 53, 44, .16);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px) scale(.9);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


.backToTopBtn::before {
    content: "";

    position: absolute;
    inset: -6px;

    border: 1px solid rgba(36, 53, 44, .25);
    border-radius: 50%;

    transform: scale(.88);
    opacity: 0;

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.what-float-btn {
    position: fixed;
    z-index: 999;
    bottom: 5%;
    left: 20px;
}

.whatsappModal {
    position: fixed;
    z-index: 999;
    inset: 0;
    display: grid;
    padding: 20px;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, visibility .25s ease;
}

.whatsappModal.show {
    visibility: visible;
    opacity: 1;
}

.whatsappModalOverlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 19, 30, .68);
}

.whatsappModalDialog {
    position: relative;
    width: min(100%, 430px);
    padding: 34px 30px 30px;
    border-radius: 8px 42px 8px 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(5, 19, 30, .25);
    transform: translateY(18px) scale(.98);
    transition: transform .25s ease;
}

.whatsappModal.show .whatsappModalDialog {
    transform: translateY(0) scale(1);
}

.whatsappModalClose {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    color: var(--first-color);
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.whatsappModalHeader{
    margin: 7px 0 8px;
    color: var(--first-color);
    font-family: "Libre Baskerville", serif;
    font-size: 26px;
}

.whatsappModalHeader p {
    margin: 0 0 22px;
    color: rgba(36, 53, 44, .62);
    font-size: 14px;
}

.whatsappForm {
    display: grid;
    gap: 12px;
}

.whatsappFormControl {
    width: 100%;
    height: 48px;
    padding: 0 13px;
    border: 1px solid rgba(36, 53, 44, .17);
    border-radius: 4px;
    outline: none;
    color: var(--first-color);
    background: #fff;
    font-size: 14px;
}

.whatsappFormControl:focus {
    border-color: var(--first-color);
}

.whatsappPhoneField {
    width: 100%;
}

.iti {
    width: 100%;
}

.contactPanel .iti input {
    width: 100%;
    height: 50px;
    border: 1px solid rgba(36, 53, 44, .17);
    border-radius: 4px;
}

.whatsappSubmit {
    justify-self: start;
    margin-top: 6px;
}

.whatsappSubmit span {
    display: inline-grid;
    width: 28px;
    height: 28px;
    margin-left: 7px;
    place-items: center;
    border-radius: 50%;
    color: var(--first-color);
    background: var(--light-color);
    font-size: 18px;
}

body.whatsappModalOpen {
    overflow: hidden;
}

.backToTopBtn.show {
    opacity: 1;
    visibility: visible;

    transform: translateY(0) scale(1);
}

.backToTopBtn:hover {
    color: var(--dark);
    background: var(--light-color);

    transform: translateY(-4px);
}

.backToTopBtn:hover::before {
    opacity: 1;
    transform: scale(1);
}

.backToTopIcon {
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease;
}

.backToTopIcon svg {
    fill: var(--first-color);
}

.backToTopBtn:hover .backToTopIcon {
    animation: backToTopArrow .8s ease infinite;
}

.backToTopText {
    font-size: 8px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 1px;
    text-transform: uppercase;

    opacity: .7;
}

@keyframes backToTopArrow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}


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

.mobileMenu {
    position: fixed;
    z-index: 1200;
    top: 0;
    right: -100%;
    width: min(390px, 90%);
    height: 100%;
    overflow-y: auto;
    padding: 25px;
    color: var(--first-color);
    background: #fff;
    transition: right .35s ease;
}

.mobileMenu.show {
    right: 0;
}

.mobileMenuOverlay {
    position: fixed;
    z-index: 1190;
    inset: 0;
    background: rgba(36, 53, 44, .62);
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
}

.mobileMenuOverlay.show {
    opacity: 1;
    visibility: visible;
}

.mobileMenuHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(36, 53, 44, .12);
}

.mobileMenuClose {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    color: var(--light-color);
    background: var(--first-color);
    font-size: 21px;
}

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

.mobileNav>li {
    border-bottom: 1px solid rgba(36, 53, 44, .1);
}

.mobileNav>li>a,
.mobileDropdownButton {
    width: 100%;
    min-height: 49px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border: 0;
    color: var(--first-color);
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.mobileDropdown {
    display: none;
    padding: 3px 0 12px 13px;
}

.mobileDropdown.show {
    display: block;
}

.mobileDropdown a {
    display: block;
    padding: 8px 0;
    color: rgba(36, 53, 44, .72);
    font-size: 13px;
}



.productMainImage a {
    display: block;
   width: 100%;
    height: 100%;
    cursor: zoom-in;
    aspect-ratio: 1 / 1;
}

.productMainImage a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.productMainImage a img {
    display: block;
    width: 100%;
    object-fit: cover;
}


/* =========================================================
   PRODUCT ENQUIRY - BOOTSTRAP MODAL
========================================================== */

.productEnquiryModal {
    --bs-modal-width: 1080px;
    --bs-modal-margin: 18px;
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: 18px;
    --bs-modal-box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.productEnquiryModal .modal-dialog {
    max-width: min(var(--bs-modal-width), calc(100% - 24px));
}

.productEnquiryModal .modal-content {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: var(--bs-modal-border-radius);
    background: #fff;
    box-shadow: var(--bs-modal-box-shadow);
}

.productEnquiryModal .productPopupClose {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    margin: 0;
    width: 28px;
    height: 28px;
    line-height: 32px;
    border-radius: 50%;
    color: #222;
    opacity: 1;
    font-size: 14px;
    font-weight: 400;
    text-shadow: none;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
    border: 1px solid #ccc;
}

.productEnquiryModal .productPopupClose:focus {
    box-shadow: 0 0 0 3px rgba(77, 90, 39, .16);
}

.productPopupMedia {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 14px;
    padding: 22px;
    background: #f5f7f0;
}

.productPopupThumbs {
    min-width: 0;
    max-height: 566px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px;
}

.productPopupThumbs::-webkit-scrollbar {
    width: 4px;
}

.productPopupThumbs::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #c8cfbf;
}

.productPopupThumb {
    position: relative;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid #dce2d6;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.productPopupThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.productPopupThumb:hover,
.productPopupThumb.active {
    border-color: var(--secondry-color);
    box-shadow: 0 0 0 2px rgba(77, 90, 39, .12);
    transform: translateY(-1px);
}

.productPopupMainMedia {
    min-width: 0;
    height: 530px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e8ece3;
    border-radius: 14px;
    background: #fff;
}

.productPopupMainMedia img,
.productPopupMainMedia iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.productPopupMainMedia img {
    object-fit: contain;
}

.productPopupMainMedia iframe {
    border: 0;
}

.productPopupVideoThumb::after {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: -1;
    border-radius: 6px;
    background: rgba(0, 0, 0, .18);
}

.productPopupPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 32px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: #e2a315;
    transform: translate(-50%, -50%);
}

.productPopupPlay svg {
    width: 15px;
    height: 15px;
}

.productPopupForm {
      min-width: 0;
    padding: 20px;
    background: #fff;
    height: 575px;
    overflow-y: auto;
}

.productPopupHead {
    margin-bottom: 12px;
    padding-right: 45px;
}


.productenquiryTitle{
    margin: 0 0 8px;
    color: #26321f;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.28;
}

.productPopupHead p {
    margin: 0;
    color: #75808a;
    font-size: 12px;
    line-height: 1.55;
}

 .g-recaptcha {
    transform: scale(0.8);
    transform-origin: 0 0;
}
.msg-requirement{
    margin-top: 0.5rem;
}
.productPopupCaptcha{
    margin-top: 1rem;
}


.productPopupField .form-control,
.productPopupField .form-select {
    min-height: 42px;
    border: 1px solid #dce2d7;
    border-radius: 8px;
    color: #30392a;
    background-color: #fff;
    font-size: 13px;
    box-shadow: none;
}


.productPopupField .form-control:focus,
.productPopupField .form-select:focus {
    border-color: var(--secondry-color);
    box-shadow: 0 0 0 3px rgba(77, 90, 39, .09);
}

.productQtyRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
}

.productQtyRow .form-control {
    border-radius: 8px 0 0 8px;
}

.productQtyRow .form-select {
    border-left: 0;
    border-radius: 0 8px 8px 0;
}

.productPopupSubmit {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--secondry-color);
    border-radius: 8px;
    color: #fff;
    background: var(--secondry-color);
    font-size: 13px;
    font-weight: 700;
        /* margin-top: 12px; */
}

.productPopupSubmit:hover,
.productPopupSubmit:focus {
    border-color: var(--secondry-color);
    color: var(--secondry-color);
    background: #fff;
}

.productPopupSubmit svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 991px) {
    .productEnquiryModal .modal-dialog {
        max-width: calc(100% - 20px);
    }

    .productPopupMedia {
        min-height: 0;
        grid-template-columns: 68px minmax(0, 1fr);
        padding: 16px;
    }

    .productPopupMainMedia {
        height: 430px;
    }

    .productPopupThumbs {
        max-height: 430px;
    }

    .productPopupForm {
        padding: 26px 22px 24px;
    }
}

@media (max-width: 575px) {
    .productEnquiryModal {
        --bs-modal-margin: 8px;
    }

    .productEnquiryModal .modal-dialog {
        max-width: calc(100% - 8px);
        margin: 4px auto;
    }

    .productEnquiryModal .modal-content {
        border-radius: 12px;
    }

    .productEnquiryModal .productPopupClose {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
    }

    .productPopupMedia {
        display: flex;
        flex-direction: column;
        padding: 12px;
    }

    .productPopupMainMedia {
        height: 300px;
        border-radius: 10px;
    }

    .productPopupThumbs {
        width: 100%;
        max-height: none;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
                padding-bottom: 20px;
    }

    .productPopupThumb {
        flex: 0 0 62px;
        width: 62px;
        height: 58px;
    }

    .productPopupForm {
        padding: 22px 15px 18px;
    }

    .productPopupHead {
        padding-right: 35px;
    }

    .productPopupHead h2 {
        font-size: 21px;
    }

    .productQtyRow {
        grid-template-columns: minmax(0, 1fr) 105px;
    }
}

.heroSlider .swiper-slide {
    aspect-ratio:1/1;
    border-radius: 15px;
}



.innerHero {
    position: relative;
    padding: 50px 0 50px;
    background: linear-gradient(135deg, #43501f 0%, #5d6a30 55%, #79874a 100%);
    color: #fff
}


.innerHero .container {
    position: relative;
    z-index: 2
}

.innerBreadcrumb {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, .8)
}

.innerBreadcrumb a {
    color: #fff;
    text-decoration: none
}

.innerHero h1 {
    max-width: 840px;
    margin: 0 0 15px;
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(25px, 5vw, 45px);
    line-height: 1.15
}

.innerHero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    line-height: 1.8
}

.innerLead {
    font-size: 16px;
    line-height: 1.9;
    color: #5d6254
}

.innerImage {
    width: 100%;
    height: 440px;
    object-fit: cover;
    border-radius: 26px
}





.workGallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.workGallery img {
    width: 100%;
    aspect-ratio:1/1;
    object-fit: cover;
    border-radius: 18px
}

.contactSimple {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 28px
}

/* .contactPanel {
    padding: 32px;
    border-radius: 22px;
    background: #f5f7ef
} */

.contactPanel h3 {
    margin-bottom: 18px
}

.contactPanel a {
    color: inherit
}

.allProductGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.simpleProductCard {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e5e9da;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    transition: .25s
}

.simpleProductCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(46, 55, 26, .08)
}

.simpleProductCard img {
    width: 100%;
    height: 260px;
    object-fit: cover
}

.simpleProductCard div {
    padding: 22px
}

.simpleProductCard h3 {
    margin: 0 0 8px;
    font-size: 21px;
    color: #343d20
}

.simpleProductCard p {
    margin: 0;
    color: #6c7164;
    font-size: 14px;
    line-height: 1.7
}

.youtubePopup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
}

.youtubePopup.active {
    opacity: 1;
    visibility: visible;
}

.youtubePopupOverlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 10, .88);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.youtubePopupBox {
    position: relative;
    z-index: 2;
    width: min(900px, 100%);
    transform: scale(.94);
    transition: .3s ease;
}

.youtubePopup.active .youtubePopupBox {
    transform: scale(1);
}

.youtubeVideoWrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .35);
}

.youtubeVideoWrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.youtubePopupClose {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: #fff;
    color: #283218;
    cursor: pointer;
    z-index: 5;
    transition: .25s ease;
}

.youtubePopupClose:hover {
    transform: rotate(90deg);
    background: #4d5a27;
    color: #fff;
}

body.videoPopupOpen {
    overflow: hidden;
}



.innerCategoryTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 20px;
}

.innerCategoryTabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 15px;
    border: 1px solid #dfe4db;
    border-radius: 30px;
    background: #fff;
    color: #3d4935;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: .25s ease;
}

.innerCategoryTabs a:hover,
.innerCategoryTabs a.active {
    border-color: var(--secondry-color);
    background: #fffaf0;
    color: #26351f;
}

@media (max-width: 575px) {


    .innerSection .sectionTitle {
        font-size: 25px;
    }

    .innerLead {
        font-size: 12.5px;
    }

    .innerCategoryTabs {
        gap: 7px;
    }

    .innerCategoryTabs a {
        padding: 7px 12px;
        font-size: 11px;
    }
}



.productDetailBox .product-main-box {
    margin-bottom: 30px;
}

.productDetailBox .product-main-box:last-child {
    margin-bottom: 0px;
}

.productDetailTitle {
    margin: 0 0 18px;
    color: #202b19;
    font-size: 25px;
    line-height: 1.25;
    font-weight: 600;
}

.productMainImage {
     overflow: hidden;
    border: 1px solid #e2e6dd;
    border-radius: 12px;
    background: #f5f6f2;
    aspect-ratio: 1/1;
}

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

.productActionButtons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 0 12px;
}

.productActionButtons a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.productActionButtons svg {
    width: 16px;
    height: 16px;
}

.productEnquiryBtn {
    border: 1px solid var(--secondry-color);
    background: var(--secondry-color);
    color: #fff;
}

.productBrochureBtn {
    border: 1px solid #29381f;
    background: #fff;
    color: #29381f;
}

.productThumbs {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.productGallery {
    margin: 0 0 15px 15px;
    position: relative;
}

.productThumb.active {
    border-color: var(--secondry-color);
}

.productThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.productInfo {
    width: 100%;
}

.productPriceBox {
    padding: 10px 13px;
    border: 1px solid #dfe3db;
    background: linear-gradient(45deg, #fffce9, transparent);
    display: flex;
    flex-direction: column;
}

.productPriceBox span {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 400;
    color: #75808a;
}

.productPriceBox strong {
    color: #202b19;
    font-size: 22px;
}

.productMoq {
    padding: 10px 13px;
    border: 1px solid #dfe3db;
    border-top: 0;
    color: #737c70;
    font-size: 12px;
}

.productMoq strong {
    margin-left: 5px;
    color: #202b19;
}

.productSpecification {
    margin-top: 6px;
    border: 1px solid #dfe3db;
}

.productSpecification>div {
    display: grid;
    grid-template-columns: 170px 1fr;
    min-height: 38px;
    border-bottom: 1px solid #dfe3db;
}

.productSpecification>div:last-child {
    border-bottom: 0;
}

.productSpecification strong {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 600;
}

.productSpecification span {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 300;
}


.productSpecification strong {
    background: #f5f6f3;
    color: #202b19;
}

.productSpecification span {
    color: #4c555d;
}

.productDescription {
    padding-top: 14px;
}

.productDescription p {
    margin: 0;
    color: #657061;
    font-size: 13px;
    line-height: 1.7;
}

.productBottomActions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.productBottomActions a {
    min-width: 175px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.productInterestedBtn {
    background: var(--secondry-color);
    color: #fff;
}

.productViewBtn {
    border: 1px solid var(--secondry-color);
    background: #fff;
    color: var(--secondry-color);
}


@media (max-width: 575px) {
    .productDetailTitle {
        font-size: 23px;
    }


    .productSpecification>div {
        grid-template-columns: 125px 1fr;
    }

    .productActionButtons,
    .productBottomActions {
        flex-wrap: wrap;
    }

    .productBottomActions a {
        width: 100%;
    }

}



@media (max-width: 575px) {
    .youtubePopup {
        padding: 15px;
    }

    .youtubePopupClose {
        top: -45px;
    }
}

@media(max-width:991px) {

    .featureGrid,
    .allProductGrid {
        grid-template-columns: repeat(2, 1fr)
    }

    .contactSimple {
        grid-template-columns: 1fr
    }

    .workGallery {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:767px) {
    .innerHero {
        padding: 55px 0 48px
    }

    .innerSection {
        padding: 55px 0
    }

    .featureGrid,
    .allProductGrid,
    .workGallery,
    .productInfoBand ul {
        grid-template-columns: 1fr
    }

    .innerImage {
        height: 320px
    }

    .workGallery img {
        height: 250px
    }
}

.productThumbSlider {
    overflow: hidden;
}


.productThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.productThumb.active,
.productThumb:hover {
    border-color: var(--secondry-color);
}

.mediaThumbNav {
    position: absolute;
    top: 40%;
    z-index: 10;
    width: 22px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateY(-50%);
}




.mediaThumbNav svg {
    width: 18px;
    height: 18px;
}

.mediaThumbPrev {
    left: -7px;
}

.mediaThumbNext {
    right: -7px;
}

.mediaThumbNav:hover {
    border-color: transparent;
    background: transparent;
}

.mediaThumbNav.swiper-button-disabled {
    opacity: .25;
    cursor: default;
}

@media (max-width: 575px) {
    .mediaThumbWrapper {
        max-width: 100%;
        padding: 0 30px;
    }
}


.workGalleryItem {
    cursor: pointer;
}

.workGalleryItem h3 {
    margin: 12px 0 0;
    font-size: 18px;
}

.galleryEnquiryPopup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
}

.galleryEnquiryPopup.active {
    opacity: 1;
    visibility: visible;
}

.galleryEnquiryOverlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 25, 13, .78);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.galleryEnquiryBox {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    width: min(1060px, 100%);
    overflow: auto;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
    transform: translateY(20px) scale(.97);
    transition: .3s ease;
}

.galleryEnquiryPopup.active .galleryEnquiryBox {
    transform: translateY(0) scale(1);
}

.galleryEnquiryLeft {
    display: flex;
    flex-direction: column;
    padding: 22px;
    background: #f3f5ec;
}

.galleryEnquiryImage {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
    background: #ddd;
    height: 512px;
}

.galleryEnquiryImage img {
    width: 100%;
    height: 100%;
}



.galleryEnquiryProductInfo span {
    display: block;
    margin-bottom: 5px;
    color: #788154;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.galleryEnquiryProductInfo h3 {
    margin: 0 0 6px;
    color: #263018;
    font-size: 24px;
    font-weight: 700;
}

.galleryEnquiryProductInfo p {
    margin: 0;
    color: #66705b;
    font-size: 14px;
    line-height: 1.7;
}

.galleryEnquiryRight {
    overflow-y: auto;
    padding: 20px;
}

.galleryEnquiryRight h2 {
    margin: 8px 0 8px;
    color: #202817;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
}

.galleryEnquiryText {
    margin-bottom: 25px;
    color: #7a8173;
    font-size: 14px;
}

.galleryFormGroup {
    margin-bottom: 18px;
}

.galleryFormGroup label {
    display: block;
    margin-bottom: 7px;
    color: #25301d;
    font-size: 13px;
    font-weight: 600;
}

.galleryFormGroup input,
.galleryFormGroup textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dfe3d8;
    border-radius: 7px;
    outline: none;
    background: #fff;
    color: #222;
    font-size: 14px;
    transition: .2s ease;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.galleryFormGroup textarea {
    resize: vertical;
}

.galleryFormGroup input:focus,
.galleryFormGroup textarea:focus {
    border-color: #4d5a27;
    box-shadow: 0 0 0 3px rgba(77, 90, 39, .08);
}

.galleryFormGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gallerySubmitBtn {
    width: 100%;
    justify-content: center;
}

.galleryEnquiryClose {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #e1e4dc;
    border-radius: 50%;
    background: #fff;
    color: #29301f;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
    transition: .25s ease;
}

.galleryEnquiryClose:hover {
    background: #4d5a27;
    color: #fff;
    transform: rotate(90deg);
}

body.galleryPopupOpen {
    overflow: hidden;
}

@media (max-width: 991px) {

    .galleryEnquiryPopup {
        padding: 18px;
    }

    .galleryEnquiryBox {
        grid-template-columns: 1fr;
    }

    .galleryEnquiryLeft {
        padding: 16px;
    }

    .galleryEnquiryRight {
        overflow: visible;
        padding: 25px 20px 30px;
    }

    .galleryEnquiryClose {
        top: 12px;
        right: 12px;
    }

}

@media (max-width: 575px) {

    .galleryEnquiryPopup {
        align-items: flex-end;
        padding: 0;
    }

    .galleryEnquiryBox {
        border-radius: 20px 20px 0 0;
    }

    .galleryEnquiryImage {
        min-height: 220px;
        max-height: 240px;
    }

    .galleryEnquiryProductInfo {
        padding: 15px 3px 3px;
    }

    .galleryEnquiryProductInfo h3 {
        font-size: 20px;
    }

    .galleryEnquiryRight {
        padding: 22px 16px 28px;
    }

    .galleryEnquiryRight h2 {
        padding-right: 35px;
        font-size: 24px;
    }

    .galleryFormGrid {
        grid-template-columns: 1fr;
        gap: 0;
    }

}

.serviceHero {
    position: relative;
    padding: 50px 0;
    background: linear-gradient(135deg, #43501f, #667532 60%, #84905a);
    color: #fff;
    overflow: hidden
}

.serviceHero:after {
    content: "";
    position: absolute;
    right: -120px;
    top: -150px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%
}

.serviceHero .container {
    position: relative;
    z-index: 2
}

.serviceCrumb {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, .78)
}

.serviceCrumb a {
    color: #fff;
    text-decoration: none
}

.serviceHero h1 {
    max-width: 900px;
    margin: 0 0 15px;
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(34px, 5vw, 50px);
    line-height: 1.15
}

.serviceHero p {
    max-width: 760px;
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .9)
}

.serviceInner {
    padding: 76px 0
}

.serviceIntroImage {
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 26px
}

.serviceFeatureGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 32px
}

.serviceFeature {
    padding: 25px;
    border: 1px solid #e5e9da;
    background: #fbfcf7;
    border-radius: 18px
}

.serviceFeature strong {
    display: block;
    margin-bottom: 8px;
    color: #39431f;
    font-size: 18px
}

.serviceFeature p {
    margin: 0;
    color: #69705e;
    font-size: 14px;
    line-height: 1.7
}

.serviceBand {
    padding: 50px 0;
    background: #f3f5ea
}

.serviceProcess {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 30px
}

.serviceStep {
    padding: 24px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e3e8d6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.serviceStep span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #4d5a27;
    color: #fff;
    font-weight: 700;
    margin-bottom: 14px
}

.serviceStep h3 {
    font-size: 17px;
    margin: 0;
    color: #38421f;
    margin-bottom: 10px;
}




/* =========================================================
   INFRASTRUCTURE & CAPABILITIES
========================================================== */

.infraHead {
    position: sticky !important;
    top: 130px;
    margin-bottom: 0;
}

.infraTag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 9px 20px;
    border: 1px solid #f1dfbb;
    border-radius: 50px;
    background: #fffaf0;
    color: #10233f;
    font-size: 14px;
    font-weight: 700;
}

.infraTag span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e6a600;
}


.infraTitleLine {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 18px 0;
}

.infraTitleLine span:first-child {
    width: 46px;
    height: 3px;
    border-radius: 10px;
    background: #0e284b;
}

.infraTitleLine span:last-child {
    width: 64px;
    height: 3px;
    border-radius: 10px;
    background: #e9a400;
}

.infraHead p {
    max-width: 1050px;
    margin: 0 auto;
    color: #687589;
    font-size: 15px;
    line-height: 1.8;
}


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

.infraGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 20px;
}


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

.infraCard {
    position: relative;
}

.infraNumber {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 0px 11px 0px 28px;
    color: #b3b3b3;
    font-size: 25px;
    font-weight: 600;
    background: var(--light-color);
    display: block;
    font-family: "Libre Baskerville", serif;
    line-height: 1;
}

.infraCardBody {
    position: relative;
    z-index: 2;
    padding: 20px;
    border: 1px solid #e6ebf0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(17, 42, 72, .07);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Bottom accent line */
.infraCardBody::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 3px;
    background: var(--first-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

/* Soft background movement */
.infraCardBody::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -55px;
    top: -55px;
    border-radius: 50%;
    background: rgba(216, 164, 43, .07);
    transform: scale(.7);
    transition: transform .45s ease;
    pointer-events: none;
}

.infraCard:hover .infraCardBody {
    transform: translateY(-7px);
    border-color: var(--first-color);
    box-shadow: 0 20px 40px rgba(17, 42, 72, .13);
}

.infraCard:hover .infraCardBody::before {
    transform: scaleX(1);
}

.infraCard:hover .infraCardBody::after {
    transform: scale(1.8);
}

.infraIcon {
    position: relative;
    z-index: 2;
    transition: transform .35s ease;
}

.infraCard:hover .infraIcon {
    transform: translateY(-4px) rotate(-3deg);
}

.infraNumber {
    transition: transform .35s ease, opacity .35s ease;
}

.infraCard:hover .infraNumber {
    transform: translateX(-5px);
    opacity: .75;
}

.infra-title {
    position: relative;
    z-index: 2;
    transition: transform .35s ease;
}

.infraCard:hover .infra-title {
    transform: translateX(4px);
}

.infraCard:hover .infraCardBody {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(17, 42, 72, .12);
}

.infraCardBody::after {
    content: "";
    position: absolute;
    top: -65px;
    right: -50px;
    width: 170px;
    height: 170px;
    border-radius: 40px;
    opacity: .035;
    transform: rotate(30deg);
}

.infraIcon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    border: 1px solid #ddd;
}

.infraIcon svg {
    width: 35px;
    height: 35px;
    color: #10284b;
}

.infraCard .infra-title {
    color: var(--first-color);
    font-family: "Libre Baskerville", serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.22;
    margin-bottom: 5px;
}


.infraCard p {
    margin: 0;
    color: #66758b;
    font-size: 14px;
    line-height: 1.7;
}


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

@media (max-width: 1199px) {
    .infraGrid {
        gap: 30px 25px;
    }



    .infraNumber {
        width: 125px;
        height: 120px;
        font-size: 32px;
    }
}

@media (max-width: 991px) {
    .infraSection {
        padding: 30px 0;
    }

    .infraHead {
        margin-bottom: 45px;
    }

    .infraHead h2 {
        font-size: 34px;
    }

    .infraGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .infraSection {
        padding: 45px 0;
    }

    .infraHead {
        margin-bottom: 35px;
        text-align: left;
    }

    .infraTag {
        margin-bottom: 14px;
        font-size: 12px;
    }

    .infraHead h2 {
        font-size: 27px;
    }

    .infraTitleLine {
        justify-content: flex-start;
        margin: 15px 0;
    }

    .infraHead p {
        font-size: 13px;
        line-height: 1.7;
    }

    .infraGrid {
        grid-template-columns: 1fr;
        gap: 25px;
    }


    .infraNumber {
        width: 105px;
        height: 100px;
        padding: 16px;
        border-radius: 20px 20px 35px 20px;
        font-size: 28px;
    }

    .infraCardBody {
        min-height: auto;
        padding: 22px 20px;
        border-radius: 16px;
    }

    .infraIcon {
        width: 58px;
        height: 58px;
        margin-bottom: 16px;
    }

    .infraIcon svg {
        width: 30px;
        height: 30px;
    }

    .infraCard h3 {
        font-size: 19px;
    }
}


@media(max-width:991px) {
    .serviceFeatureGrid {
        grid-template-columns: 1fr 1fr
    }

    .serviceProcess {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:767px) {
    .serviceHero {
        padding: 55px 0
    }

    .serviceInner,
    .serviceBand {
        padding: 55px 0
    }

    .serviceFeatureGrid,
    .serviceProcess {
        grid-template-columns: 1fr
    }

    .serviceIntroImage {
        height: 300px
    }
}

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

@media(max-width:1199px) {

    .desktopNav {
        gap: 18px;
    }

    .headerBtn {
        margin-left: 10px;
    }

    .productCard {
        grid-column: span 6;
    }

    .aboutContent,
    .whyContent,
    .videoContent {
        padding-left: 20px;
    }

}


@media(max-width:991px) {

    .sectionSpace {
        padding: 75px 0;
    }

    .sectionTitle {
        font-size: 28px;
    }

    .topBarRight {
        display: none;
    }

    .desktopNav,
    .headerBtn {
        display: none;
    }

    .menuButton {
        display: block;
    }

    .headerInner {
        min-height: 72px;
    }

    .heroSection {
        min-height: 540px;
    }

    .heroLayout {
        grid-template-columns: 1fr;
    }

    .heroContent {
        max-width: none;
        padding-top: 50px;
        padding-bottom: 85px;
    }

    .heroVisual {
        padding: 0;
    }

    .heroSlider {
        min-height: 420px;
    }

    .quickServiceWrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .quickServiceItem:nth-child(2) {
        border-right: 0;
    }

    .quickServiceItem:nth-child(-n+2) {
        border-bottom: 1px solid rgba(36, 53, 44, .1);
    }

    .aboutContent {
        padding: 55px 0 0;
    }

    .productSection {
        padding-top: 115px;
    }

    .statsWrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .statItem:nth-child(2) {
        border-right: 0;
    }

    .statItem:nth-child(-n+2) {
        border-bottom: 1px solid rgba(36, 53, 44, .1);
    }

    .whyContent {
        padding: 50px 0 0;
    }

    .whyFloatingCard {
        right: 20px;
    }

    .workGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .workCard:first-child {
        grid-row: auto;
        grid-column: span 2;
    }

    .processGrid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 45px;
    }

    .processGrid::before {
        display: none;
    }

    .videoContent {
        padding: 50px 0 0;
    }

    .faqIntro {
        position: static;
        margin-bottom: 35px;
    }

}


@media(max-width:767px) {

    body {
        font-size: 14px;
    }

    .container>.row,
    .footer .row {
        margin-right: 0;
        margin-left: 0;
    }

    .container>.row>[class*="col-"],
    .footer .row>[class*="col-"] {
        min-width: 0;
    }

    .sectionSpace {
        padding: 42px 0;
    }

    .sectionHead {
        margin-bottom: 28px;
    }

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

    .sectionTitle {
        font-size: 24px;
        line-height: 1.3;
    }

    .sectionText {
        font-size: 14px;
    }

    .topBar {
        display: none;
    }

    .brandMark {
        flex: 0 0 41px;
        width: 41px;
        height: 41px;
    }

    .brandText strong {
        max-width: 210px;
        font-size: 13px;
    }

    .brandText span {
        font-size: 7px;
    }

    .heroSection {
        min-height: 0;
    }

    .heroLayout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .heroContent {
        max-width: none;
        padding: 34px 0 38px;
        padding-top: 0px;
    }
        .heroTitle {
        font-size: clamp(26px, 3.2vw, 76px) !important;
    }

        .productCard {
        grid-column: span 12 !important;
    }
    .benefitCard .cardh3{
        font-size: 18px;
    }
    .benefitCard p{
        font-size: 14px;
    }
    .benefitCard{
        padding: 22px 22px;
    }
    .workInfo .workh3{
        font-size: 20px;
    }

    .commonaboutbox{
            flex-direction: column;
    }
    .aboutContent{
                padding-top: 0px;
        width: 100% !important;
    }
    .sectionTitle{
        font-size: 18px !important;
    }

    .heroVisual {
        min-height: 0;
    }

    .heroSlider {
        min-height: 0;
        height: min(78vw, 300px);
    }

    .heroSlider .swiper-slide {
        height: 100% !important;
    }

    .heroTitle {
        font-size: clamp(28px, 8vw, 35px);
        overflow-wrap: anywhere;
    }

    .heroText {
        margin: 14px 0 20px;
        font-size: 13px;
    }

    .heroButtons .mainBtn {
        width: 100%;
    }

    .heroTrust {
        margin-top: 22px;
    }

    .heroTrustItem {
        width: calc(50% - 5px);
        min-width: 0;
    }

    .heroTrustItem {
        font-size: 10px;
    }

    .heroCurve {
        height: 55px;
    }

    .quickServices {
        margin-top: -15px;
    }

    .quickServiceWrap {
        grid-template-columns: 1fr;
        border-radius: 25px 25px 8px 8px;
    }

    .quickServiceItem {
        min-height: auto;
        padding: 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(36, 53, 44, .1);
    }

    .quickServiceItem:last-child {
        border-bottom: 0;
    }

    .aboutVisual {
        padding-right: 24px;
    }

    .aboutMainImage {
        border-radius: 4px 50px 4px 4px;
    }

    .aboutSmallImage {
        width: 130px;
        height: 150px;
        border-radius: 35px 4px 4px 4px;
    }

    .productSection {
        padding-top: 65px;
    }

    .productHeader {
        display: block;
    }

    .productHeader .mainBtn {
        margin-top: 22px;
    }

    .productCard h3 {
        font-size: 14px;
    }

    .productCard p {
        font-size: 11px;
        line-height: 17px;
    }

    .productMore {
        font-size: 11px;
    }

    .productLabel {
        font-size: 11px;
        opacity: 1;
    }


    .productCard,
    .productCardLarge {
        margin-bottom: 17px;
        border-radius: 6px 35px 6px 6px;
    }

    .productCardContent {
        padding: 12px;
    }

    .statsWrap {
        grid-template-columns: 1fr;
        border-radius: 50px 8px 50px 8px;
    }

    .statItem {
        min-height: 112px;
        border-right: 0;
        border-bottom: 1px solid rgba(36, 53, 44, .1);
    }

    .statItem:last-child {
        border-bottom: 0;
    }

    .statValue {
        font-size: 28px;
    }

    .whyMainImage {
        height: 320px;
        border-radius: 48px 5px 5px 5px;
    }

    .whyFloatingCard {
        right: 12px;
        bottom: 20px;
        width: min(210px, calc(100% - 24px));
    }

    .workGrid {
        grid-template-columns: 1fr;
    }

    .workCard {
        margin-bottom: 0;
    }

    .workCard:first-child {
        grid-column: auto;
        grid-row: auto;
    }

    .processGrid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .videoCard {
        min-height: 280px;
        border-radius: 6px 45px 6px 6px;
    }

    .videoPlay {
        width: 62px;
        height: 62px;
    }

    .testimonialCard {
        border-radius: 35px 5px 35px 5px;
    }

    .ctaSection {
        padding: 50px 0;
    }

    .ctaContent h2 {
        font-size: 25px;
    }

    .ctaButtons .mainBtn {
        width: 100%;
    }

    .contactForm {
        padding: 24px 17px;
        border-radius: 5px 35px 5px 5px;
    }

    .footer {
        padding: 48px 0 20px;
    }

    .footerBrand p,
    .footerLinks a,
    .footerBottom {
        font-size: 13px;
    }

    .footerBottom {
        display: block;
    }

    .footerBottom span {
        display: block;
        margin-top: 7px;
    }

    .heroTag {
        font-size: 10px;
    }

    .whyFloatingCard .why-float-para {
        font-size: 14px;
    }

    .serviceCard p {
        font-size: 14px;
    }

    .serviceNumber {
        font-size: 25px;
    }

    .serviceCard {
        min-height: auto;
    }

    .serviceCard h3 {
        font-size: 20px;
    }

    .whyItem p {
        font-size: 14px;
    }

    .processItem p {
        font-size: 14px;
    }

    .socialLink strong {
        font-size: 18px;
    }

    .socialLink span {
        font-size: 14px;
    }

    .testimonialCard p {
        font-size: 14px;
    }

    .faqContactCard strong {
        font-size: 18px;
    }

    .faqContactCard p {
        font-size: 14px;
    }

    .faqAccordion .accordion-body {

        font-size: 14px;
    }

    .ctaContent p {
        font-size: 14px;
    }

}


@media (min-width: 1200px) and (max-width: 1399px) {

    .brandLogo img {
        width: 160px;
        height: 40px;
    }

    .mainBtn {
        font-size: 14px;
        padding: 0 18px;
    }

    .desktopNav {
        gap: 12px;
    }

}

.whyChooseHead .sectionTitle {
    margin-bottom: 12px;
}

.whyChooseHead .sectionText {
    margin: 0 auto;
    max-width: 620px;
}

.whyChooseLayout {
    display: grid;
    grid-template-columns: 1fr 430px 1fr;
    align-items: center;
    gap: 45px;
}

.whyChooseSide {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.whyChooseItem {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-direction: column;
    text-align: center;
    position: relative;
    height: 100%;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(36, 53, 44, .13);
    border-radius: 8px 55px 8px 8px;
    background: #fff;
    transition: transform .35s ease, box-shadow .35s ease, color .35s ease, background .35s ease;
}

.whyChooseItem:hover {
    color: var(--light-color);
    background: var(--secondry-color);
    border-color: var(--first-color);
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(36, 53, 44, .12);
}

.whyChooseItem:hover .why-title {
    color: #fff;
}

.whyChooseItem:hover p {
    color: #fff;
}

.whyChooseItem .whyChooseIcon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f7f1df;
    color: #66752f;
}

.whyChooseIcon svg {
    width: 24px;
    height: 24px;
}

.whyChooseItem .why-title {
    color: var(--first-color);
    font-family: "Libre Baskerville", serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.22;
    margin-bottom: 5px;
}

.whyChooseImage img:hover {
    transform: scale(1.035);
}




.whyChooseItem p {
    margin: 0;
    color: #747c70;
    font-size: 13px;
    line-height: 1.65;
}

.whyChooseCenter {
    text-align: center;
}

.whyChooseHead {
    text-align: center;
    margin-bottom: 20px;
}

.whyChooseHead .sectionTitle {
    margin: auto;
}

.whyChooseImage {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto 22px;
    overflow: hidden;
        aspect-ratio: 1 / 1;

}

.whyChooseImage img {
    width: 100%;
    height: 100%;
    transition: transform .7s ease;
}

.whyChooseCenter .mainBtn {
    display: inline-flex;
}

@media (max-width: 991px) {
    .whyChooseBox {
        padding: 45px 30px;
    }

    .whyChooseLayout {
        grid-template-columns: 1fr 250px 1fr;
        gap: 25px;
    }

    .whyChooseImage {
        width: 230px;
        height: 230px;
    }
}

@media (max-width: 767px) {
    .whyChooseSection {
        padding: 55px 0;
    }

    .whyChooseLayout {
        grid-template-columns: 1fr;
    }

    .whyChooseCenter {
        order: -1;
    }

    .whyChooseLeft .whyChooseItem {
        text-align: left;
        flex-direction: row;
    }

    .whyChooseSide {
        gap: 20px;
    }

    .whyChooseImage {
        width: 250px;
        height: 250px;
    }
}

@media (max-width: 575px) {
    .whyChooseBox {
        padding: 35px 20px;
        border-radius: 16px;
    }

    .whyChooseHead {
        margin-bottom: 30px;
    }

    .whyChooseItem h3 {
        font-size: 16px;
    }
}






/* =========================================================
   OUR STRENGTH
========================================================== */

.strengthSection {
    position: relative;
    overflow: hidden;
}

.strengthVisual {
    position: relative;
    max-width: 470px;
    padding: 30px 28px 30px 0;
}

.strengthShape {
    position: absolute;
    top: 0;
    right: 0;
    width: 88%;
    height: 100%;
    border-radius: 80px 24px 80px 24px;
    background: #e9eddc;
}

.strengthImage {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 22px 70px 22px 70px;
    box-shadow: 0 20px 45px rgba(40, 52, 29, .13);
}

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



/* CONTENT */

.strengthContent {
    padding-left: 15px;
}

.strengthContent .sectionTitle {
    max-width: 680px;
    margin-bottom: 15px;
}

.strengthIntro {
    max-width: 700px;
    margin: 0 0 35px;
    color: var(--text-muted, #70786b);
    font-size: 14px;
    line-height: 1.8;
}


/* POINTS */

.strengthGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 38px;
}

.strengthItem {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 15px;
    padding: 22px 0;
    border-top: 1px solid #e0e4d9;
}

.strengthIcon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #8f8f8f;
    border-radius: 13px;
    background: #fff;
    color: #52602e;
    transition: .3s ease;
}

.strengthIcon svg {
    width: 25px;
    height: 25px;
}

.strengthItem .h3_title {
    margin: 1px 0 6px;
    color: #28321f;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
}

.strengthItem p {
    margin: 0;
    color: #747c6f;
    font-size: 13px;
    line-height: 1.65;
}

.strengthItem:hover .strengthIcon {
    transform: translateY(-3px);
    background: #4d5a27;
    border-color: #4d5a27;
    color: #fff;
}


/* BUTTON */

.strengthAction {
    margin-top: 25px;
}

.strengthAction .mainBtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* RESPONSIVE */

@media (max-width: 1199px) {
    .strengthGrid {
        column-gap: 25px;
    }

    .strengthImage {
        height: 470px;
    }
}

@media (max-width: 991px) {
    .strengthVisual {
        padding-right: 15px;
    }

    .strengthImage {
        height: 440px;
    }

    .strengthContent {
        padding-left: 0;
    }

    .strengthGrid {
        grid-template-columns: 1fr;
    }

    .strengthIntro {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .strengthVisual {
        max-width: 520px;
        margin: 0 auto 35px;
    }

    .strengthImage {
        height: 450px;
    }

    .strengthGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .strengthVisual {
        padding: 18px 14px 25px 0;
    }

    .strengthImage {
        height: 400px;
        border-radius: 18px 45px 18px 45px;
    }


    .strengthGrid {
        grid-template-columns: 1fr;
    }

    .strengthItem {
        padding: 18px 0;
    }
}



/* =========================================================
   COMPLETE SOLUTION SECTION
========================================================== */

.fulfilmentSection {
    position: relative;
    overflow: hidden;
    background: #fbfaf6;
}

.fulfilmentWrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
}


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

.fulfilmentContent .sectionTitle {
    max-width: 650px;
    margin-bottom: 15px;
}

.fulfilmentIntro {
    max-width: 650px;
    margin: 0 0 32px;
    color: #70786d;
    font-size: 14px;
    line-height: 1.8;
}


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

.fulfilmentGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.fulfilmentItem {
    display: grid;
    gap: 8px;
    min-height: 145px;
    padding: 22px;
    transition: .3s ease;
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(36, 53, 44, .13);
    border-radius: 8px 55px 8px 8px;
    background: #fff;
    transition: transform .35s ease, box-shadow .35s ease, color .35s ease, background .35s ease;
}

.fulfilmentItem:hover {
    position: relative;
    z-index: 2;
    background: #fff;
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(45, 59, 31, .07);
}

.fulfilmentIcon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ded4b3;
    border-radius: 50%;
    background: #fff8e7;
    color: #65723a;
    transition: .3s ease;
}

.fulfilmentIcon svg {
    width: 22px;
    height: 22px;
}

.fulfilmentItem:hover .fulfilmentIcon {
    background: #65723a;
    border-color: #65723a;
    color: #fff;
}

.fulfilmentItem .h3_title {
    margin: 2px 0 6px;
    color: #27321f;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
}

.fulfilmentItem p {
    margin: 0;
    color: #767e71;
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   ACTION
========================================================== */

.fulfilmentAction {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 24px;
}

.fulfilmentNote {
    padding-left: 20px;
    border-left: 1px solid #d5dacc;
}

.fulfilmentNote strong,
.fulfilmentNote span {
    display: block;
}

.fulfilmentNote strong {
    margin-bottom: 3px;
    color: #27321f;
    font-size: 13px;
}

.fulfilmentNote span {
    color: #81887b;
    font-size: 12px;
}


/* =========================================================
   VISUAL
========================================================== */

.fulfilmentVisual {
    position: relative;
    max-width: 520px;
    margin-left: auto;
    padding: 22px 22px 35px 0;
}

.fulfilmentVisualShape {
    position: absolute;
    top: 0;
    right: 0;
    width: 86%;
    height: 88%;
    border: 1px solid var(--secondry-color);
    border-radius: 24px 80px 24px 80px;
}

.fulfilmentImage {
    position: relative;
    z-index: 2;
    aspect-ratio:1/1;
    overflow: hidden;
    border-radius: 70px 20px 70px 20px;
    background: #ece9df;
}

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

.fulfilmentBadge {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 190px;
    padding: 16px 20px;
    border-radius: 18px 8px 18px 8px;
    background: var(--first-color);
    color: #fff;
}

.fulfilmentBadgeIcon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.fulfilmentBadgeIcon svg {
    width: 22px;
    height: 22px;
}

.fulfilmentBadge>span:last-child {
    font-size: 11px;
    line-height: 1.35;
}

.fulfilmentBadge strong {
    display: block;
    margin-top: 2px;
    font-size: 15px;
}



/* =========================================================
   CERTIFICATE SECTION
========================================================== */

.certificateSection {
    position: relative;
    overflow: hidden;
    background: var(--secondry-color);
}

.certificateHead {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
}

.certificateHead .sectionTitle {
    margin-bottom: 10px;
}


.certificateGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.certificateCard {
    position: relative;
    padding: 8px;
    border: 1px solid #e1e5dc;
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: 0 8px 24px rgba(42, 54, 34, .07);
    transition: .3s ease;
     height: 285px;
}

.certificateCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(42, 54, 34, .14);
}

.certificateCard::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 8px;
    background: rgba(30, 44, 24, .35);
    opacity: 0;
    transition: .3s ease;
}

.certificateCard:hover::after {
    opacity: 1;
}

.certificateCard img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}


/* =========================================================
   LIGHTBOX
========================================================== */

.certificateLightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: .25s ease;
}

.certificateLightbox.active {
    opacity: 1;
    visibility: visible;
}

.certificateLightboxOverlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 13, 12, .92);
}


/* TOP BAR */

.certificateLightboxTop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    color: #fff;
}

.certificateCounter {
    font-size: 13px;
    font-weight: 600;
}

.certificateTools {
    display: flex;
    align-items: center;
    gap: 7px;
}

.certificateTools button {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    transition: .2s ease;
}

.certificateTools button:hover {
    background: #fff;
    color: #26351f;
}

.certificateTools svg {
    width: 19px;
    height: 19px;
}


/* IMAGE AREA */

.certificateLightboxStage {
    position: relative;
    z-index: 2;
    width: calc(100% - 180px);
    height: calc(100vh - 110px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.certificateImageHolder {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.certificateImageHolder:active {
    cursor: grabbing;
}

.certificateImageHolder img {
    display: block;
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    transition: transform .15s ease;
}


/* NEXT / PREVIOUS */

.certificateNav {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    transition: .2s ease;
}

.certificateNav:hover {
    background: #fff;
    color: #26351f;
}

.certificateNav svg {
    width: 24px;
    height: 24px;
}

.certificatePrev {
    left: 25px;
}

.certificateNext {
    right: 25px;
}

body.certificateLightboxOpen {
    overflow: hidden;
}





/* =========================================================
   SERVICE AREAS
========================================================== */

.marketSection {
    position: relative;
    overflow: hidden;
    background: #fafbf7;
}

.marketHead {
    max-width: 760px;
    margin: 0 auto 45px;
    text-align: center;
}

.marketHead .sectionTitle {
    margin: auto;
}

.marketHead p {
    max-width: 650px;
    margin: 0 auto;
    color: #737b70;
    font-size: 14px;
    line-height: 1.75;
}


/* TOP LAYOUT */

.marketLayout {
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;
    gap: 40px;
}


/* TITLE */

.marketTitleRow {
    margin-bottom: 12px;
}


.marketTitleRow .city-title {
    margin: 0;
    color: #26321f;
    font-size: 22px;
    font-weight: 500;
}

.marketText {
    max-width: 650px;
    margin: 0 0 22px;
    color: #747c70;
    font-size: 13px;
    line-height: 1.8;
}


/* LOCATIONS */

.marketLocationGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.marketLocation {
    position: relative;
    padding: 9px 9px 9px 20px;
    border: 1px solid #e0e5db;
    border-radius: 8px;
    background: #fff;
    color: #4d5846;
    font-size: 12px;
    font-weight: 500;
    transition: .25s ease;
    display: flex;
    align-items: center;
}

.marketLocation::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--secondry-color);
    border-radius: 50%;
    transform: translateY(-50%);
}

.marketLocation:hover {
    transform: translateY(-2px);
    border-color: var(--secondry-color);
    background: #fffdf6;
}

.marketLocationGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}


/* MAP */

.marketMapBox {
    position: relative;
    overflow: hidden;
    min-height: 330px;
    border-radius: 18px;
    background: #eef1e8;
    box-shadow: 0 14px 35px rgba(39, 52, 30, .09);
}

.marketMapBox img {
    width: 100%;
    height: 330px;
    object-fit: contain;
}



/* BOTTOM */

.marketBottom {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
    gap: 55px;
    margin-top: 45px;
}

.marketBottomImage {
    overflow: hidden;
    height: 320px;
    border-radius: 18px;
    background: #ecefe7;
}

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


/* RESPONSIVE */

@media (max-width: 991px) {

    .marketLayout,
    .marketBottom {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .marketMap {
        order: 2;
    }

    .marketBottomImage {
        height: 350px;
    }

}

@media (max-width: 767px) {

    .marketLocationGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .marketTitleRow h3 {
        font-size: 21px;
    }

}

@media (max-width: 480px) {

    .marketLocationGrid {
        grid-template-columns: 1fr;
    }

    .marketMapBox,
    .marketMapBox img {
        height: 280px;
        min-height: 280px;
    }

    .marketBottomImage {
        height: 280px;
    }

}






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

@media (max-width: 1199px) {
    .certificateGrid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .certificateGrid {
        grid-template-columns: repeat(3, 1fr);
    }

    .certificateLightboxStage {
        width: calc(100% - 130px);
    }

    .certificatePrev {
        left: 15px;
    }

    .certificateNext {
        right: 15px;
    }
}

@media (max-width: 767px) {
    .certificateGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .certificateCard img {
        height: 250px;
    }

    .certificateLightboxStage {
        width: calc(100% - 20px);
        height: calc(100vh - 120px);
    }

    .certificateNav {
        top: auto;
        bottom: 20px;
        transform: none;
    }

    .certificatePrev {
        left: calc(50% - 58px);
    }

    .certificateNext {
        right: calc(50% - 58px);
    }

    .certificateTools button {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 480px) {
    .certificateCard img {
        height: 210px;
    }

    .certificateLightboxTop {
        padding: 12px;
    }

    .certificateTools {
        gap: 4px;
    }

    .certificateTools button {
        width: 35px;
        height: 35px;
    }
}





/* =========================================================
   FOUNDER SECTION
========================================================== */

.founderSection {
    position: relative;
    overflow: hidden;
    background: #f8faf5;
}

.founderContent {
    max-width: 720px;
}

.founderContent .sectionTitle {
    margin-bottom: 8px;
}

.founderSubTitle {
    max-width: 530px;
    margin: 0 0 24px;
    color: var(--secondry-color);
    font-size: 22px;
    line-height: 1.35;
    font-weight: 400;
}

.founderText {
    max-width: 680px;
    margin: 0 0 15px;
    color: #727b6d;
    font-size: 14px;
    line-height: 1.85;
}


/* QUOTE */

.founderQuote {
    position: relative;
    max-width: 650px;
    margin-top: 28px;
    padding: 22px 25px 22px 58px;
    border-left: 3px solid #d5a62e;
    background: #fff;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.founderQuoteMark {
    position: absolute;
    top: 12px;
    left: 18px;
    color: #d5a62e;
    font-family: Georgia, serif;
    font-size: 52px;
    line-height: 1;
}

.founderQuote p {
    margin: 0;
    color: #4d5549;
    font-family: Georgia, serif;
    font-size: 15px;
    line-height: 1.8;
    font-style: italic;
}


/* HIGHLIGHTS */

.founderHighlights {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 25px;
}

.founderHighlight {
    min-width: 170px;
    padding-right: 28px;
    margin-right: 28px;
    border-right: 1px solid #dfe4da;
}

.founderHighlight:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
}

.founderHighlight strong,
.founderHighlight span {
    display: block;
}

.founderHighlight strong {
    margin-bottom: 4px;
    color: #27321f;
    font-size: 18px;
    font-weight: 700;
}

.founderHighlight span {
    color: #899083;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}


/* IMAGE */

.founderVisual {
    position: relative;
    max-width: 470px;
    margin-left: auto;
    padding: 22px 20px 25px 0;
}

.founderVisualBorder {
    position: absolute;
    top: 0;
    right: 0;
    width: 90%;
    height: 92%;
    border: 1px solid var(--secondry-color);
    border-radius: 22px;
}

.founderImage {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio:1/1;
    overflow: hidden;
    border-radius: 18px;
    background: #e9ece4;
}

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


/* IMAGE BADGE */

.founderImageBadge {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    min-width: 185px;
    padding: 15px 20px;
    border-radius: 14px 3px 14px 14px;
    background: var(--first-color);
    color: #fff;
}

.founderImageBadge span,
.founderImageBadge strong {
    display: block;
}

.founderImageBadge span {
    margin-bottom: 3px;
    color: #d8c179;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.founderImageBadge strong {
    font-size: 13px;
    line-height: 1.4;
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .founderSubTitle {
        font-size: 23px;
    }

    .founderVisual {
        padding-right: 12px;
    }

    .founderImage {
        height: 440px;
    }

}

@media (max-width: 767px) {

    .founderVisual {
        max-width: 520px;
        margin: 35px auto 0;
    }

    .founderImage {
        height: 480px;
    }

}

@media (max-width: 575px) {

    .founderSubTitle {
        font-size: 21px;
    }

    .founderText {
        font-size: 13px;
    }

    .founderQuote {
        padding: 20px 18px 20px 48px;
    }

    .founderQuoteMark {
        left: 14px;
        font-size: 44px;
    }

    .founderQuote p {
        font-size: 13px;
    }

    .founderHighlights {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .founderHighlight,
    .founderHighlight:last-child {
        width: 100%;
        margin: 0;
        padding: 0 0 15px;
        border-right: 0;
        border-bottom: 1px solid #dfe4da;
    }

    .founderHighlight:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .founderImage {
        height: 420px;
    }

    .founderImageBadge {
        min-width: 165px;
        padding: 13px 16px;
    }

}



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

@media (max-width: 1199px) {
    .fulfilmentWrap {
        gap: 40px;
    }

    .fulfilmentImage {
        height: 460px;
    }
}

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

    .fulfilmentVisual {
        width: 100%;
        max-width: 650px;
        margin: 10px auto 0;
    }

    .fulfilmentTrust {
        max-width: 100%;
        margin-top: 35px;
    }
}

@media (max-width: 767px) {
    .fulfilmentGrid {
        grid-template-columns: 1fr;
    }

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

    .fulfilmentNote {
        padding-left: 0;
        border-left: 0;
    }

    .fulfilmentTrust {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 10px 20px;
    }

    .fulfilmentTrustItem,
    .fulfilmentTrustItem:first-child,
    .fulfilmentTrustItem:last-child {
        padding: 15px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .fulfilmentTrustItem:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 575px) {
    .fulfilmentIntro {
        font-size: 13px;
    }

    .fulfilmentItem {
        min-height: auto;
        padding: 18px;
    }

    .fulfilmentImage {
        height: 400px;
        border-radius: 45px 15px 45px 15px;
    }

    .fulfilmentVisual {
        padding: 15px 15px 30px 0;
    }

    .fulfilmentBadge {
        min-width: 165px;
        padding: 13px 15px;
    }
}




/* =========================================================
   SITE ENQUIRY POPUP
========================================================== */
.openSiteEnquiry {
    cursor: pointer
}

.siteEnquiryPopup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: .25s ease
}

.siteEnquiryPopup.show {
    opacity: 1;
    visibility: visible
}

.siteEnquiryOverlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 13, .78);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px)
}

.siteEnquiryBox {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(600px, 100%);
    max-height: 90vh;
    overflow: auto;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
    transform: translateY(14px) scale(.98);
    transition: .25s ease
}

.siteEnquiryPopup.show .siteEnquiryBox {
    transform: none
}

.siteEnquiryMedia {
    position: relative;
    min-height: 560px;
    background: #f3f5ed
}

.siteEnquiryMedia>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.siteEnquirySelected {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 15px 17px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12)
}

.siteEnquirySelected span {
    display: block;
    margin-bottom: 3px;
    color: #79805f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.siteEnquirySelected strong {
    display: block;
    color: #27311b;
    font-size: 20px
}

.siteEnquiryContent {
    overflow-y: auto;
    padding: 25px
}

.enquirytitle {
    margin: 8px 0 6px;
    color: #222b18;
    font-size: 22px;
    line-height: 1.2
}

.siteEnquiryContent>p {
    margin: 0 0 15px;
    color: #747c6c;
    font-size: 13px;
    line-height: 1.7;
}

.siteEnquiryGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}


.siteEnquiryField input,
.siteEnquiryField textarea {
    width: 100%;
    padding: 12px 12px;
    border: 1px solid #dfe3d9;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #222;
    font-size: 13px;
    transition: .2s;
}

.siteEnquiryField input:focus,
.siteEnquiryField textarea:focus {
    border-color: #4d5a27;
    box-shadow: 0 0 0 3px rgba(77, 90, 39, .08)
}

.siteEnquiryField textarea {
    resize: vertical
}

.siteEnquirySubmit {
    width: 100%;
    justify-content: center
}

.siteEnquiryClose {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e1e4dc;
    border-radius: 50%;
    background: #fff;
    color: #2b331f;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .09);
    transition: .2s
}

.siteEnquiryClose:hover {
    background: #4d5a27;
    color: #fff
}

body.siteEnquiryOpen {
    overflow: hidden
}


.choose-thi {
    padding-top: 0px;
}

@media(max-width:991px) {
    .siteEnquiryBox {
        grid-template-columns: 1fr;
        overflow-y: auto
    }

    .siteEnquiryMedia {
        min-height: 300px;
        max-height: 340px
    }

    .siteEnquiryContent {
        overflow: visible;
        padding: 28px 22px
    }
}

@media(max-width:575px) {
    .siteEnquiryPopup {
        align-items: flex-end;
        padding: 0
    }

    .siteEnquiryBox {
        max-height: 94vh;
        border-radius: 18px 18px 0 0
    }

    .siteEnquiryMedia {
        min-height: 210px;
        max-height: 230px
    }

    .siteEnquirySelected {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 11px 13px
    }

    .siteEnquirySelected strong {
        font-size: 17px
    }

    .siteEnquiryContent {
        padding: 22px 16px 26px
    }

    .siteEnquiryContent h2 {
        font-size: 24px;
        padding-right: 35px
    }

    .siteEnquiryGrid {
        grid-template-columns: 1fr;
        gap: 0
    }
}


.installationHeading {
    max-width: 720px;
    margin: 0 auto 35px;
    text-align: center;
}


.installationHeading h2 {
    margin: auto;
}

.installationSlider {
    position: relative;

}

.installationCard {
    min-height: 400px;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 16px;
    overflow: hidden;
    transition: .3s ease;
}

.installationCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(55, 45, 28, .09);
}

.installationImage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.installationImage img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(4, 14, 23, .03) 35%, rgba(4, 14, 23, .55) 100%);
}

.installationCard:hover .installationImage img {
    transform: scale(1.045);
}


.videoLightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    background: rgba(22, 22, 22, .95);
    opacity: 0;
    visibility: hidden;
    transition: .25s ease;
}

.videoLightbox.active {
    opacity: 1;
    visibility: visible;
}

.videoLightboxToolbar {
    position: relative;
    z-index: 30;
    height: 54px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    background: rgba(20, 20, 20, .98);
}

.videoLightboxCount {
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
}

.videoLightboxTools {
    height: 100%;
    display: flex;
    align-items: stretch;
}

.lightboxTool {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #ddd;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: .2s ease;
}

.owl-prev {
    position: absolute;
    top: 40%;
    left: -10px;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    background: #ffff !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.owl-nav svg {
    width: 18px;
    height: 18px;
}

.owl-nav button {
    transition: 0.3s;
}

.owl-nav button:hover {
    background: var(--secondry-color) !important;
    border-color: var(--secondry-color) !important;
}

.owl-nav button:hover svg path {
    fill: #ffff;
}

.owl-next {
    position: absolute;
    top: 40%;
    right: -10px;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    background: #ffff !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

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

.owl-dots .owl-dot {
    width: auto;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    background: transparent !important;
    border: 0;
}

.owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    display: block;
    margin: 0;
    background: #d7d1c5;
    border-radius: 50px;
    transition: width .3s ease, background .3s ease, transform .3s ease;
}

.owl-dots .owl-dot:hover span {
    background: #9a7a45;
    transform: scale(1.15);
}

.owl-dots .owl-dot.active span {
    width: 30px;
    background: #566b2f;
    transform: scale(1);
    box-shadow: 0 3px 8px rgba(86, 107, 47, .2);
}

.lightboxTool:hover,
.lightboxTool.active {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.lightboxTool svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lightboxTool .playIcon,
.lightboxTool .pauseIcon {
    stroke: none;
}

.lightboxTool .pauseIcon {
    display: none;
}

.lightboxTool.playing .playIcon {
    display: none;
}

.lightboxTool.playing .pauseIcon {
    display: block;
}

.videoLightboxBody {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.videoLightboxViewer {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 65px;
    transition: padding-right .3s ease;
}

.videoLightbox.thumbsOpen .videoLightboxViewer {
    padding-right: 245px;
}

.lightboxVideo {
    width: min(1095px, calc(100vw - 150px));
    height: min(615px, calc(100vh - 85px));
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.videoLightbox.thumbsOpen .lightboxVideo {
    width: min(950px, calc(100vw - 330px));
}

.lightboxVideo iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.lightboxNav {
    position: absolute;
    top: 50%;
    z-index: 25;
    width: 36px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: rgba(255, 255, 255, .75);
    background: rgba(0, 0, 0, .32);
    border: 0;
    transform: translateY(-50%);
    cursor: pointer;
    transition: .2s ease;
}

.lightboxPrev {
    left: 8px;
}

.lightboxNext {
    right: 8px;
}

.videoLightbox.thumbsOpen .lightboxNext {
    right: 205px;
}

.lightboxNav:hover {
    color: #fff;
    background: rgba(0, 0, 0, .65);
}

.lightboxNav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.videoLightboxThumbPanel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    width: 195px;
    height: 100%;
    padding: 5px;
    background: #fff;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
}

.videoLightbox.thumbsOpen .videoLightboxThumbPanel {
    transform: translateX(0);
}

.videoLightboxThumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.videoThumb {
    position: relative;
    height: 56px;
    padding: 0;
    overflow: hidden;
    background: #ddd;
    border: 2px solid transparent;
    cursor: pointer;
}

.videoThumb.active {
    border-color: #e5a000;
}

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

.videoThumbPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 27px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    color: #fff;
    background: #ff0033;
    border-radius: 5px;
}

.videoThumbPlay svg {
    width: 11px;
    height: 11px;
}

.videoLightboxThumbPanel::-webkit-scrollbar {
    width: 5px;
}

.videoLightboxThumbPanel::-webkit-scrollbar-thumb {
    background: #999;
}

body.videoLightboxOpen {
    overflow: hidden;
}

@media (max-width: 767px) {
    .videoLightboxToolbar {
        padding-left: 10px;
    }

    .lightboxTool {
        width: 45px;
    }

    .videoLightboxViewer,
    .videoLightbox.thumbsOpen .videoLightboxViewer {
        padding: 10px 45px;
    }

    .lightboxVideo,
    .videoLightbox.thumbsOpen .lightboxVideo {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .videoLightboxThumbPanel {
        width: 150px;
    }

    .videoLightbox.thumbsOpen .lightboxNext {
        right: 158px;
    }
}

.installationPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    color: #fff;
    background: var(--secondry-color);
    border: 5px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    transition: .3s ease;
}

.installationPlay:hover {
    color: #fff;
    background: #302517;
    transform: translate(-50%, -50%) scale(1.08);
}

.installationPlay svg {
    width: 20px;
    height: 20px;
    margin-left: 2px;
}

.installationContent {
    padding: 18px 18px 20px;
}

.installationContent>span {
    display: block;
    margin-bottom: 7px;
    color: var(--secondry-color);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
}

.installationContent .install-title {
    margin: 0 0 7px;
    color: #292921;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
}

.installationContent p {
    margin: 0;
    color: #89867e;
    font-size: 12px;
    line-height: 1.5;
}

.installationPrev,
.installationNext {
    position: absolute;
    top: calc(50% - 28px);
    z-index: 5;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #292921;
    background: #fff;
    border: 1px solid #dedbd4;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .06);
    cursor: pointer;
    transition: .3s ease;
}

.installationPrev {
    left: 0;
    transform: translateX(-50%);
}

.installationNext {
    right: 0;
    transform: translateX(50%);
}

.installationPrev:hover,
.installationNext:hover {
    color: #fff;
    background: #302517;
    border-color: #302517;
}

.installationPrev svg,
.installationNext svg {
    width: 19px;
    height: 19px;
}

.installationPagination {
    bottom: 0 !important;
}

.installationPagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 4px !important;
    background: #c9c5bc;
    border-radius: 10px;
    opacity: 1;
    transition: .3s ease;
}

.installationPagination .swiper-pagination-bullet-active {
    width: 24px;
    background: #c98838;
}

.installationPagination {
    text-align: center;
}

@media (max-width: 1199px) {
    .installationImage {
        height: 220px;
    }
}

@media (max-width: 767px) {
    .installationSection {
        padding: 55px 0 45px;
    }

    .installationHeading {
        margin-bottom: 25px;
    }

    .installationHeading h2 {
        font-size: 27px;
    }

    .installationSlider {
        padding: 0 5px 40px;
    }

    .installationImage {
        height: 230px;
    }

    .installationPrev,
    .installationNext {
        display: none;
    }
}

@media (max-width: 575px) {
    .installationImage {
        height: 220px;
    }

    .installationContent h3 {
        font-size: 17px;
    }
}


.infraSection {
    background: linear-gradient(180deg, #fff 0%, #f4f7ef 100%);
}

.infraHeading {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}


.infraHeading h2 {
    margin: auto;
}

.infraHeading p {
    max-width: 670px;
    margin: 0 auto;
    color: #70746b;
    font-size: 14px;
    line-height: 1.7;
}

.infraSlider {
    position: relative;
}

.infraSlider .owl-stage {
    display: flex;
}

.infraSlider .owl-item {
    display: flex;
}

.infraCard {
    width: 100%;
    background: #fff;
    border: 1px solid #dfdfd8;
    border-radius: 16px;
    overflow: hidden;
    transition: .3s ease;
}

.infraCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(40, 50, 28, .1);
}

.infraImage {
        aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 15px;
}

.infraImage img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

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

.infraContent {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
}

.infraContent .infa-title {
    margin: 0;
    color: #24271e;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
}

.infraSlider .owl-nav {
    margin: 0;
}

.infraSlider .owl-nav button.owl-prev,
.infraSlider .owl-nav button.owl-next {
    position: absolute;
    top: 42%;
    width: 42px;
    height: 42px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    color: #333 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    transform: translateY(-50%);
    transition: .3s ease;
}

.infraSlider .owl-nav button.owl-prev {
    left: -20px;
}

.infraSlider .owl-nav button.owl-next {
    right: -20px;
}

.infraSlider .owl-nav button:hover {
    color: #fff !important;
    background: #566b2f !important;
    border-color: #566b2f !important;
}

.infraSlider .owl-nav button svg {
    width: 18px;
    height: 18px;
}

.infraSlider .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
}

.infraSlider .owl-dots .owl-dot span {
    width: 7px;
    height: 7px;
    display: block;
    margin: 0 !important;
    background: #c9c8bf;
    border-radius: 20px;
    transition: .3s ease;
}

.infraSlider .owl-dots .owl-dot.active span {
    width: 25px;
    background: var(--secondry-color);
}

.infraButton {
    margin-top: 28px;
    text-align: center;
}


.infraButton svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {
    .infraSection {
        padding: 55px 0;
    }

    .infraHeading h2 {
        font-size: 28px;
    }

    .infraHeading p {
        font-size: 13px;
    }

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



.clientLogoHeading {
    max-width: 720px;
    margin: 0 auto 35px;
    text-align: center;
}

.clientLogoHeading h2 {
    margin: auto;
}

.section-para {
    max-width: 650px;
    margin: 0 auto;
    color: #77796f;
    font-size: 14px;
    line-height: 1.7;
}

.clientLogoSlider {
    position: relative;
}

.clientLogoCard {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #fff;
    border: 1px solid #e3e3dc;
    border-radius: 15px;
    transition: .3s ease;
    margin-top: 10px;
    aspect-ratio: 1 / 1;
}

.clientLogoCard:hover {
    transform: translateY(-4px);
    border-color: var(--secondry-color);
    box-shadow: 0 12px 25px rgba(50, 50, 30, .08);
}

.clientLogoCard img {
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
    transition: .3s ease;
}

.clientLogoCard:hover img {
    filter: grayscale(0);
    transform: scale(1.03);
}

.clientLogoSlider .owl-nav {
    margin: 0;
}

.clientLogoSlider .owl-nav button.owl-prev,
.clientLogoSlider .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    width: 38px;
    height: 38px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    color: #2d3027 !important;
    background: #fff !important;
    border: 1px solid #dadbd4 !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .06);
    transform: translateY(-50%);
    transition: .3s ease;
}

.clientLogoSlider .owl-nav button.owl-prev {
    left: -18px;
}

.clientLogoSlider .owl-nav button.owl-next {
    right: -18px;
}

.clientLogoSlider .owl-nav button:hover {
    color: #fff !important;
    background: #566b2f !important;
    border-color: #566b2f !important;
}

.clientLogoSlider .owl-nav button svg {
    width: 17px;
    height: 17px;
}

.clientLogoSlider .owl-dots {
    display: none;
}

@media (max-width: 767px) {
    .clientLogoSection {
        padding: 55px 0;
    }

    .clientLogoHeading h2 {
        font-size: 27px;
    }

    .clientLogoHeading p {
        font-size: 13px;
    }

    .clientLogoCard {
        height: 95px;
    }

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

.error,.error-message{
    color: red;
    font-size: 13px;
}


.faqSection {
    padding: 70px 0;
    background: #F3F7F9;
    font-family: Arial, sans-serif;
}

.faqSection .container {
    width: min(1320px, calc(100% - 30px));
    margin: auto;
}

.faqGrid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 55px;
    align-items: start;
}

.faqEyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .5px;
    color: #e49d16;
}

.faqIntro {
    margin: auto;
    color: #74736c;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.faqHelpBox {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid #d9e0e4;
    border-radius: 10px;
    background: #f9fafb;
}

.faqHelpIcon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff;
}

.faqHelpIcon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: var(--secondry-color);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.faqHelpBox span {
    display: block;
    margin-bottom: 5px;
    color: #89939b;
    font-size: 12px;
}

.faqHelpBox strong {
    display: block;
    color: #56606a;
    font-size: 14px;
    font-weight: 600;
}


.faqCallBtn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.faqRight {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.faqItem {
    overflow: hidden;
    border: 1px solid #d9e0e4;
    border-radius: 10px;
    background: #fff;
    transition: .3s ease;
}

.faqQuestion {
    width: 100%;
    min-height: 64px;
    display: grid;
    grid-template-columns: 38px 1fr 24px;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.faqNumber {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #f6f8fa;
    color: #8b969f;
    font-size: 10px;
    font-weight: 700;
    transition: .3s ease;
}

.faqQuestionText {
    color: #253b4b;
    font-size: 15px;
    font-weight: 500;
}

.faqArrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.faqArrow svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #65727c;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: .3s ease;
}

.faqAnswer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.faqAnswerInner {
    padding: 0 18px 16px 66px;
    color: #66737d;
    font-size: 13px;
    line-height: 1.7;
}

.faqItem.active {
    background: #fffafa;
}
.faqItem.active .faqQuestion{
background: var(--light-color);
}


.faqItem.active .faqNumber {
    background: var(--secondry-color);
    color: #fff;
}

.faqItem.active .faqArrow svg {
    transform: rotate(0deg);
}

.section-para{
       max-width: 700px;
    margin: auto;
        font-size: 13px;

}
.clientLogoHeading .sectionTitle{
  margin:auto;
}

@media(max-width:991px) {
    .faqGrid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .faqIntro {
        max-width: 600px;
    }

    .faqHelpBox {
        max-width: 450px;
    }
}

@media(max-width:575px) {
    .faqSection {
        padding: 45px 0;
    }

    .faqSection .container {
        width: calc(100% - 24px);
    }

    .faqLeft h2 {
        font-size: 28px;
    }

    .faqQuestion {
        grid-template-columns: 32px 1fr 20px;
        gap: 10px;
        min-height: 60px;
        padding: 0 12px;
    }

    .faqNumber {
        width: 30px;
        height: 30px;
    }

    .faqQuestionText {
        font-size: 13px;
        line-height: 1.4;
    }

    .faqAnswerInner {
        padding: 0 12px 15px 54px;
        font-size: 12px;
    }
}


.companyInfrastructureSection {
    padding: 65px 0;
    background: #fff;
}

.companyInfrastructureSection .container {
    width: min(1320px, calc(100% - 30px));
    margin: auto;
}

.infrastructureHead {
    margin-bottom: 25px;
}

.infrastructureHead span {
    display: block;
    margin-bottom: 5px;
    color: #d99b1d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .7px;
}

.infrastructureHead h2 {
    margin: 0;
    color: #384754;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 700;
}

.infrastructureGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.infrastructureCard {
    position: relative;
    height: 320px;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    background: #eee;
}

.infrastructureCard>img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .55s ease;
}

.infrastructureOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .8) 100%);
    transition: .3s;
}

.infrastructureContent {
    position: absolute;
    left: 16px;
    right: 15px;
    bottom: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
}

.infrastructureNumber {
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e5a41e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.infrastructureContent h3 {
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
}

.infrastructureViewIcon {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    opacity: 0;
    transform: translateY(-8px);
    transition: .3s ease;
}

.infrastructureViewIcon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #253a48;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.infrastructureCard:hover>img {
    transform: scale(1.06);
}

.infrastructureCard:hover .infrastructureViewIcon {
    opacity: 1;
    transform: translateY(0);
}

.infrastructureCard:hover .infrastructureOverlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .88) 100%);
}


/* Gallery */
.infrastructureGallery {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    visibility: hidden;
    opacity: 0;
    transition: .3s ease;
}

.infrastructureGallery.active {
    visibility: visible;
    opacity: 1;
}

.infrastructureGalleryBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 15, 20, .92);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.infrastructureGalleryWrapper {
    position: relative;
    z-index: 2;
    width: min(1100px, 100%);
    max-height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
}

.infrastructureGalleryTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.infrastructureGalleryTitle {
    display: flex;
    align-items: center;
    gap: 12px;
}

.infrastructureGalleryTitle>span {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dfa21d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.infrastructureGalleryTitle h4 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.infrastructureGalleryClose {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: .3s;
}

.infrastructureGalleryClose svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.infrastructureGalleryClose:hover {
    background: #dfa21d;
    border-color: #dfa21d;
}

.infrastructureGalleryMain {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.infrastructureGalleryImage {
    width: 100%;
    height: min(68vh, 650px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.infrastructureGalleryImage img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 10px;
}

.infrastructureGalleryArrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(13, 27, 35, .75);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transform: translateY(-50%);
    cursor: pointer;
    transition: .3s;
}

.infrastructureGalleryArrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.infrastructureGalleryArrow:hover {
    background: #dfa21d;
    border-color: #dfa21d;
}

.infrastructureGalleryPrev {
    left: 15px;
}

.infrastructureGalleryNext {
    right: 15px;
}

.infrastructureGalleryBottom {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 15px;
}

.infrastructureGalleryCounter {
    min-width: 55px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #8e9aa2;
    font-size: 13px;
}

.infrastructureGalleryCounter strong {
    color: #fff;
    font-size: 17px;
}

.infrastructureGalleryThumbs {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 9px;
    overflow-x: auto;
    padding-bottom: 3px;
}

.infrastructureGalleryThumb {
    width: 72px;
    height: 55px;
    flex: 0 0 72px;
    overflow: hidden;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    opacity: .55;
    transition: .3s;
}

.infrastructureGalleryThumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 5px;
}

.infrastructureGalleryThumb.active {
    opacity: 1;
    border-color: #dfa21d;
}

body.infrastructureGalleryOpen {
    overflow: hidden;
}


@media(max-width:991px) {
    .infrastructureGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .infrastructureCard {
        height: 300px;
    }
}

@media(max-width:575px) {
    .companyInfrastructureSection {
        padding: 45px 0;
    }

    .infrastructureGrid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .infrastructureCard {
        height: 270px;
    }

    .infrastructureHead h2 {
        font-size: 24px;
    }

    .infrastructureGallery {
        padding: 15px;
    }

    .infrastructureGalleryImage {
        height: 60vh;
    }

    .infrastructureGalleryArrow {
        width: 40px;
        height: 40px;
    }

    .infrastructureGalleryPrev {
        left: 7px;
    }

    .infrastructureGalleryNext {
        right: 7px;
    }

    .infrastructureGalleryBottom {
        gap: 10px;
    }

    .infrastructureGalleryThumbs {
        justify-content: flex-start;
    }

    .infrastructureGalleryTitle h4 {
        font-size: 15px;
    }
}



.companyInfrastructure {
    padding: 30px 0 55px;
}

.companyInfrastructure .container {
    width: min(1180px, calc(100% - 30px));
    margin: auto;
}

.companyInfrastructureTitle {
    margin: 0 0 20px;
    color: #374452;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
}

.companyInfrastructureGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.companyInfrastructureCard {
    position: relative;
    aspect-ratio: 1 / 1;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: #eee;
}

.companyInfrastructureCard>img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}

.companyInfrastructureOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .72) 100%);
}

.companyInfrastructureInfo {
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 13px;
    z-index: 2;
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.companyInfrastructureInfo {
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
}

.companyInfrastructureInfo small {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
    color: rgba(255, 255, 255, .85);
}

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

.infrastructureHiddenImage {
    display: none;
}

@media(max-width:991px) {
    .companyInfrastructureGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:575px) {
    .companyInfrastructureGrid {
        grid-template-columns: 1fr;
    }

    .companyInfrastructureCard {
        height: 270px;
    }
}



.freightTechnologySection {
    padding: 90px 0;
    background: #f7f8fa;
    overflow: hidden;
}

.freightTechnologySection .container {
    width: min(1320px, calc(100% - 40px));
    margin: 0 auto;
}

.technologyHeading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.technologyHeading h2 {
    margin: auto;
    width: 100%;
}

.technologyHeading p {
    max-width: 680px;
    margin: 0 auto;
    color: #6d7480;
    font-size: 15px;
    line-height: 1.8;
}

.technologyGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.technologyCard {
    position: relative;
    min-height: 200px;
    padding: 20px 50px 20px 20px;
    background: #fff;
    border: 1px solid #e3e6e9;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    overflow: hidden;
    border-radius: 42px 6px 42px 6px;
}

.technologyCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--first-color);
    transition: height .35s ease;
}

.technologyCard::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -45px;
    width: 115px;
    height: 115px;
    border: 1px solid #eceff1;
    border-radius: 50%;
    transition: transform .4s ease;
}

.technologyCard:hover {
    transform: translateY(-7px);
    border-color: #d9dde1;
    box-shadow: 0 18px 40px rgba(16, 24, 32, .08);
}

.technologyCard:hover::before {
    height: 100%;
}

.technologyCard:hover::after {
    transform: scale(1.25);
}

.technologyNumber {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 26px;
    background: #f4f1ea;
    color: var(--secondry-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.technologyContent {
    position: relative;
    z-index: 2;
}

.technologyContent h3 {
    margin: 0 0 12px;
    color: #111820;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 600;
}

.technologyContent p {
    margin: 0;
    color: #69717d;
    font-size: 14px;
    line-height: 1.75;
}

.technologyArrow {
    position: absolute;
    right: 26px;
    top: 32px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #111820;
    background: #fff;
    border: 1px solid #d9dde1;
    transition: all .3s ease;
    border-radius: 10px;
}

.technologyArrow svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.technologyCard:hover .technologyArrow {
    color: #fff;
    background: var(--secondry-color);
    border-color: var(--secondry-color);
}

.technologyCard:hover .technologyArrow svg {
    animation: techArrowMove .5s ease;
}

@keyframes techArrowMove {
    0% {
        transform: translateX(0);
    }

    45% {
        transform: translateX(4px);
    }

    100% {
        transform: translateX(0);
    }
}

@media (max-width: 991px) {
    .freightTechnologySection {
        padding: 70px 0;
    }

    .technologyGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .freightTechnologySection {
        padding: 55px 0;
    }

    .freightTechnologySection .container {
        width: min(100% - 28px, 1320px);
    }

    .technologyHeading {
        margin-bottom: 35px;
    }

    .technologyHeading h2 {
        font-size: 30px;
        letter-spacing: -.8px;
    }

    .technologyHeading p {
        font-size: 14px;
    }

    .technologyGrid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .technologyCard {
        min-height: auto;
        padding: 26px 65px 26px 24px;
    }

    .technologyNumber {
        width: 38px;
        height: 38px;
        margin-bottom: 20px;
    }

    .technologyArrow {
        top: 25px;
        right: 20px;
        width: 38px;
        height: 38px;
    }

    .technologyContent h3 {
        font-size: 18px;
    }
    .what-float-btn{
    bottom: 15%;
    left: 10px;
    }
}


.companyProfileSection {
    padding: 55px 0;
    background: #fff;
    color: #27374d;
}

.companyProfileHeading {
    margin-bottom: 22px;
}

.companyProfileHeading h2 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    color: #334155;
}

.companyProfileHeading p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #7b8495;
}

/* LEFT */
.companyProfileMedia {
    position: relative;
}

.companyProfileImage {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #f5f5f5;
}

.companyProfileImage img {
    width: 100%;
    height: 305px;
    display: block;
    object-fit: cover;
}

.companyProfilePlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 36px;
    border: 0;
    border-radius: 9px;
    transform: translate(-50%, -50%);
    background: #e99a09;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.companyProfilePlay svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

.companyProfileImageInfo {
    position: relative;
    width: calc(100% - 24px);
    margin: -22px auto 0;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(30, 41, 59, .08);
}

.companyProfileImageInfo strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 700;
    color: #4b5563;
}

.companyProfileImageInfo span {
    display: block;
    font-size: 11px;
    color: #8a94a3;
}

/* RIGHT INFO GRID */
.companyProfileInfoGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.companyProfileInfoBox {
    min-height: 62px;
    padding: 11px 12px;
    border: 1px solid #dbe1e8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
}

.companyProfileIcon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fff5f2;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.companyProfileIcon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--secondry-color);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.companyProfileInfoBox span {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    color: #8b93a3;
}

.companyProfileInfoBox strong {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #344054;
}

.companyProfileVerified {
    color: #07883d !important;
}

/* ABOUT */
.companyProfileAbout {
    margin-top: 14px;
}

.company-title {
    margin: 0 0 7px;
    font-size: 18px;
    font-weight: 700;
    color: #334155;
}

.companyProfileAbout p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #596273;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .companyProfileImage img {
        height: 340px;
    }
}

@media (max-width: 767px) {
    .companyProfileSection {
        padding: 35px 0;
    }

    .companyProfileHeading h2 {
        font-size: 24px;
    }

    .companyProfileInfoGrid {
        grid-template-columns: 1fr;
    }

    .companyProfileImage img {
        height: 280px;
    }
}

@media (max-width: 480px) {
    .companyProfileImage img {
        height: 235px;
    }

    .companyProfileInfoBox {
        align-items: flex-start;
    }
}

/* Video Section */
.video-section {
    padding: 50px 0;
}

.video-section .section-title p {
    max-width: 720px;
    font-size: 15px;
    color: #555;
}

/* Video Box */
.video-box {
    position: relative;
    height: 380px;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.video-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Play Button */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    border-radius: 50%;
    background: var(--secondry-color);
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    animation: pulse 1.5s infinite;
}

.play-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgb(77 90 39 / 34%);
    }

    100% {
        box-shadow: 0 0 0 35px rgb(77 90 39 / 34%);
    }
}

/* Video Title */
.video-title {
    text-align: center;
    margin-top: 12px;
}

.video-title a {
    font-size: 17px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
}

.video-title a:hover {
    color: #d9141b;
}


.marketAreaSection {
    padding: 70px 0;
    background: #f7f7f7;
}

.marketAreaGroup+.marketAreaGroup {
    margin-top: 45px;
}

.marketAreaHeading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.marketAreaLine {
    width: 38px;
    height: 3px;
    background: var(--secondry-color);
}

.marketAreaHeading h2 {
    margin: 0;
    color: #151515;
    font-size: 20px;
    font-weight: 500;
}

.marketAreaGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.marketAreaItem {
    min-height: 45px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: #fff;
    border: 1px solid #e1e1e1;
    color: #222;
    text-decoration: none;
    transition: .3s ease;
}

.marketAreaItem span {
    font-size: 13px;
    font-weight: 500;
}

.marketAreaItem svg {
    min-width: 16px;
    color: var(--secondry-color);
    transition: .3s ease;
}

.marketAreaItem:hover {
    background: var(--secondry-color);
    border-color: var(--secondry-color);
    color: #fff;
    transform: translateY(-2px);
}

.marketAreaItem:hover svg {
    color: #fff;
    transform: translateX(3px);
}

@media (max-width: 1199px) {
    .marketAreaGrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .marketAreaSection {
        padding: 55px 0;
    }

    .marketAreaGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .marketAreaSection {
        padding: 45px 0;
    }

    .marketAreaHeading h2 {
        font-size: 24px;
    }

    .marketAreaGrid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .marketAreaItem {
        min-height: 50px;
        padding: 0 15px;
    }
}

.video-thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 28px;
    border-radius: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16'%3E%3Crect x='1' y='3' width='14' height='10' rx='3' fill='%23FF0000'/%3E%3Cpath d='M6.5 5.5L11 8L6.5 10.5V5.5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.mediaVideoPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: red;
    box-shadow: 0 8px 22px rgba(6, 17, 28, .20);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.mediaVideoPlay svg {
    width: 28px;
    height: 28px;
}


/* DEFAULT - HIDE VIDEO ICON */
.productMainImage>a>.mediaVideoPlay {
    display: none !important;
}


/* ONLY VIDEO ACTIVE - SHOW ICON */
.productMainImage>a.video-active>.mediaVideoPlay {
    display: flex !important;
}

.openProductEnquiryPopup.video-active {
    cursor: pointer;
}

.popup-video-wrap {
    width: 100%;
    height: 100%;
}

.popup-video-frame {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 220px;
    margin-top: 10px;
    padding: 12px 12px 16px;
    background: #fff;
    border-radius: 22px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    border: 1px solid #b4b4b4;
    margin: 10px 5px;
}

.blog-card-media {
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 8/5;
    background: #e8e8e8;
}

.blog-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 4px 2px;
}

.blog-date {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    width: fit-content;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dynamic-colour);
    line-height: 1;
}

.blog-date-day {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.blog-date-month,
.blog-date-year {
    margin-top: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.9;
}

.blog-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1a2e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: none;
    transform: none;
}

.blogs-slider .owl-item:nth-child(6n + 1) .blog-card {
    transform: rotate(-3.2deg);
}

.blogs-slider .owl-item:nth-child(6n + 2) .blog-card {
    transform: rotate(2.4deg);
}

.blogs-slider .owl-item:nth-child(6n + 3) .blog-card {
    transform: rotate(-1.6deg);
}

.blogs-slider .owl-item:nth-child(6n + 4) .blog-card {
    transform: rotate(3deg);
}

.blogs-slider .owl-item:nth-child(6n + 5) .blog-card {
    transform: rotate(-2.2deg);
}

.blogs-slider .owl-item:nth-child(6n + 6) .blog-card {
    transform: rotate(1.8deg);
}



.popup-main-media {
    position: relative;
    width: 100%;
    background: #f5f6f7;
    overflow: hidden;
        height: fit-content;
}


.popup-image-zoom {
        aspect-ratio: 1 / 1;
}

.popup-main-image {
    width: 100%;
    display: block;
    object-fit: contain;
    height: 100%;
}

.popup-video-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.popup-video-frame {
    width: 100%;
    height: 520px;
    display: block;
    border: 0;
}

.mediaHidden {
    display: none !important;
}

.productPopupThumb {
    position: relative;
}

.productPopupVideoThumb .productPopupPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff0000;
    color: #fff;
    border-radius: 6px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.productPopupPlay svg {
    width: 16px;
    height: 16px;
}

/* =========================================================
   PRODUCT THUMBNAIL SLIDER FIX
========================================================= */

.productThumbSlider {
    width: 100%;
    overflow: hidden;
}

.productThumbSlider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    overflow: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
        justify-content: center;
}

.mediaThumbWrapper .swiper-slide {
    width: auto;
}


.productThumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 4px;
}

.productThumb.active {
    border-color: var(--secondary-color);
}

.mediaThumbPrev,
.mediaThumbNext {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 28px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #555;
    border: 0;
    transform: translateY(-50%);
    cursor: pointer;
}


.mediaThumbWrapper {
    position: relative;
    width: 385px;
    max-width: 100%;
    margin: 15px auto 0;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content:center;
}

.productThumbSlider {
    flex: 1;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.productThumbSlider::-webkit-scrollbar {
    display: none;
}

.productThumb {
   position: relative;
    height: 75px;
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 7px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .25s ease;
    aspect-ratio: 1 / 1;
}

.productThumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 4px;
}

.productThumb:hover,
.productThumb.active {
    border-color: #526324;
}

.video-thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 24px;
    border-radius: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16'%3E%3Crect x='1' y='3' width='14' height='10' rx='3' fill='%23FF0000'/%3E%3Cpath d='M6.5 5.5L11 8L6.5 10.5V5.5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mediaThumbNav {
    flex: 0 0 30px;
    width: 30px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #555;
    cursor: pointer;
}

.mediaThumbNav svg {
    width: 16px;
    height: 16px;
}

.mediaThumbNav:disabled {
    opacity: .3;
    cursor: default;
}


.categoryHeaderTitle {
    font-size: 25px;
    font-weight: 500;
}

@media (max-width: 576px) {
    .mediaThumbWrapper {
        width: 100%;
        gap: 6px;
    }

    .mediaThumbNav {
        flex: 0 0 25px;
        width: 25px;
    }
}



@media (min-width: 992px) {
    .mediaThumbPrev {
        left: -34px;
    }
}


@media (min-width: 576px) {
    .mediaThumbPrev {
        left: -28px;
    }
}

.mediaThumbPrev {
    left: -32px;
}

@media (min-width: 992px) {
    .mediaThumbNext {
        right: -34px;
    }
}

@media (min-width: 576px) {
    .mediaThumbNext {
        right: -28px;
    }

}

.mediaThumbNext {
    right: -32px;
}


.mediaThumbPrev svg,
.mediaThumbNext svg {
    width: 20px;
    height: 20px;
}


.scroll-width {
    height: 550px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 25px;
}

.scroll-width2{
    overflow-y: auto;
    scrollbar-width: thin;
}
.scroll-width2 h3,.scroll-width2 h4,.scroll-width2 h2{
        font-size: 20px;
}
.scroll-width h3,.scroll-width h4,.scroll-width h2{
        font-size: 20px;
}

.commonaboutbox{
        display: flex;
        align-items: center;
}
.aboutContent {
        width: 55%;
}



@media (min-width: 992px) {
    .details-gallary {
        position: relative;
        top: auto;
        float: right;
        width: 500px;
        max-width: 46%;
        margin: 0 0 28px 40px;
        z-index: 9;
    }
}

@media (min-width: 1200px) {
    .details-gallary {
               max-width: 50%;
        margin-left: 25px
    }
}

.blog-gallary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}


#st-1.st-animated {
    -moz-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in;
    -ms-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in;
    -o-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in;
    -webkit-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in;
    transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in;
}
#st-1 {
    font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;
    direction: ltr;
    display: block;
    opacity: 1;
    text-align: center;
    z-index: 94034;
}

#st-1 .st-btn {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: opacity 0.2s ease-in, top 0.2s ease-in;
    -ms-transition: opacity 0.2s ease-in, top 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in, top 0.2s ease-in;
    -webkit-transition: opacity 0.2s ease-in, top 0.2s ease-in;
    transition: opacity 0.2s ease-in, top 0.2s ease-in;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 32px;
    line-height: 32px;
    margin-right: 8px;
    padding: 0 8px;
    position: relative;
    text-align: center;
    top: 0;
    vertical-align: top;
    white-space: nowrap;
}

#st-1.st-has-labels .st-btn {
    min-width: 120px;
}

#st-1 .st-btn > img {
    display: inline-block;
    height: 16px;
    width: 16px;
    position: relative;
    top: 8px;
    vertical-align: top;
}
#st-1 .st-btn > span {
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    color: #fff;
    display: inline-block;
    font-weight: 500;
    letter-spacing: 0.5px;
    min-width: 60px;
    opacity: 1;
    padding: 0 6px;
    position: relative;
    vertical-align: top;
}

#st-1 .st-btn[data-network='facebook'] > span {
    color: #fff;
}

#st-1 .st-btn[data-network='facebook'] {
    background-color: #4267B2;
}
#st-1 .st-btn[data-network='twitter'] {
    background-color: #000000;
}
#st-1 .st-btn[data-network='whatsapp'] {
    background-color: #25d366;
}


#st-1 .st-btn[data-network='linkedin'] {
    background-color: #0077b5;
}
#st-1 .st-btn[data-network='email'] {
    background-color: #7d7d7d;
}

#st-1 .st-btn[data-network='pinterest'] {
    background-color: #CB2027;
}
#st-1 .st-btn[data-network='sharethis'] {
    background-color: #95D03A;
}

.sharethis-inline-share-buttons {
    margin-bottom: 20px;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
}

#st-1 .st-btn:hover {
    opacity: .8;
    top: -4px;
}

.blog_details_img {
     width: 100%;
    text-align: center;
    height: 500px;
    overflow: hidden;
    position: sticky;
    top: 90px;
}

.blog_details_img img {
     width: 100%;
    height: 100%;
    object-fit: cover;
}
.blogArticle{
    margin-top: 20px;
}

.blogdetails-title{
        margin: 5px 0 5px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

@media (min-width: 1200px) {
    .blogSidebar {
        position: sticky;
        top: 90px;
        align-self: start;
    }
}

.blogSidebarBox {
    padding: 20px;
    border: 1px solid #e1e6ed;
    background: #f6f8fb;
}
.blogSidebarBox h3 {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 500;
}

.blogToc {
    display: flex;
    flex-direction: column;
}
.blogToc a {
    position: relative;
    padding: 9px 0 9px 17px;
    border-bottom: 1px solid #e1e6ed;
    color:#454b53;
    font-size: 13px;
    line-height: 1.4;
}
.blogToc a::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:var(--secondry-color);
}

.blogDetailsGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 0 auto;
}

@media (min-width: 1200px) {
    .blogDetailsGrid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 35px;
    }
}



.blogSidebarCta {
    margin-top: 18px;
    padding: 22px;
    background: linear-gradient(135deg, var(--secondry-color), var(--first-color));
}

.blogSidebarCta>span {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
}
.blogSidebarCta .sidebar-title{
    margin: 0 0 10px;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
}

.blogSidebarCta p {
 color: #b9b9b9;
    font-size: 14px;
}

.blogSidebarCta a {
 color: var(--secondry-color);
    background: #fff;
    border-color: #Fff;
    font-size: 12px;
    font-weight: 800;
    transition: all .3s ease;
}

.blogSidebarCta a:hover{
  background:#fff;
}



@media (min-width: 1400px) { 
    
    .scroll-width2{
    height: 430px;

    }

}


.footerContactBlock {
    width: 100%;
}

.footerTitle {
    margin-bottom: 8px;
    color: #fff;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
}

.footerContactItem {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.footerContactIcon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(243 243 243 / 28%);
    border-radius: 50%;
    color: #ffffff;
}

.footerContactIcon svg {
    width: 16px;
    height: 16px;
}

.footerContactContent {
    flex: 1;
    min-width: 0;
}

.footerContactContent span {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
}

.footerContactContent strong,
.footerContactContent a {
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
    text-decoration: none;
    word-break: break-word;
}

.footerContactContent a:hover {
    color: #cfcfcf;
}


/* FOLLOW */
.footerFollowBlock {
    margin-top: 24px;
}

.footerFollowTitle {
    margin-bottom: 8px;
}

.footerSocials {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footerSocials a {
    width: 34px;
    height: 34px;

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

    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;

    color: #fff;
    text-decoration: none;

    transition: all .25s ease;
}

.footerSocials a svg {
    width: 15px;
    height: 15px;
}

.footerSocials a:hover {
    color: var(--secondry-color);
    border-color: #ffffff;
    background: #fff;
}


/* TABLET */
@media (max-width: 991px) {

    .footerContactBlock {
        margin-top: 10px;
    }

}


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

    .footerTitle {
        font-size: 18px;
    }

    .footerContactItem {
        gap: 10px;
        margin-bottom: 14px;
    }

    .footerContactIcon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .footerContactContent strong,
    .footerContactContent a {
        font-size: 12px;
    }

}

.googleMap {
    width: 100%;
    overflow: hidden;
}
.googleMap iframe {
    width: 100%;
    height: 380px;
    display: block;
    border: 0;
}

@media (min-width: 992px) {
    .googleMap iframe {
        height: 460px;
    }
}

@media (min-width: 576px) {
    .googleMap iframe {
        height: 420px;
    }


}

@media (max-width: 991px) {
    .productPopupForm {
        height: auto;
        overflow: visible;
    }
}