/* =========================================
   HOMEPAGE HERO SECTION
   ========================================= */

.qvr-home-hero {
    /* Background Image setup */
    background-image: url('https://placehold.co/1920x800/666/999?text=Family+Running+Background');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 600px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Prevents horizontal scrollbar */
}

/* Optional: Dark Overlay to make text pop if image is bright */
.qvr-home-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient: Clear at center, darker at edges/left */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: 1;
}

.qvr-home-hero-container {
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
    padding: 80px 20px;
    position: relative;
    z-index: 2;
    /* Text sits above overlay */
    min-height: 880px;
    display: flex;
}

.qvr-home-hero-content {
    max-width: 600px;
    /* Constrain width of text block */
    color: #fff;
    align-self: center;
}

/* Typography */
.qvr-home-hero-title {
    font-size: 56px;
    font-weight: 700;
    /* Bold */
    line-height: 1.1;
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Soft shadow for readability */
}

.qvr-home-hero-desc {
    font-size: 20px;
    line-height: 1.5;
    color: #fff;
    margin-bottom: 40px;
    max-width: 450px;
    font-weight: 400;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

/* Button Styling */
.qvr-home-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: #F37021;
    /* Orange */
    color: #fff;
    text-decoration: none;
    padding: 10px 10px 10px 25px;
    /* Less padding right for icon circle */
    border-radius: 50px;
    /* Pill Shape */
    font-weight: 600;
    font-size: 16px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.qvr-home-hero-btn:hover {
    background-color: #D76305;
    color: #fff;
}

/* The White Circle Icon */
.btn-icon {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    /* Orange Icon */
    transition: transform 0.3s ease;
}

.qvr-home-hero-btn:hover .btn-icon {
    transform: rotate(45deg);
    /* Spin arrow on hover */
}

.qvr-hero-slide {
    background-image: var(--bg-desktop);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.qvr-home-hero-slider.slick-slider.slick-dotted {
    padding: 0 !important;
}

.qvr-home-hero-slider.slick-slider.slick-dotted ul.slick-dots {
    margin-bottom: 10px;
}

.qvr-home-hero-slider.slick-slider.slick-dotted ul.slick-dots li.slick-active button {
    background: #737373;
    width: 8px;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .qvr-home-hero {
        min-height: 500px;
        background-position: 70% center;
        /* Shift image if needed */
    }

    .qvr-home-hero-title {
        color: #FFF;
        text-shadow: 0 0 7px rgba(0, 0, 0, 0.50);
        font-family: Manrope;
        font-size: 32px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .qvr-home-hero-desc {
        color: #FFF;
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
    }

    .qvr-hero-slide {
        background-image: var(--bg-mobile);
    }

    .qvr-home-hero-content {
        align-self: flex-start;
    }

    .qvr-home-hero-container {
        padding: 50px 20px;
    }
}

/* --- CONTAINER --- */
.hp-goals-section {
    padding: 60px 40px 0px;
    text-align: center;
    max-width: 1300px;
    /* Slightly wider to fit arrows + 6 items */
    margin: 0 auto;
    position: relative;
}

/* --- SLIDER TRACK --- */
.goals-slider-init .slick-track {
    display: flex !important;
    gap: 0;
    /* Slick handles spacing via padding, see below */
}

/* --- SLIDE ITEMS --- */
.goal-slide-item {
    padding: 0 15px;
    /* Creates the gap between columns */
    outline: none;
    text-align: center;
}

.goal-box {
    width: 76px;
    height: 76px;
    background-color: #e8ebf2;
    border-radius: 24px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;

    /* Text Styling inside box */
    color: #2c3e75;
    font-weight: 700;
    font-size: 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.goal-slide-item p {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    line-height: 1.3;
    max-width: 140px;
    margin: 0 auto !important;
}

/* --- ARROWS (The Large White Circles) --- */
.hp-goals-section .slick-prev,
.hp-goals-section .slick-next,
.product-grid .slick-prev,
.product-grid .slick-next,
.rp-grid .slick-prev,
.rp-grid .slick-next{
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 50%;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    border: none;
    cursor: pointer;
    font-size: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}



/* Positioning Outside */
.hp-goals-section .slick-prev {
    left: -10px;
}

.hp-goals-section .slick-next {
    right: -10px;
}

/* --- DOTS (Small Grey Circles) --- */
.hp-goals-section .slick-dots,
.product-grid .slick-dots {
    display: flex !important;
    justify-content: center;
    padding: 0;
    margin: 40px 0 0 0;
    list-style: none;
    width: 100%;
}

.hp-goals-section .slick-dots li {
    margin: 0 6px;
    padding: 0;
}

.hp-goals-section .slick-dots li button,
.product-grid .slick-dots li button,
.rp-grid .slick-dots li button{
    font-size: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.hp-goals-section .slick-dots li.slick-active button,
.product-grid .slick-dots li.slick-active button,
.rp-grid .slick-dots li.slick-active button{
    background: #737373;
    width: 8px;
}

.slick-arrow.slick-prev {
    left: -30px !important;
}

.slick-arrow.slick-next {
    right: -30px !important;
}

@media screen and (max-width:767px) {
    .slick-arrow.slick-prev {
        left: -10px !important;
    }

    .slick-arrow.slick-next {
        right: -10px !important;
    }

    .hp-goals-section {
        padding: 0px 0px 30px;
        text-align: center;
        margin: 0 auto;
        position: relative;
    }

    .hp-goals-section .slick-prev,
    .hp-goals-section .slick-next,
    .product-grid .slick-prev,
    .product-grid .slick-next
     {
        width: 25px;
        height: 25px;
    }

    .goals-slider-init .slick-arrow,
    .product-grid .slick-arrow{
        background-size: 15px 15px !important;
    }

    .goal-box {
        width: 56px;
        height: 56px;
    }
}


/* --- FEATURED PRODUCT SECTION CONTAINER --- */
/* --- SECTION CONTAINER --- */
.hp-featured-section {
    padding: 40px 20px;
    background: #fff;
    text-align: center;
    max-width: 1240px;
    margin: 0 auto;
    border-radius: 20px;
}

.featured-title {
    color: #2c3e75;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* --- TABS --- */
.featured-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.tab-btn {
    padding: 5px 35px;
    min-width: 126px;
    border-radius: 50px;
    border: 2px solid #3245A5;
    background: #EAECF6;
    color: #3245A5;
    font-size: 15px;
    font-weight: 700;
    font-family: Mulish;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active,
.tab-btn:hover {
    background: #3245A5;
    color: #ffffff;
}

/* --- GRID LAYOUT --- */
.product-grid {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    animation: fadeIn 0.5s ease;
}

.product-grid.active {
    display: grid;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ==========================================================================
   FEATURED PRODUCTS GRID & SLIDER STYLES
   ========================================================================== */

/* Hide inactive tabs securely */
.product-grid {
    display: none;
}
.product-grid.active {
    display: block; /* Default to block for Slick on mobile */
}

/* 1. Enforce hidden state on inactive tabs even after Slick initializes */
.hp-featured-section .product-grid:not(.active) {
    display: none !important;
}

/* .product-grid .slick-slide {
    margin: 0 5px; 
    height: auto; 
} */

.product-grid .slick-slide {
    padding: 0 8px; /* Use padding for the gap instead of margin! */
    margin: 0 !important; /* Strip the margin so Slick's math is 100% accurate */
    height: auto; 
    box-sizing: border-box !important; /* Forces padding to stay inside the calculated width */
}

/* .product-grid .slick-list {
    margin: 0 -5px;
    padding-bottom: 20px;

} */

.product-grid .slick-list {
    margin: 0 !important; /* Remove the negative margin we had earlier */
    padding-bottom: 20px; /* Space for dots */
    overflow: hidden;
}

/* 3. Customizing the Slick Dots */
.product-grid .slick-dots li button:before {
    font-size: 12px;
    color: #5D7FF9; 
}
.product-grid .slick-dots li.slick-active button:before {
    color: #3245A5;
}

/* 4. Desktop Grid Mode (768px and up) */
/* @media (min-width: 768px) {
    .hp-featured-section .product-grid.active {
        display: flex !important;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .qvr-product-card {
        flex-shrink: 0;
    }
} */

@media (min-width: 768px) {
    .hp-featured-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important; 
    }

    .hp-featured-section .featured-content-wrapper {
        padding: 0 20px;
    }

    .hp-featured-section .featured-content-wrapper .product-grid.active {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 20px !important; 
        padding: 0 !important; 
        margin: 0 !important;
        width: 100% !important;
    }
    
    .hp-featured-section .featured-content-wrapper .qvr-product-card {
        width: calc(25% - 15px) !important; 
        margin: 0 !important; 
        flex-shrink: 0;
        box-sizing: border-box;
    }
    
    /* 4. Hide arrows strictly on desktop just in case Slick leaves ghosts behind */
    .hp-featured-section .featured-content-wrapper .slick-arrow {
        display: none !important;
    }
}

/* --- CARD DESIGN --- */
.qvr-product-card {
    text-align: left;
    transition: transform 0.3s ease;
    background: transparent;
}

.card-link-wrap {
    text-decoration: none;
    color: inherit;
    display: block;
}

.prod-img-wrap {
    background-color: #f7f6fa;
    border-radius: 24px;
    padding: 30px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
}

.prod-img-wrap img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Arrow Overlay Button */
.card-arrow-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    background: #2c3e75;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transform: scale(0.8) rotate(45deg);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.qvr-product-card:hover .card-arrow-btn {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* 2. Text Content */
.prod-title {
    color: #2c3e75;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.prod-desc {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
    margin-bottom: 15px;
    height: 65px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* 3. Icons Footer */
.prod-icons {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: auto;
}

.p-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    /* Fixed width for alignment */
    height: 25px;
}

/* SVG Styling */
.p-icon svg {
    height: 100%;
    width: auto;
    max-width: 25px;
}

.qvr-hero-icons.prod-icons .p-icon {
    width: 50px;
    height: 50px;
}

.qvr-hero-icons.prod-icons .p-icon svg {
    width: 50px;
    max-width: unset;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width:767px) {
    .hp-featured-section {
        padding: 20px 0px;
    }

    .section-featured-product {
        background-color: #fff !important;
    }

    .featured-tabs {
        flex-wrap: nowrap;
    }

    .featured-tabs .tab-btn {
        padding: 8px 9px;
        flex: 1;
        min-width: 95px;
        font-size: 13px;
    }

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

    .prod-img-wrap {
        height: 155px;
    }

    .featured-title {
        color: #252E6F;
        text-align: center;
        font-family: Manrope;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .product-grid.active  {

    }

    .product-grid .slick-list {
        left: 5px;
    }
}

.no-prods-msg {
    grid-column: 1 / -1;
    color: #888;
    padding: 40px;
}

.hp-featured-section {
    overflow: visible; 
    width: 100%;
}

.hp-featured-section .product-grid {
    width: 100%;
    box-sizing: border-box;
}

/* --- KIDS SECTION CONTAINER --- */
.kids-slider-wrapper {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0 0;
}

.kids-section-title {
    color: #2c3e75;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* --- SLIDER STYLES --- */
.kids-product-slider {
    margin-bottom: 30px;
    padding: 0 40px;
    /* Room for arrows */
}

/* Slide Item Wrapper */
.kids-slide-item {
    padding: 0 10px;
    /* Gap between cards */
}

/* Reuse the product card styles, but ensure white bg */
.kids-slide-item .qvr-product-card {
    background: #fff;
    border-radius: 20px;
}

/* --- ARROWS (Blue Style) --- */
.kids-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The arrow symbol */
.kids-arrow:before {
    font-family: sans-serif;
    font-size: 30px;
    color: #2c3e75;
    /* Navy Blue Arrow */
    opacity: 1;
    line-height: 1;
}

.kids-arrow.slick-prev {
    left: -10px;
}

.kids-arrow.slick-next {
    right: -10px;
}

/* --- LEARN MORE BUTTON --- */
.kids-btn-wrap {
    margin-top: 20px;
}

.kids-learn-more-btn {
    display: none;
}

/* Ensure the card content uses Flexbox for structural stability */
.prod-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start;
}

/* Force a minimum height on titles so descriptions start at the same line */
@media (max-width: 767px) {
    .prod-title {
        min-height: 3.2em;
        /* Reserves space for 2 lines */
        margin-bottom: 10px;
        display: block;
        /* Ensures flex works correctly */
    }

    .prod-desc {
        min-height: 4.2em;
        /* Reserves space for 3 lines */
    }
}

/* --- KIDS SLIDER MOBILE: 2-COLUMN ROW --- */
@media (max-width: 767px) {

    .kids-slide-item:nth-child(n+3) {
        display: none !important;
    }

    .kids-product-slider {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 30px;
        padding: 0px;
    }

    .kids-slide-item {
        padding: 0;
    }

    /* Adjust the card image wrap for side-by-side layout */
    .kids-slide-item .prod-img-wrap {
        padding: 15px;
        border-radius: 20px;
        aspect-ratio: 1/1;
        height: auto;
    }

    .card-arrow-btn {
        display: none !important;
    }

    .kids-btn-wrap {
        width: 100%;
        text-align: center;
    }

    .kids-learn-more-btn {
        display: inline-block;
        background-color: #252E6F;
        color: #ffffff;
        padding: 8px 12px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        transition: background 0.3s;
        width: 165px;
    }

    .kids-learn-more-btn:hover {
        background-color: #1e2a5e;
        color: #fff;
    }
}

.hp-promo-banner {
    background-image: var(--bg-desktop);
    position: relative;
    width: 100%;
    max-width: 1240px;
    margin: 0px auto;
    border-radius: 25px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 420px;
    display: flex;
    align-items: center;
    padding: 0 5%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.promo-content {
    max-width: 450px;
    position: relative;
    z-index: 2;
}

.promo-label {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e75;
    /* Dark Navy */
    margin-bottom: 10px;
}

.promo-heading {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: #2c3e75;
    margin: 0 0 25px 0;
}

.promo-btn {
    display: inline-block;
    background-color: #2c3e75;
    color: #fff !important;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.3s ease;
    cursor: pointer;
}

.promo-btn:hover {
    background-color: #1e2a5e;
}


@media (max-width: 767px) {
    .hp-promo-banner {
        text-align: center;
        justify-content: left;
        padding: 40px 20px;
        background-image: var(--bg-mobile);
        min-height: 500px;
        align-items: flex-start;
        text-align: left;
        margin: 20px auto;
    }

    .promo-content {
        max-width: 100%;
        border-radius: 15px;
        padding: 0;
    }

    .promo-heading {
        color: #252E6F;
        font-family: Manrope;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .promo-btn {
        padding: 8px 12px;
        color: #FFF;
        font-family: Manrope;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
}

/* --- FOOTER CONTAINER --- */
.custom-qvr-footer {
    background-color: #2c2c63;
    /* Your Figma Dark Blue */
    color: #ffffff;
    padding: 60px 0 20px;
    font-size: 15px;
}

/* Flex Container for Top Section */
.footer-main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

/* --- LEFT COLUMN (Brand) --- */
.footer-brand-col {
    flex: 1;
    min-width: 300px;
    max-width: 350px;
}

.footer-logo img {
    max-width: 120px;
    height: auto;
    margin-bottom: 20px;
    /* This filter makes the logo white without needing a new file */
    filter: brightness(0) invert(1);
}

.footer-mission {
    color: #e0e0e0;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 15px;
}

/* Social Icons Container */
.footer-socials {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 25px;
}

/* The Circle Link (The Container) */
.footer-socials .social-icon {
    display: flex;
    align-items: center;
    /* Vertical Center */
    justify-content: center;
    /* Horizontal Center */

    width: 40px;
    /* Circle Size */
    height: 40px;

    background-color: rgba(255, 255, 255, 0.25);
    /* Semi-transparent background */
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;

    /* Ensure no padding throws off the centering */
    padding: 0;
    margin: 0;
}

/* Hover Effect */
.footer-socials .social-icon:hover {
    background-color: #ffffff;
    color: #252E6F;
}

/* The SVG Icon inside */
.footer-socials .social-icon svg {
    /* Since we fixed the viewBox, this width is now the ACTUAL icon visual size */
    width: 36px;
    height: 36px;

    display: block;
    /* Removes weird inline spacing */
    fill: currentColor;

    /* NO SCALE NEEDED ANYMORE */
    transform: none;
}


/* --- RIGHT SECTION (Links) --- */
.footer-links-area {
    flex: 1.5;
    display: flex;
    justify-content: flex-end;
    gap: 80px;
    flex-wrap: wrap;
    /* Allows stacking on tablets */
}

.footer-link-col {
    min-width: 130px;
}

.footer-link-col h4 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;
}

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

.footer-link-col ul li {
    margin-bottom: 12px;
}

.footer-link-col ul li a {
    color: #d1d1e0;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 18px;
}

.footer-link-col ul li a:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- BOTTOM SECTION --- */
.footer-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 30px 0;
}

.footer-copyright-row {
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 300 !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .footer-main-content {
        flex-direction: column;
    }

    .footer-links-area {
        justify-content: flex-start;
        gap: 40px;
    }

    .footer-brand-col {
        max-width: 100%;
        padding-top: 30px;
        text-align: center;
    }

    .footer-link-col {
        min-width: 120px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-link-col ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-link-col h4 {
        color: #5D7FF9;
        font-family: Manrope;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    footer.site-footer ul li a {
        font-family: Manrope !important;
    }
}

/* --- SECTION WRAPPER --- */
.hp-promo-banner.science {
    background-size: contain;
    box-shadow: none;
}

.hp-promo-banner.science .promo-content {
    max-width: 800px;
}

.hp-promo-banner.science .promo-content .promo-heading {
    font-size: 34px;
}



.hp-science-section {
    padding: 0px 20px;
    max-width: 1240px;
    margin: 0 auto;
}

/* --- THE BANNER CARD --- */
.science-banner-inner {
    background-color: #252E6F;
    border-radius: 20px 300px 20px 20px;
    padding: 30px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: visible;
    color: #ffffff;
    min-height: 400px;
}

.science-banner-content {
    max-width: 1200px !important;
}

/* --- LEFT COLUMN (TEXT) --- */
.science-content {
    max-width: 100%;
    z-index: 2;
}

.science-title {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #ffffff;
}

.science-title .highlight {
    color: #F6A74B;
    /* Optional: Orange/Gold accent color for "Pure Wellness" if desired, or keep white */
    /* If you strictly want the design in screenshot (orange text), keep this. 
       If you want all white, remove color: #F6A74B; */
}

.science-desc {
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.5px;
    color: #fff;
    width: 78%;
}

/* --- RIGHT COLUMN (SLIDESHOW) --- */
.science-visual-col {
    width: 20%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.science-gif-wrap {
    width: 100%;
    max-width: 420px;
    /* Increased to accommodate the full circle graphic */
    display: flex;
    justify-content: center;
}

.science-gif-wrap img {
    width: 100%;
    height: auto;
    display: block;
    min-width: 400px;
}

.wellness-hero-text-div h4 {
    color: #FFF;
    font-family: Manrope;
    font-size: 46px;
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal;
}

/* --- RESPONSIVE --- */
@media (max-width: 767px) {
    .science-banner-inner {
        flex-direction: column;
        /* Puts image on top, text on bottom */
        padding: 20px;
        text-align: center;
        border-radius: 20px 20px 300px 20px;
    }

    .science-content {
        max-width: 100%;
    }

    .science-visual-col {
        width: 100%;
        height: 300px;
        /* Explicit height for mobile area */
    }

    .hp-science-section {
        padding: 0;
    }

    .science-title {
        color: #FFF;
        font-family: Manrope;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-align: left;
        margin-bottom: 10px;
    }

    .science-desc {
        text-align: left !important;
        color: #FFF;
        font-family: Roboto;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        /* 23.8px */
        width: 100%;
    }

    .science-gif-wrap img {
        min-width: auto;
        max-width: 270px !important;
        position: relative;
    }

    .wellness-hero-text-div h4 {
        font-size: 32px;
    }

    .elementor-element.e-con-full.e-flex.e-con.e-parent.e-lazyloaded>.elementor-element.e-flex.e-con-boxed.e-con.e-child.science-banner-content {
        max-width: 335px !important;
        margin-top: 20px;
    }

}

.hp-ingredients-section {
    padding: 0px 20px;
    text-align: center;
}

.ing-container {
    max-width: 1280px;
    margin: 0 auto;
}

.ing-container img {
    width: 100px;
}

/* --- HEADLINE TYPOGRAPHY --- */
.ing-headline {
    color: #2c3e75;
    /* Your Navy Blue */
    font-size: 36px;
    font-weight: 600;
    /* Semi-bold */
    line-height: 1.5;
    margin-bottom: 30px;
}

/* Inline Icons in Text */
.ing-inline-icon {
    display: inline-block;
    vertical-align: middle;
    /* Centers icon relative to text */
    margin: 0 8px;
    border-radius: 50px;
    /* Gives the 'pill' shape if image has bg */
    /* Adjust these sizes based on your actual icons */
}

.icon-tube {
    height: 40px;
    /* Adjust as needed */
    width: auto;
}

.icon-molecule {
    height: 40px;
    /* Adjust as needed */
    width: auto;
}

/* --- LOGO GRID --- */
.ing-logos-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 30px;
    column-gap: 110px;
    flex-wrap: wrap;
}

.ing-logo-item img {
    max-height: 100px;
    width: auto;
    transition: all 0.3s ease;
}

.ing-logo-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- RESPONSIVE --- */
@media (max-width: 767px) {
    .ing-headline {
        font-size: 28px;
    }

    .ing-logos-row {
        gap: 30px;
        flex-direction: row;
    }

    .ing-logo-item img {
        max-height: 40px;
    }

    .hp-ingredients-section {
        padding: 0px;
        text-align: center;
    }
}

.qvr-marquee-container {
    width: 100%;
    overflow: hidden;
    padding: 30px 0;
    position: relative;
}

.qvr-marquee-container::before,
.qvr-marquee-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
}

.qvr-marquee-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(246, 245, 249, 1) 0%, rgba(246, 245, 249, 0) 100%);
}

.qvr-marquee-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(246, 245, 249, 1) 0%, rgba(246, 245, 249, 0) 100%);
}

.qvr-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: qvr-scroll-marquee 80s linear infinite;
}

/* .qvr-marquee-track:hover {
        animation-play-state: paused;
    } */

.ing-logo-slide {
    flex-shrink: 0;
    margin: 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
}

.ing-logo-slide img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 80px;
    width: auto;
}

@keyframes qvr-scroll-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}


/*
ARTICLES
*/

/* --- CONTAINER & GRID --- */
.qvr-articles-wrapper {
    max-width: 100%;
    margin: 0;
}

.qvr-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    /* Generous spacing between cards */
}

/* --- CARD STYLES --- */
.qvr-article-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    /* Assuming white background on page */
    margin-bottom: 30px;
}

/* 1. Image Area Container */
.qvr-article-img-box {
    margin-bottom: 25px;
    border-radius: 20px;
    overflow: hidden;
    /* Forces the box to always have this shape */
    aspect-ratio: 16 / 10;
    width: 100%;
    position: relative;
    /* Good practice for containment */
}

/* 2. The Image Itself */
.qvr-article-img-box img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

/* Hover Zoom Effect */
.qvr-article-card:hover .qvr-article-img-box img {
    transform: scale(1.05);
    /* Slight extra zoom on hover */
}

/* 2. Content Area */
.qvr-article-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* Category Pill */
.qvr-cat-pill {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #ddd;
    border-radius: 50px;
    /* Pill shape */
    font-size: 11px;
    text-transform: capitalize;
    color: #666;
    background-color: #fff;
    font-weight: 500;
}

/* Title */
.qvr-article-title {
    color: #252E6F;
    font-family: Manrope;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.qvr-article-title a {
    color: #2c3e75;
    /* Navy Blue */
    text-decoration: none;
    transition: color 0.2s;
}

.qvr-article-title a:hover {
    color: #4a5db0;
    /* Lighter blue on hover */
}

/* Excerpt */
.qvr-article-excerpt {
    color: #333;
    font-family: Roboto;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 23.8px */
}

/* Read More Button */
.qvr-read-more {
    color: #3245A5;
    font-family: Manrope;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.2s;
}

.qvr-read-more i {
    font-size: 10px;
    /* Chevron size */
}

.qvr-read-more:hover {
    gap: 8px;
    /* Arrow moves slightly right on hover */
    color: #1e2a5e;
}

/* --- PAGINATION --- */
.qvr-pagination {
    margin-top: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.qvr-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #eee;
    border-radius: 50%;
    color: #2c3e75;
    text-decoration: none;
    transition: all 0.3s;
}

.qvr-pagination .page-numbers.current {
    background-color: #2c3e75;
    color: #fff !important;
    border-color: #2c3e75;
}



/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .qvr-articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .qvr-articles-grid {
        grid-template-columns: 1fr;
    }

    .qvr-cat-pill {
        display: none;
    }
}

/* --- SECTION WRAPPER --- */
.qvr-single-articles-section {
    max-width: 1240px;
    margin: 60px auto;
    padding: 0 20px;
}

/* Heading */
.qvr-section-title {
    text-align: center;
    color: #2c3e75;
    /* Navy Blue */
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
}

/* --- GRID LAYOUT (Desktop) --- */
.qvr-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- MOBILE SLIDER OVERRIDES --- */
/* When Slick is active, display changes to block */
.qvr-articles-grid.slick-initialized {
    display: block;
}

/* Slide Item Wrapper (created by Slick) */
.qvr-articles-grid .slick-slide {
    padding: 0 10px;
    /* Spacing between slides */
}

/* Dots Styling (Blue) */
.qvr-articles-grid .slick-dots li button:before {
    font-size: 10px;
    color: #2c3e75;
    opacity: 0.25;
}

.qvr-articles-grid .slick-dots li.slick-active button:before {
    color: #2c3e75;
    opacity: 1;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .qvr-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
    }
}

@media (max-width: 767px) {
    .qvr-articles-grid {
        display: block;
        /* Prepare for Slick */
    }

    .qvr-section-title {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .qvr-single-articles-section {
        padding: 0;
        margin-top: 30px;
    }
}


/*
PRODUCTS
*/

/* --- SHOP CONTAINER --- */
.qvr-shop-container {
    max-width: 1240px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    /* 260px Sidebar + Flexible Content */
    gap: 60px;
    align-items: start;
}

/* --- SIDEBAR STYLES --- */
.qvr-shop-sidebar {
    padding-right: 10px;
}

.filter-title {
    border-bottom: 1px solid #F6F5F9;
    padding-bottom: 30px;
    padding-top: 30px;
    color: #252E6F;
    font-family: Manrope;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qvr-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px; /* Adjust this height if you want it taller or shorter */
    overflow-y: auto;  
    padding-right: 10px; 
}

/* Scrollbar styling */
.qvr-filter-list::-webkit-scrollbar {
    width: 6px;
}
.qvr-filter-list::-webkit-scrollbar-track {
    background: #f4f5f7; 
    border-radius: 4px;
}
.qvr-filter-list::-webkit-scrollbar-thumb {
    background: #cdd9fc; 
    border-radius: 4px;
}
.qvr-filter-list::-webkit-scrollbar-thumb:hover {
    background: #adbff2; 
}

.qvr-filter-list li {
    margin-bottom: 20px;
}

.qvr-filter-list li a {
    color: #333;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    transition: color 0.2s ease;
}

.qvr-filter-list li.active a {
    color: #5D7FF9 !important;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* --- HEADER & SORT --- */
.qvr-shop-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.shop-page-title {
    font-size: 24px;
    color: #252E6F;
    font-weight: 700;
    margin: 0;
}

.qvr-sort-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qvr-sort-wrapper label {
    font-size: 14px;
    color: #555;
    margin: auto;
}

.qvr-sort-wrapper select {
    padding: 0px 7px;
    border: 7px solid #f2f2f2;
    border-radius: 84px;
    background-color: #f2f2f2;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.qvr-sort-wrapper select:focus {
    outline: none;
}

/* --- GRID LAYOUT --- */
/* --- PRODUCT GRID & CARD DESIGN --- */
.qvr-shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* 1. Card Container */
.shop-card {
    height: 100%;
    display: flex;
}

.shop-card .card-link-wrap {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 2. Image Box (Square & Rounded) */
.shop-card .prod-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Makes it a perfect square */
    background-color: #F4F5F7;
    /* Light grey bg from design */
    border-radius: 20px;
    /* Distinct rounded corners */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    /* Space between image and title */
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

.shop-card .prod-img-wrap img {
    width: 80%;
    /* Keeps product nicely contained inside the box */
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
    /* Optional: Helps blend white bg images */
}

/* 3. Content Area */
.shop-card .prod-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Title */
.shop-card .prod-title {
    color: #252E6F;
    font-family: Manrope;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 10px 0;
}

/* Description */
.shop-card .prod-desc {
    color: #333;
    font-family: Roboto;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 0px 0;
}

/* 4. Icons */
.shop-card .prod-icons {
    margin-top: auto;
    /* Pushes icons to the bottom if desc varies */
    display: flex;
    gap: 12px;
    align-items: center;
}

.shop-card .p-icon svg {
    width: 28px;
    /* Slightly larger icons */
    height: auto;
}

/* --- PAGINATION --- */
.qvr-pagination {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    /* Space between numbers and arrows */
}

/* Page Numbers */
.qvr-pagination .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: #999999;
    /* Inactive grey */
    text-decoration: none;
    border: none;
    background: none;
    padding: 0 10px;
}

/* Active Page Number */
.qvr-pagination .page-numbers.current {
    color: #252E6F;
    /* Navy Blue */
    font-weight: 500;
    font-size: 16px;
    /* Slightly larger/bold */
}

.qvr-pagination .page-numbers:hover:not(.current) {
    color: #555;
}

/* --- PAGINATION ARROWS --- */
.qvr-pagination .page-numbers.prev,
.qvr-pagination .page-numbers.next {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
}

/* The SVG Wrapper */
.qvr-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #252E6F;
    /* Default Blue Color for Arrow */
    transition: opacity 0.3s;
}

/* Rotate the Left Arrow */
.qvr-arrow.prev {
    transform: rotate(180deg);
}

/* Hover Effect for Arrows */
.qvr-pagination a:hover .qvr-arrow {
    opacity: 0.7;
}

/* Adjusting SVG fill to use current text color */
.qvr-arrow svg {
    width: 100%;
    height: auto;
    fill: currentColor;
}

.filter-accordion-item {
    margin-bottom: 20px !important;
}

/* --- MOBILE PRODUCT PAGE STYLES --- */

@media (max-width: 767px) {
    .shop-card .prod-title {
        font-size: 20px;
    }

    .qvr-shop-grid {
        grid-template-columns: 1fr;
    }

    .qvr-shop-container {
        display: block !important;
        /* Stop using grid for the main layout on mobile */
        width: 100% !important;
        margin: 20px auto !important;
        padding: 0px !important;
        overflow: visible !important;
    }

    /* 1. Filter Bar */
    .mobile-filter-bar {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
    }

    .qvr-mobile-filter-btn,
    .qvr-mobile-sort select {
        flex: 1;
        height: 45px;
        background: #F6F5F9;
        border: none;
        border-radius: 50px;
        padding: 0 20px;
        font-family: 'Manrope', sans-serif;
        font-weight: 600;
        color: #252E6F;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        appearance: none;
    }

    /* 2. Grid (2 Columns as per Design) */
    .qvr-shop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* 3. Card Adjustments */
    .shop-card .prod-title {
        font-size: 15px !important;
        /* Smaller for 2-col */
        line-height: 1.3;
    }

    .shop-card .prod-desc {
        font-size: 13px !important;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .shop-card .prod-img-wrap {
        border-radius: 15px;
        margin-bottom: 12px;
    }

    /* 4. Filter Drawer Logic */
    .qvr-shop-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        /* Hidden */
        width: 85%;
        height: 100%;
        background: #fff;
        z-index: 10000;
        padding: 30px 0px;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
        transition: left 0.3s ease;
        overflow-y: auto;
    }

    .qvr-shop-sidebar.is-active {
        left: 0;
    }

    .mobile-shop-title {
        font-size: 18px;
        color: #252E6F;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 768px) {

    .mobile-filter-bar,
    .mobile-shop-title {
        display: none;
    }

    .drawer-header,
    .drawer-footer {
        display: none;
    }
}

/* --- MOBILE FILTER DRAWER DESIGN --- */
@media (max-width: 767px) {
    #qvr-filter-drawer {
        position: fixed;
        top: 0;
        right: -100%;
        /* Hidden by default */
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 999999;
        display: flex;
        flex-direction: column;
        transition: right 0.3s ease-in-out;
    }

    #qvr-filter-drawer.is-active {
        right: 0;
        /* Slide in */
    }

    /* Header Styling */
    .drawer-header {
        display: flex !important;
        justify-content: space-between;
        /* Center the title */
        align-items: center;
        padding: 20px;
        position: relative;
        flex-direction: column-reverse;
    }

    .drawer-header h3 {
        color: #252E6F;
        font-family: Manrope;
        font-size: 32px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .drawer-header #qvr-close-filter {
        border: none;
        background-color: #fff;
        align-self: flex-end;
    }

    .drawer-title {
        color: #252E6F;
        font-family: 'Manrope', sans-serif;
        font-size: 24px;
        font-weight: 700;
        margin: 0;
    }

    .drawer-close-btn {
        position: absolute;
        right: 20px;
        background: none;
        border: none;
        font-size: 24px;
        color: #333;
        cursor: pointer;
    }

    /* Scrollable Area */
    .drawer-content-scroll {
        flex: 1;
        overflow-y: auto;
        padding: 0 20px;
    }

    /* Footer for Apply Button */
    .drawer-footer {
        padding: 20px;
        border-top: 1px solid #eee;
        background: #fff;
    }

    .drawer-footer .header-cta-btn {
        width: 100%;
        text-align: center;
        display: block;
    }
}

/* --- FORCE GRID WIDTH STABILITY --- */

@media (max-width: 767px) {

    /* Ensure the main content area spans the full screen width */
    .qvr-shop-content {
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
    }

    /* Force the grid to fill the container and stay 2-columns */
    .qvr-shop-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .shop-card {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Ensure the link wrapper doesn't restrict width */
    .shop-card .card-link-wrap {
        width: 100% !important;
        display: block !important;
    }

    /* Lock the image box to square to prevent width jumping */
    .shop-card .prod-img-wrap {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
    }
}

/* --- UNIVERSAL ACCORDION STYLES --- */

/* 1. Content State */
/* ==========================================================================
   CONSOLIDATED ACCORDION SYSTEM (Header & Filter Drawer)
   ========================================================================== */

/* 1. Base State (Closed) */
.accordion-content {
    max-height: 0 !important;
    /* Force closed state by default */
    overflow: hidden !important;
    visibility: hidden;
    padding: 0 !important;
    margin: 0 !important;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s !important;
}

/* 2. Open State (Triggered by JS) */
.mobile-accordion-item.is-open .accordion-content {
    max-height: 1200px !important;
    /* Large value to accommodate long lists */
    visibility: visible !important;
    padding: 15px 0 !important;
    /* Restores spacing only when open */
}

/* 3. Design: Highlight Active Row */
.mobile-accordion-item.is-open {
    background-color: #F6F5F9 !important;
    /* Match your design's light grey */
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    transition: background-color 0.3s ease !important;
}

/* 4. The Plus/Minus Icon */
.plus-icon {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
}

/* Common line styles */
.plus-icon::before,
.plus-icon::after {
    content: '';
    position: absolute;
    background-color: #252E6F;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* Horizontal line (always visible) */
.plus-icon::before {
    top: 6px;
    left: 0;
    width: 14px;
    height: 2px;
}

/* Vertical line (hides to create minus) */
.plus-icon::after {
    top: 0;
    left: 6px;
    width: 2px;
    height: 14px;
}

/* Icon Animation on Open */
.mobile-accordion-item.is-open .plus-icon::after {
    transform: rotate(90deg) !important;
    opacity: 0 !important;
}

/* Ensure filter list links are left-aligned inside accordion */
.mobile-accordion-item.is-open .qvr-filter-list li a {
    text-align: left !important;
    padding: 10px 0;
    display: block;
}

/* --- DIAGNOSTIC ACCORDION FIX --- */

/* --- FILTER DRAWER ACCORDION --- */

/* Base state */
.filter-accordion-item .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

/* Open state specifically for Filters */
.filter-accordion-item.is-open .accordion-content {
    max-height: 1200px !important;
    visibility: visible !important;
}

/* Rotate icon only for Filter scope */
.filter-accordion-item.is-open .plus-icon::after {
    transform: rotate(90deg) !important;
    opacity: 0 !important;
}

/* Match the design highlight */
.filter-accordion-item.is-open {
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* --- UPDATED DESKTOP SIDE PANEL (Collapsable & Independent) --- */

@media (min-width: 768px) {

    /* 1. Re-enable clicks and cursor */
    .filter-header {
        cursor: pointer !important;
        pointer-events: auto !important;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 2. Style titles for Desktop */
    .filter-title span {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #252E6F !important;
    }

    /* 3. Ensure the Plus Icon is visible */
    .filter-accordion-item .plus-icon {
        display: inline-block !important;
        opacity: 0.7;
    }

    /* 4. Reset desktop container */
    .filter-accordion-item {
        background: transparent !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        margin-bottom: 30px !important;
    }

    .filter-accordion-item .accordion-content {
        max-height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        transition: max-height 0.4s ease;
    }

    /* Open state (Independent) */
    .filter-accordion-item.is-open .accordion-content {
        max-height: 1000px !important;
        /* Adjust based on list length */
        visibility: visible !important;
        padding-top: 10px;
    }
}

@media screen and (max-width:767px) {
    .filter-accordion-item.is-open {
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
	
	.filter-title {
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
}

/*Single Supplement CSS*/

/* =========================================
   1. GLOBAL VARIABLES & UTILS
   ========================================= */
:root {
    --pt-purple: #652BB1;
    /* Main Brand Color */
    --pt-orange: #f37021;
    /* Accent / Buttons */
    --pt-bg-blue: #dcf3fa;
    /* Image Backgrounds */
    --pt-text-dark: #333333;
    /* Headings */
    --pt-text-gray: #666666;
    /* Body Text */
    --pt-bg-light: #F4F5F7;
    /* Light Section BG */
}

/* Base Wrapper */

.single-product-page {
    background-color: #fff;
    overflow-x: hidden;
    /* Prevent horizontal scroll from full-width sections */
}

.content-area.single-product-page.qvr-single-page {
    overflow: visible !important;
    clip-path: none !important;
}

/* Breadcrumbs adjustment */
.breadcrumb {
    padding: 20px 0 0;
    font-size: 14px;
    color: #999;
}

.breadcrumb.single-product {
    padding-top: 40px;
}

.breadcrumb ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.breadcrumb a {
    text-decoration: none;
    color: #999;
    transition: color 0.3s;
}

.breadcrumb a:hover {
    color: var(--pt-purple);
}

@media screen and (max-width: 767px) {
    .breadcrumb.single-product .container {
        padding: 0;
    }
}


/* =========================================
   QVR SINGLE HERO SECTION
   ========================================= */

.qvr-hero-section {
    padding: 60px 0;
    background-color: #fff;
}

.qvr-hero-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 50% Image / 50% Text */
    gap: 80px;
    align-items: center;
}

/* --- Left Column: Image --- */
.qvr-image-wrapper {
    background-color: #F4F5F7;
    /* The Light Lavender/Grey BG from design */
    border-radius: 40px;
    /* Large rounded corners */
    width: 100%;
    aspect-ratio: 1 / 0.85;
    /* Slightly rectangular landscape shape */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.qvr-image-wrapper img {
    max-width: 90%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    mix-blend-mode: multiply;
    /* Blends white image bg into the grey card */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
}

/* --- Right Column: Content --- */
.qvr-hero-content-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 1. Pills (Tags) */
.qvr-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.qvr-pill {
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    font-family: "DM Sans";
    color: #252E6F;
    border: 1px solid #8CA2C0;
    border-radius: 50px;
    padding: 6px 18px;
    background-color: transparent;
    white-space: nowrap;
    text-transform: capitalize;
}

/* 2. Title */
.qvr-hero-title {
    font-size: 48px;
    color: #252E6F;
    /* Brand Navy Blue */
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 25px 0;
    letter-spacing: 0;
}

/* 3. Description */
.qvr-hero-desc {
    font-size: 18px;
    color: #444;
    line-height: 1.6;
}

.qvr-hero-desc p {
    margin-bottom: 15px;
}

.qvr-hero-mal-number {
    font-size: 14px;
    color: #666;
    margin-top: 15px;
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .qvr-hero-section {
        padding: 0 0 40px;
    }

    .qvr-hero-container {
        grid-template-columns: 1fr;
        /* Stack vertically */
        gap: 40px;
        padding: 0;
    }

    .qvr-hero-title {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 0;
    }

    .qvr-image-wrapper {
        aspect-ratio: 1 / 1;
        /* Square on mobile */
    }

    .qvr-pill {
        padding: 0px 10px;
    }
}


/* =========================================
   3. STICKY TABS NAVIGATION
   ========================================= */

/* 1. Container & Stickiness */
.sticky-tabs-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* Sticks to the very top of the viewport */
    z-index: 999;
    background-color: #fff;
    /* Clean white background */
    transition: top 0.3s;
}

.details-tabs-section {
    width: 100%;
}

.tabs-div {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. Menu Layout */
.tabs-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 40px;
    /* Spacing between text items */
    overflow-x: auto;
    /* Horizontal scroll on mobile */
    white-space: nowrap;
    /* Prevent wrapping */

    /* Hide Scrollbars */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.tabs-menu::-webkit-scrollbar {
    display: none;
}

.tabs-menu li {
    margin: 0;
    display: flex;
    align-items: center;
}

/* 3. Link Styling (Default / Inactive) */
.tabs-menu a {
    display: block;
    padding: 20px 5px;
    /* Vertical padding for touch targets */
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    color: #252E6F;
    /* Brand Blue */
    transition: all 0.3s ease;
    border-radius: 50px;
}

.tabs-menu a:hover {
    color: #f37021;
    /* Orange on hover */
}

/* 4. ACTIVE STATE (The Pill) */
.tabs-menu a.active {
    background-color: #252E6F;
    /* Solid Brand Blue Background */
    color: #ffffff !important;
    /* White Text */
    padding: 12px 30px;
    /* Pill sizing */
    font-weight: 700;
    margin: 10px 0;
    /* Add margin to prevent layout jump due to padding change */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 767px) {

    /* On mobile, usually the header is sticky too, so we offset this */
    .sticky-tabs-container {
        top: 60px;
        /* Adjust this value to match your mobile header height */
    }

    .tabs-menu {
        gap: 20px;
    }

    .tabs-menu a {
        font-size: 14px;
        padding: 15px 5px;
        color: #252E6F;
        text-align: center;
        font-family: Manrope;
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .tabs-menu a.active {
        padding: 10px 20px;
        margin: 8px 0;
        color: #FFF;
        text-align: center;
        font-family: Manrope;
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .tabs-div {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0px;
    }
}


/* =========================================
   4. PRODUCT DETAILS SECTION
   ========================================= */

/* The main beige background wrapper */
.qvr-details-section {
    background-color: #FFF6DE;
    padding: 40px 20px;
    border-radius: 20px;
    max-width: 1240px;
    /* Constrain width */
    margin: 40px auto;
    /* Center on page */
}

.qvr-details-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Header Text --- */
.qvr-details-header {
    margin-bottom: 20px;
}

.qvr-details-title {
    color:#252E6F;
    font-family: Manrope;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 20px;
}

.qvr-details-desc {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
}

/* --- The Grid --- */
.qvr-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Columns */
    gap: 30px;
    margin-bottom: 50px;
}

/* Card Styling */
.qvr-benefit-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s;
}

.qvr-benefit-card:hover {
    transform: translateY(-5px);
}

.qvr-check-icon img {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

.qvr-benefit-card h3 {
    font-size: 18px;
    color: #252E6F;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.3;
}

.qvr-benefit-card p {
    font-size: 16px;
    color: #333;
    line-height: 1.4;
    margin: 0;
}

/* --- Usage Block --- */
.qvr-usage-block {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    /* Optional: Ensure anchor lands correctly by adding scroll-margin */
    scroll-margin-top: 140px;
}

.qvr-usage-icon {
    width: 60px;
    height: 60px;
    background-color: #E6E8F0;
    /* Light Grey/Blue circle */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #252E6F;
}

.qvr-usage-text {
    font-size: 18px;
    color: #252E6F;
}

.qvr-usage-text strong {
    font-weight: 700;
    margin-right: 5px;
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .qvr-details-section {
        background-color: #FFF6DE;
        padding: 20px;
        border-radius: 20px;
        max-width: 1240px;
        margin: 0px auto;
    }

    .qvr-benefits-grid {
        grid-template-columns: 1fr;
        margin-bottom: 15px;
    }

    .qvr-usage-block {
        flex-direction: row;
        text-align: left;
    }

    .qvr-usage-text {
        font-size: 16px;
        color: #252E6F;
        text-align: left;
    }

    .qvr-usage-icon {
        width: 40px;
        height: 37px;
        align-self: flex-start;
    }

    .qvr-usage-icon svg{
        width: 22px;
    }

    .qvr-details-header {
        margin-bottom: 0;
    }

    .qvr-details-title {
        color: #252E6F;
        font-family: Manrope;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .qvr-details-desc {
        color: #333;
        font-family: Manrope !important;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
}


/* =========================================
   5. INGREDIENTS / SIZE CHART
   ========================================= */
/* =========================================
   KEY INGREDIENTS SECTION
   ========================================= */

.qvr-ingredients-section {
    padding: 60px 20px;
    background-color: #F9F8FD;
    /* Very Light Lavender BG */
    border-radius: 30px;
    /* Large container rounding */
    max-width: 1240px;
    margin: 40px auto 0px;
}

.qvr-ing-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Vertically center the content */
    gap: 60px;
}

/* --- Left Column (Text) --- */
.qvr-ing-left {
    flex: 1;
    max-width: 450px;
}

.qvr-ing-title {
    font-size: 42px;
    font-weight: 700;
    color: #252E6F;
    /* Brand Navy */
    line-height: 1.2;
    margin-bottom: 25px;
}

.qvr-ing-subtitle {
    font-size: 18px;
    font-weight: 600;
    color: #252E6F;
    margin-bottom: 15px;
}

.qvr-ing-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

/* --- Right Column (Table Card) --- */
.qvr-ing-right {
    flex: 1;
}

.qvr-ing-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.qvr-ing-row {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
}

.qvr-ing-row:last-child {
    border-bottom: none;
}

/* Header Row Styling */
.qvr-ing-row.header {
    font-size: 18px;
    font-weight: 600;
    font-family: Manrope;
    color: #252E6F;
    border-bottom: 2px solid #eee;
    padding-top: 0;
}

/* Item Styling */
.ing-name {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.ing-val {
    font-size: 16px;
    color: #666;
    font-weight: 400;
	text-align: right;
}
/* --- Responsive --- */
@media (max-width: 767px) {
    .qvr-ing-wrapper {
        flex-direction: column;
        gap: 40px;
    }

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

    .qvr-ing-title {
        color: #252E6F;
        font-family: Manrope;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .qvr-ing-card {
        padding: 20px;
    }

    .qvr-ingredients-section {
        padding: 20px;
        background-color: #F9F8FD;
        border-radius: 30px;
        max-width: 1240px;
        margin: 40px auto;
    }

    .qvr-ing-right {
        flex: 1;
        width: 100%;
    }
    .ing-name {
        font-size: 16px;
        color: #333;
        font-weight: 500;
        flex: 1;
    }

    .ing-val,
    .ing-col-item,
    .ing-col-amount {
        flex: 1;
    }
	
	.ing-val {
		text-align: right;
	}

    .qvr-ing-row {
        display: flex;
        justify-content: flex-start;
        padding: 20px 0;
        gap: 10%;
    }
}


/* =========================================
   6. TESTIMONIALS SECTION
   ========================================= */
/* =========================================
   TESTIMONIALS SECTION (Fixed)
   ========================================= */

.testimonial-section {
    padding: 40px 20px;
    background-color: #fff;
}

.testimonial-container {
    max-width: 1240px;
    margin: 0 auto;
}

.testimonial-header {
    text-align: center;
    margin-bottom: 30px;
}

.testimonial-title {
    font-size: 42px;
    font-weight: 700;
    color: #252E6F;
    margin: 0;
}

/* --- Controls Bar --- */
.testimonial-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 15px;
    min-height: 40px;
    /* Ensure height for dots */
}

/* =========================================
   FORCE ARROW VISIBILITY
   ========================================= */

/* =========================================
   TESTIMONIALS ARROWS (Override Defaults)
   ========================================= */

/* 1. Container Visibility */
.testimonial-controls-right {
    display: flex;
    gap: 15px;
    z-index: 10;
    overflow: visible !important;
    /* Ensure arrows don't get clipped */
}

/* 2. ARROW RESET & STYLING */
/* We target .slick-arrow too to win the specificity war against your theme */
button.qvr-testimonial-arrow.slick-arrow {
    /* --- RESET THEME DEFAULTS --- */
    background-image: none !important;
    /* Kill the default arrow icon */
    background-color: transparent !important;
    position: static !important;
    /* Stop absolute positioning */
    top: auto !important;
    transform: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;

    /* --- APPLY OUR STYLES --- */
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 45px !important;
    height: 45px !important;
    cursor: pointer;
    color: #252E6F !important;
    /* Navy Blue */
    transition: all 0.3s ease;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure SVG inside is visible */
button.qvr-testimonial-arrow svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    stroke-width: 2.5px;
    display: block;
}

/* Hover State */
button.qvr-testimonial-arrow:hover {
    color: #f37021 !important;
    background-color: transparent !important;
}

/* Disabled State (Start/End of slider) */
button.qvr-testimonial-arrow.slick-disabled {
    opacity: 0.3 !important;
    cursor: default;
    pointer-events: none;
}

/* Remove any pseudo-elements the theme might inject */
button.qvr-testimonial-arrow::before,
button.qvr-testimonial-arrow::after {
    display: none !important;
    content: none !important;
}


.testimonial-controls-left {
    display: flex;
    align-items: center;
    min-width: 100px;
    /* Reserve space */
}

/* Left: Dots */
.testimonial-controls-left .slick-dots {
    position: relative !important;
    bottom: auto !important;
    display: flex !important;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
    width: auto;
    text-align: left;
}

.testimonial-controls-left .slick-dots li {
    position: relative;
    display: inline-block;
    width: auto !important;
    height: auto !important;
    margin: 0;
    padding: 0;
}

.testimonial-controls-left .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 12px !important;
    height: 12px !important;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: #E0E0E0 !important;
    /* Light Grey for inactive */
    border-radius: 50%;
    transition: all 0.3s ease;
    opacity: 1 !important;
    /* Ensure visibility */
}

/* Active State - The Long Blue Pill */
.testimonial-controls-left .slick-dots li.slick-active button {
    width: 40px !important;
    background-color: #252E6F !important;
    /* Navy Blue */
    border-radius: 20px;
}

/* --- Card Styling --- */
.testimonial-slide-wrapper {
    padding: 10px 15px;
    /* Added top padding for hover float effect */
}

.testimonial-card {
    background-color: #F5F4FA;
    /* Light Lavender BG */
    padding: 40px 30px;
    border-radius: 20px;

    /* REMOVED min-height to let matchHeight work */
    /* min-height: 300px; */

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s;
}


.testimonial-quote {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    font-weight: 400;
    margin-bottom: 30px;
}

/* Profile */
.testimonial-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
}

.t-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

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

.t-info {
    display: flex;
    flex-direction: column;
}

.testimonial-name {
    font-size: 14px;
    font-weight: 800;
    color: #252E6F;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.testimonial-role {
    font-size: 13px;
    color: #666;
}

.testimonial-slider {
    padding: 0 !important;
}

/* Mobile Fixes */
@media (max-width: 767px) {
    .testimonial-controls-bar {
        flex-direction: row;
        /* Dots bottom, Arrows top */
        gap: 20px;
        align-items: center;
    }

    .testimonial-title {
        font-size: 22px;
    }

    .testimonial-section {
        padding: 20px 0px;
        background-color: #fff;
    }

    .testimonial-slide-wrapper {
        padding: 0;
    }
}



/* =========================================
   7. FAQ SECTION
   ========================================= */
/* =========================================
   FAQ SECTION (Card Style)
   ========================================= */

.qvr-faq-section {
    padding: 20px 20px 0px;
    background-color: #fff;
}

.qvr-faq-container {
    max-width: 1000px;
    /* Slightly narrower for readability */
    margin: 0 auto;
}

.qvr-faq-title {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: #252E6F;
    margin-bottom: 50px;
}

/* --- The FAQ Card --- */
.qvr-faq-item {
    background-color: #F6F5F9;
    margin-bottom: 20px;
    padding: 0 30px;
    transition: background-color 0.3s ease;
}

/* Optional: Darker bg on hover/active */
.qvr-faq-item:hover,
.qvr-faq-item.active {
    background-color: #F0EFF5;
}

/* Toggle Button */
.qvr-faq-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none;
}

.qvr-faq-toggle:focus {
    outline: none;
}

.qvr-faq-text {
    color:#252E6F;
    font-family: Manrope;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* The Icon Wrapper */
.qvr-faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #252E6F;
    /* Navy Blue Icon */
    transition: transform 0.3s ease;
    /* Smooth Rotation */
}

/* SVG Styling */
.qvr-faq-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2px;
}

/* --- ACTIVE STATE (Rotate to X) --- */
.qvr-faq-item.active .qvr-faq-icon {
    transform: rotate(45deg);
    /* The Magic Rotation */
    color: #f37021;
    /* Optional: Change color to Orange when open */
}

/* Answer Box */
.qvr-faq-answer {
    display: none;
    /* Hidden by default */
    border-top: 1px solid rgba(37, 46, 111, 0.1);
    /* Subtle divider */
}

.qvr-faq-inner {
    padding: 20px 0 30px 0;
    color: #555;
    line-height: 1.6;
    font-size: 16px;
}

/* Mobile Tweak */
@media (max-width: 767px) {
    .qvr-faq-item {
        padding: 0 20px;
    }

    .qvr-faq-text {
        color:  #252E6F;
        font-family: Manrope;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .qvr-faq-title,
    .qvr-stores-title {
        font-size: 22px !important;
    }

    .qvr-faq-section {
        padding: 20px 0px 0px;
        background-color: #fff;
    }
    
}



/* =========================================
   9. RELATED PRODUCTS
   ========================================= */

/* 1. The Outer Full-Width Section */
.related-products-section {
    padding: 80px 20px;
    background-color: #F6F5F9;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* 2. The Inner White Container */
.rp-container {
    background-color: #ffffff;
    border-radius: 40px;
    padding: 60px 40px;
    max-width: 1240px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.rp-title {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: #252E6F;
    margin-bottom: 50px;
}

/* --- Base Grid Layout (Desktop & Non-Slick) --- */
.rp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* --- Card Styling --- */
.rp-card {
    display: flex;
    flex-direction: column;
}

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

/* 3. The Image Box (Grey Background) */
.rp-img-box {
    border-radius: 24px;
    padding: 0;
    margin-bottom: 20px;
    position: relative;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.rp-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply;
}

.rp-hover-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    background: #2c3e75;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transform: scale(0.8) rotate(45deg);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.rp-link:hover .rp-hover-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.rp-content {
    text-align: left;
    padding: 0 5px;
}

.rp-prod-title {
    font-size: 18px;
    font-weight: 800;
    color: #252E6F;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.rp-prod-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* ==========================================
   MOBILE SLIDER ADJUSTMENTS (SLICK INTEGRATION)
   ========================================== */

.rp-grid.slick-initialized {
    display: block; /* Overrides CSS Grid when Slick takes over */
    width: 100%;
    box-sizing: border-box;
}

/* Padding trick to prevent right-side cut-offs */
.rp-grid .slick-slide {
    padding: 0 8px; 
    margin: 0 !important; 
    height: auto; 
    box-sizing: border-box !important; 
}

.rp-grid .slick-list {
    margin: 0 !important; 
    padding-bottom: 20px; 
    overflow: hidden;
}

.rp-grid .slick-dots li button:before {
    font-size: 12px;
    color: #5D7FF9; 
}
.rp-grid .slick-dots li.slick-active button:before {
    color: #3245A5;
}

/* --- Responsive --- */

@media (max-width: 767px) {
    .related-products-section {
        padding: 40px 0;
        background-color: #fff;
        overflow: hidden; /* Prevents horizontal scroll bleed */
    }

    .rp-container {
        padding: 0 15px; /* Added padding here instead of on the grid */
        border-radius: 0; /* Optional: remove rounding on mobile if you want edge-to-edge */
    }
    
    .rp-grid {
        padding: 0; /* Removed the 20px padding that was breaking the slider */
        /* Note: No need for grid-template-columns here because Slick slider handles the layout */
    }

    .rp-title {
        font-size: 22px;
        margin-bottom: 25px; /* Added spacing above the slider */
    }

    .rp-img-box {
        height: 155px; /* Matches your featured products height */
    }

    .rp-prod-title {
        color: #252E6F;
        font-family: Manrope;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .rp-grid .slick-list {
        padding-bottom: 0; 
    }
}

/* --- Ensure Desktop Stays Perfect --- */
@media (min-width: 768px) {
    .rp-grid {
        display: grid !important; 
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 30px !important;
    }
    
    /* Hide Slick arrows if unslick leaves ghosts */
    .related-products-section .slick-arrow {
        display: none !important;
    }
}

/* =========================================
   10. MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 992px) {

    .single-hero-container,
    .product-details-div,
    .sa-container,
    .rp-container {
        flex-direction: column;
        text-align: center;
    }

    .single-hero-text,
    .single-hero-image-card,
    .product-details-text-col,
    .sa-content-col,
    .sa-img-col,
    .rp-text-col {
        width: 100%;
        max-width: 100%;
        flex: auto;
    }

    .single-hero-icons,
    .product-details-stats-row,
    .sa-logos-row,
    .sa-content-col {
        justify-content: center;
    }

    .single-hero-image-card {
        order: -1;
        /* Show image first on mobile */
        min-height: 300px;
    }

    .tabs-menu {
        justify-content: flex-start;
        padding-bottom: 10px;
    }

    .rp-cards-col {
        grid-template-columns: 1fr;
    }

    .product-details-div {
        flex-direction: column-reverse;
        /* Text below image */
    }
}

/* =========================================
   AVAILABLE IN STORES SHORTCODE
   ========================================= */

.qvr-stores-section {
    padding: 60px 20px;
    width: 100%;
}

.qvr-stores-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.qvr-stores-title {
    font-size: 36px;
    font-weight: 800;
    color: #252E6F;
    /* Brand Navy Blue */
    margin-bottom: 40px;
}

/* Logo Row Layout */
.qvr-stores-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* Good for mobile */
    gap: 30px 50px;
    /* Vertical Gap: 30px, Horizontal Gap: 50px */
}

/* Individual Logo Styling */
.store-logo {
    max-height: 55px;
    /* Uniform height constraint */
    width: auto;
    /* Maintain aspect ratio */
    max-width: 180px;
    /* Prevent wide logos from dominating */
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Optional: Slight hover lift */
.store-logo:hover {
    transform: scale(1.05);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .qvr-stores-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .qvr-stores-logos {
        gap: 20px 30px;
        /* Tighter gaps on mobile */
    }

    .store-logo {
        max-height: 51px;
        /* Smaller logos on mobile */
        max-width: 140px;
    }

    .qvr-stores-section {
        padding: 0;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

/* =========================================
   SUCCESS STORIES (Separate Cards Layout)
   ========================================= */

.qvr-stories-section {
    padding: 0px 20px;
    width: 100%;
}

.qvr-stories-container {
    max-width: 1032px;
    /* Constrain width */
    margin: 0 auto;
    width: 100%;
}

/* --- 1. Header & Title --- */
.qvr-stories-header {
    text-align: center;
    /* Or left, depending on preference */
    margin-bottom: 20px;
}

.qvr-stories-title {
    font-size: 38px;
    font-weight: 800;
    color: #252E6F;
    margin: 0;
}

/* --- 2. Controls Bar (Reused Concept) --- */
.qvr-stories-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    /* Space between controls and card */
    min-height: 50px;
}

/* Dots Styling (Matches 'What People Say') */
.stories-dots-left .slick-dots {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.stories-dots-left .slick-dots li button {
    font-size: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #252E6F;
    /* Dark Blue Inactive */
    opacity: 0.3;
    /* Dimmed */
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

/* Active Dot - The Pill */
.stories-dots-left .slick-dots li.slick-active button {
    width: 40px;
    border-radius: 20px;
    opacity: 1;
    /* Fully visible */
    background-color: #252E6F;
}

/* Arrows Wrapper */
.stories-arrows-right {
    display: flex;
    gap: 15px;
}

/* Note: Arrows use the global .qvr-testimonial-arrow class we defined earlier */


/* --- 3. The Split Card Layout --- */
.story-slide-wrap {
    outline: none;
}

.qvr-story-card {
    display: flex !important;
    /* Enable Flex */
    align-items: stretch;
    /* Make height equal */
    gap: 10px;
    /* THE GAP: Separation between image and box */
    background-color: transparent;
    /* See-through gap */
    min-height: 300px;
}

/* Left: Image Item */
.story-img-item {
    flex: 0 0 190px;
    /* LOCKED: Fixed width of 190px */
    width: 190px;
    /* Double enforcement */
    position: relative;
    border-radius: 20px;
    /* Slightly smaller radius for smaller size */
    overflow: hidden;
    min-height: 100%;
    max-height: 300px;
}

.story-img-item img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    position: absolute;
    /* Locks image to container size */
    top: 0;
    left: 0;
}

/* Right: Content Item (White Box) */
.story-content-item {
    flex: 1;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

/* Content Details */
.story-stars {
    display: flex;
    gap: 5px;
    margin-bottom: 25px;
}

.story-stars svg {
    width: 20px;
    height: 20px;
}

.story-quote {
    font-size: 20px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 30px;
    font-weight: 400;
}

.story-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.story-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.story-meta {
    display: flex;
    flex-direction: column;
}

.story-name {
    font-size: 18px;
    color: #252E6F;
    font-weight: 700;
}

.story-year {
    font-size: 14px;
    color: #252E6F;
    /* Blue year per screenshot */
    font-weight: 500;
}

.story-deco-quote {
    position: absolute;
    bottom: 30px;
    right: 40px;
    transform: scale(0.6);
}

/* Ensure Slick slides don't inherit a generic 1100px width */
.stories-slider .story-slide-wrap {
    width: 840px !important;
    max-width: 1032px !important;
    outline: none;
}

/* Hide slider before it initializes to prevent layout shifts */
.stories-slider:not(.slick-initialized) {
    visibility: hidden;
    height: 300px;
    /* Placeholder height to prevent total collapse */
    overflow: hidden;
}

/* Ensure the card layout doesn't collapse horizontally */
.qvr-story-card {
    width: 100%;
    display: flex !important;
    box-sizing: border-box;
}

.slick-initialized .qvr-story-card {
    opacity: 1;
}

/* Fix for the overlapping text seen in your recording */
.story-content-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* --- SLIDER LOADING PROTECTION --- */
.qvr-stories-section.pre-init {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Hide all slides except the first one until Slick takes over */
.stories-slider:not(.slick-initialized) .story-slide-wrap:not(:first-child) {
    display: none !important;
}

.qvr-stories-section.is-loading {
    opacity: 0.1 !important;
    /* Keep it slightly visible so the browser measures it */
    visibility: visible !important;
    /* DON'T use hidden, it breaks Slick math */
    min-height: 400px;
    pointer-events: auto !important;
}

.qvr-stories-section.is-ready {
    opacity: 1 !important;
    transition: opacity 0.4s ease;
}

/* Ensure flex containers don't collapse before JS */
.stories-slider:not(.slick-initialized) .story-slide-wrap {
    display: none;
}

.stories-slider:not(.slick-initialized) .story-slide-wrap:first-child {
    display: block !important;
}

.stories-slider {
    display: block !important;
    width: 100% !important;
    min-height: 400px;
    /* Pre-reserve desktop height */
}

/* Pre-reserve space on mobile so layout doesn't jump */
@media (max-width: 767px) {
    .qvr-stories-section.pre-init .stories-slider {
        min-height: 480px;
    }

    .story-deco-quote {
        display: none;
    }
}

/* =========================================
   2. CONTROLS BAR (Fixing Global Conflict)
   ========================================= */

.qvr-stories-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    min-height: 50px;
    position: relative;
    /* Context for children */
}

/* --- DOTS OVERRIDE --- */
/* Target specifically to beat style.css */
.stories-dots-left .slick-dots {
    position: static !important;
    /* Stop absolute positioning */
    width: auto !important;
    /* Stop 100% width */
    bottom: auto !important;
    /* Reset bottom */
    left: auto !important;
    /* Reset left */
    margin: 0 !important;
    padding: 0 !important;

    /* Layout */
    display: flex !important;
    gap: 10px;
    list-style: none !important;
    text-align: left !important;
    /* Reset text-align center */
}

/* The Individual Dot (li) */
.stories-dots-left .slick-dots li {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    /* Ensure it holds the button correctly */
    width: auto !important;
    height: auto !important;
}

/* The Button inside the Dot */
.stories-dots-left .slick-dots li button {
    font-size: 0 !important;
    line-height: 0 !important;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
    background-color: #252E6F !important;
    opacity: 0.3;
    border: none;
    cursor: pointer;
    padding: 0 !important;
    transition: all 0.3s ease;

    /* Ensure no pseudo-elements from theme mess it up */
    position: relative;
}

.stories-dots-left .slick-dots li button:before {
    content: none !important;
    /* Remove numbers or icons if theme adds them */
}

/* Active Dot - The Pill */
.stories-dots-left .slick-dots li.slick-active button {
    width: 40px !important;
    border-radius: 20px;
    opacity: 1;
    background-color: #252E6F !important;
}

/* --- ARROWS (Right Side) --- */
.stories-arrows-right {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Ensure arrows don't get hidden */
.stories-arrows-right .qvr-testimonial-arrow {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
}

/* --- Mobile Responsive --- */
@media (max-width: 767px) {
    .story-slide-wrap.slick-slide {
        display: block;
        width: calc(100vw - 40px) !important;
    }

    .qvr-story-card {
        flex-direction: column;
        /* Stack vertically */
        height: auto !important;
    }

    .story-img-item {
        flex: none;
        width: 100%;
        height: 170px;
        /* Fixed height for mobile image */
    }

    .story-content-item {
        margin-bottom: 30px;
        padding: 20px;
    }

    .qvr-stories-controls-bar {
        flex-direction: row;
        /* Dots bottom, arrows top? Or just stack */
        gap: 15px;
        align-items: center;
        margin-top: 10px;
    }

    .qvr-stories-section {
        padding: 0;
    }

}

/* --- ENHANCED SLIDER LOADING PROTECTION --- */

/* Initially hide the container but keep its space to avoid jumps */
.qvr-stories-section.is-loading {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- STABLE SLIDER CSS --- */
.qvr-stories-section {
    opacity: 0;
    /* Hidden initially */
    transition: opacity 0.4s ease;
}

.qvr-stories-section.slick-ready {
    opacity: 1;
    /* Revealed only after Slick says 'Ready' */
}

/* Ensure only the first slide shows to prevent vertical stacking */
.stories-slider:not(.slick-initialized) .story-slide-wrap:not(:first-child) {
    display: none !important;
}

.stories-slider:not(.slick-initialized) .story-slide-wrap:first-child .qvr-story-card {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.qvr-story-card {
    display: flex !important;
    min-height: 300px;
}

/* Mobile Tweak: Preserve height to stop layout jumps */
@media (max-width: 767px) {
    .stories-slider {
        min-height: 550px;
        /* Higher for mobile stacking */
    }

    .qvr-story-card {
        flex-direction: column !important;
        min-height: 550px;
    }

    .story-img-item {
        height: 200px !important;
        flex: 0 0 200px !important;
    }
}


/* =========================================
   QUALITY PROMISE SECTION
   ========================================= */

.qvr-quality-section {
    padding: 60px 20px;
    background-color: #fff;
    /* White Background */
    width: 100%;
}

.qvr-quality-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* --- Header --- */
.qvr-q-title {
    font-size: 36px;
    font-weight: 700;
    color: #252E6F;
    margin-bottom: 20px;
}

.qvr-q-subtitle {
    font-size: 18px;
    color: #333;
    max-width: 800px;
    margin: 0 auto 60px auto !important;
    line-height: 1.6;
}

/* --- Grid --- */
.qvr-quality-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 Equal Columns */
    gap: 40px;
}

/* --- Card --- */
.qvr-q-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Icon Wrapper (Rounded Square) */
.qvr-q-icon-wrap {
    width: 80px;
    height: 80px;
    background-color: #EFEFF1;
    /* Light Grey background */
    border-radius: 20px;
    /* Rounded corners */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

.qvr-q-icon-wrap svg {
    width: 40px;
    height: 40px;
    stroke: #252E6F;
    /* Navy Blue Lines */
}


/* Text */
.qvr-q-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #252E6F;
    margin-bottom: 15px;
}

.qvr-q-card-desc {
    font-size: 15px;
    color: #555;
    line-height: 1.5;
    max-width: 250px;
    /* Keep text nice and narrow */
}

@media (max-width: 767px) {
    .qvr-quality-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 20px;
    }

    .qvr-q-title {
        font-size: 28px;
    }

    .qvr-q-subtitle {
        font-size: 16px;
    }

    .qvr-quality-section {
        padding: 30px 0px;
    }
}

/*ABOUT US*/

.about-us-hero-new img{
    max-height: 450px;
    max-width: 1240px;
    object-fit: cover;
    width: 100%;
    object-position: top center;
}

/* --- THE CARD CONTAINER --- */


.qvr-q-card.about {
    padding: 20px 30px 0px;
    text-align: center;
    border-radius: 12px; /* Optional: softens the edges slightly */
    max-width: 450px; /* Constrains the width to match the paragraph line-breaks */
    margin: 0 auto;
}

/* --- THE LOGO & TEXT LOCKUP --- */
.qvr-q-logo-lockup {
    display: flex;
    align-items: center; /* Vertically centers the "uality" with the "Q" block */
    justify-content: flex-end;
    gap: 4px; /* Tight gap to make it look like a single word */
    margin-bottom: 20px;
}

.qvr-q-icon {
    width: 56px; /* Adjust this specific value based on your actual image dimensions */
    height: auto;
    display: block;
}

.qvr-q-title-text {
    color: #252E6F;
    text-align: center;
    font-family: "DM Sans";
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 33.8px */
    transform: translateY(14px); /* Minor optical tweak to align text baseline with the logo box */
}

/* --- THE PARAGRAPH --- */
.qvr-q-card-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    margin: 0;
}

.qvr-q-card.about .qvr-q-card-desc {
    max-width: 100% !important;
    width: 100% !important;
    color: #333;
    text-align: center;
    font-family: Roboto;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}



.elementor.elementor-43 {
    h2 {
        color: #252E6F;
        font-family: Manrope;
        font-size: 34px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    p {
        color: #333;
        font-family: Roboto;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        /* 28px */
    }

    .quality-meets-research p {
        color: #486284;
        font-family: Manrope !important;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 0;
    }
}

.about-section-hero p {
    color: #5D7FF9;
    font-family: Manrope;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    margin-bottom: 8px !important;
}

#section-beyond {
    max-width: 1340px;
}

.about-section-3 h3 {
    color: #252E6F;
    font-family: Manrope;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.about-section-3 p {
    color:  #333;
    font-family: Roboto;
    font-size: 17px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 1.4; 
}

.section-4-delivers h3.sub-title {
    color: #252E6F;
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; 
}

.section-4-delivers p.description {
    color:  #333;
    font-family: Roboto;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.about-quote-wrap {
    width: auto !important;
}

.elementor-element.about-quote-wrap {
    width: auto !important;
}

h3.about-quote {
    color: #252E6F;
    text-align: center;
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

span.quote-p {
    color:  #333;
    font-family: Roboto;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.section-quick-links {
    h5 {
        color: #252E6F;
        font-family: Manrope;
        font-size: 26px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 0;
    }

    p {
        color: #333;
        font-family: Roboto;
        font-size: 17px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        margin-bottom: 0;
    }

    a>p {
        color: #3245A5;
        font-family: Manrope;
        font-size: 14px !important;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: uppercase;
    }
}

.quick-link-wrapper {
    display: flex;
    flex-direction: column !important;
    gap: 16px !important;
}

@media screen and (max-width:767px) {
    .about-section-hero h1 {
        color: #252E6F;
        font-family: Manrope;
        font-size: 32px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-align: left;
    }
    

    .about-section-hero p {
        color: #5D7FF9;
        font-family: Manrope;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-align: left;
    }

    .section-about-promise .elementor-element > h3{
        color: #252E6F;
        font-family: Manrope;
        font-size: 28px !important;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .about-section-2 h2 {
        color: #252E6F;
        font-family: Manrope;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .section-3-commitment {
    }

    .about-section-3 h2 {
        color: #252E6F;
        font-family: Manrope;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .about-section-3 p {
        color: #333;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
    }

    .about-section-4 h2 {
        color: #252E6F;
        font-family: Manrope;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .elementor.elementor-43 {
        h2 {
            color: #252E6F;
            font-family: Manrope;
            font-size: 22px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

        p {
            color: #333;
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 140%;
        }
    }

    #section-beyond>div {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: column ;
        align-items: center;
    }

    .about-section-7 {
        color: #252E6F;
        font-family: Manrope;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
}

.privacy-policy-content {
    max-width: 940px !important;
}

.privacy-policy-content h2 {
    color: #252E6F;
    font-family: Manrope;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 16px;
}