.hero-section.hero-3 {
    position: relative;
    overflow: hidden;
}

.swiper-slide {
    position: relative;
    min-height: 768px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 80px;
    box-sizing: border-box;
}

/* Responsive background layers */
.slide-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    display: none;
}

.slide-bg-image.desktop {
    display: block;
}

@media (max-width: 992px) {
    .slide-bg-image.desktop {
        display: none;
    }

    .slide-bg-image.tablet {
        display: block;
    }
}

@media (max-width: 576px) {
    .slide-bg-image.tablet {
        display: none;
    }

    .slide-bg-image.mobile {
        display: block;
    }
}

/* Text always on top */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    color: #fff;
    text-align: left;
}

.hero-content h3 {
    font-size: 32px;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #fff;
}

.hero-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
    color: #fff;
}

/* Responsive font sizes */
@media (max-width: 992px) {
    .swiper-slide {
        padding: 0 40px;
    }

    .hero-content h3 {
        font-size: 24px;
    }

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

    .sgv-title-text {
        font-size: 12px;

    }
}

@media (max-width: 576px) {
    .swiper-slide {
        padding: 0 20px;
        min-height: 300px;
    }

    .hero-content h3 {
        font-size: 20px;
    }

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

.swiper-slide {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    /* For full screen image */
}

.single-funfact-items .funfact-content {
    min-height: 180px;
    /* Adjust as per content */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.single-funfact-items .funfact-content p {
    margin-top: 10px;
    padding-bottom: 40px;
    border-bottom: 1px solid #d2ab67;
}



/* Hide Bootstrap default icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: none;
}

.carousel-bottom-buttons {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    display: flex;
    gap: 10px;
}

.carousel-bottom-buttons button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #B99446;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: white;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.carousel-bottom-buttons button:hover {
    background-color: #8c7534;
}

.carousel-indicators {
    display: none;
}

/* Caption Style */
.custom-caption {
    position: absolute;
    left: 60%;
    bottom: 40%;
    text-align: center;
    color: #ffffff;
    padding: 15px 20px;
    border-radius: 10px;
    max-width: 40%;
}

.custom-caption h5,
.custom-caption p,
.custom-caption span {
    color: white;
}

/* === Mobile (Up to 767px) === */
@media (max-width: 767px) {
    .custom-caption {
        left: auto;
        right: 15%;
        bottom: 15%;
        max-width: 64%;
        padding: 10px 15px;
        text-align: right;
    }

    .custom-caption h5 {
        font-size: 16px;
    }

    .custom-caption p {
        font-size: 15px;
        text-align: center;
        line-height: 18px;
        /* 👈 Added */
    }

    .carousel-bottom-buttons button {
        /* display: none !important; */

        height: 35px;
        width: 35px;

    }

    .carousel-item {
        height: 50vh;
        /* 👈 screen na 75% part cover kare */
        background: #000;
        /* black background safe side */
    }

    .carousel-item img {
        width: 100% !important;
        height: 100%;
        object-fit: cover;
        /* 👈 blur na thay, perfect crop */
        opacity: 0.9;
        /* optional – thodo fade look */
    }

    /* .carousel-item img {
          width: 100% !important;
          height: 50vh !important;
          opacity: 0.8;
      } */

    .carousel-item {
        background-color: black;

    }

    .carousel-bottom-buttons {
        bottom: 5px;
    }



}

/* === Tablet (768px to 991px) === */
@media (min-width: 768px) and (max-width: 991px) {
    .custom-caption {
        left: 45%;
        bottom: 20%;
        max-width: 60%;
        text-align: right;

    }

    .custom-caption h5 {
        font-size: 20px;
    }

    .custom-caption p {
        font-size: 20px;
        text-align: center;
        line-height: 20px;
        /* 👈 Added */
    }
}

/* === Desktop (992px and above) === */
@media (min-width: 992px) {

    .custom-caption {
        right: 5%;
        left: 40%;
        max-width: 100%;

    }

    .custom-caption h5 {
        font-size: 20px;
        text-align: justify;
    }

    .custom-caption p {
        line-height: 45px;
        font-size: 40px;
        /* text-align: justify; */
    }

}



@media (max-width: 767px) {
    .funfact-section .funfact-content h3 {
        font-size: 13px !important;
        line-height: 14px;
    }

    .funfact-section .funfact-content p {
        font-size: 14px !important;
        line-height: 20px;
    }

    .funfact-section .funfact-icon i {
        font-size: 30px !important;
    }

    .ft {
        font-size: 14px;
    }
}

.sponsors-wrapper .sponsor-right1 .sponsor-items:not(:last-child) {
    margin-bottom: 50px;
}



/* Sustainability Goals  */




/* Minor helpers */
.nnp2-slide-card h3 i {
    margin-right: .5rem;
}

.nnp2-points {
    margin: .75rem 0 0;
    padding-left: 1.1rem;
}

.nnp2-points li {
    margin: .25rem 0;
    list-style: none;
}

.nnp2-points li i {
    margin-right: .5rem;
}

/* ===== 2-Box Section (namespaced) ===== */
.nnp2-section {
    --ink: #434242;
    --accent: #d7af6b;
    --bg: #ffffff;
    --soft: #f6f7f9;
    --radius: 16px;
    --shadow: 0 10px 28px rgba(0, 0, 0, .08);
    padding: 28px 0;
    margin: 20px 100px;
}

.nnp2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.nnp2-box {
    background: var(--bg);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(16px, 3vw, 24px);
}

/* Left */
.nnp2-kicker {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: .65;
    margin-bottom: 6px;
}

.nnp2-title {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 800;
}

.nnp2-desc {
    color: #555;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
}

.nnp2-list {
    margin: 0 0 14px 1em;
    padding: 0;
    color: #333;
    font-size: 14px;
}

.nnp2-list li {
    margin: 4px 0;
}

.nnp2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--accent);
    color: #111;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(215, 175, 107, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}

.nnp2-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(215, 175, 107, .4);
}

/* Right slider */
.nnp2-right {
    position: relative;
    overflow: hidden;
}

.nnp2-viewport {
    overflow: hidden;
    width: 100%;
}

.nnp2-track {
    display: flex;
    gap: 16px;
    /* padding: 2px; */
    list-style: none;
    margin: 0;
    transition: transform .45s ease-in-out;
    will-change: transform;
}

.nnp2-slide {
    flex: 0 0 100%;
}

.nnp2-slide-card {
    background: linear-gradient(180deg, var(--soft), #fff);
    border: 2px solid #d2ab67;
    border-radius: 14px;
    padding: 18px;
    min-height: 160px;
    height: 480px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nnp2-slide-card h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: clamp(16px, 2.6vw, 20px);
    font-weight: 800;
}

.nnp2-slide-card p {
    margin: 0 0 20px;
    color: #444;
    font-size: 15px;
    line-height: 1.6;
    /* fixed from 30px */
}

/* Controls */
.nnp2-controls {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.nnp2-prev,
.nnp2-next {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow);
    font-size: 18px;
    color: #222;
}

.nnp2-dots {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nnp2-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b9c0c8;
    opacity: .6;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.nnp2-dot[aria-selected="true"] {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.15);
}

/* ===== Mobile View Improvements ===== */
@media (max-width: 768px) {
    .nnp2-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Left center */
    .nnp2-left .section-title,
    .nnp2-left h3,
    .nnp2-left p,
    .nnp2-left .fnt,
    .nnp2-left ul.fnt {
        text-align: center;
    }

    .nnp2-left ul.fnt {
        padding-left: 0;
        margin-left: 0;
    }

    .nnp2-left ul.fnt li {
        list-style: none;
    }

    .nnp2-left .service-button {
        display: flex;
        justify-content: center;
    }

    /* Slide headings centered with icon */
    .nnp2-slide-card h3 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        text-align: center;
    }

    .nnp2-slide-card h3 i {
        color: var(--accent);
    }

    .nnp2-points {
        margin: .5rem auto 0;
        padding-left: 0;
        max-width: 520px;
    }

    .nnp2-points li {
        list-style: none;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
    }

    /* Controls bottom-center */
    .nnp2-controls {
        left: 50%;
        right: auto;
        bottom: 10px;
        top: auto;
        transform: translateX(-50%);
        flex-direction: row;
        gap: 10px;
    }

    .nnp2-dots {
        flex-direction: row;
    }

    .nnp2-prev,
    .nnp2-next {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
}

/* ==== BOX-2 slider: center icon + neat design (overrides) ==== */
.nnp2-right .nnp2-slide-card h3 {
    display: flex;
    flex-direction: column;
    /* icon ઉપર, title નીચે */
    align-items: center;
    justify-content: center;
    gap: .6rem;
    text-align: center;
}

/* icon ને gold circular badge look */
.nnp2-right .nnp2-slide-card h3 i {
    margin: 0 !important;
    /* જૂનો margin-right override */
    display: inline-grid;
    place-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f9e9c3, #e6c680 55%, #d7af6b);
    color: #111;
    font-size: 50px;
    box-shadow: 0 10px 22px rgba(215, 175, 107, .35),
        inset 0 0 0 2px rgba(255, 255, 255, .75);
}

/* points + paragraph પણ center */
.nnp2-right .nnp2-slide-card p {
    text-align: center;
}

.nnp2-right .nnp2-points {
    margin: .6rem auto 0;
    padding-left: 0;
    display: grid;
    gap: .45rem;
    justify-items: center;
}

.nnp2-right .nnp2-points li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 14px;
}

.nnp2-right .nnp2-points li i {
    color: #d7af6b;
    margin: 0;
}

/* hover polish */
.nnp2-right .nnp2-slide-card {
    transition: transform .2s ease, box-shadow .2s ease;
}


/* Tiny phones: badge slightly smaller */
@media (max-width:480px) {
    .nnp2-right .nnp2-slide-card h3 i {
        width: 80px;
        height: 80px;
        font-size: 50px;
    }
}


/* Tiny devices */
@media (max-width:400px) {
    .nnp2-section {
        margin: 0 !important;
    }

    .nnp2-box {
        padding: 14px;
    }

    .nnp2-prev,
    .nnp2-next {
        width: 42px;
        height: 42px;
    }
}

/* === Slider paging centering fix (add at the end) === */
.nnp2-viewport {
    overflow: hidden;
}

.nnp2-track {
    gap: 0 !important;
    /* built-in gap દૂર */
}

.nnp2-slide {
    flex: 0 0 100%;
    /* 1 slide = 100% viewport */
    padding-right: 16px;
    /* gap ને padding થીsimulate કરો */
    box-sizing: border-box;
}

.nnp2-slide:last-child {
    padding-right: 0;
    /* છેલ્લી slide પર extra space નહિ */
}

/* card પરનો extra right-margin કાઢી દઈએ */
.nnp2-slide-card {
    margin-right: 0 !important;
}

















/* ==== NNP Footer ==== */
.nnp-footer {
    background: #1c1c1c;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    padding-top: 50px;
}

.nnp-footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nnp-footer a:hover {
    color: #d7af6b;
}

/* Widget */
.nnp-widget {
    margin-bottom: 40px;
}


.nnp-widget h4 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 20px;
    border-bottom: 2px solid #d7af6b;
    display: inline-block;
    padding-bottom: 6px;
}

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

.nnp-widget ul li {
    margin-bottom: 12px;
    line-height: 1.5;
}

.nnp-widget ul li i {
    color: #d7af6b;
    margin-right: 8px;
}

/* Social Icons */
.nnp-social a {
    color: #fff;
    background: #d7af6b;
    padding: 12px 12px;

    border-radius: 50%;
    display: inline-block;
    font-size: 14px;
    transition: all 0.3s ease;
    width: 50px;


}

.nnp-social a i {
    gap: 50px;
}

.nnp-social a:hover {
    background: #1c1c1c;
    color: #ffffff;
}

/* About Text */
.nnp-text {
    color: #ccc;
    font-size: 14px;
    line-height: 1.7;
    max-width: 250px;
    margin: 0 auto;
}

/* Bottom Bar */
.nnp-bottom {
    background: #141414;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 20px;
}

.nnp-bottom p {
    margin: 0;
    font-size: 14px;
    color: #bbb;
}

.nnp-bottom a {
    color: #d7af6b;
    text-decoration: none;
}

.nnp-bottom a:hover {
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .nnp-widget {
        text-align: justify;
    }

    .nnp-text {
        max-width: 100%;
    }

    .nnp-bottom {
        text-align: center;
    }

    .nnp-bottom img {
        margin-top: 10px;
        margin-left: 70px;
    }
}

.nnp-widget ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    /* space between elements */
    flex-wrap: wrap;
    /* wrap if too long on mobile */
}

.nnp-widget ul li i {
    color: #d2ab67;
    /* optional icon color */
    font-size: 16px;
}

.nnp-widget ul li strong {
    font-weight: 600;
    margin-right: 6px;
}

.nnp-widget ul li a {
    color: white;
    text-decoration: none;
}

/* .nnp-widget ul li a:hover {
      text-decoration: underline;
  } */

/* ===== Base wrapper ===== */

/* Contact icon avatar */
.tsm-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid rgba(215, 175, 107, .35);
    background: radial-gradient(70% 70% at 30% 30%, rgba(255, 255, 255, .08), transparent 60%);
    color: var(--ink);
}

.tsm-avatar svg {
    width: 26px;
    height: 26px;
    opacity: .9;
}

/* Mobile size match */
@media (max-width:575px) {
    .tsm-avatar {
        width: 44px;
        height: 44px;
        border-width: 1.5px;
    }

    .tsm-avatar svg {
        width: 22px;
        height: 22px;
    }
}

.tsm-wrap {
    --bg: #0e1116;
    --ink: #e9edf3;
    --muted: #9aa3ad;
    --accent: #d7af6b;
    --glass: rgba(255, 255, 255, .06);
    position: relative;
    /* padding: 64px 0; */
    padding-top: 64px;
    background:
        radial-gradient(1100px 600px at 10% -10%, rgba(215, 175, 107, .18), transparent 60%),
        radial-gradient(900px 500px at 90% 110%, rgba(215, 175, 107, .12), transparent 60%),
        var(--bg);
    overflow: hidden;
}

/* ===== Headings ===== */
.tsm-head {
    text-align: center;
    margin-bottom: 28px;
    color: var(--ink);
}

.tsm-kicker {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .78rem;
    color: var(--accent);
}

.tsm-title {
    margin: .35rem 0 0;
    font-weight: 700;
    color: #d2ab67;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
}

/* ===== Slider wrapper ===== */
.tsm-slider {
    position: relative;
    padding: 8px 0 56px;
    /* space for pagination */
}

/* ===== Card ===== */
.tsm-card {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    padding: 28px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    color: var(--ink);
    backdrop-filter: blur(6px);
}

.tsm-quote {
    position: absolute;
    top: -14px;
    left: 18px;
    font-size: 60px;
    line-height: 1;
    color: #d2ab67;
    opacity: 8;
    pointer-events: none;
}

.tsm-text {
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 6px 0 18px;
}

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

.tsm-user img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(215, 175, 107, .35);
}

.tsm-user h5 {
    margin: 0;
    font-size: 1rem;
    color: wheat;
}

.tsm-user small {
    color: var(--muted);
}

.tsm-stars {
    margin-top: 10px;
    letter-spacing: 2px;
    color: var(--accent);
    font-size: 1rem;
}

/* ===== Navigation arrows ===== */
.tsm-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%);
    padding: 0 10px;
    z-index: 6;
    pointer-events: none;
    /* container not clickable */
}

.swiper-slide {
    min-height: 400px;
}

.tsm-prev,
.tsm-next {
    pointer-events: auto;
    /* clickable buttons */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--glass);
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--ink);
    font-size: 22px;
    transition: transform .2s ease, background .2s ease;
}

.tsm-prev:hover,
.tsm-next:hover {
    background: rgba(255, 255, 255, .12);
    transform: scale(1.05);
}

/* ===== Pagination ===== */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, .35);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: var(--accent);
}


/* ========= THEME TOKENS ========= */

/* ===== Mobile tweaks ===== */
@media (max-width: 575px) {
    .swiper-slide {
        min-height: 320px;
    }

    .tsm-nav {
        top: auto;
        bottom: 5px;
        /* move arrows to bottom */
        transform: none;
        padding: 0 16px;
        justify-content: center;
        gap: 22px;
        margin-bottom: 20px;
    }

    .tsm-prev,
    .tsm-next {
        width: 48px;
        height: 48px;
    }

    .swiper-pagination {
        bottom: 64px !important;
    }

    .tsm-card {
        padding: 18px 16px;
        max-width: 90%;
    }

    .tsm-quote {
        font-size: 44px;
        top: -8px;
    }

    .tsm-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .tsm-user img {
        width: 44px;
        height: 44px;
    }

    .footer-b {
        padding-left: calc(1.5rem * .5) !important;
    }
}

/* ===== Tablet ===== */
@media (min-width: 576px) and (max-width: 991px) {
    .tsm-card {
        max-width: 85%;
    }

    .footer-b {
        padding-left: calc(1.5rem * .5) !important;

    }

    .tsm-quote {
        font-size: 50px;
    }
}

/* ===== Large screens ===== */
@media (min-width: 992px) {
    .tsm-card {
        max-width: 760px;
    }
}



.footer-b {
    padding-left: 100px;
}

.svg {
    margin-left: 150px;
    margin-right: 150px;
}

.nnpf {
    background: #111;
    color: #ddd;
}

.nnpf__widget {


    border-radius: 14px;
    padding: 22px 18px;
}

.nnpf__title {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 8px;
}

.nnpf__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 2px;
    background: #B99446;
    border-radius: 2px;
}

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

.nnpf__links li {
    margin: 10px 0;
}

.nnpf__links a {
    color: #ccc;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .25s;
}

.nnpf__links a:hover {
    color: #B99446;
    transform: translateX(4px);
}

.nnpf__text {
    line-height: 1.6;
}

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

.nnpf__social a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #1f1f1f;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    transition: .25s;
}

.nnpf__social a:hover {
    background: #B99446;
    color: #111;
    transform: translateY(-3px);
}

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

.nnpf__address i {
    color: #B99446;
    margin-right: 6px;
}

.nnpf__address strong {
    display: block;
    color: #fff;
    margin: 2px 0 6px;
}

.nnpf__addressLink {
    color: #ccc;
    border-bottom: 1px dashed transparent;
    text-decoration: none;
}

.nnpf__addressLink:hover {
    color: #B99446;
    /* border-bottom-color: #B99446; */
}

.nnpf__bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 14px 0;
    background: rgba(0, 0, 0, .25);
}

.nnpf__bottom p {
    margin: 0;
    color: #aaa;
}

.nnpf__bottom a {
    color: #B99446;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
}

.nnpf__bottom a:hover {
    border-bottom-color: #B99446;
}

@media (max-width:767.98px) {
    /* .nnpf__widget {
                text-align: center;
            } */

    .nnpf__title::after {
        left: 10%;
        transform: translateX(-50%);
    }
}

.sgv-section {
    --ink: #2b2b2b;
    --muted: #5b5b5b;
    --bg: #ffffff;
    --soft: #f6f7f9;
    --accent: #d7af6b;
    --radius: 16px;
    --shadow: 0 13px 28px rgba(0, 0, 0, .08);
    /* margin: 20px clamp(12px, 4vw, 100px); */
    padding: clamp(16px, 2.8vw, 28px) 0;
    margin-left: 120px;
    margin-right: 120px;
}

/* ========= GRID ========= */
.sgv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2.4vw, 24px);
}

.sgv-box {
    background: var(--bg);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(16px, 3vw, 24px);
}

/* ========= LEFT ========= */
.sgv-kicker {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--ink);
    opacity: .7;
    margin-bottom: 6px;
}

.sgv-title {
    margin: 0 0 13px;
    color: var(--ink);
    font-weight: 800;
    font-size: clamp(20px, 3vw, 28px);
}

.sgv-desc {
    color: var(--muted);
    line-height: 1.7;
    margin: 0 0 12px;
    font-size: 13px;
    max-width: 58ch;
}

.sgv-bullets {
    margin: 13px 0 18px;
    padding: 0;
    list-style: none;
}

/* .sgv-bullets li{
  display:flex;
  align-items:center;
  gap:13px;
  color:#333;
  margin:7px 0;
  font-size:13px;
} */
.sgv-bullets i {
    color: var(--accent);
}

/* Button (anchor styled) */
.sgv-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;

    background: var(--accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(215, 175, 107, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}

.sgv-btn:hover {
    transform: translateY(-1px);

    /* box-shadow: 0 13px 24px rgba(215, 175, 107, .4); */
}

.sgv-btn-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
}

/* ========= RIGHT (SLIDER) ========= */
.sgv-right {
    position: relative;
    overflow: hidden;
}

.sgv-viewport {
    overflow: hidden;
    width: 100%;
}

.sgv-track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .45s ease;
    will-change: transform;
    gap: 0;
    /* no intrinsic gaps */
}

.sgv-slide {
    flex: 0 0 100%;
    padding-right: 16px;
    /* visual gap simulation */
    box-sizing: border-box;
}

.sgv-slide:last-child {
    padding-right: 0;
}

.sgv-card {
    background: linear-gradient(180deg, var(--soft), #fff);
    border: 2px solid var(--accent);
    border-radius: 14px;
    padding: clamp(16px, 2.6vw, 22px);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin-top: 7%; */
    width: 70%;
    margin-bottom: 40px;
}

.sgv-card-title {
    display: flex;
    align-items: center;
    /* icon + text center aligned */
    gap: 12px;
    margin: 0;
    font-weight: 600;
    color: #1c1c1c;
}

/* 🔒 Icon wrapper = fixed round, never squished */
.sgv-icon {
    flex: 0 0 auto;
    /* shrink = 0 → text kabhi circle ko dabayega nahi */
    display: grid;
    place-items: center;
    width: clamp(70px, 12vw, 100px);
    aspect-ratio: 1 / 1;
    /* height auto ho jayegi → hamesha perfect round */
    border-radius: 50%;
    background: linear-gradient(135deg, #f9e9c3, #e6c680 55%, #d7af6b);
    box-shadow: 0 13px 22px rgba(215, 175, 107, .35),
        inset 0 0 0 2px rgba(255, 255, 255, .75);
}

/* Icon glyph size/color */
.sgv-icon i {
    font-size: clamp(32px, 6vw, 50px);
    color: #111;
    line-height: 1;
}

/* Text block */
.sgv-title-text {
    font-size: 15px;
    line-height: 1.25;
    /* multi-line safety */
    word-wrap: break-word;
}

/* (Optional) If text bahut lamba ho to max-width se control */
.sgv-card-title {
    max-width: 100%;
}

/* Controls: desktop = vertical right; mobile = bottom center */
.sgv-controls {
    position: absolute;
    right: 13px;
    /* top: 50%; */
    transform: translateY(-50%);
    display: flex;
    flex-direction: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    bottom: 0px;
    right: 40%;
}

.sgv-prev,
.sgv-next {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: #fff;
    display: grid;
    place-items: center;
    color: #222;
    box-shadow: var(--shadow);
    font-size: 18px;
}

.sgv-dots {
    display: flex;
    /* flex-direction: column; */
    gap: 6px;
}

.sgv-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    background: #b9c0c8;
    opacity: .6;
    cursor: pointer;
}

.sgv-dots button[aria-selected="true"] {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.15);
}

/* ========= RESPONSIVE ========= */
@media (max-width: 992px) {
    .sgv-desc {
        max-width: none;
    }
}

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

    .sgv-left {
        text-align: justify;
    }

    .sgv-bullets li {
        justify-content: center;
    }

    .sgv-btn {
        margin-inline: auto;
    }

    .sgv-right {
        padding-bottom: 68px;
    }

    /* space for controls */
    .sgv-controls {
        left: 50%;
        right: auto;
        bottom: 40px;
        top: auto;
        transform: translateX(-50%);
        flex-direction: row;
        gap: 13px;
    }

    .sgv-dots {
        flex-direction: row;
    }

    .sgv-prev,
    .sgv-next {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
}

@media (max-width:540px) {
    .sgv-section {
        margin: 14px 12px;
    }

    .sgv-card {
        width: 90%;
    }
}

@media (max-width:400px) {
    /* .sgv-section {
                margin: 13px 8px;
            } */

    .sgv-prev,
    .sgv-next {
        width: 42px;
        height: 42px;
    }

    .sgv-card {
        width: 90%;
    }


}

.nnp3-title {
    text-transform: uppercase;
}

/* Sirf hamari main dots row dikhe */
.nnp3 .nnp3-controls .nnp3-dots:not(.nnp3-dots--main) {
    display: none !important;
}

/* ===== FIX: force clean track & exact 3-up columns on all widths ===== */
.nnp3 * {
    box-sizing: border-box;
}

.nnp3-viewport {
    overflow: hidden;
    width: 100%;
    padding: 0 !important;
    /* viewport me koi padding nahi */
}

.nnp3-track {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    /* UL padding hatado (mobile/tablet me bhi) */
    gap: var(--gap) !important;
    /* hamesha var(--gap) hi use karo */
}

/* Exactly 3 items per row always */
.nnp3-item {
    flex: 0 0 calc((100% - (var(--gap) * 2)) / 3) !important;
    min-width: 0;
}

/* Don’t reintroduce padding on breakpoints */
@media (min-width:768px) and (max-width:1023px) {
    .nnp3-track {
        padding: 0 !important;
    }
}

@media (max-width:576px) {
    .nnp3-track {
        padding: 0 !important;
        gap: var(--gap) !important;
    }
}

/* Optional: image bleed safe */
.nnp3-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* =========================
   NNP 3-up Slider — Clean, Responsive
   ========================= */
.nnp3-section {
    --gap: 30px;

    --shadow: 0 8px 24px rgba(0, 0, 0, .08);
    margin-left: 100px;
    margin-right: 100px;
}

.nnp3 {
    position: relative;
}

/* Head / Controls */
.nnp3-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin-bottom: 12px;
}

.nnp3-head h3 {
    margin: 0;
    font-size: clamp(18px, 2.8vw, 22px);
    font-weight: 800;
}

.nnp3-controls {
    display: flex;
    align-items: center;
    gap: 13px;
}

.nnp3-prev,
.nnp3-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: #fff;
    box-shadow: var(--shadow);
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
}

.nnp3-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nnp3-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b9c0c8;
    opacity: .6;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.nnp3-dot[aria-selected="true"] {
    background: #111;
    opacity: 1;
    transform: scale(1.15);
}

/* --- Slider: use scroll instead of transform --- */
.nnp3-viewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
    padding: 0 !important;
}

.nnp3-viewport::-webkit-scrollbar {
    display: none;
}

/* Chrome/Safari */

.nnp3-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    /* <-- stop translateX */
    transition: none !important;
    /* no transform animation */
    list-style: none;
}

.nnp3-item {
    flex: 0 0 calc((100% - (var(--gap) * 2)) / 3) !important;
    /* always 3 cols */
    min-width: 0;
    scroll-snap-align: start;
}

/* Card */
.nnp3-card {
    margin: 0;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nnp3-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    background: #f6f7f9;
}

.nnp3-title {
    padding: 13px 12px;
    text-align: center;
    font-weight: 700;
    color: #0f172a;
    font-size: clamp(10px, 2.4vw, 20px);
    line-height: 1.35;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* progressive fallback */
    line-clamp: 2;
}



/* =========================
   Responsive polish
   ========================= */

/* Tablet (768–1023): keep 3-up, slightly reduce gap/padding */
@media (min-width:768px) and (max-width:1023px) {
    .nnp3-section {
        --gap: 6px;
        margin: 0 13px !important;
    }

    .nnp3-prev,
    .nnp3-next {
        width: 36px;
        height: 36px;
    }

    /* Track spacing tighter */
    .nnp3-track {
        padding: 13px;
        gap: 12px;
    }
}

/* Mobile (<=576): still 3-up, tighter margins, grid actionbar */
@media (max-width:576px) {
    .nnp3-section {
        --gap: 6px;
        margin: 0 13px !important;
    }

    .nnp3-prev,
    .nnp3-next {
        width: 36px;
        height: 36px;
    }

    /* Track spacing tighter */
    .nnp3-track {
        padding: 13px;
        gap: 12px;
    }


}


/* Large desktop (>=1440): a little more air */
@media (min-width:1440px) {
    .nnp3-section {
        margin-left: 120px;
        margin-right: 120px;
        --gap: 34px;
    }
}

/* =========================
   nnp3 ACTIONBAR — FINAL RESPONSIVE OVERRIDES
   (paste at the very end of your CSS)
   ========================= */

/* Base layout: WA | BUY [ | VIEW ]  */
.nnp3-actionbar {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-columns: auto 1fr auto;
    /* view button ho ya na ho, layout stable */
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f8f8;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

/* Buttons */
.btn-wa,
.btn-view,
.btn-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(36px, 5.2vw, 44px);
    height: clamp(36px, 5.2vw, 44px);
    font-size: clamp(14px, 2.2vw, 18px);
    border: 1px solid #d2ab67;
    color: #d2ab67;
    background: #fff;
    transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.btn-wa:hover,
.btn-view:hover {
    background: #d2ab67;
    color: #fff;
    transform: translateY(-1px);
}

/* Buy button expands, never overflows */
.btn-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(36px, 5.2vw, 44px);
    font-size: clamp(14px, 2.2vw, 18px);
    padding-inline: clamp(13px, 2.2vw, 18px);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(12px, 2.2vw, 14px);
    line-height: 1;
    background: #d2ab67;
    color: #fff;
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    /* allow shrink in grid */
}

.btn-buy:hover {
    background: #ae8e57;
    transform: translateY(-1px);
}

/* --- Tablet tweaks (<= 1024px) --- */
@media (max-width:1024px) {
    .nnp3-actionbar {
        gap: 13px;
        padding: 13px;
    }

    .nnp3-title {
        font-size: clamp(10px, 2.4vw, 14px)
    }
}

/* --- Mobile (<= 576px) --- */
@media (max-width:576px) {

    /* Compact grid: WA | BUY [ | VIEW ]  */
    .nnp3-actionbar {
        grid-template-columns: auto 1fr auto;
        gap: 5px;
        padding: 8px;
    }

    .nnp3-title {
        font-size: clamp(10px, 2.4vw, 14px)
    }

    .btn-wa,
    .btn-view {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .btn-buy {
        padding-inline: 13px;
        font-size: 9px;
        letter-spacing: .2px;
    }
}

/* --- Very small phones (<= 360px) --- */
@media (max-width:360px) {
    .nnp3-actionbar {
        gap: 6px;
        padding: 8px;
    }

    .btn-wa,
    .btn-view {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .btn-buy {
        /* min-height: 11px; */
        /* padding-inline: 8px; */
        /* width: 32px; */
        height: 32px;
        font-size: 8px !important;
        /* height: 25px; */
        /* text readable, no wrap */
    }
}

/* Safety: remove any old overrides that were re-adding paddings/gaps */
@media (min-width:768px) and (max-width:1023px) {
    .nnp3-track {
        padding: 0 !important;
    }
}






@media (max-width:576px) {

    .nnp3-title {
        padding: 15px 5px;
    }

    .ak {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .nnpf__bottom {
        padding: 0px;
    }
}





/* Product Details */


/* ===== Reset for Product Gallery ===== */
.product-image-items .swiper-slide {
    min-height: auto !important;
    height: auto !important;
    /* width: auto !important; */
    background: none !important;
    display: block !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
}

.custom-table {
    border: 1px solid #ddd;

    overflow: hidden;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.custom-table th {
    background-color: #d2ab67;
    /* Golden Header */
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 12px;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.custom-table td {
    padding: 10px 12px;
    vertical-align: middle;
    font-size: 14px;
}

.custom-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
    /* Zebra stripes */
}

.custom-table tbody tr:hover {
    background-color: #fff4e0;
    /* Light golden hover */
    transition: 0.3s;
}

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

.custom-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    font-size: 15px;
}

.custom-list li::before {
    content: "➤";
    /* Arrow icon */
    position: absolute;
    left: 0;
    top: 0;
    color: #d2ab67;
    /* Golden arrow */
    font-size: 16px;
}


/* theme */
:root {
    --gold: #d2ab67;
    --soft-gold: #fff4e0;
}

/* table style */
.custom-table {
    border: 1px solid #ddd;

    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

.custom-table th {
    background: var(--gold);
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 12px;
    font-size: 15px;
    letter-spacing: .3px;
}

.custom-table td {
    padding: 10px 12px;
    vertical-align: middle;
    font-size: 14px
}

.custom-table tbody tr:nth-child(even) {
    background: #f9f9f9
}

.custom-table tbody tr:hover {
    background: var(--soft-gold);
    transition: .25s
}

/* list with arrow bullets */
.custom-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.custom-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    font-size: 15px
}

.custom-list li::before {
    content: "➤";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    color: var(--gold)
}

/* nav tabs small touch scroll */
.sticky-tabs {
    overflow: auto hidden;
    white-space: nowrap
}

.sticky-tabs .nav-link {
    display: inline-block
}

/* responsive switches */
/* show tabs only on lg+ (≥992px), accordion on md-down */
@media (max-width: 991.98px) {
    .desktop-tabs {
        display: none
    }
}

@media (min-width: 992px) {
    .mobile-accordion {
        display: none
    }
}

/* optional: active tab accent */
.nav .nav-link.active h5 {
    color: var(--gold)
}

/* Accordion headers (Bootstrap override) */
.accordion-button {
    background-color: #f8f8f8;
    /* default bg */
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 6px;
    transition: 0.3s;
}

/* Accordion active/open state */
.accordion-button:not(.collapsed) {
    background-color: #1c1c1c !important;
    /* Golden active */
    color: #fff !important;
    border: 1px solid #000;
    /* Black border */
    box-shadow: none;
    /* remove default BS shadow */
}

/* On hover */
.accordion-button:hover {
    border-color: #000;
    color: #d2ab67;
}


.accordion {

    --bs-accordion-border-color: none !important;
}

.accordion-button:focus {
    z-index: 3;
    border-color: #d2ab67 !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(210, 171, 103, 0.5) !important;
}

:root {
    --body: #fff;
    --black: #434242;
    --white: #fff;
    --theme: #1C1C1C;
    --theme2: #D2AB67;
    --header: #1C1C1C;
    --base: #1C1C1C;
    --text: #666;
    --text2: #CFCFCF;
    --border: #C5C5C5;
    --border2: #E8E8E9;
    --button: #1C1C1C;
    --button2: #1C1C1C;
    --ratting: #FF9F0D;
    --bg: #F2F3F5;
    --bg2: #DF0A0A0D;
}

.section-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.feature-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 80px;
}

.icon-wrap {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.icon-wrap img {
    width: 70%;
    height: auto;
}

.feature-content h2 {
    margin: 0 0 15px;
    font-size: 32px;
    font-weight: 700;
    color: var(--theme);
}

.feature-content p {
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text);
}

.feature-row.reverse {
    grid-template-columns: 1fr 260px;
}

.feature-row.reverse .icon-col {
    order: 2;
}

.feature-row.reverse .content-col {
    order: 1;
}

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

    .feature-row,
    .feature-row.reverse {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .icon-wrap {
        margin: 0 auto 20px;
        width: 140px;
        height: 140px;
    }
}

/* use your :root variables as provided */
.section-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.feature-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 90px;
}

.feature-row.reverse {
    grid-template-columns: 1fr 260px;
}

.feature-row.reverse .icon-col {
    order: 2;
}

.feature-row.reverse .content-col {
    order: 1;
}

.icon-wrap {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    /* subtle idle float for icon */
    animation: float 5s ease-in-out infinite;
}

.icon-wrap svg {
    width: 70%;
    height: 70%;
}

/* typography */
.feature-content h2 {
    margin: 0 0 14px;
    font-size: 36px;
    line-height: 1.2;
    color: var(--theme);
    font-weight: 800;
    letter-spacing: .2px;
}

.feature-content p {
    margin: 0;
    font-size: 18px;
    line-height: 1.9;
    color: var(--text);
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(20px);
}

.reveal.in {
    opacity: 1;
    transform: none;
    transition: opacity .9s ease, transform .9s ease;
}

.reveal[data-anim="left"].in {
    animation: slideLeft .9s cubic-bezier(.2, .7, .2, 1) forwards;
}

.reveal[data-anim="right"].in {
    animation: slideRight .9s cubic-bezier(.2, .7, .2, 1) forwards;
}

/* Hover pulse */
.icon-wrap:hover {
    animation: none;
}

/* stop float on hover */
.icon-wrap:hover svg {
    transform: scale(1.06);
    transition: transform .25s ease;
}

/* keyframes */
@keyframes float {

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

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

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

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

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

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

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

    .feature-row,
    .feature-row.reverse {
        /* grid-template-columns: 140px 1fr; */
        gap: 24px;
        margin-bottom: 60px;
    }

    .icon-wrap {
        width: 200px;
        height: 200px;
    }

    .feature-content h2 {
        font-size: 28px;
    }

    .feature-content p {
        font-size: 18px;
        line-height: 1.7;
    }
}

@media (max-width: 575px) {

    .feature-row,
    .feature-row.reverse {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .icon-wrap {
        margin: 0 auto 12px;
    }

    .feature-content h2 {
        font-size: 24px;
    }

    .feature-content p {
        font-size: 16px;
        line-height: 1.6;
    }
}

@media (max-width: 768px) {

    .feature-row,
    .feature-row.reverse {
        grid-template-columns: 1fr;
        /* ekaj column */
        text-align: center;
        /* content center */
    }

    .feature-row .icon-col,
    .feature-row.reverse .icon-col {
        order: 1;
        /* icon pehla */
        justify-self: center;
        margin-bottom: 15px;
    }

    .feature-row .content-col,
    .feature-row.reverse .content-col {
        order: 2;
        /* content pachi */
    }

    .icon-wrap {
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }
}


/* .............................................. */

/* uses your variables */

/* ========= THEME HOOKS ========= */
:root {
    --panel: var(--theme2);
    /* #D2AB67 */
    --title: var(--base);
    /* #1C1C1C by your vars */
    --textc: var(--white);
    /* #fff */
}

/* ========= SECTION (BG GIF + OVERLAY) ========= */
.nnp-values {
    position: relative;
    padding: 80px 40px;
    color: var(--textc);
    background: url('../img/giphy.gif') center/cover no-repeat;
    /* height: 80vh !important; */
    /* your GIF */
}

.nnp-values .overlay {
    position: absolute;
    inset: 0;
    background: rgba(28, 28, 28, 0.78);
    /* readability overlay */
    mix-blend-mode: multiply;
    /* richer contrast */
}

.nnp-content {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
}

/* ========= CARDS WRAP: 5 → 3 → 1 ========= */
.nnp-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* center align the row */
    gap: 24px;
}

/* Desktop: 5 columns */
.nnp-item {
    flex: 0 0 calc(20% - 24px);
    /* 5 cols */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    border: 1px solid wheat;
}

/* Icon + Text */
.nnp-ic {
    font-size: 40px;
    /* if <i> FontAwesome */
    color: var(--panel);
    margin-bottom: 12px;
}

.nnp-item h4 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--textc);
}

.nnp-item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text2);
    font-weight: 500;
}

/* ========= RESPONSIVE ========= */
/* Tablet: 3 columns */
@media (max-width: 991px) {
    .nnp-item {
        flex: 0 0 calc(33.333% - 24px);
    }
}

/* Mobile: 1 column */
@media (max-width: 575px) {
    .nnp-values {
        padding: 44px 18px;
    }

    .nnp-item {
        flex: 0 0 100%;
    }

    .nnp-ic {
        font-size: 32px;
    }

    .nnp-item h4 {
        font-size: 18px;
    }

    .nnp-item p {
        font-size: 14.5px;
        line-height: 1.6;
    }
}

.nnp-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

/* ==== GRID BASE ==== */
.nnp-grid {
    --gap: 16px;
    /* control once */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
}

/* Desktop + Tablet: 4 columns */
.nnp-item {
    box-sizing: border-box;
    /* padding counts inside width */
    flex: 0 0 calc(25% - var(--gap));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
    border-radius: 8px;
    min-width: 0;
    /* allow shrink */
}

/* Mobile: 2 columns (incl. 360px) */
@media (max-width: 575px) {
    .nnp-item {
        flex: 0 0 calc(50% - (var(--gap) / 2));
        /* exact half minus half-gap */
    }
}

/* Ultra-small safety (<=360px): still 2 columns */
@media (max-width: 360px) {
    .nnp-grid {
        --gap: 12px;
    }

    /* thodu nanhu gap */
    .nnp-item {
        flex: 0 0 calc(50% - (var(--gap) / 2));
        padding: 12px;
        /* thodu nanhu padding to fit cleanly */
    }
}

.vmc-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 20px;
}

.vmc-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    /* left icon, right content */
    gap: 36px;
    align-items: center;
    margin-bottom: 72px;
}

.vmc-icon {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.vmc-icon svg {
    width: 70%;
    height: 70%;
}

/* text */
.vmc-title {
    margin: 0 0 10px;
    font-size: 34px;
    line-height: 1.2;
    color: var(--theme);
    font-weight: 800;
    letter-spacing: .2px;
}

.vmc-text {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
    color: var(--text);
}

/* responsive */
@media (max-width: 991px) {
    .vmc-row {
        grid-template-columns: 160px 1fr;
        gap: 24px;
    }

    .vmc-icon {
        width: 160px;
        height: 160px;
    }

    .vmc-title {
        font-size: 28px;
    }

    .vmc-text {
        font-size: 17px;
        line-height: 1.7;
    }
}

@media (max-width: 575px) {
    .vmc-row {
        grid-template-columns: 1fr;
        /* stack: icon on top, content below */
        text-align: center;
    }

    .vmc-icon {
        width: 120px;
        height: 120px;
        margin: 0 auto 10px;
    }

    .vmc-title {
        font-size: 24px;
    }

    .vmc-text {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* --- Mission icon only --- */
.mission-anim {
    position: relative;
    isolation: isolate;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

/* gentle sway of the whole flag+pole */
.mission-anim svg {
    width: 70%;
    height: 70%;
    transform-origin: 10% 50%;
    /* pivot near the pole */
    animation: missionSway 5.5s ease-in-out infinite;
}

/* subtle wave on the flag cloth (2nd path) */
.mission-anim svg path:last-of-type {
    transform-origin: 45% 25%;
    animation: missionWave 2.2s ease-in-out infinite;
}

/* pulse ring around the circle */
.mission-anim::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme2) 40%, transparent);
    animation: missionPulse 3s ease-out infinite;
    z-index: 0;
}

/* hover micro-zoom */
.mission-anim:hover svg {
    transform: translateY(-2px) scale(1.04);
    transition: transform .25s ease;
}

.mission-anim:hover::after {
    animation: none;
}

/* keyframes */
@keyframes missionSway {

    0%,
    100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }
}

@keyframes missionWave {

    0%,
    100% {
        transform: skewX(0deg) translateX(0);
    }

    25% {
        transform: skewX(-3deg) translateX(-1px);
    }

    50% {
        transform: skewX(0deg) translateX(0);
    }

    75% {
        transform: skewX(3deg) translateX(1px);
    }
}

@keyframes missionPulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme2) 40%, transparent);
    }

    70% {
        box-shadow: 0 0 0 18px color-mix(in srgb, var(--theme2) 0%, transparent);
    }

    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme2) 0%, transparent);
    }
}

/* accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {

    .mission-anim,
    .mission-anim * {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== Vision animation ===== */
.vision-anim {
    position: relative;
    isolation: isolate;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.vision-anim svg {
    width: 70%;
    height: 70%;
    animation: visionSpin 16s linear infinite;
}

.vision-anim svg circle:nth-of-type(1) {
    /* outer ring scan */
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation: visionScan 3.2s ease-in-out infinite;
}

.vision-anim svg circle:nth-of-type(3) {
    /* center dot pulse */
    transform-origin: 32px 32px;
    animation: visionPulseDot 1.8s ease-in-out infinite;
}

.vision-anim svg path {
    /* crosshair breathe */
    transform-origin: 32px 32px;
    animation: visionCross 3.2s ease-in-out infinite;
}

.vision-anim::after {
    /* soft pulse ring */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(210, 171, 103, .35);
    animation: visionRing 3s ease-out infinite;
    z-index: 0;
}

/* hover micro-zoom */
.vision-anim:hover svg {
    transform: translateY(-2px) scale(1.04);
    transition: transform .25s ease;
}

.vision-anim:hover::after {
    animation: none;
}

/* ===== Core Values (heart-beat) ===== */
.values-anim {
    position: relative;
    isolation: isolate;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.values-anim svg {
    width: 70%;
    height: 70%;
    transform-origin: 50% 60%;
    animation: valuesBeat 1.9s ease-in-out infinite;
}

.values-anim::after {
    /* soft pulse ring */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(210, 171, 103, .35);
    animation: valuesRing 3s ease-out infinite;
    z-index: 0;
}

.values-anim:hover svg {
    transform: translateY(-2px) scale(1.06);
    transition: transform .25s ease;
}

.values-anim:hover::after {
    animation: none;
}

/* ===== Keyframes ===== */
@keyframes visionSpin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes visionScan {

    0%,
    100% {
        stroke-dashoffset: 140;
    }

    50% {
        stroke-dashoffset: 0;
    }
}

@keyframes visionPulseDot {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.22);
    }
}

@keyframes visionCross {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes visionRing {
    0% {
        box-shadow: 0 0 0 0 rgba(210, 171, 103, .35);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(210, 171, 103, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(210, 171, 103, 0);
    }
}

@keyframes valuesBeat {

    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.08);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.12);
    }
}

@keyframes valuesRing {
    0% {
        box-shadow: 0 0 0 0 rgba(210, 171, 103, .35);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(210, 171, 103, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(210, 171, 103, 0);
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .vision-anim,
    .vision-anim *,
    .values-anim,
    .values-anim * {
        animation: none !important;
        transition: none !important;
    }
}

.nnp-chemicals {
    padding: 60px 0;
    background: var(--bg);
}

.nnp-chem-content {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-left: 5px solid var(--theme2);
}

.nnp-chem-content .section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--theme);
    position: relative;
}

.nnp-chem-content .section-title::after {
    content: "";
    width: 60px;
    height: 3px;
    background: var(--theme2);
    display: block;
    margin-top: 8px;
}


/* wrapper */
.nnp-paint-section {
    position: relative;
    padding: 50px 0;
    background: var(--bg);
    overflow: hidden;
}

/* soft diagonal strip like reference */
.nnp-paint-section::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -120px;
    width: 110%;
    height: 220px;
    transform: skewY(-4deg);
    background: linear-gradient(0deg, #e9eaec 0%, transparent 70%);
    pointer-events: none;
}

/* dotted accents */
.nnp-paint-section .container {
    position: relative;
}

.nnp-paint-section .container::before,
.nnp-paint-section .container::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 80px;
    background:
        radial-gradient(var(--black) 1px, transparent 1px) 0 0/12px 12px;
    opacity: .12;
    pointer-events: none;
}

.nnp-paint-section .container::before {
    right: 22%;
    top: 56%;
}

.nnp-paint-section .container::after {
    right: 6%;
    top: 14%;
}

/* grid */
/* =======================
   Core grid helpers
   ======================= */
.grid {
    display: grid;
    grid-template-columns: 1.2fr .9fr;
    gap: 56px;
    align-items: center;
}

@media (max-width: 992px) {
    .grid {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .img-card {
        order: -1;
    }

    /* image above on mobile */
}

@media (max-width: 560px) {
    .grid {
        gap: 1px !important;
    }

    /* fixed invalid gap */
    .img-card {
        order: -1;
    }
}

/* Cards (generic) */
.card {
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}

/* =======================
   Section wrapper
   ======================= */
.nnp-feature {
    position: relative;
    padding: 80px 0;
    background: var(--bg);
    overflow: hidden;
}

.nnp-feature::after {
    content: "";
    position: absolute;
    left: -5%;
    bottom: -120px;
    width: 120%;
    height: 220px;
    transform: skewY(-4deg);
    background: linear-gradient(0deg, #eaebee 0%, transparent 70%);
}

/* =======================
   Row / container
   ======================= */
.nnp-wrap {
    position: relative;
    /* for dotted accents */
    max-width: 1200px;
    /* section-wrap style */
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    /* image | card (desktop) */
    gap: 56px;
    align-items: center;
}

/* flip modifier (image left) */
.nnp-feature.flip .nnp-wrap {
    grid-template-columns: 1.05fr 0.95fr;
}

.nnp-feature.flip .nnp-fig {
    order: -1;
}

/* Tablet: image 30% | content 70% */
@media (min-width: 768px) and (max-width: 991.98px) {
    .nnp-wrap {
        grid-template-columns: 30% 70% !important;
        gap: 32px;
    }
}

/* Mobile: single column + image first */
@media (max-width: 767.98px) {
    .nnp-wrap {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .nnp-fig {
        order: -1;
    }
}

/* OPTIONAL: fixed 120px side margins on very large screens
@media (min-width: 1300px){
  .nnp-wrap{
    max-width: none;
    width: calc(100% - 240px);
    margin: 0 120px;
  }
}
*/

/* =======================
   Dotted accents
   ======================= */
.nnp-feature .nnp-wrap:before,
.nnp-feature .nnp-wrap:after {
    content: "";
    position: absolute;
    width: 180px;
    height: 90px;
    opacity: .14;
    background: radial-gradient(var(--black) 1px, transparent 1px) 0 0 / 12px 12px;
    pointer-events: none;
}

.nnp-feature .nnp-wrap:before {
    left: 80px;
    top: 120px;
}

.nnp-feature .nnp-wrap:after {
    right: 80px;
    top: 60px;
}

/* Variant: image anchored bottom / content top */
.nnp-feature.img-bottom .nnp-wrap {
    align-items: stretch;
}

.nnp-feature.img-bottom .nnp-fig {
    align-self: center !important;
    margin-top: auto;
}

.nnp-feature.img-bottom .nnp-card {
    align-self: start;
}

.nnp-feature.img-bottom .nnp-wrap:before {
    left: 60px;
    top: 60px;
}

.nnp-feature.img-bottom .nnp-wrap:after {
    left: 140px;
    bottom: 40px;
    top: auto;
}

/* tiny dot */
.nnp-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d2ab67;
    box-shadow: 0 0 0 2px rgba(228, 58, 58, .12);
    pointer-events: none;
}

.nnp-feature.img-bottom .nnp-dot {
    right: 14%;
    bottom: 46px;
}

/* =======================
   Image & Content cards
   ======================= */
.nnp-fig {
    background: var(--white);
    padding: 14px;
    border-radius: 18px;
    border: 2px solid var(--border2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}

.nnp-fig img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
}

.nnp-card {
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    overflow: hidden;
    border: 1px solid var(--border2);
    margin-top: 8px;
    /* breathing space */
}

.nnp-head {
    background: #f3f2f1;
    padding: 26px 28px;
    position: relative;
}

.nnp-head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #d2ab67;
    border-top-left-radius: 18px;
}

.nnp-card h2 {
    margin: 0;
    color: var(--black);
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 800;
}

/* alignments */
.nnp-wrap {
    align-items: stretch;
}

.nnp-fig {
    align-self: start;
}

.nnp-card {
    align-self: center !important;
}

@media (max-width: 992px) {

    .nnp-fig,
    .nnp-card {
        align-self: auto;
    }
}

/* =======================
   Bullet lists
   ======================= */
.nnp-list {
    list-style: none;
    margin: 0;
    padding: 26px 28px 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.nnp-list li {
    position: relative;
    padding-left: 40px;
    color: var(--black);
    font-size: 18px;
    letter-spacing: .3px;
}

.nnp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    border: 2px solid #143b31;
    border-radius: 50%;
    box-shadow: inset 0 0 0 6px var(--white);
}

.nnp-list li::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    background: #0b3f2e;
    border-radius: 50%;
}

.nnp-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
}

.nnp-list li:hover {
    color: var(--theme);
}

/* Two-column chemical list */
.chem-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 40px;
}

.chem-list li {
    font-size: 16px;
    color: var(--black);
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
}

.chem-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    border: 2px solid #0b3f2e;
    border-radius: 50%;
}

.chem-list li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 6px;
    height: 6px;
    transform: translateY(-50%);
    background: #0b3f2e;
    border-radius: 50%;
}

/* On mobile: single column */
@media (max-width: 992px) {
    .nnp-chemicals .chem-list {
        columns: 1;
        column-gap: 0;
    }
}

/* =======================
   Mobile stack (grid areas)
   ======================= */
@media (max-width: 992px) {
    .nnp-feature .nnp-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        grid-template-columns: 1fr !important;
        grid-template-areas:

            "fig"
            "card";
        gap: 20px !important;

    }

    .nnp-feature {
        padding: 20px 0 !important;
    }

    .nnp-feature .nnp-fig {
        grid-area: fig;
        align-self: center;
    }

    .nnp-feature .nnp-card {
        grid-area: card;
        align-self: start;
    }

    .nnp-feature .nnp-fig {
        padding: 10px;
        border-radius: 14px;
    }

    .nnp-feature .nnp-fig img {
        width: 100%;
        height: auto;
        display: block;
    }

    .nnp-feature .nnp-card .nnp-head {
        padding: 18px 20px;
    }

    .nnp-feature .nnp-list {
        padding: 18px 20px 22px;
        gap: 14px;
    }
}

/* Extra-tight on <=768 */
@media (max-width: 767px) {
    .nnp-feature .nnp-wrap {
        display: grid;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "fig"
            "card";
        gap: 20px !important;
    }

    .nnp-feature {
        padding: 30px 0 !important;
    }

    .nnp-feature .nnp-wrap {
        gap: 6px !important;
    }

    .nnp-chemicals {
        padding: auto !important;
    }
}

/* =======================
   Animation only (needs JS IO to add .in-view)
   ======================= */
:root {
    --anim-dur: .9s;
    --anim-ease: cubic-bezier(.2, .65, .2, 1);
}

.nnp-fig,
.nnp-card {
    /* opacity: 0; */
    transform: translateY(16px);
    transition: transform var(--anim-dur) var(--anim-ease), opacity .7s ease;
    will-change: transform, opacity;
}

.nnp-feature:not(.flip) .nnp-fig {
    transform: translateX(-60px);
}

.nnp-feature:not(.flip) .nnp-card {
    transform: translateX(60px);
}

.nnp-feature.flip .nnp-fig {
    transform: translateX(60px);
}

.nnp-feature.flip .nnp-card {
    transform: translateX(-60px);
}

.nnp-feature.in-view .nnp-fig,
.nnp-feature.in-view .nnp-card {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

.nnp-feature.in-view .nnp-fig img {
    transition: transform 1.2s var(--anim-ease);
    transform: scale(1.0);
}

@media (prefers-reduced-motion: reduce) {

    .nnp-fig,
    .nnp-card,
    .nnp-feature:not(.flip) .nnp-fig,
    .nnp-feature:not(.flip) .nnp-card,
    .nnp-feature.flip .nnp-fig,
    .nnp-feature.flip .nnp-card {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* WOW duration (if you use WOW.js) */
.wow.fadeInUp {
    animation-duration: .7s;
}

@media (max-width: 576px) {
    .wow.fadeInUp {
        animation-duration: .6s;
      padding-right: 10px !important;
    }
}

/* ===== Section with GIF background ===== */
.cvx-values {
    position: relative;
    padding: 72px 16px 96px;
    color: var(--black);
    isolation: isolate;
    overflow: hidden;
}

.cvx-values::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/gi.gif) center/cover no-repeat fixed;
    z-index: -1;
    filter: saturate(0.9) contrast(0.95);
}

.cvx-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.cvx-head h2 {
    font-size: clamp(28px, 3.2vw, 42px);
    margin: 0 0 6px;
    color: var(--white);
    text-align: center;
}

.cvx-head p {
    color: var(--white);
    max-width: 820px;
    margin: 0 0 22px;
}

/* ===== Grid ===== */
.cvx-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, 1fr);
    /* mobile default: 2 */
}

@media (max-width: 767px) {
    .cvx-card {
        min-height: 100px;
        /* thodu compact */
        padding: 26px 10px !important;
        /* tamaru mobile wali value */
    }
}

@media (min-width: 768px) {

    /* tablet: 4 */
    .cvx-grid {
        grid-template-columns: repeat(4, 1fr);

    }


}

@media (min-width: 992px) {

    /* desktop: still 4 */
    .cvx-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .cvx-card {
        min-height: 100px;
        /* thodu compact */
        padding: 26px 10px !important;
        /* tamaru mobile wali value */
    }
}

/* Mobile & Tablet ma section padding remove */
@media (max-width: 991px) {
    .cvx-values {
        padding: 24px 10px 48px;
        /* top/bottom thodu rakho, left/right 0 */
    }

    .cvx-head h2,
    .cvx-head p {
        padding: 0 10px;
        /* text edge sathe chipki na jaye */
    }
}

/* ===== Card (equal heights) ===== */
.cvx-card {
    background: var(--white);
    border: 1px solid var(--border2);
    border-radius: 18px;
    min-height: 170px;
    /* equal look */
    padding: 28px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cvx-card:hover {
    transform: translateY(-4px);
    border-color: var(--theme2);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.cvx-card h3 {
    margin: 0;
    font-size: clamp(14px, 1.6vw, 18px);
    color: var(--base);
    font-weight: 600;
}

/* ===== Icon (SVG) ===== */
.cvx-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffefe7;
    /* subtle bg */
    outline: 2px solid rgba(210, 171, 103, .18);
}

.cvx-icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--theme2);
    fill: none;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

/* Line-draw + gentle float */
.draw {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: cvx-draw 1.2s ease forwards;
}

.cvx-card:nth-child(1) .draw {
    animation-delay: .05s;
}

.cvx-card:nth-child(2) .draw {
    animation-delay: .12s;
}

.cvx-card:nth-child(3) .draw {
    animation-delay: .19s;
}

.cvx-card:nth-child(4) .draw {
    animation-delay: .26s;
}

.cvx-card:nth-child(5) .draw {
    animation-delay: .33s;
}

.cvx-card:nth-child(6) .draw {
    animation-delay: .40s;
}

.cvx-card:nth-child(7) .draw {
    animation-delay: .47s;
}

.cvx-card:nth-child(8) .draw {
    animation-delay: .54s;
}

@keyframes cvx-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Pulse on hover */
.cvx-card:hover .cvx-icon {
    animation: cvx-pulse 1.2s ease infinite;
}

@keyframes cvx-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {

    .draw,
    .cvx-card:hover .cvx-icon {
        animation: none;
    }
}


.supply-chain-section {
    position: relative;
    padding: 80px 20px;
    background: var(--bg);
    color: var(--black);
    isolation: isolate;
}

.supply-chain-section .container {
    max-width: 1100px;
    margin: 0 auto;
}

.supply-chain-section .sc-head {
    text-align: center;
    margin-bottom: 40px;
}

.supply-chain-section .sc-head h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    color: var(--theme);
    position: relative;
    display: inline-block;
}

.supply-chain-section .sc-head h3 span {
    color: var(--theme2);
}

.supply-chain-section .sc-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text);
}

.supply-chain-section .sc-content p {
    margin-bottom: 20px;
    font-size: 18px;
}



.erp-benefits {


    color: black;
    border-radius: 8px;
    max-width: 600px;
    margin: auto;
    text-align: left;
}

.erp-benefits h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.benefit-list {
    list-style-type: none;
    padding-left: 0;
}

.benefit-list li {
    font-size: 1.2rem;
    margin: 10px 0;
    padding-left: 30px;
    position: relative;
}

.benefit-list li:before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #D2AB67;
    font-size: 1.5rem;
}

.process-systems {
    position: relative;
    padding: 60px 20px;
    background: var(--bg);
    color: var(--black);
}

.process-systems .container {
    max-width: 1100px;
    margin: 0 auto;
}

.process-systems h3 {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--theme);
}

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

.process-list li {
    position: relative;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 20px;
    padding-left: 42px;
}

.process-list li .icon {
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 20px;
    color: var(--theme2);
    animation: pulseIcon 2s infinite;
}

/* Icon animation */
@keyframes pulseIcon {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

@media (max-width: 600px) {
    .supply-chain-section {
        padding: 10px 20px !important;
    }

    .section-padding {
        padding: 10px 20px !important;
    }

    .process-systems {
        padding: 10px 20px !important;
    }
}


:root {
    --body: #fff;
    --black: #1C1C1C;
    --text: #666;
    --theme: #1C1C1C;
    --theme2: #D2AB67;
    /* your gold */
    --border: #E8E8E9;
    --bg: #ffffff;
}

.svc-contract {
    background: var(--bg);
    padding: clamp(40px, 6vw, 72px) 16px;
    color: var(--black);
}

.svc-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* grid-template-columns: 1.05fr 0.95fr; */
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.svc-breadcrumb {
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.svc-breadcrumb a {
    color: #9b9b9b;
    text-decoration: none;
}

.svc-breadcrumb a:hover {
    text-decoration: underline;
}

.svc-breadcrumb .current {
    color: #bbb;
}

.svc-title {
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.2;
    margin: 4px 0 14px;
    color: var(--theme);
    font-weight: 700;
}

.svc-left p {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 14px;
}

.brand {
    font-weight: 700;
    color: var(--theme2);
}

.svc-cta {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 16px;
    border: 1px solid var(--theme);
    color: #fff;
    background: var(--theme);
    text-decoration: none;
    border-radius: 6px;
    transition: .25s ease;
    text-transform: lowercase;
}

.svc-cta:hover {
    background: transparent;
    color: var(--theme);
}

/* Right block */
.svc-right {
    text-align: right;
}

.svc-logo {
    width: 100%;
    max-width: 560px;
    /* recommended visual width */
    height: auto;
    object-fit: contain;
    filter: saturate(.98) contrast(.98);
    /* Optional subtle slide-in */
    opacity: 0;
    transform: translateY(8px);
    animation: fadeUp .6s ease .1s forwards;
}

/* Minimal entrance for the text */
.svc-left {
    opacity: 0;
    transform: translateY(8px);
    animation: fadeUp .6s ease forwards;
}

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

/* Responsive */
@media (max-width: 992px) {
    .svc-wrap {
        grid-template-columns: 1fr;
        /* stack */
    }

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

/* Section wrapper */
.pillars-lr {
    --gap: clamp(20px, 4vw, 40px);
    padding: clamp(36px, 6vw, 72px) 16px;
    background: var(--body);
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: clamp(28px, 5vw, 56px);
}

/* Single row */
.lr {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    /* image a bit wider */
    gap: var(--gap);
    align-items: center;
}

/* Reverse order for alternating layout */
.image-right .lr-media {
    order: 2;
}

.image-right .lr-content {
    order: 1;
}

/* Media block – KEEP FULL IMAGE (no crop) */
.lr-media {
    background: var(--bg);
    border: 1px solid var(--border2);
    border-radius: 14px;
    padding: clamp(8px, 1.6vw, 14px);
    /* creates safe margin for contain */
    box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}

.lr-media img {
    width: 100%;
    /* height: clamp(240px, 34vw, 380px); */
    /* responsive height */
    object-fit: contain;
    /* 🔒 no cropping */
    display: block;
    border-radius: 10px;
}

/* Text side */
.lr-content h3 {
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 700;
    color: var(--theme);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--theme2);
    display: inline-block;
}

.lr-content p {
    color: var(--text);
    font-size: 18px;
    text-transform: capitalize !important;
    line-height: 1.85;
    margin: 0;
}

/* Optional: bullets style if you use <ul> on right side */
.lr-content ul {
    margin: 10px 0 0;
    padding-left: 0;
    list-style: none;
}

.lr-content li {
    margin: 8px 0;
    padding-left: 26px;
    position: relative;
    color: var(--theme);
}

.lr-content li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--theme2);
    font-weight: 700;
}

/* Responsive */
@media (max-width: 992px) {
    .lr {
        grid-template-columns: 1fr;
        /* stack on tablet & mobile */
    }

    .image-right .lr-media,
    .image-right .lr-content {
        order: initial;
        /* normal flow when stacked */
    }

    /* .lr-media img {
                height: clamp(220px, 48vw, 320px);
            } */
}

/* Pillars intro – uses your :root palette */
.pillars-intro.nnp {
    /* padding: clamp(48px,6vw,84px) 16px; */
    background: var(--body);
    padding-top: 20px;
}

.pi-container {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.pi-title {
    font-size: clamp(28px, 4.2vw, 48px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--theme);
    margin: 0 0 14px;
    letter-spacing: .2px;
}

.pi-title span {
    color: var(--theme2);
    position: relative;
}

.pi-title span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--theme2);
    width: 68%;
    margin: 0 auto;
    opacity: .9;
}

.pi-sub {
    max-width: 980px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
    color: var(--text);
}

/* optional thin divider under the block */
.pillars-intro.nnp::after {
    content: "";
    display: block;
    height: 1px;
    background: var(--border2);
    max-width: 1100px;
    margin: clamp(28px, 4vw, 40px) auto 0;
}

/* Line-draw animation */
.ld .svg-stroke * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: ld-draw var(--dur, 2.2s) ease-in-out infinite alternate;
}

/* Nice stagger: bowl → leaves → accents */
.ld .svg-stroke path:nth-of-type(1) {
    animation-delay: var(--delay, 0s);
}

.ld .svg-stroke path:nth-of-type(2) {
    animation-delay: calc(var(--delay, 0s) + .12s);
}

.ld .svg-stroke path:nth-of-type(3) {
    animation-delay: calc(var(--delay, 0s) + .24s);
}

@keyframes ld-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Optional: one-time draw (no loop) → wrapperમાં 'once' class ઉમેરો */
.ld.once .svg-stroke * {
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce) {
    .ld .svg-stroke * {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* Line-draw animation */
.ld .svg-stroke * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: ld-draw var(--dur, 2.2s) ease-in-out infinite alternate;
}

/* nice stagger: outer body first, then details */
.ld .svg-stroke path:nth-of-type(1) {
    animation-delay: var(--delay, 0s);
}

.ld .svg-stroke path:nth-of-type(2) {
    animation-delay: calc(var(--delay, 0s) + .14s);
}

@keyframes ld-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* optional: one-time draw → wrapperમાં 'once' class ઉમેરો */
.ld.once .svg-stroke * {
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    .ld .svg-stroke * {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* Line-draw animation */
.ld .svg-stroke * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: ld-draw var(--dur, 2.2s) ease-in-out infinite alternate;
}

/* nice stagger */
.ld .svg-stroke path:nth-of-type(1) {
    animation-delay: var(--delay, 0s);
}

.ld .svg-stroke path:nth-of-type(2) {
    animation-delay: calc(var(--delay, 0s) + .12s);
}

.ld .svg-stroke path:nth-of-type(3) {
    animation-delay: calc(var(--delay, 0s) + .24s);
}

@keyframes ld-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* one-time draw (optional): add class 'once' on wrapper */
.ld.once .svg-stroke * {
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce) {
    .ld .svg-stroke * {
        animation: none;
        stroke-dashoffset: 0;
    }
}

.chemfs-icon {
    display: inline-flex;
    cursor: pointer;
}

.svg-stroke path {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    transition: stroke-dashoffset 1s ease, transform 0.3s ease;
}

.chemfs-icon:hover .svg-stroke path {
    stroke-dashoffset: 0;
}

.chemfs-icon:hover .svg-stroke {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Line-draw animation (aal-aal-aal) */
.ld .svg-stroke * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: ld-draw var(--dur, 2.2s) ease-in-out infinite alternate;
}

/* થોડું stagger: પહેલા circle, પછી outside petals */
.ld .svg-stroke circle {
    animation-delay: var(--delay, 0s);
}

.ld .svg-stroke path {
    animation-delay: calc(var(--delay, 0s) + .12s);
}

@keyframes ld-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Optional: mobile/slow users માટે */
@media (prefers-reduced-motion: reduce) {
    .ld .svg-stroke * {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* Accent color અહીંથી બદલો (NNP gold set) */
.icon-draw {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: #D2AB67;
}

/* Line-draw animation */
.icon-draw .svg-stroke * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: strokeDraw var(--dur, 2.2s) ease-in-out infinite alternate;
}

/* થોડો stagger for nice effect */
.icon-draw .svg-stroke path:nth-child(1) {
    animation-delay: calc(var(--delay, 0s) + 0s);
}

.icon-draw .svg-stroke path:nth-child(2) {
    animation-delay: calc(var(--delay, 0s) + .12s);
}

.icon-draw .svg-stroke path:nth-child(3) {
    animation-delay: calc(var(--delay, 0s) + .24s);
}

@keyframes strokeDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Reduced motion respect */
@media (prefers-reduced-motion:reduce) {
    .icon-draw .svg-stroke * {
        animation: none;
        stroke-dashoffset: 0;
    }
}

:root {
    --chem-accent: #D2AB67;
    /* NNP Gold */
    --chem-title: #0f172a;
    --chem-text: #111827;
    --chem-muted: #6b7280;
    --chem-card: #fff;
    --chem-bd: #e9e9f1;
}

/* Full width section */
.chemfs {
    width: 100%;
    padding: 48px 24px;
    background: #fff;
}

.chemfs-head {
    max-width: 1200px;
    margin: 0 auto 20px;
    text-align: center
}

.chemfs-title {
    font-size: 25px;
    font-weight: 800;
    color: var(--chem-title);
    margin: 0
}

.chemfs-underline {
    width: min(160px, 30%);
    height: 6px;
    background: #d2ab67;
    border-radius: 6px;
    margin: 14px auto 0
}

.chemfs-sub {
    max-width: 1100px;
    margin: 16px auto 0;
    color: var(--chem-muted);
    font-size: 18px;
    line-height: 1.7
}

/* Grid: mobile 2, tablet/desktop 4 */
.chemfs-grid {
    max-width: 1400px;
    margin: 26px auto 0;
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width:768px) {
    .chemfs-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 28px;
    }
}

/* Equal-size cards (rectangular like screenshot) */
.chemfs-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: var(--chem-card);
    border: 1px solid var(--chem-bd);
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(16, 24, 40, .06);
    padding: 24px;
    height: clamp(150px, 22vw, 210px);
    /* SAME HEIGHT for all */
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    position: relative;
    isolation: isolate;
}

.chemfs-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(80% 80% at 50% 0%, rgba(210, 171, 103, .12), transparent 70%);
    opacity: 0;
    transition: opacity .22s ease;
    z-index: -1;
}

.chemfs-card:hover {
    transform: translateY(-4px);
    border-color: rgba(210, 171, 103, .45);
    box-shadow: 0 16px 28px rgba(16, 24, 40, .12);
}

.chemfs-card:hover::after {
    opacity: 1;
}

.chemfs-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    color: var(--chem-accent);
    margin-bottom: 10px;
}

.chemfs-name {
    color: var(--chem-text);
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.35;
    /* display: -webkit-box; */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Line-draw animation for ALL icons --- */
.draw .svg-stroke * {
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: chem-draw 2.2s ease-in-out infinite alternate;
}

/* small stagger per card */
.chemfs-card:nth-child(1) .svg-stroke * {
    animation-delay: .00s
}

.chemfs-card:nth-child(2) .svg-stroke * {
    animation-delay: .12s
}

.chemfs-card:nth-child(3) .svg-stroke * {
    animation-delay: .24s
}

.chemfs-card:nth-child(4) .svg-stroke * {
    animation-delay: .36s
}

.chemfs-card:nth-child(5) .svg-stroke * {
    animation-delay: .48s
}

.chemfs-card:nth-child(6) .svg-stroke * {
    animation-delay: .60s
}

.chemfs-card:nth-child(7) .svg-stroke * {
    animation-delay: .72s
}

.chemfs-card:nth-child(8) .svg-stroke * {
    animation-delay: .84s
}

@keyframes chem-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
    .draw .svg-stroke * {
        animation: none;
        stroke-dashoffset: 0;
    }

    .chemfs-card {
        transition: none;
    }
}

/* === MOBILE: name box always visible, no cut === */
@media (max-width: 575.98px) {
    .chemfs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .chemfs-card {
        height: auto;
        /* no fixed height */
        min-height: 160px;
        /* keep some baseline */
        padding: 18px 14px;
    }

    .chemfs-icon {
        width: 56px;
        height: 56px;
        /* little smaller on mobile */
        margin-bottom: 10px;
    }

    .chemfs-name {
        /* remove clamp/hide */
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
        overflow: visible;
        white-space: normal;
        word-break: break-word;

        /* make it a visible box */
        /* background: #fff; */
        /* border: 1px solid #ececf1; */
        border-radius: 12px;
        padding: 8px 10px;
        margin-top: 8px;
        max-width: 100%;
        line-height: 1.35;
    }
}

:root {
    --accent: #D2AB67;
    /* NNP Gold */
    --border: #E3E3E3;
    --text: #111;
}

.form-clt {
    position: relative;
    display: block;
}

.form-clt label {
    display: block;
    font-size: .9rem;
    margin-bottom: 6px;
    color: var(--text);
    font-weight: 600;
}

.form-clt input,
.form-clt select,
.form-clt textarea {
    width: 100%;
    border: 1px solid var(--border);

    padding: 12px 12px 12px 42px;
    /* left space for icon */
    font-size: 15px;
    /* line-height: 1.4; */
    color: var(--text);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    background: #fff;
}

.form-clt textarea {
    padding-left: 42px;
    min-height: 120px;
    resize: vertical;
}

.form-clt input:focus,
.form-clt select:focus,
.form-clt textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(210, 171, 103, .15);
}

.form-clt .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--accent);
    opacity: .9;
}

/* For tall textareas, keep icon aligned to first line */
.form-clt.form-clt-big .icon {
    top: 43px;
    transform: none;
}

/* Optional: invalid style */
.form-clt input:invalid[required],
.form-clt select:invalid[required],
.form-clt textarea:invalid[required] {
    /* border-color:#f2c2c2; */
}

.d {
    width: 100%;
    height: auto;
    outline: none;
    border: none;
    padding: 18px 35px;
    color: var(--text);
    background-color: whitesmoke;
    font-size: 14px;
    text-transform: lowercase;
}

.f {
    width: 100%;
    outline: none;
    border: none;
    padding: 14px 18px;
    color: var(--text);
    background-color: whitesmoke;
    font-size: 14px;

    margin-bottom: 15px;
}

.label {
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    color: #333;
}

.p {
    margin: 0;
    font-size: 14px;
    color: red;
    font-weight: 500;
}

.form-clt input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #ccc;

    background: #fff;
    font-size: 14px;
    outline: none;
}

.form-clt input:focus {
    border-color: #b99446;
}

.form-clt label {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    color: #333;
}

.up {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 600;
    text-align: justify;
}

.s {
    text-transform: capitalize !important;
}

.p {
    text-transform: capitalize !important;
    color: red !important;
}



/* -------- Base (Desktop/Tablet) -------- */
.form-clt input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ccc;
    font-size: 14px;
    background: #fff;
    outline: none
}

.form-clt input:focus {
    border-color: #b99446;
    outline: none
}

.form-clt label {
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    color: #333
}

.up {
    width: 100%;
    height: auto;
    outline: none;
    border: none;
    padding: 18px 35px;
    color: var(--text);
    background-color: whitesmoke;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1.4;
}

.mt {
    width: 100%;
    height: 64px;
    outline: none;
    border: none;
    padding: 18px 35px;
    color: var(--text);
    background-color: whitesmoke;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1.4;
}

.s {
    text-transform: capitalize !important;
    color: #555;
    font-weight: 500;
}

.p {
    text-transform: capitalize !important;
    color: red !important;
    font-weight: 600;
    margin-left: 6px;
}

.pill-red {
    color: red !important;
    text-transform: capitalize !important;
    font-weight: 600;
    margin-left: 6px;
}

/* Utility */
.text-center {
    text-align: center;
}

/* -------- Mobile (≤576px) -------- */
@media (max-width:576px) {

    /* Make each chemical row a 3-column compact grid */
    .chem-row {
        display: grid;
        grid-template-columns: 1fr 80px 56px;
        /* Product / Qty / Unit */
        gap: 8px;
        align-items: start;
    }

    .up {
        font-size: 10px !important;
        padding: 5px 10px !important;
        height: auto !important;
    }

    .mt {
        height: 48px !important;
    }

    .s {
        font-size: 10px !important;
    }

    .p {
        font-size: 10px !important;
    }

    .pill-red {
        font-size: 10px !important;
    }

    .form-clt input {
        padding: 10px 10px !important;
    }

    /* Remove Bootstrap column spacing interference */
    .chem-row>[class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        padding: 0 !important;
    }

    /* Product box: 2 lines + ellipsis */
    .chem-row .prod .up {
        font-size: clamp(12px, 3.7vw, 14px);
        padding: 10px;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-transform: none;
        /* read better on mobile */
    }

    .chem-row .prod .s,
    .chem-row .prod .p,
    .chem-row .prod .pill-red {
        font-size: clamp(11px, 3.3vw, 13px);
        display: inline;
    }

    /* Qty input box */
    .chem-row .qty .form-clt label {
        display: none;
    }

    /* save space */
    .chem-row .qty .form-clt input {
        padding: 10px 10px;
        font-size: clamp(12px, 3.6vw, 14px);
        text-align: center;
        border-radius: 6px;
    }

    /* Unit pill box */
    .chem-row .unit .up {
        font-size: clamp(12px, 3.6vw, 14px);
        padding: 10px 8px;
        text-align: center;
        border-radius: 6px;
    }

    /* Tighter vertical rhythm */
    .chem-row+.chem-row {
        margin-top: 10px;
    }
}


/* ============ Chem Quote (chemq) ============ */
.chemq {
    --chemq-bg: #ffffff;
    --chemq-card: #fcfcfc;
    --chemq-border: #e8e6e0;
    --chemq-text: #1c1c1c;
    --chemq-muted: #626262;
    --chemq-accent: #b99446;
    /* your brand gold */
    --chemq-pill: #f4f2ec;
    --chemq-pill-red: #ffe8e6;
    --chemq-gap: 12px;
    --chemq-radius: 14px;
    --chemq-shadow: 0 2px 10px rgba(0, 0, 0, .03);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial, sans-serif;
    color: var(--chemq-text);
}

.chemq-wrap {
    background: var(--chemq-bg);
    border: 1px solid var(--chemq-border);
    /* border-radius: var(--chemq-radius); */
    padding: 16px;
    box-shadow: var(--chemq-shadow);
}

/* Header row */
.chemq-head,
.chemq-item {
    display: grid;
    grid-template-columns: 1fr 140px 90px;
    /* product | qty | unit */
    gap: var(--chemq-gap);
    align-items: center;
}

.chemq-head {
    font-weight: 600;
    color: var(--chemq-muted);
    padding: 6px 10px;
    border-bottom: 1px dashed var(--chemq-border);
    margin-bottom: 6px;
}

.chemq-head>div {
    text-transform: none;
}

/* Item row */
.chemq-item {
    background: var(--chemq-card);
    border: 1px solid var(--chemq-border);
    /* border-radius: 12px; */
    padding: 10px;
}

.fntd {
    text-transform: none !important;
    color: #09c739 !important;
}

.ln {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chemq-item+.chemq-item {
    margin-top: 10px;
}

/* Product cell */
.chemq-prod-title {
    font-size: clamp(14px, 2.6vw, 16px);
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.chemq-sub {
    display: inline-block;
    font-size: 13px;
    color: var(--chemq-muted);
    /* margin-right: 8px; */
}

.chemq-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chemq-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 16px;
    /* border-radius: 999px;
                                        background: var(--chemq-pill);
                                        border: 1px solid var(--chemq-border); */
    white-space: nowrap;
    color: red;
    font-weight: bold;
}

.chemq-pill.red {
    /* background: var(--chemq-pill-red); */
    /* border-color: #ffd1cd; */
}

/* Quantity input */
.chemq-qty input[type="text"],
.chemq-qty input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--chemq-border);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color .2s ease;
}

.chemq-qty input:focus {
    border-color: var(--chemq-accent);
}

/* Unit cell */
.chemq-unit {
    text-align: center;
    font-weight: 600;
    letter-spacing: .2px;
}

/* Section label (optional wrapper label style) */
.chemq-label {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--chemq-muted);
}

/* Spacing helpers */
.chemq-stack {
    display: grid;
    gap: 14px;
}

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

    .chemq-head,
    .chemq-item {
        grid-template-columns: 1fr 120px 70px;
    }
}

@media (max-width: 520px) {
    .chemq-head {
        display: none;
    }

    /* hide header for mobile */
    .chemq-item {
        grid-template-columns: 1fr;
    }

    .chemq-qty,
    .chemq-unit {
        display: grid;
        grid-template-columns: 1fr 120px;
        gap: 10px;
        align-items: center;
    }

    .chemq-qty::before {
        content: "Quantity";
        font-size: 12px;
        color: var(--chemq-muted);
    }

    .chemq-unit::before {
        content: "Unit";
        font-size: 12px;
        color: var(--chemq-muted);
    }

    .chemq-unit {
        text-align: left;
        font-weight: 600;
        padding-left: 0;
    }
}

/* ===== Force SAME 3-column layout on desktop/tablet/mobile ===== */

/* Base grid (Product | Qty | Unit) */
.chemq-head,
.chemq-item {
    display: grid;
    align-items: center;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 120px 72px;
}

/* Keep header always visible (even on mobile) */
.chemq-head {
    display: grid;
}

/* Slight squeeze on tablets */
@media (max-width: 900px) {

    .chemq-head,
    .chemq-item {
        grid-template-columns: minmax(0, 1fr) 110px 64px;
    }
}

/* Compact phones but STILL 3 columns (no stacking, no scroll) */
@media (max-width: 540px) {

    .chemq-head,
    .chemq-item {
        grid-template-columns: minmax(0, 1fr) 96px 56px;
        gap: 8px;
    }

    /* Kill any previous "stack to 1 column" rules */
    .chemq-item {
        grid-template-areas: "prod qty unit";
    }

    .chemq-qty,
    .chemq-unit {
        display: block;
    }

    .chemq-qty::before,
    .chemq-unit::before {
        content: none;
    }
}

/* Product block layout: title + pills in one column (clean & compact) */
.ln {
    display: flex;
    /* flex-direction: column; */
    /* keep pills under title */
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

@media (max-width:992px) {
    .ln {
        display: flex;
        flex-direction: column;
        /* keep pills under title */
        align-items: flex-start;
        gap: 6px;
    }

}

/* Title: 2 lines clamp to avoid overflow on small screens */
.chemq-prod-title {
    font-size: clamp(14px, 2.6vw, 16px);
    line-height: 1.25;
    font-weight: 700;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sub text + optional green highlight */
.chemq-sub {
    display: inline-block;
    font-size: 13px;
    color: var(--chemq-muted);
    margin-left: 6px;
}

.chemq-sub.fntd {
    color: #09c739 !important;
    text-transform: none !important;
}

/* fix selector bug (.chemq-sub fntd -> .chemq-sub.fntd) */

/* Pills: elegant chips (kept subtle on all screens) */
.chemq-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chemq-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 18px;
    font-weight: 600;

    white-space: nowrap;
}

.chemq-pill.red {
    /* background: var(--chemq-pill-red); */
    border-color: #ffd1cd;
}

/* Qty input + Unit box (compact but readable) */
.chemq-qty input[type="text"],
.chemq-qty input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--chemq-border);
    border-radius: 10px;
    background: #fff;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.chemq-qty input:focus {
    border-color: var(--chemq-accent);
    box-shadow: 0 0 0 3px rgba(185, 148, 70, .12);
}

.chemq-unit {
    text-align: center;
    font-weight: 700;
    letter-spacing: .2px;
    background: #fff;
    border: 1px solid var(--chemq-border);
    border-radius: 10px;
    padding: 10px 8px;
}

/* Remove old conflicting bits if still present */
.chemq-head {
    border-bottom: 1px dashed var(--chemq-border);
    margin-bottom: 6px;
}

.chemq-item {
    /* background: var(--chemq-card);
                                        border: 1px solid var(--chemq-border);
                                        border-radius: 12px; */
    padding: 10px;
}

.chemq-item+.chemq-item {
    margin-top: 10px;
}

/* Safety: in case any previous rule tried to hide header or change to 1-column */
@media (max-width:720px) {
    .chemq-head {
        display: grid;
    }
}

/* ===== Mobile polish (<= 480px) ===== */
@media (max-width: 480px) {

    .chemq-pill {
        font-size: 10px;
        padding: 0 !important;
        /* border-radius: 12px;
                                            background: var(--chemq-pill);
                                            border: 1px solid var(--chemq-border); */
    }

    .chemq-wrap {
        padding: 12px;
    }

    .chemq-head,
    .chemq-item {
        grid-template-columns: minmax(0, 1fr) 92px 56px;
        /* Product | Qty | Unit */
        gap: 8px;
    }

    .chemq-head {
        padding: 4px 8px;
    }

    .chemq-item {
        padding: 8px;
        /* border-radius: 10px;  */
        background: #fff;
        /* cleaner on mobile */
        border: 1px solid #eee;
    }

    /* Product block */
    .ln {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .chemq-prod-title {
        font-size: 13px;
        line-height: 1.25;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        hyphens: auto;
    }

    .chemq-sub {
        font-size: 12px;
        margin-left: 0px !important;
    }

    .chemq-sub.fntd {
        color: #09c739 !important;
    }

    /* Pills smaller & softer */
    .chemq-pills {
        gap: 4px;
    }

    .chemq-pill {
        font-size: 10px;
        padding: 3px 8px;
        /* border-radius: 12px;
                                            background: var(--chemq-pill);
                                            border: 1px solid var(--chemq-border); */
    }

    .chemq-pill.red {
        /* background: #fff5f4; */
        border-color: #ffd1cd;
        color: #d64a4a;
        font-size: 10px;
        font-weight: bold;
    }

    /* Qty + Unit same height */
    .chemq-qty input[type="text"],
    .chemq-qty input[type="number"] {
        height: 36px;
        padding: 8px 10px;
        font-size: 13px;
        border-radius: 10px;
    }

    .chemq-unit {
        height: 36px;
        padding: 0 6px;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid var(--chemq-border);
        border-radius: 10px;
    }
}

/* Ultra-compact phones (<= 360px) */
@media (max-width: 360px) {

    .chemq-head,
    .chemq-item {
        grid-template-columns: minmax(0, 1fr) 86px 50px;
    }

    .chemq-prod-title {
        font-size: 12.5px;
    }

    .chemq-qty input {
        font-size: 12.5px;
    }

    .chemq-unit {
        font-size: 12.5px;
    }
}

/* Fix old selector & minor cleanups (safe globally) */
.chemq-sub.fntd {
    text-transform: none !important;
}

.chemq-qty::before,
.chemq-unit::before {
    content: none !important;
}

input {
    color: black !important;
}

@media (max-width:540px) {
    .chemq-prod-title {
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }
}


.gov-section {
    background: var(--body);
    padding: 40px 0;
    color: var(--text)
}

.gov-img {
    display: flex;
    flex-direction: column; /* one above another */
    gap: 20px; /* space between the two images */
}

.gov-img img {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
    object-fit: cover;
}


.gov-content {
    padding-left: 40px
}

.gov-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--theme);
    margin-bottom: 20px
}

.gov-content p {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.65;
    text-transform: capitalize;
    text-align: justify;
}

.gov-block {
    border-top: 2px solid var(--border2);
    padding: 16px 0
}

.gov-block h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--base);
    margin-bottom: 8px
}

.gov-block p {
    margin: 0;
    color: var(--text)
}

@media(max-width:991px) {
    .gov-content {
        padding-left: 0;
        margin-top: 28px
    }
}

.logi-section {
    background: var(--body);
    padding: 72px 18px;
}

.logi-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 1000px) {
    .logi-wrap {
        grid-template-columns: 1fr;
    }
}

.logi-copy h2 {
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.1;
    color: var(--theme);
    margin: 0 0 14px;
}

.logi-copy h2 span {
    box-shadow: inset 0 -6px 0 color-mix(in oklab, var(--theme2) 28%, transparent);
}

.logi-lead {
    font-size: clamp(16px, 1.8vw, 18px);
    color: var(--theme);
    margin: 0 0 8px;
}

.logi-sub {
    color: var(--text);
    margin: 0 0 24px;
    max-width: 60ch;
}

.logi-subhead {
    font-size: 20px;
    color: var(--theme);
    margin: 26px 0 12px;
}

.logi-subhead::before {
    content: "";
    display: block;
    width: 180px;
    height: 3px;
    border-radius: 6px;
    background: var(--theme2);
    margin: 0 0 12px;
}

/* Feature list */
.logi-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 780px;
}

@media (max-width: 640px) {
    .logi-features {
        grid-template-columns: 1fr;
    }
}

.logi-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 12px;
    transition: .2s ease;
}

.logi-features li:hover {
    background: var(--bg);
    transform: translateY(-2px);
}

.logi-features .ico {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: grid;
    place-items: center;
    color: var(--theme2);
    background: color-mix(in oklab, var(--theme2) 18%, #fff);
    border-radius: 12px;
}

.logi-features .txt {
    color: var(--theme);
    font-weight: 600;
}

/* Visual (diamond collage) */
.logi-visual {
    position: relative;
    min-height: 420px;
}

.dots {
    position: absolute;
    right: 0;
    top: 18px;
    width: 220px;
    height: 140px;
    background-image: radial-gradient(var(--border) 1.4px, transparent 1.4px);
    background-size: 14px 14px;
    opacity: .6;
}

.quad {
    position: relative;
    width: 420px;
    height: 420px;
    margin: 40px auto 0;
}

@media (max-width: 520px) {
    .quad {
        width: 320px;
        height: 320px;
    }
}

.tile {
    position: absolute;
    width: 52%;
    height: 52%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 28px color-mix(in oklab, #000 14%, transparent);
    transform: rotate(45deg);
    background: #ddd;
}

.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotate(-45deg) scale(1.12);
}

.tile:nth-child(1) {
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.tile:nth-child(2) {
    left: 50%;
    top: 0;
    transform: translateX(-50%) rotate(45deg);
}

.tile:nth-child(3) {
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.tile:nth-child(4) {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) rotate(45deg);
}

.center-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--theme2);
    box-shadow: 0 6px 24px color-mix(in oklab, var(--theme2) 45%, transparent), inset 0 0 0 10px var(--white);
}

.quad .tile:hover img {
    transform: rotate(-45deg) scale(1.18);
    transition: transform .35s ease;
}

.logi-subhead.road {
    position: relative;
    padding-bottom: 28px;
}

.logi-subhead.road::before {
    display: none;
}

.logi-subhead .road-track {
    --roadW: min(420px, 70%);
    --roadH: 3px;
    --truckW: 28px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--roadW);
    height: 22px;
}

.logi-subhead .road-line {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(60% + 10px);
    height: var(--roadH);
    background: var(--theme2);
    border-radius: 999px;
}

.logi-subhead .road-truck {
    position: absolute;
    top: calc(50% + 6px - var(--roadH)/2 - 16px);
    width: var(--truckW);
    color: var(--theme2);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
    animation: drive-backforth 6s ease-in-out infinite;
}

/* Forward + Back motion */
@keyframes drive-backforth {
    0% {
        left: 0;
        transform: scaleX(1);
    }

    45% {
        left: calc(var(--roadW) - var(--truckW));
        transform: scaleX(1);
    }

    50% {
        left: calc(var(--roadW) - var(--truckW));
        transform: scaleX(-1);
    }

    95% {
        left: 0;
        transform: scaleX(-1);
    }

    100% {
        left: 0;
        transform: scaleX(1);
    }
}

.one-stop {
    position: relative;
    background: var(--bg);
    color: var(--black);
    padding: 72px 16px 88px;
    overflow: hidden;
}

.one-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 8px;
}

.one-kicker {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--theme);
    background: color-mix(in oklab, var(--theme2) 16%, transparent);
    padding: 8px 12px;
    border-radius: 999px;
    margin: 0 0 14px;
}

.one-title {
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.18;
    margin: 0 0 18px;
    font-weight: 400;
    color: var(--theme);
    letter-spacing: -0.02em;
}

.one-lead {
    font-size: clamp(16px, 1.7vw, 18px);
    line-height: 1.75;
    color: var(--black);
    margin: 0 0 18px;
    padding-left: 16px;
    border-left: 4px solid var(--theme2);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.02), transparent 50%);
}

.one-text {
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.8;
    color: var(--text);
    margin: 0 0 28px;
}

.one-subtitle {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--theme);
}

.one-points {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: grid;
    gap: 10px 18px;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.one-points li {
    position: relative;
    padding-left: 28px;
    color: var(--black);
    line-height: 1.6;
    background: var(--body);
    border: 1px solid var(--border2);
    border-radius: 12px;
    padding: 12px 14px 12px 38px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.one-points li::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 40%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--theme2);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--theme2) 25%, transparent);
}

.one-points li span {
    font-weight: 700;
    color: var(--theme);
}

@media (max-width: 720px) {
    .one-stop {
        padding: 56px 14px 0px;
    }

    .one-points {
        grid-template-columns: 1fr;
    }
}

:root {
    --brand: #b99446;
}

/* Toggle button */
.toggle-btn {
    background: var(--brand);
    color: #fff;
    border: 0;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Drawer close (X) – inside drawer top-right */
.sidebar-close {
    position: sticky;
    top: 0;
    right: 0;
    margin-left: auto;
    display: block;
    font-size: 28px;
    line-height: 1;
    background: transparent;
    border: 0;
    padding: 10px 14px;
    cursor: pointer;
    margin-bottom: -30px;
}

/* Backdrop */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1001;
}

.sidebar-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ===== Drawer base ===== */
.sidebar-wrap {
    /* Desktop: static sidebar */
    position: static;
    height: auto;
    transform: none;
    transition: none;
    background: #fff;
    box-shadow: none;
    z-index: auto;
    overflow: visible;
}

/* Mobile/Tablet: right off-canvas */
@media (max-width: 991.98px) {
    .toggle-btn {
        display: inline-flex;
    }

    body.no-scroll {
        overflow: hidden;
    }

    .sidebar-wrap {
        position: fixed;
        top: 0;
        right: 0;
        height: 100dvh;
        width: 85vw;
        /* your width */
        background: #fff;
        z-index: 10002;
        overflow: auto;
        border-left: 1px solid rgba(0, 0, 0, .08);
        box-shadow: -20px 0 40px rgba(0, 0, 0, .08);
        transform: translateX(100%);
        /* hidden to right */
        transition: transform .35s ease;
    }

    .sidebar-wrap.is-open {
        transform: translateX(0);
    }
}

/* Desktop: button hide, drawer close btn hide */
@media (min-width: 992px) {
    .toggle-btn {
        display: none;
    }

    .sidebar-close {
        display: none;
    }
}

/* Caption padding */
.product-image figcaption {
    padding: 22px 12px;
}

/* Your extra badge style */
.nice {
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    background-color: whitesmoke;

}

/* ===== Top controls (Showing / Sorting / Filter button) ===== */
.woocommerce-notices-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 30px;
}

/* Box looks */
.woocommerce-notices-wrapper .product-showing,
.woocommerce-notices-wrapper .form-clt,
.woocommerce-notices-wrapper .toggle-btn {
    border: 1px solid var(--border2);
    background: transparent;
    height: auto !important;
    padding: 18px 20px;
    text-transform: uppercase;
    font-size: 16px;
}

.bbb {
    border: 1px solid var(--border2) !important;
    background: transparent !important;
    background-color: #b99446 !important;
    padding: 18px 20px !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
}

/* Sorting box inner */
.woocommerce-notices-wrapper .form-clt {
    width: 250px;
}

.woocommerce-notices-wrapper .form-clt .nice-select {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: inherit;
    text-transform: inherit;
}

/* Desktop (≥992px): show Showing + Sorting, hide Filter button */
@media (min-width: 992px) {
    .woocommerce-notices-wrapper .product-showing {
        display: inline-block !important;
    }

    .woocommerce-notices-wrapper .form-clt {
        display: block !important;
    }

    .woocommerce-notices-wrapper .toggle-btn {
        display: none !important;
    }
}

/* Tablet + Mobile (<992px): hide Showing + Sorting, show only Filter button */
@media (max-width: 991.98px) {
    .woocommerce-notices-wrapper {
        justify-content: flex-start;
        gap: 12px;
    }

    .woocommerce-notices-wrapper .product-showing,
    .woocommerce-notices-wrapper .form-clt {
        display: none !important;
    }

    .woocommerce-notices-wrapper .toggle-btn {
        display: inline-flex !important;
        width: 30%;
        padding: 12px 16px;
        font-size: 15px;
        border-radius: 8px;
    }
}

@media (max-width: 768px) {
    .woocommerce-notices-wrapper .toggle-btn {
        width: auto !important;
        margin-bottom: -43px !important;
        /* margin-top: -100px !important; */
        padding: auto !important;
    }

    .woocommerce-notices-wrapper .product-showing,
    .woocommerce-notices-wrapper .form-clt,
    .woocommerce-notices-wrapper .toggle-btn {
        border: 1px solid var(--border2);
        background: transparent;
        height: 40px !important;
        padding: 18px 20px;
        text-transform: uppercase;
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .ak47 {
        padding: 20px 0 !important;
    }
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #b99446;
    font-weight: 700;
}

.nnp-points {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.nnp-points li {
    position: relative;
    padding-left: 20px;
    color: #111111;
}

.nnp-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b99446;
    opacity: .9;
}

/* Minimal card styling so images/buttons na hoy to pan premium lage */
.nnp-card {

    color: #111111;
    padding: 26px 22px;

    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .28);
}

.nnp-title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .2px;
}

.nnp-underline {
    display: block;
    height: 2px;
    width: 110px;
    margin: 8px 0 16px;
    background: linear-gradient(90deg, #b99446, transparent);
}

.nnp-points {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 8px;
}

.nnp-points li {
    position: relative;
    padding-left: 20px;
    color: black;
    font-size: 14.5px;
}

.nnp-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b99446;

}

/* Equal height per row */
.nnp-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* (Optional) bottom footer / button hoy to niche stick karva mate) */
.nnp-card .nnp-footer {
    margin-top: auto;
}



  :root{
    --nnp-deep:#0b2a57;     /* headline navy */
    --nnp-text:#1b1f29;     /* body text */
    --nnp-gold:#D2AB67;     /* NNP accent gold */
    --nnp-soft:#f7f5ef;     /* soft bg tint (unused but handy) */
    --nnp-max:1200px;
  }
  .nnp-import-export{background:#fff}
  .nnp-import-export .nnp-topbar{
    height:4px;
    background: linear-gradient(90deg,var(--nnp-gold), #f5c97b, var(--nnp-gold));
  }
  .nnp-container{
    max-width:var(--nnp-max);
    margin:0 auto;
    padding:48px 20px;
    display:grid;
    gap:28px;
    grid-template-columns: 1.1fr 1fr;
    align-items:center;
  }
  .nnp-left h2{
    font-size: clamp(28px, 3.2vw, 44px);
    line-height:1.15;
    font-weight:800;
    color:var(--nnp-deep);
    letter-spacing:.2px;
    margin:0;
  }
  .nnp-left .hi{color:var(--nnp-gold)}
  .nnp-right p{
    font-size: 18px;
    line-height:1.8;
    color:var(--nnp-text);
    margin:0;
  }
  .nnp-bullets{margin:14px 0 0 0; padding:0; list-style:none; display:grid; gap:6px}
  .nnp-bullets li{
    font-size:15px; line-height:1.6; position:relative; padding-left:22px;
  }
  .nnp-bullets li::before{
    content:""; width:8px; height:8px; border-radius:50%;
    background:var(--nnp-gold); position:absolute; left:0; top:.55em;
  }
  @media (max-width: 992px){
    .nnp-container{grid-template-columns:1fr; padding:36px 18px}
    .nnp-left h2{margin-bottom:6px}
  }

      :root {
            --ink: #1c1c1c;
            /* text */
            --muted: #666;
            /* subtext */
            --bg: #f7f8fa;
            /* section bg */
            --card: #fff;
            /* logo tile bg */
            --ring: #e8e8e9;
            /* tile border */
            --accent: #2b7a4b;
            /* subtle highlight */
            --shadow: 0 6px 24px rgba(0, 0, 0, .06);
        }

        .brands {
            background: var(--bg);
            padding: 56px 16px;
        }

        .brands-wrap {
            max-width: 1200px;
            margin: 0 auto;
        }

        .brands-head {
            text-align: left;
            margin: 0 0 22px;
        }

        .brands-head h2 {
            margin: 0;
            font: 700 clamp(22px, 2.8vw, 30px)/1.2 system-ui, -apple-system, Segoe UI, Roboto;
            color: var(--ink);
        }

        /* Grid: desktop 6, tablet 4, mobile 2 */
        .brand-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 18px;
        }

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

        @media (max-width:640px) {
            .brand-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .nnp-quality {
                padding: 56px 21px !important;
            }
        }

        /* Tile */
        .brand {
            position: relative;
            background: var(--card);
            border: 1px solid var(--ring);
            border-radius: 16px;
            aspect-ratio: 5 / 2.4;
            display: grid;
            place-items: center;
            overflow: hidden;
            box-shadow: var(--shadow);
            transform: translateY(8px) scale(.98);
            opacity: 0;
        }

        .brand img {
            max-width: 78%;
            max-height: 70%;
            object-fit: contain;
            /* filter: grayscale(100%) contrast(.9) brightness(.95); */
            transition: transform .35s ease, filter .35s ease, opacity .35s ease;
        }

        /* Hover / focus interactions */
        .brand:hover img,
        .brand:focus-within img {
            filter: grayscale(0%) contrast(1.05) brightness(1);
            transform: scale(1.05);
        }

        .brand::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(120px 40px at var(--mx, 50%) 110%, rgba(43, 122, 75, .12), transparent 60%);
            opacity: 0;
            transition: opacity .35s ease;
        }

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

        /* ===== On‑scroll reveal ===== */
        .brand.reveal {
            opacity: 1;
            transform: translateY(0) scale(1);
            animation: floatY 4.2s ease-in-out calc(var(--d, 0) * .12s) infinite alternate;
        }

        @keyframes floatY {
            from {
                transform: translateY(0)
            }

            to {
                transform: translateY(-6px)
            }
        }

        /* Fancy ripple-in on first show */
        .brand.reveal img {
            animation: pop .6s ease var(--delay, 0ms) both;
        }

        @keyframes pop {
            0% {
                opacity: .2;
                transform: scale(.94)
            }

            100% {
                opacity: 1;
                transform: scale(1)
            }
        }

            /* ===== Quality Assurance (NNP) ===== */
        .nnp-quality {
            background: var(--bg);
            color: var(--black);
            padding: 56px 16px;
        }

        .nnp-q-wrap {
            max-width: 1100px;
            margin: 0 auto;
        }

        .nnp-q-title {
            margin: 0 0 10px;
            font-size: clamp(28px, 3vw, 42px);
            line-height: 1.15;
            font-weight: 800;
            color: var(--theme);
        }

        .nnp-q-intro {
            margin: 0 0 18px;
            font-size: clamp(15px, 1.6vw, 18px);
            color: var(--black);
        }

        .nnp-q-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 12px 24px;
            grid-template-columns: 1fr;
            max-width: 900px;
        }

        .nnp-q-list li {
            position: relative;
            padding-left: 22px;
            color: var(--text);
            font-size: clamp(14px, 1.5vw, 17px);
            line-height: 1.6;
        }

        .nnp-q-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.72em;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--theme2);
            /* golden dot */
            box-shadow: 0 0 0 2px rgba(210, 171, 103, .18);
        }

        /* Optional: two-column bullets on large screens */
        @media (min-width: 1024px) {
            .nnp-q-list {
                grid-template-columns: 1fr 1fr;
            }
        }


           .chem-wrap {
            background: #f6f9fb;
        }

        .chem-title {
            font-weight: 800;
            color: #d7af6a;
            letter-spacing: .3px;
        }

        .chem-desc {
            max-width: 920px;
            color: #2b2b2b;
            opacity: .85
        }

        .chem-card {
            background: #fff;
            border-radius: 18px;
            padding: 36px 24px;
            height: 100%;
            box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .chem-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
        }

        .chem-logo {
            max-width: 340px;
            max-height: 150px;
            object-fit: contain;
            margin-bottom: 14px;
        }

        .chem-name {
            font-size: 18px;
            font-weight: 800;
            line-height: 1.35;
            margin: 0;
            color: #111827;
        }

        /* dotted decorations */
        .chem-dots {
            position: absolute;
            width: 170px;
            height: 170px;
            z-index: 0;
            opacity: .35
        }

        .chem-dots::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(currentColor 1.5px, transparent 1.5px);
            background-size: 14px 14px;
            color: #c7cdd8;
        }

        .chem-dots-left {
            left: -6px;
            top: 68px;
        }

        .chem-dots-right {
            right: -6px;
            top: 68px;
        }

        @media (max-width: 991.98px) {

            .chem-dots-left,
            .chem-dots-right {
                display: none;
            }
        }