@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');

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

body, html {
    font-family: Poppins !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Outfit, sans-serif;
    font-weight: 500;
}

.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1240px !important;
    margin: 0 auto;
    padding: 0 15px; /* Padding for responsiveness */
}

#loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999999;
    top: 0px;
}

    #loader iframe {
        width: 300px;
        margin: auto;
        height: 300px;
    }

label {
    font-size: 13px;
}

#slider {
    position: relative; /* NOT fixed or absolute */
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

    #slider .slide {
        position: relative;
        display: none;
        width: 100%;
        height: 100%;
    }

        #slider .slide.active {
            display: block;
        }

.slide {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

    .slide .row {
        justify-content: start !important;
    }

    .slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slide.active {
        opacity: 1;
        pointer-events: all;
        z-index: 1;
    }

    .slide.inactive {
        opacity: 0;
        z-index: 0;
    }

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    text-align: left;
    color: #fff;
    padding: 2rem 0;
}

.slide-title {
    font-size: 60px;
    font-weight: 600;
    margin-top: 20px;
}

.overlay p {
    font-size: 24px;
    margin-bottom: 1.5rem;
}

.know-more-btn {
    font-size: 13px;
    margin-top: 0;
    padding: 0.6rem 1.6rem;
    color: white;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 1000;
}

    .know-more-btn:hover {
        background-color: #fff;
        color: #333;
        text-decoration: none;
    }

.btn-slider {
    font-size: 13px;
    margin-top: 0;
    padding: 0.6rem 1.6rem;
    color: #333;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 1000;
}

    .btn-slider:hover {
        background-color: #01724A;
        color: #fff;
        border: 2px solid #01724A;
        text-decoration: none;
    }

.sticky-search-bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    text-align: left;
    color: #fff;
    padding: 2rem 0;
}
/* Targets the jQuery UI autocomplete dropdown */
.ui-autocomplete {
    overflow: auto; /* still allows scroll with keyboard or mouse */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

    .ui-autocomplete::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

.search-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin-top: 1rem;
}

.search-box, form#searchForm2, form#searchForm3 {
    width: 100%;
    max-width: 660px;
}

    .search-box input {
        padding: 0.75rem 1rem;
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
        font-size: 1rem;
        width: 645px;
        height: 47px;
        border: 4px solid #fff;
        border-radius: 50px 0 0 50px;
        outline: none;
    }

    .search-box button {
        padding: 0.75rem 1rem;
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
        background: linear-gradient(0deg, rgba(34, 96, 74, 1) 45%, rgba(38, 182, 139, 1) 100%);
        border: none;
        border-radius: 0 50px 50px 0;
        color: white;
        cursor: pointer;
        width: 214px;
        height: 47px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        border: 4px solid #fff;
        font-size: 18px;
        transition: background-color 0.3s;
        overflow: hidden;
    }

        .search-box button:hover {
            background-color: #00543c;
        }

/* Animation */
@keyframes iconFadeIn {
    0% {
        opacity: 0;
        transform: translateX(10px);
    }

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

.search-box .search-icon {
    opacity: 0;
    animation: iconFadeIn 0.5s ease-in-out 1s forwards;
    width: 24px;
    height: 24px;
    fill: white;
}

.dots {
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: 100%;
    z-index: 3;
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s;
    position: relative;
    z-index: 10;
}

.dots span {
    background-color: #ccc; /* default color */
    border-radius: 50%;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin: 0 5px;
}

.dot.active {
    background-color: #01724A; /* bottle green for active dot */
}

a {
    text-decoration: none !important;
}

/* Navbar Wrapper: full width background */
.logo {
    width: 121px;
    height: auto;
}

/* Base navbar styles */
.navbar-wrapper {
    width: 100%;
    height: 88px;
    background-color: black;
    position: fixed;
    top: 0;
    z-index: 999;
    padding: 10px 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    transition: all 0.3s ease;
}

.navbar-right, .navbar-center {
    display: flex;
    align-items: center;
}

.navbar-center {
    display: none;
}
/* Show search bar only in sticky navbar */
.navbar-wrapper.sticky .navbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-wrapper.sticky {
    background-color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

    /* Sticky navbar behavior */
    .navbar-wrapper.sticky .navbar {
        color: black;
    }

    .navbar-wrapper.sticky .navbar-center input {
        border: 1px solid black;
    }

    .navbar-wrapper.sticky .navbar-center select {
        background-color: white;
    }

/* Login Button */
.login {
    position: relative;
    cursor: pointer;
    font-weight: 500;
    background: linear-gradient(0deg, rgba(34, 96, 74, 1) 45%, rgba(38, 182, 139, 1) 100%);
    border-radius: 5px;
    padding: 5px 8px;
    width: 132px;
    text-align: center;
    margin-right: 30px;
    color: #fff;
}

a.login:hover {
    color: #f5f5f5;
}

.login:hover .dropdown-f-f-f {
    display: block;
}
/* Full-screen right-side slide panel */
.slide-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 222px;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 30px 20px;
    transition: right 0.3s ease;
}

    .slide-panel.open {
        right: 0; /* Slide in */
        border-radius: 20px 0 0 20px;
    }

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

/* Menu Links */
.menu-links {
    margin-top: 20px;
}

    .menu-links a {
        display: block;
        padding: 10px 15px 10px 10px;
        font-size: 15px;
        color: #333;
        position: relative;
        text-decoration: none;
    }

        /* Hover background and arrow */
        .menu-links a:hover {
            background-color: #F0F6F5;
            border-radius: 60px;
            color: #22604A;
            transform: scale(1.03); /* Slight zoom */
        }

        .menu-links a:active {
            background-color: #9CD9C7;
            border-radius: 60px;
            color: #22604A;
            transform: scale(1.03); /* Slight zoom */
        }

        .menu-links a img {
            width: 15px; /* adjust as needed */
            height: auto;
            margin-right: 5px;
            object-fit: contain;
            transition: transform 0.3s ease;
        }

/* Social media icons */
.menu-footer {
    margin-top: auto;
    padding-top: 20px;
    margin-left: 10px;
}

.menu-divider {
    border: none;
    border-top: 1px solid #ccc; /* Light gray line */
    margin: 20px 0 10px;
}

.menu-social a {
    font-size: 15px;
    color: #fff;
    background-color: #333;
    padding: 5px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px;
    width: 30px;
    height: 30px;
    transition: all 0.3s ease;
}
/* Style for main menu items */
.footer-dropdown {
    position: relative;
}

    .footer-dropdown .down-icon {
        display: none;
    }

    .footer-dropdown .dropdown-content {
        display: none;
        position: absolute;
        background: transparent;
        padding: 5px 15px 10px 15px;
        top: 100%;
        left: 0;
        min-width: 160px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 10;
    }

.dropdown-content a {
    color: #fff;
    font-size: 13px;
}

    .dropdown-content a:hover {
        color: #fff;
    }

.footer-dropdown:hover .dropdown-content {
    display: block;
}

.footer-dropdown:hover .right-icon {
    display: none;
}

.footer-dropdown:hover .down-icon {
    display: inline-block;
}

.menu-social a:hover {
    transform: scale(1.1);
    background-color: #01724A; /* stays black */
    color: white; /* stays white */
}

.footer-social a {
    font-size: 16px;
    color: #333 !important;
    background-color: #fff;
    padding: 10px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    transition: all 0.3s ease;
    margin-right: 10px !important;
}

    .footer-social a:hover {
        transform: scale(1.1);
        background-color: #01724A; /* stays black */
        color: #fff !important; /* stays white */
    }

/* Hamburger icon styles */
.hamburger {
    cursor: pointer;
    display: inline-block; /* Ensure it's displayed */
    width: 30px; /* Set a width */
    height: 20px; /* Set a height */
    position: relative;
    z-index: 999; /* Ensures it appears on top */
}

    .hamburger img {
        width: 30px;
        height: auto;
        cursor: pointer;
    }

    .hamburger div {
        height: 4px;
        margin: 6px 0 6px 20px;
        transition: 0.4s;
        width: 100%;
        transition: 0.4s;
    }

    .hamburger.open div:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .hamburger.open div:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open div:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

.menu-wrapper {
    position: relative;
}

    .menu-wrapper.open .slide-panel {
        display: block;
    }

    /* Show dropdown only on hamburger hover */
    .menu-wrapper:hover .dropdown-f-f-f {
        display: block;
    }
/* Initial state for content */
.fade-animate {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s forwards;
}

/* Show dropdown when hovering over menu wrapper */
.menu-wrapper:hover .dropdown-f-f-f-menu {
    display: block;
}

.search_position {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 12px;
    left: 15px;
}

[type=button], [type=reset], [type=submit], button {
    border: 0px;
}

input.productInputSearch2 {
    width: 500px;
    padding: 6px 35px 6px 35px;
    height: 40px;
    background: #F5F5F5;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    box-shadow: unset;
}

.relative_data {
    position: relative
}

form#searchForm2 {
    padding-bottom: 0;
    margin-bottom: 0;
}

form#searchForm3 {
    padding-bottom: 0;
    margin-bottom: 0;
}

.reset_nav_bg .frm_btn_submit {
    position: absolute !important;
    background: transparent !important;
    border: none !important;
    top: 6px !important;
}

.reset_nav_bg_afterScrool .frm_btn_submit {
    color: #fff;
    background: transparent;
    border: lemonchiffon;
}

.select_product_position {
    position: absolute;
    top: 6px;
    right: 9px;
    border: none;
    background: transparent;
    border: 1px solid #26B68B;
    color: #26B68B;
    font-size: 12px;
    outline: none;
    border-radius: 4px;
    padding: 2px 2px 2px 2px;
    box-shadow: unset;
    cursor: pointer;
}

/* When active */
.slide.active .fade-animate:nth-child(1) {
    transition-delay: 0.5s;
}

.slide.active .fade-animate:nth-child(2) {
    transition-delay: 1s;
}

.slide.active .fade-animate:nth-child(3) {
    transition-delay: 1.5s;
}

.slide.active .fade-animate:nth-child(4) {
    transition-delay: 2s;
}

.slide.active .fade-animate {
    opacity: 1;
    transform: translateY(0);
}

.counter-title {
    font-size: 32px;
    margin-bottom: 20px;
}

.counter-box {
    text-align: center;
    padding: 20px;
}

.counter-number {
    font-family: Oswald;
    font-size: 100px;
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: 2px #01724A; /* bottle green */
    transform: translateY(20px);
    transition: all 1s ease;
}

    .counter-number.visible {
        opacity: 1 !important;
        transform: translateY(0);
    }

.title-line {
    width: 230px;
    border-top: 4px solid #333;
    opacity: 1;
}

.counter-label {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.counter-section {
    padding: 60px 0;
    background: #F4F4ED;
    margin-top: 0;
    position: relative;
    z-index: 2;
}
/* Content and Video Section */
.content-section {
    padding: 60px 0;
}

span.green-title {
    color: #01724A;
}

#contentColumn {
    padding-right: 60px;
}

h1.section-title-why {
    font-size: 70px;
    margin-bottom: 10px;
    color: #333;
}

h2.section-subtitle-why {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 15px;
}

.section-paragraph-why {
    font-size: 15px;
    color: #000;
    margin-bottom: 20px;
}

.section-tagline-why {
    font-size: 15px;
    color: #000;
    font-weight: 600;
    font-style: italic;
    margin: 0px;
}

.section-title-why,
.section-subtitle-why,
.section-paragraph-why,
.section-tagline-why {
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition: transform 1.5s ease, opacity 1.5s ease;
}

    .section-title-why.animate,
    .section-subtitle-why.animate,
    .section-paragraph-why.animate,
    .section-tagline-why.animate {
        transform: scaleX(1);
        opacity: 1;
    }

.lazy-blur {
    filter: blur(8px);
    opacity: 0;
    transition: filter 1.2s ease, opacity 1.2s ease;
    transition-delay: 0.4s; /* <== add slight delay */
}

    .lazy-blur.visible {
        filter: blur(0);
        opacity: 1;
        transition-delay: 0s; /* reset delay for smooth reflow */
    }

.lazy-image .fade-in-on-scroll {
    opacity: 0;
    transform: scale(0.95);
}

.lazy-image {
    perspective: 800px;
}

/* YouTube Video Styling */
.lazy-video iframe {
    width: 100%;
    height: 304px;
    border: none;
    border-radius: 5px;
}

.bg-orange {
    background: -webkit-linear-gradient(left, rgba(243, 69, 59, 1.0), rgba(255, 255, 255, 0.0)) !important;
}

.bg-blue {
    background: -webkit-linear-gradient(left, rgba(15, 89, 201, 1.0), rgba(255, 255, 255, 0.0)) !important;
}

.progress {
    height: 30px !important;
    margin-bottom: 15px;
    overflow: hidden !important;
    border-radius: 30px !important;
}

.progress-bar-title {
    font-size: 12px;
    padding-top: 5px;
    text-align: center;
}

.progress-bar-percent {
    padding-left: 20px;
    font-size: 12px;
    text-align: left;
}

.text-fill-bar {
    position: relative;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

    .text-fill-bar::before {
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        white-space: nowrap;
        overflow: hidden;
        color: inherit;
        background: orange; /* Optional if you want a fill color */
        width: 0;
    }

    .text-fill-bar.filled::before {
        animation: fillText 1.5s ease forwards;
    }

@keyframes fillText {
    to {
        width: 100%;
    }
}


/* Lazy Load Effect */
.lazyload {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.image-gallery-section {
    background: #FEFEF7;
}

.lazyload.lazyloaded {
    opacity: 1;
}

.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .fade-in-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
    }

h3.section-title {
    font-size: 36px;
    margin-bottom: 10px;
    color: #333;
    text-align: left;
}

.section-subtitle-g {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 15px;
    text-align: left;
}

.gallery-img {
    transition: transform 0.3s ease;
    cursor: pointer;
}

    .gallery-img:hover {
        transform: scale(1.1);
        z-index: 2;
    }

#testimonials {
    padding: 60px 0;
    background: #f5f5f5;
}

.main-video-wrapper {
    overflow: hidden;
}

h6.section-title-ct {
    font-size: 36px;
    margin-bottom: 10px;
    color: #333;
    text-align: left;
}

.section-subtitle-ct {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 15px;
    text-align: left;
}

.main-video-wrapper {
    border-radius: 10px;
    overflow: hidden;
}

.video-thumbnails {
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.main-video {
    width: 100%;
    height: 505px;
}

.video-thumbnails img {
    cursor: pointer;
    transition: transform 0.3s ease;
    width: 285px;
    height: auto;
    gap: 30px;
    display: flex;
    flex-direction: column;
}

    .video-thumbnails img:hover {
        transform: scale(1.05);
    }

.testimonial-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    .testimonial-thumbnails img {
        width: 100%;
        max-width: 120px;
        height: auto;
        object-fit: cover;
        cursor: pointer;
        border-radius: 6px;
        transition: transform 0.3s ease;
    }

        .testimonial-thumbnails img:hover {
            transform: scale(1.05);
        }

#galleryWrapper {
    min-height: 600px;
    transition: opacity 0.5s ease-in-out;
    position: relative;
    display: block;
}

#galleryRow1, #galleryRow2 {
    min-height: 280px; /* adjust based on card height */
    display: flex;
    flex-wrap: wrap;
}

#productSlider.slide-left {
    transform: translateX(-100%);
}

#productSlider.slide-right {
    transform: translateX(100%);
}

#productgallery {
    padding: 60px 0;
    overflow: hidden;
    transition: transform 0.4s ease-in-out;
}

#productSlider {
    min-height: 500px; /* adjust to your content height */
    transition: transform 0.4s ease;
    overflow: hidden;
    position: relative;
}

#productInner {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.product-card {
    height: 100%; /* Ensure it fills the parent */
    min-height: 300px; /* or any fixed height that fits all content */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.btn-outline-dark:hover {
    color: #fff !important;
    background: rgb(0, 106, 78) !important;
}

.product-item {
    width: calc(100% / 6 - 20px);
    transition: transform 0.3s ease;
    text-align: center;
}

    .product-item img {
        width: 100%;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }

    .product-item:hover img {
        transform: scale(1.1);
    }

.product-title {
    max-height: 48px; /* for 2 lines of text */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

h5.product-title {
    margin-top: 10px;
    font-size: 14px !important;
    font-weight: 400;
    color: #333;
    min-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 768px) {
    .product-item {
        width: calc(100% / 2 - 20px);
    }
}

h6.popular {
    font-size: 36px;
    margin-bottom: 10px;
    color: #333;
    text-align: left;
}

.popular-para {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 15px;
    text-align: left;
}

.gallery-arrow {
    position: absolute;
    top: 40%;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 24px;
    padding: 4px 12px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
}

.left-arrow {
    left: -20px;
}

.right-arrow {
    right: -20px;
}

.product-img {
    transition: transform 0.3s ease;
}

    .product-img:hover {
        transform: scale(1.1);
    }

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

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

.product-card img {
    transition: transform 0.3s ease;
}

    .product-card img:hover {
        transform: scale(1.1);
    }

.product-card h5 {
    margin-top: 0.5rem;
    font-size: 1rem;
}

.zoom-on-hover {
    transition: transform 0.4s ease;
}

    .zoom-on-hover:hover {
        transform: scale(1.1);
    }

.fade-slide {
    animation: fadeIn 0.6s ease-in-out;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.product-slider-wrapper {
    overflow: hidden;
    position: relative;
}

.transition-out {
    transform: translateX(100%);
    opacity: 0;
}

.transition-in {
    transform: translateX(-100%);
    opacity: 0;
}

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

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

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

#sectionSeven {
    padding: 60px 40px;
    background-color: #f4f4f4;
    overflow: hidden;
}

h6.repro {
    font-size: 50px;
    margin-bottom: 25px;
    color: #333;
    text-align: left;
}

.repro-para {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 15px;
    text-align: left;
}

.repro-para-2 {
    font-size: 14px;
    margin-bottom: 10px;
}

.reg {
    font-size: 14px;
}

.repro, .repro-para {
    opacity: 0;
    transform: translateY(30px);
}

/* When page has loaded and class added */
.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.laptop-frame {
    position: relative;
    max-width: 100%;
    background: url('/Assets/laptop.png') no-repeat center center;
    z-index: 9;
    background-size: contain;
    padding-top: 56.25%;
    width: 100%;
}

.reg-lazy-video {
    position: absolute;
    top: 8%;
    left: 15%;
    width: 70%;
    height: 80%;
    z-index: 1;
    object-fit: cover;
    border-radius: 10px;
}

    .reg-lazy-video iframe {
        width: 100%;
        height: 100%;
        border-radius: 10px; /* Optional, matches your design */
    }

#sectionEight {
    padding: 0px 0 60px 0;
}

.sectioneight {
    padding: 10px 60px;
    border-radius: 80px !important;
    background-color: #01724A;
    border-radius: 50px;
    overflow: hidden;
    margin-top: -30px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}

span.strip {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
    text-align: left;
}

.strip-para {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 0px;
    text-align: center;
}

.string.btn {
    text-align: end;
}

#sectionNine {
    padding: 60px 0px;
    background-color: #F4F4E0;
    overflow: hidden;
}

h5.event {
    font-size: 20px;
    margin-bottom: 5px;
    color: #333;
    text-align: left;
}

.event-para {
    font-size: 12px;
    font-weight: 400;
    color: #333;
    margin-top: 10px;
    margin-bottom: 0px;
    text-align: left;
}

.event-span {
    font-size: 15px;
    font-weight: 400;
    color: #333;
    margin-bottom: 0px;
    text-align: left;
}

.event-img {
    max-height: 272px;
}

.event-card {
    margin: 20px;
}

.event-para.full-text {
    display: block;
}

.event-para.short-text {
    display: none;
}

.footer-logo {
    width: 150px;
    height: auto;
}

.event-p {
    padding: 24px;
}

.event.btn {
    text-align: end;
    font-size: 12px;
}

.bg-tan {
    background: #F4F4E0;
}

#footer {
    padding: 60px 0 0 0px;
    background-color: #333;
    overflow: hidden;
}

.footer-first {
    padding-right: 50px !important;
}

h5.footer {
    font-size: 18px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    text-align: left;
}

span.footer {
    font-family: Outfit, sans-serif;
    font-size: 18px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    text-align: left;
}

.list-footer li {
    font-size: 13px;
    line-height: 28px;
}

.cop-footer {
    font-size: 13px;
    color: #fff;
}

.footer-dropdown .dropdown-content {
    display: none;
}

    .footer-dropdown .dropdown-content.open {
        display: block;
    }

.newsletter-form {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #333;
    border-radius: 4px;
    position: relative;
    max-width: 320px;
}

.form-control-n {
    width: 100%;
    padding: 10px 90px 10px 12px; /* right padding leaves room for button */
    font-size: 12px !important;
    color: #fff;
    background-color: transparent;
    border: none;
    outline: none;
}

.news-btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 0 10px;
    background-color: #01724A;
    border: none;
    color: white;
    font-size: 14px !important;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

/* Banner Section */
.banner {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 30px;
    overflow: hidden;
}


/* Banner content container */
.container .banner {
    display: flex;
    flex-direction: column; /* Stack title and logo vertically */
    justify-content: flex-end; /* Vertically align the content */
    align-items: flex-end; /* Align both title and logo to the right */
    text-align: left; /* Align text to the right */
    height: 600px;
}

.banner-content {
    justify-content: flex-end; /* Vertically align the content */
}

    /* Title Styling */
    .banner-content .title {
        font-size: 30px;
        color: white; /* You can adjust color based on your design */
        opacity: 0; /* Start with hidden */
        transform: translateY(-20px); /* Start above */
        transition: opacity 1s ease, transform 1s ease;
        animation: fadeIn 1s forwards 1s; /* Delay 2s before appearing */
        margin-top: 20px; /* Space between the title and logo */
    }

/* Logo Styling */
.about-logo {
    width: 380px;
    height: auto;
    opacity: 0; /* Start with hidden */
    transform: translateY(20px); /* Start below */
    transition: opacity 1s ease, transform 1s ease;
    animation: fadeIn 1s forwards 0.5s; /* Delay 4s before appearing */
    margin-bottom: 20px; /* Space between the title and logo */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

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

.bg-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: #26B68B; /* Bottle Green color */
}
/*Title -------------------------------------------------------------------------------- H1 */

.section-title-h1 {
    font-size: 15px;
    color: #01724A;
    text-align: left;
    margin-bottom: 0;
    margin-left: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-title-h2 {
    font-size: 15px;
    color: #01724A;
    text-align: left;
    margin-bottom: 0;
    margin-left: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.why-ins-title-h1 {
    font-size: 16px;
    color: #01724A;
    text-align: left;
    margin-bottom: -5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.comp-title-h1 {
    font-size: 16px;
    color: #01724A;
    text-align: left;
    margin-bottom: 0px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.bio-title-h1 {
    font-size: 16px;
    color: #01724A;
    text-align: left;
    margin-bottom: -5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.amino-title-h1 {
    font-size: 16px;
    color: #01724A;
    text-align: left;
    margin-bottom: -5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.parenteral-section-title-h1 {
    font-size: 16px;
    color: #01724A;
    text-align: left;
    margin-bottom: -5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.plasma-title-h1 {
    font-size: 16px;
    color: #01724A;
    text-align: left;
    margin-bottom: -5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.vaccine-title-h1 {
    font-size: 16px;
    color: #01724A;
    text-align: left;
    margin-bottom: -5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.multi-title-h1 {
    font-size: 16px;
    color: #01724A;
    text-align: left;
    margin-bottom: -5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* About Us Section ----------------------------------------------- */

.about-us {
    background-color: #F4F4E0;
    padding: 60px 0;
}

/* Section 1: Title and Paragraph */
.section-title-a {
    font-size: 70px;
    color: #000;
    text-align: left;
    margin-top: -10px;
}

.section-paragraph-a {
    font-size: 16px;
    color: #000;
    margin: 0;
    padding-bottom: 10px;
    text-align: left;
}

/* Section 2: Circle and Content */
.row {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Left: Green Circle */
.green-circle-container-a {
    position: absolute;
    left: auto; /* Adjust left positioning to ensure half of the circle is visible */
    right: 95%;
    top: 50%;
    transform: translateY(-50%);
    width: 550px;
    height: 550px;
}

.green-circle-a {
    width: 100%;
    height: 100%;
    background-color: #26B68B;
    border-radius: 50%;
}

.white-bg {
    background-color: white;
    height: 400px;
}

/* Right: Content and Image */
.content-container-a {
    padding-left: 0; /* Adjust padding for left content */
    margin-right: auto;
    margin-left: 0;
}

/* ABOUT US PAGE */
.content-paragraph-a {
    font-size: 16px;
    color: #000;
    margin-bottom: 20px;
}

.white-p {
    padding: 30px 0;
}

/* Image Box Styling */
.image-box-container-a {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.image-box-a {
    height: 440px;
    overflow: hidden;
    position: relative;
    border-radius: 450px;
    border: 30px solid #26B68B;
    left: 30%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.about-image {
    height: 100%;
    object-fit: cover;
}

/* Section Three ------------------------------------------------ */

.story {
    padding: 60px 0 30px 0;
}

.content-container-s {
    padding-left: 0; /* Adjust padding for left content */
    margin-right: 0;
    margin-left: 50%;
}

.left-image-box-s {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

    .left-image-box-s .image-box-s {
        height: 440px;
        overflow: hidden;
        position: relative;
        border-radius: 450px;
        border: 30px solid #26B68B;
        right: 30%;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    }

/* Left: Green Circle */
.green-circle-container-s {
    position: absolute;
    left: auto; /* Adjust left positioning to ensure half of the circle is visible */
    right: 95%;
    top: 50%;
    transform: translateY(-50%);
    width: 550px;
    height: 550px;
}

.green-circle-s {
    width: 100%;
    height: 100%;
    background-color: #26B68B;
    border-radius: 50%;
}

/* Green Circle Right */
.right-green-circle-s {
    position: absolute;
    left: 95%; /* Adjust left positioning to ensure half of the circle is visible */
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 550px;
    height: 550px;
}

/* Right: Content and Image */
.content-container-story-s {
    padding-left: 12px; /* Adjust padding for left content */
    width: 800px !important; /* Adjust width to align the content */
    margin-left: auto;
}

.section-title-s {
    font-size: 70px;
    color: #000;
    text-align: left;
}

.section-paragraph-s {
    font-size: 16px;
    color: #000;
    margin: 0;
    padding-bottom: 60px;
    text-align: left;
}

.content-paragraph-s {
    font-size: 16px;
    color: #000;
    margin-bottom: 20px;
}

.container.cont-s {
    padding: 30px 0;
}


/* Section Four --------------------------------- */

.section-four {
    padding-top: 60px;
}

.section-four-bg {
    background-image: url('/Assets/mission-bg.png');
    background-size: cover;
    background-position: center;
    height: 550px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
}

.section-title-mission {
    font-size: 70px;
    ;
    color: #000;
    text-align: left;
}

.section-content-mission {
    font-size: 16px;
    color: #000;
    margin-bottom: 30px;
    padding-bottom: 30px;
    text-align: left;
}

.w-90 {
    width: 90%;
}

.column-box {
    width: 560px;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 1s forwards;
    position: relative;
}

.strip-box {
    position: relative;
    width: 100%;
}

.strip-image {
    width: 580px;
    height: auto;
    display: block;
    border-radius: 10px;
}

.icon-image {
    width: 70px;
    height: auto;
}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 45px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 100px;
}

    .overlay-content i {
        font-size: 30px;
        color: #01724A; /* Bottle green */
    }

.text-block {
    display: flex;
    flex-direction: column;
}

.rect-title {
    color: #01724A;
    margin: 0;
    font-size: 18px;
}

.rect-content {
    color: #8B8C8C;
    margin: 0;
    font-size: 14px;
}

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

.metallic-strip-wrapper {
    width: 100%;
    background: linear-gradient(0deg, #CECECE, #EFEFEF, #fff); /* metallic effect */
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 158px;
    border-bottom-right-radius: 158px;
    padding: 60px 20px;
}

.strip-title {
    font-size: 70px;
    color: #000; /* Bottle green title */
    margin-bottom: 5px;
}

.strip-paragraph {
    font-size: 16px;
    color: #000;
    margin-bottom: 20px;
}

.strip-paragraph-2 {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
}

/* Section Six ----------------------------------------------- */

.section-six {
    background: #ffffff;
    padding-top: 60px;
}

.white-why {
    padding-top: 50px;
}

.bg-tan {
    background-color: #F4F4E0;
    height: 450px;
}

.section-title-why {
    font-size: 70px;
    color: #000;
    margin-bottom: 15px;
}

.section-paragraph-why {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    ;
}

/* Image Box Styling */
.image-box-container-why {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.image-box-why {
    height: 460px;
    overflow: hidden;
    position: relative;
    border-radius: 450px;
    border: 30px solid #26B68B;
    left: 30%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.why-image {
    height: 100%;
    object-fit: cover;
}

.features-flex {
    display: block;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    width: 500px !important;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards;
    padding: 10px 0;
}

.lazy-img {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease, transform 0.6s ease;
}

    .lazy-img.loaded {
        opacity: 1;
        transform: translateY(0);
    }

.feature-icon {
    width: 20px;
    height: 20px;
}

.feature-content {
    display: flex;
    flex-direction: column;
}

.feature-title {
    font-size: 18px;
    color: #000;
    margin-bottom: 5px;
    padding-bottom: 15px;
}

.underline-why {
    width: 390px;
    height: 1px;
    background-color: #000;
    border-radius: 2px;
    opacity: 0.3;
}

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

@keyframes riseIn {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

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

.timeline-col {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

    .timeline-col.visible {
        opacity: 1;
        transform: translateY(0);
    }

.section-seven {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.journey-title {
    font-size: 70px;
    color: #000;
    margin-bottom: 10px;
}

.journey-content {
    font-size: 16px;
    color: #333;
    max-width: 700px;
    margin: 0 auto;
}

.timeline-row {
    gap: 30px;
}

.timeline-col {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards;
    margin: 20px;
}

.journey-timeline-header {
    font-family: League Gothic, sans-serif;
    font-size: 160px;
    font-weight: 600;
    background: linear-gradient(to bottom, #333, #ddd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 20px;
    line-height: 160px;
}

.journey-timeline-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
    background: #01724A;
    margin-top: -30px;
    border-radius: 20px;
    letter-spacing: 1px;
    padding: 5px 10px;
}

.journey-timeline-content {
    font-size: 14px;
    color: #555;
    max-width: 250px;
    margin: 0 auto;
}

.journey-paragraph {
    font-size: 16px;
    max-width: 700px;
    color: #333;
}

/* Animation Keyframes */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-eight {
    padding: 60px 0;
    background-color: #ffffff;
}

.join-title {
    font-size: 60px;
    font-weight: 300;
    color: #000; /* Bottle green */
    margin-bottom: 10px;
}

.join-underline {
    width: 50%;
    height: 1px;
    background-color: #000;
    margin: 0 auto 20px auto;
    border-radius: 2px;
    opacity: 0.3;
}

.join-content {
    font-size: 16px;
    color: #333;
    max-width: 900px;
    margin: 0 auto;
}

.why-image {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    height: 100%;
}

.lazy-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

    .lazy-item.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* REGpro Page */

.section-banner {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    padding: 60px;
    overflow: hidden;
}

    .section-banner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('/Assets/REGpro-banner.png') no-repeat center center;
        background-size: cover;
        filter: blur(8px);
        opacity: 1;
        transform: scale(1.1); /* Slight zoom in */
        transition: filter 1.5s ease, opacity 1.5s ease, transform 1.5s ease;
        z-index: -1;
    }

    .section-banner.loaded::before {
        filter: blur(0px);
        opacity: 1;
        transform: scale(1); /* Zoom out to normal */
    }

.banner-content {
    max-width: 600px !important;
    height: 0px;
    position: relative;
    top: 50px;
}

.banner-content-reg {
    max-width: 600px !important;
    height: 350px;
    position: relative;
    top: 0px;
}

.regpro-logo {
    width: 500px;
    height: auto;
}

.banner-subtext {
    font-size: 16px;
    color: white;
}

.button-block {
    margin-top: 10px;
}

.banner-button {
    width: 330px;
    height: 44px;
    background-color: white;
    color: black;
    font-size: 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.button-subtext {
    margin-top: 10px;
    color: white;
    font-size: 14px;
    font-weight: 500;
}
/* Keyframes for fade-in effect */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

.section-two {
    position: relative;
    padding: 80px 0;
    z-index: 1;
    background-color: transparent; /* base transparent */
}

/* Skewed background using pseudo-layer */
.skewed-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F4F4E0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 85%); /* angled bottom */
    z-index: -1;
}

/* Left column */
.section-left {
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* White strip */
.white-strip {
    position: absolute;
    width: 900px;
    height: 260px;
    background-color: white;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 45px;
}

/* Text under strip */
.comp-content {
    font-size: 13px;
    color: #333;
    max-width: 550px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.comp-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

.comp-button {
    width: 130px;
    height: 36px;
    background-color: transparent;
    border: 1px solid #333;
    color: black;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
}

/* Right column */
.section-right {
    height: 468px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-frame-wrapper {
    position: relative;
    background: url('/Assets/laptop.png') no-repeat center center;
    background-size: cover;
    padding-top: 62.25%; /* aspect ratio for 16:9 */
    width: 100%;
    height: auto;
}

.video-container {
    position: absolute;
    top: 8%; /* adjust to match the screen in your laptop frame */
    left: 12%;
    width: 77%;
    height: 77%; /* adjust this based on your frame */
    z-index: 2;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

    .video-container iframe {
        width: 100%;
        height: 100%;
        border: none;
    }


.laptop-frame {
    max-width: 100%;
    height: auto;
}

/* Lazy loading animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.fade-in-on-scroll {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

.delay-1 {
    animation-delay: 0s;
}

.delay-2 {
    animation-delay: 1s;
}

.delay-3 {
    animation-delay: 2s;
}

.delay-4 {
    animation-delay: 3s;
}

.delay-5 {
    animation-delay: 4s;
}

.animated {
    opacity: 1 !important;
    animation-play-state: running !important;
}

.strip-button {
    width: 130px;
    height: 36px;
    background-color: transparent;
    border: 1px solid #333;
    color: black;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}

.section-three {
    padding: 60px 0;
}

/* Title and Paragraph */
.regpro-title {
    font-size: 70px;
    margin-bottom: 10px;
}

.regpro-content {
    font-size: 16px;
    margin-bottom: 10px;
}

@keyframes heartbeat {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }

    30% {
        transform: translate(-50%, -50%) scale(1.1);
    }

    60% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.heartbeat {
    animation: heartbeat 2s infinite ease-in-out;
    transform-origin: center;
}

.circle-bg {
    position: absolute;
    top: 62%;
    left: 51%;
    width: 460px;
    height: 460px;
    background: #2A8D70;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    overflow: hidden; /* Ensures pseudo-element doesn't spill out */
}

    .circle-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;
        border-radius: 50%;
        height: 20%; /* Only cover the top 10% */
        box-shadow: inset 0 30px 30px rgba(0, 0, 0, 0.4);
        pointer-events: none;
    }

.circle-center-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.strip-image-r {
    width: 460px;
    height: auto;
}

.right-img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.column-box-r {
    margin: 5px;
    position: relative;
    text-align: center;
    z-index: 3;
    width: 440px;
}

.overlay-content-r {
    position: absolute;
    top: 50%;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 80px;
    transform: translateY(-50%);
    justify-content: space-around
}

.overlay-content-right {
    position: absolute;
    top: 50%;
    left: 40px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 80px;
    transform: translateY(-50%);
    justify-content: space-around;
}

.icon-image-r {
    width: 55px;
    margin-bottom: 5px;
}

.rect-title-r {
    font-size: 14px;
    color: #01724A;
    text-align: left;
}

.rect-content-r {
    font-size: 13px;
    color: #8B8C8C;
    margin: 0;
    text-align: left;
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }

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

.slideInLeft {
    animation: slideInLeft 1.2s ease forwards;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

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

.slideInRight {
    animation: slideInRight 1.2s ease forwards;
}

/* Section Background */
.section-four {
    background-color: #F5f5f5;
    padding-top: 60px;
    position: relative;
}

.why-title-regpro {
    font-size: 70px;
    margin-bottom: 10px;
}

.white-regpro {
    padding-top: 20px 0;
}

.regpro-paragraph {
    font-size: 18px;
    color: #333;
}

.why-paragraph-regpro {
    font-size: 16px;
    color: #000;
    margin: 0;
    padding-bottom: 30px;
    text-align: left;
}


/* Feature Item */
.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    opacity: 0;
    transform: translateX(-50px);
    animation: fadeInLeft 1s forwards;
}

.feature-icon {
    width: 30px;
    height: 30px;
}

.feature-title-regpro {
    font-size: 16px;
    margin: 0;
    color: #01724A;
    font-weight: 500;
}

.feature-content-regpro {
    font-size: 14px;
    margin: 0;
    color: #333;
    font-weight: 500;
}

.underline-regro {
    width: 390px;
    height: 1px;
    background-color: #01724A;
    margin-top: 6px;
    opacity: 0.3;
}

.bg-tan-retro {
    background-color: #F4F4E0;
    height: 400px;
    padding: 30px 0;
}

/* Image Box */
.image-box-container-regpro {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.image-box-regpro {
    width: 100%;
    height: 440px;
    overflow: hidden;
    position: relative;
    border-radius: 450px;
    border: 30px solid #26B68B;
    left: 20%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.why-image {
    height: 100%;
    object-fit: cover;
}

/* Lazy Load Animation */
.lazy-item {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

    .lazy-item.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Optional: Left Slide Animation (used on .feature-item) */
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

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

.section-five {
    background: #fff;
    padding: 60px 0;
    position: relative;
}

.looking-title-regpro {
    font-size: 30px;
    color: #000;
    margin-bottom: 0px;
}

.looking-subtitle-regpro {
    font-size: 70px;
    font-weight: 400;
    margin-top: 70px;
    color: #000;
}

.looking-content-regpro {
    color: #555;
    font-size: 15px;
    margin-bottom: 80px;
    max-width: 700px;
}

.looking-content-regpro-2 {
    color: #8B8C8C;
    font-size: 15px;
    margin-bottom: 40px;
    max-width: 700px !important;
    margin-right: auto;
}

.merged-box-wrapper {
    position: relative;
    gap: 0;
}

.contact-box {
    background: #35A987;
    border-radius: 850px;
    height: 290px;
    width: 60%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    padding: 20px 80px;
    animation: slideInLeftCustom 1.2s ease-out forwards;
    opacity: 0;
    animation-delay: 0.4s;
}

.regpro-cont {
    width: 22px;
    height: auto;
    margin-right: 10px;
}
/* Slide in from left for contact-box */
@keyframes slideInLeftCustom {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }

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

/* Float in from below with bounce for image-box-cutout */
@keyframes floatInUpBounce {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }

    60% {
        opacity: 1;
        transform: translateY(-10px) scale(1.05);
    }

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

.contact-info {
    font-size: 16px;
    color: #fff;
    margin: 5px 0;
}

.image-box-cutout {
    position: absolute;
    right: 0;
    background: #01724A;
    top: 0%;
    transform: translateY(-50%);
    height: 290px;
    width: 50%;
    overflow: visible;
    z-index: 3;
    border-radius: 333px;
    right: auto;
    left: 32%;
    animation: floatInUpBounce 1.4s ease-out 0.8s forwards;
    opacity: 0; /* Start hidden */
    will-change: transform, opacity;
}

.cutout-image {
    height: 400px;
    position: absolute;
    bottom: 0px;
    right: 80px;
}

/* Key Benefits of Instant Quotes */

/* Title and Paragraph */
.keyb-title {
    font-size: 50px;
    margin-bottom: 10px;
}

.keyb-content {
    font-size: 16px;
    margin-bottom: 10px;
}

.strip-image-keyb {
    width: 480px;
    height: auto;
}

.right-img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.column-box-keyb {
    margin: 5px;
    position: relative;
    text-align: center;
    z-index: 3;
    width: 460px;
}

.overlay-content-keyb-l {
    position: absolute;
    top: 50%;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 80px;
    transform: translateY(-50%);
}

.overlay-content-keyb-r {
    position: absolute;
    top: 50%;
    left: 40px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 80px;
    transform: translateY(-50%);
}

.btn-outline-instant {
    padding: 10px 20px;
    margin-top: 10px;
    border: 2px solid #01724A;
    border-radius: 10px;
    background-color: #01724A;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .btn-outline-instant:hover {
        background-color: #3AC29A;
        border: 2px solid #3AC29A;
        color: #333; /* bottle green for contrast on hover */
        font-size: 14px;
    }

.btn-outline-2 {
    padding: 10px 20px;
    margin-top: 10px;
    border: 2px solid #01724A;
    border-radius: 10px;
    background-color: transparent;
    color: #01724A;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .btn-outline-2:hover {
        background-color: #01724A;
        color: #fff; /* bottle green for contrast on hover */
    }

.icon-image-keyb {
    width: 55px;
    margin-bottom: 5px;
}

.keyb-title-r {
    font-size: 14px;
    color: #006400;
    text-align: left;
}

.keyb-content-r {
    font-size: 13px;
    color: #8B8C8C;
    margin: 0;
    text-align: left;
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }

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

.slideInLeft {
    animation: slideInLeft 1.2s ease forwards;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

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

.slideInRight {
    animation: slideInRight 1.2s ease forwards;
}

/* ===== Instant Quote ============================================ NEW Page  */

.instant-slide {
    width: 100%;
    height: 100%;
    position: relative;
}

    .instant-slide video {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

.content-box-i {
    max-width: 600px;
    height: 280px;
}

.instant-logo {
    max-width: 415px;
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.4));
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards;
}

.instant-content, .instant-content-2,
.btn-outline {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 2s ease forwards;
}

.content-box p:nth-child(2) {
    animation-delay: 0.3s;
}

.content-box p:nth-child(3) {
    animation-delay: 0.6s;
}

.content-box .btn-outline {
    animation-delay: 0.9s;
}

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

.instant-content {
    font-size: 24px !important;
    font-weight: 500;
    margin-bottom: 10px !important;
}

.instant-content-2 {
    font-size: 18px !important;
    margin-bottom: 30px !important;
}

.btn-outline {
    padding: 12px 30px;
    border: 2px solid white;
    border-radius: 10px;
    background-color: transparent;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .btn-outline:hover {
        background-color: white;
        color: #1d4032; /* bottle green for contrast on hover */
    }

/* Why choose Instant Quotes Service? */

.info-section {
    padding: 60px 0px;
    background: linear-gradient(to right, #FFFFFF, #97A3A3);
}

.why-ins-title {
    font-size: 60px;
    margin-bottom: 20px;
}

.why-ins-content {
    margin: 0 auto 40px;
    font-size: 16px;
}

.why-ins-span {
    font-family: League Gothic, sans-serif;
    font-size: 100px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.why-ins-content-box {
    font-size: 13px;
    color: #fff;
    margin-bottom: 20px;
}

.why-ins-sub-title {
    width: 100%;
    font-size: 24px;
    color: #333;
    margin: 40px 0 50px;
}

.box-column {
    flex: 1 1 30%;
    min-width: 280px;
    display: flex;
}

.info-box-i {
    background: linear-gradient(to right, #fff, #97A3A3);
    border-radius: 120px;
    color: #333;
    padding: 50px 70px;
}

.box-title-i {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
}

    .box-title-i::after {
        content: '';
        display: block;
        width: 30px;
        height: 3px;
        background-color: #333;
        margin-top: 5px;
    }

.box-content-i {
    font-size: 13px;
}

.circle-box-i {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(to right, #9eabab, #97A3A3);
    margin-left: 20px;
}

.circle-box-i-2 {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(to right, #dee1e1, #9eabab);
    left: 35%;
    position: relative;
}

.info-box,
.dark-line {
    box-sizing: border-box;
}

.dark-line {
    height: 10px;
    width: calc(100% + 40px); /* Add 20px left + 20px right */
    margin: 0 -20px; /* Pull it outward on both sides */
    background: #01724A;
    border-radius: 10px 10px 0 0;
}

.i-row-2 {
    margin-top: 40px !important;
}


.slideInLeft {
    animation: slideInLeft 1.2s ease forwards;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

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

.slideInRight {
    animation: slideInRight 1.2s ease forwards;
}

@keyframes separateJoin {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes separateJoinReverse {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

.circle-i.animate-circle-separation {
    animation: separateJoin 1s ease-in-out;
}

.line-connect.animate-line-separation {
    animation: separateJoinReverse 1s ease-in-out;
}

@keyframes separateJoinZoom {
    0% {
        transform: translateX(0) scale(1);
    }

    50% {
        transform: translateX(-10px) scale(1.3);
    }

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

@keyframes separateJoinReverse {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

.circle-i.animate-circle-separation {
    animation: separateJoinZoom 1s ease-in-out;
}

.line-connect.animate-line-separation {
    animation: separateJoinReverse 1s ease-in-out;
}

/* Blink effect */
@keyframes blinkExclaim {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.exclaim-blink {
    display: inline-block;
}

/* Entrance animations */
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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

.how-title-2.animated {
    animation: fadeSlideUp 0.8s ease-out forwards;
}

.how-content-2.animated {
    animation: fadeSlideUp 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

/* How it Works ---------------*/

.section-five-q {
    background: #F4F4E0;
    padding: 60px 0;
    position: relative;
}

.section-six-q {
    padding: 40px 0;
    position: relative;
}

/* Horizontal connecting line above all circles */
.section-five-q-columns {
    display: flex;
    flex-wrap: nowrap; /* ensures no wrap */
    justify-content: space-between;
    position: relative;
    padding-top: 40px;
}

.section-five-q-item {
    text-align: left;
    flex: 1;
    padding: 0;
    position: relative;
}

.circle-line-wrapper {
    position: relative;
    margin-bottom: 20px;
}

    .circle-line-wrapper .circle-i {
        width: 10px;
        height: 10px;
        background: #F4F4E0;
        border: 3px solid #F4F4E0;
        box-shadow: 0 0 0 2px #01724A;
        border-radius: 50%;
        position: relative;
        z-index: 2;
    }
    /* Line that connects to next circle — now absolutely positioned */
    .circle-line-wrapper .line-connect {
        position: absolute;
        top: 5px; /* vertically center with circle */
        left: 10px; /* start at edge of circle */
        height: 1px;
        width: calc(100% + 15px); /* extend past current column */
        background: #333;
        z-index: 1;
    }

    .circle-line-wrapper .line {
        height: 1px;
        background: #333;
        flex: 1;
        z-index: 1;
    }

/* Hide last line */
.section-five-q-item:last-child .line-connect {
    display: none;
}

.how-title {
    font-size: 70px;
}

.how-content {
    font-size: 16px;
}

.how-title-2 {
    font-size: 60px;
}

.how-content-2 {
    font-size: 16px;
}

/* Optional animation visuals */
.how-bullet-title {
    margin-top: 10px;
    font-size: 15px;
    color: #000;
}

.how-bullet-content {
    font-size: 13px;
    color: #333;
}

.slideInRight-1 {
    animation: slideInRight 1.1s ease forwards;
}

.slideInRight-2 {
    animation: slideInRight 1.3s ease forwards;
}

.slideInRight-3 {
    animation: slideInRight 1.5s ease forwards;
}

.slideInRight-4 {
    animation: slideInRight 1.7s ease forwards;
}

.slideInRight-5 {
    animation: slideInRight 1.9s ease forwards;
}

.slideInLeft-1 {
    animation: slideInLeft 1.1s ease forwards;
}

.slideInLeft-2 {
    animation: slideInLeft 1.3s ease forwards;
}

.slideInLeft-3 {
    animation: slideInLeft 1.5s ease forwards;
}

.slideInLeft-4 {
    animation: slideInLeft 1.7s ease forwards;
}

.slideInLeft-5 {
    animation: slideInLeft 1.9s ease forwards;
}


/* Contact Bottom ------------------------------------------------------------------------------------ */

.contact-section {
    position: relative;
    overflow: hidden;
    background: #F4F4E0;
    padding: 60px 0;
}

    .contact-section .row > .col-md-6 {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

.r-sample {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding: 30px;
    top: 60px;
}

.contactus-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contactus-box {
    padding: 30px 60px;
}

.contact-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.contact-title {
    font-size: 60px;
    ;
    color: #000;
    margin-bottom: 10px;
}

.contact-description {
    font-size: 16px;
    color: #000;
    margin-bottom: 10px;
}

.contact-content {
    font-size: 16px;
    color: #333;
}

.box-title {
    font-size: 30px;
}

.box-content {
    font-size: 13px;
}

.form-title {
    font-size: 36px;
    margin-bottom: 0px;
}

.form-content {
    font-size: 14px;
    margin-bottom: 30px;
}

.form-control {
    background: #F4F4E0 !important;
    padding: 10px !important;
    font-size: 12px !important;
}

.contact-details {
    font-size: 16px;
    color: #333;
}

.btn.btn-contact {
    padding: 10px;
    width: 150px;
    border: 2px solid #333;
    border-radius: 10px;
    background-color: transparent;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .btn.btn-contact:hover {
        background-color: #01724A !important;
        border: 2px solid #01724A !important;
        color: #fff !important; /* bottle green for contrast on hover */
    }

.contact-cutout-image {
    position: absolute;
    right: 0;
    top: 28%;
    transform: translateY(-50%);
    height: 290px !important;
    width: auto;
    overflow: visible;
    z-index: 3;
    border-radius: 333px;
    right: auto;
    left: 48%;
}

.contact-us-1 {
    position: relative;
    bottom: 20px;
    top: 20px;
}

.btn-dark {
    font-size: 14px !important;
}

.contact-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
}

.white-box {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.08);
    height: 100%;
    position: relative;
    z-index: 1;
}

    .white-box h5,
    .white-box h6 {
        color: #01724A;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .white-box p {
        color: #333;
        margin-bottom: 20px;
    }

.contact-btn {
    padding: 0.6rem 1.6rem;
    border: 2px solid #01724A;
    color: #01724A;
    background: transparent;
    border-radius: 5px;
    font-size: 14px;
    transition: 0.3s ease;
    margin-top: 15px;
}

    .contact-btn:hover {
        background: #01724A;
        color: #fff;
        border: 2px solid #01724A;
    }

.cutout-img {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .contact-form input:focus,
    .contact-form textarea:focus {
        border-color: #01724A;
        box-shadow: 0 0 5px rgba(0, 106, 78, 0.3);
        outline: none;
    }

.contact-form textarea {
    height: 150px;
    resize: none;
}

@keyframes boxPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(0, 128, 0, 0.5);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 10px 20px rgba(0, 128, 0, 0.2);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(0, 128, 0, 0.5);
    }
}

.r-sample.animate-effect {
    animation: boxPulse 1s ease-in-out;
}

/* Parenteral ------------------------------------------------------------ CATEGORIES*/

.product-box {
    position: relative;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.product-cat-link {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #888; /* bottle green */
    color: white;
    padding: 2px 7px;
    border-radius: 50%;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

    .product-cat-link:hover {
        background: #777;
        color: #fff;
    }


.parenteral-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

    .parenteral-slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


/* Why Choose ---------------------------- */
.parenteral-info-section {
    background: transparent;
    padding: 60px 0;
}

.parenteral-section-title {
    font-size: 60px;
    color: #000;
}

.parenteral-section-desc {
    font-size: 16px;
    color: #333;
    margin: 0 auto;
}

.parenteral-outline-btn {
    background: transparent;
    border: 2px solid #01724A;
    color: #000;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .parenteral-outline-btn:hover {
        background: #01724A;
        color: #fff;
    }

/* Feature box background rectangle */
.parenteral-feature-bg {
    position: absolute;
    width: 220px;
    height: 260px;
    background: #fff;
    z-index: 1;
    transform: rotate(-16deg); /* rotate left */
    overflow: visible;
}

    .parenteral-feature-bg::before {
        content: '';
        position: absolute;
        left: -30px;
        top: -70px;
        width: 30px;
        height: 280px;
        background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.1), transparent 60%);
        z-index: -1;
        pointer-events: none;
    }

/* Content over background */
.parenteral-feature-content {
    position: relative;
    z-index: 2;
    padding: 40px 20px;
    max-width: 240px;
}

.parenteral-icon {
    width: 50px;
    height: auto;
    margin-bottom: 15px;
}

.parenteral-feature-title {
    font-size: 15px;
    font-weight: 600;
    color: #01724A;
    margin-bottom: 10px;
}

.parenteral-feature-text {
    font-size: 13px;
    color: #444;
}

/* Extensive range ---------------------------- */

.section-three-parenteral {
    background-color: #F4F4E0; /* light gray */
    padding: 60px 0;
}

.p-brochure {
    width: 960px;
    height: auto;
    margin-top: -80px;
    opacity: 0;
    transform: scale(0);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
    will-change: transform, opacity;
    visibility: hidden; /* Prevent FOUC */
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

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

.p-brochure.animate-scale {
    animation: scaleIn 1.8s ease forwards;
}

.p-brochure.loaded {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.parenteral-title {
    font-size: 60px;
    color: #333;
    text-align: left;
}

.parenteral-content {
    font-size: 16px;
    color: #555;
    text-align: left;
}

/* Product ---------------------------- */

.section-four-parenteral {
    padding: 60px 0;
}

.section-five-parenteral {
    background-color: #F4F4E0; /* light gray */
    padding: 60px 0;
}

.product-box {
    background: #fff;
    border-radius: 5px;
    height: 300px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    transition: transform 0.3s ease;
    box-shadow: 0 6px 4px rgba(0, 0, 0, 0.04), 0 6px 0px rgba(0, 0, 0, 0.06)
}

    .product-box img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        display: block;
        align-self: center;
    }

.product-title-p {
    font-size: 14px;
    font-weight: 500;
    color: #333; /* Bottle green */
    margin-bottom: auto;
    display: block;
}

.product-subtitle {
    font-size: 12px;
    color: #888;
    margin-top: auto;
    margin-bottom: 0;
}

.section-six-parenteral {
    padding: 60px 0;
    background: none; /* no background initially */
    position: relative;
    max-width: 100%;
    margin: 20px 10px;
    border-radius: 20px;
    min-height: 680px;
    justify-content: center;
    z-index: 9;
    background-size: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

    /* When background and fade-in is ready */
    .section-six-parenteral.bg-loaded {
        background: url('/Assets/Parenteral-Ad-Banner.png') no-repeat center center;
        opacity: 1;
        background-size: cover;
    }

[data-lazy="item"] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    [data-lazy="item"].lazy-loaded {
        opacity: 1;
        transform: translateY(0);
    }

[data-delay="1"].lazy-loaded {
    transition-delay: 0.2s;
}

[data-delay="2"].lazy-loaded {
    transition-delay: 0.4s;
}

[data-delay="3"].lazy-loaded {
    transition-delay: 0.6s;
}

[data-delay="4"].lazy-loaded {
    transition-delay: 0.8s;
}

[data-delay="5"].lazy-loaded {
    transition-delay: 1s;
}

[data-delay="6"].lazy-loaded {
    transition-delay: 1.2s;
}

/* Regulatory ---------------------------- */

.section-eight-parenteral {
    padding: 60px 0;
}

.regulatory-title {
    font-size: 60px;
    color: #333;
}

.regulatory-content {
    font-size: 16px;
    color: #666;
}

.green-box {
    background-color: #35A987; /* bottle green */
    border-radius: 80px;
    color: white;
    padding: 30px 60px;
}

.green-box-content {
    font-size: 14px;
    color: #fff;
    margin-bottom: 20px;
}

.green-box-content-2 {
    font-size: 13px;
    color: #000;
}

.download-btn {
    background-color: #fff;
    color: #000;
    padding: 10px 35px;
    font-size: 14px;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* subtle shadow */
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

    .download-btn:hover {
        background-color: white;
        color: #006d5b;
    }

/* Amino ------------------------------------------------------------------------------------ */

.section-amino-two {
    padding: 60px 0;
    position: relative;
}

.amino-title {
    font-size: 70px;
    color: #333;
}

.amino-content {
    font-size: 16px;
    color: #333;
}

.amino-box-title {
    font-size: 16px;
    color: #333;
}

.amino-box-content {
    font-size: 13px;
    color: #333;
    margin-bottom: 5px;
}

.icon-amino {
    width: 55px;
    height: auto;
    object-fit: contain;
}

.text-block {
    max-width: 70%;
    display: flex;
    flex-direction: column;
}

.amino-image-r {
    width: 500px;
    height: auto;
    display: block;
}

.amino-box {
    padding: 20px;
    border-radius: 12px;
}

.amino-small-bg {
    background-size: contain;
    background-position: center;
    padding: 30px;
    border-radius: 12px;
    width: 80%;
    height: auto;
    position: relative;
    color: #fff;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

    .amino-small-bg:hover {
        transform: scale(1.02);
        opacity: 0.95;
    }

.column-box-amino {
    margin-bottom: 0;
    position: relative;
    z-index: 3;
    width: 440px;
    float: right;
}

.column-box-amino-right {
    margin-bottom: 0;
    position: relative;
    z-index: 3;
    width: 440px;
    float: left;
    top: 80px;
    left: -30px;
}

.overlay-content-amino-left {
    position: absolute;
    top: 50%;
    left: 0px;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    transform: translateY(-50%);
    justify-content: space-between;
    text-align: right;
}

.overlay-content-amino-right {
    position: absolute;
    top: 50%;
    left: 90px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    transform: translateY(-50%);
    justify-content: flex-start;
    text-align: left;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.mb-minus {
    margin-bottom: -30px;
}

.section-five-amino {
    padding: 60px 0;
    background: none; /* no background initially */
    position: relative;
    max-width: 100%;
    margin: 20px 10px;
    border-radius: 20px;
    min-height: 680px;
    justify-content: center;
    z-index: 9;
    background-size: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

    /* When background and fade-in is ready */
    .section-five-amino.bg-loaded {
        background: url('/Assets/Amino-Ad-Banner.jpg') no-repeat center center;
        opacity: 1;
        background-size: cover;
    }


/* Biopharma ------------------------------------------------------------------------------------ */
.biopharma-img-1 {
    width: 930px;
    height: auto;
    margin-top: -90px;
}

.bio-title-b {
    font-size: 30px;
}

.bio-content-b {
    font-size: 14px;
}

.bio-bullets {
    list-style-type: disc;
    padding-left: 20px;
    color: #000; /* default text color */
    margin-top: 20px;
}

    .bio-bullets li {
        color: #000; /* text color */
        font-size: 13px;
        position: relative;
    }

        .bio-bullets li::marker {
            color: #01724A; /* bullet point color - green */
        }

.section-three-bio {
    padding: 60px 0;
}

.bio-section-title {
    font-size: 60px;
    color: #000;
}

.bio-section-desc {
    font-size: 16px;
    color: #333;
    margin: 0 auto;
}


.bio-title {
    font-size: 50px;
    margin-bottom: 15px;
    color: #333;
    text-align: left;
}

.bio-content {
    font-size: 16px;
    color: #555;
    text-align: left;
    margin-bottom: 40px;
}

.step-box {
    background-image: url('/Assets/bio-Infograph.png'); /* Replace with your image path */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 270px; /* Adjust as needed */
    position: relative;
    text-align: center;
    padding: 0 10px;
    z-index: 1;
}

    .step-box h6 {
        font-weight: bold;
        color: #fff;
        font-size: 50px;
        left: 28px;
        text-align: left;
        position: absolute;
        top: 44%;
        right: auto;
    }

    .step-box p {
        color: #333;
        font-size: 13px;
        left: 90px;
        text-align: left;
        position: absolute;
        top: 47%;
        right: auto;
    }

.bio-animate, .bio-animate-image {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

    .bio-animate.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Zoom effect for image */
.bio-animate-image {
    transform: scale(0.9);
    transition: transform 0.8s ease, opacity 0.8s ease;
}

    .bio-animate-image.visible {
        opacity: 1;
        transform: scale(1);
    }

.bio-fade-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s ease-out;
}

    .bio-fade-left.visible {
        opacity: 1;
        transform: translateX(0);
    }

    /* Optional staggered effect for internal elements */
    .bio-fade-left > * {
        opacity: 0;
        transform: translateX(-30px);
        transition: all 0.6s ease;
    }

    .bio-fade-left.visible > * {
        opacity: 1;
        transform: translateX(0);
    }

.zoom-step .col-6,
.zoom-step .col-lg-3,
.zoom-step .col-md-3 {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s ease-in-out;
}

    .zoom-step .col-6.zoom-visible,
    .zoom-step .col-lg-3.zoom-visible,
    .zoom-step .col-md-3.zoom-visible {
        opacity: 1;
        transform: scale(1);
    }

.lazy-section .col-6,
.lazy-section .col-lg-3,
.lazy-section .col-md-3 {
    opacity: 0;
    transform: scale(1);
    transition: all 0.8s ease-in-out;
}

.lazy-section .zoom-visible {
    opacity: 1;
}

/* Plasma  ------------------------------------------------------------------------------------ */

.section-plasma-two {
    padding: 60px 0 20px 0;
    position: relative;
}

.plasma-title {
    font-size: 50px;
    color: #333;
}

.plasma-content {
    font-size: 16px;
    color: #333;
}

.btn-outline-dark-plasma {
    position: relative;
    display: inline-block;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    color: #fff !important;
    background: linear-gradient(270deg, #35A987, #35DB87, #22604A);
    background-size: 400% 400%;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    z-index: 1;
    animation: plasmaLoop 2s linear infinite;
}

@keyframes plasmaLoop {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/* Optional hover effect (static shimmer) */
.btn-outline-dark-plasma:hover {
    background-position: 100% 0;
    transition: background-position 0.5s ease;
}


.plasma-bullets {
    padding-left: 1.5rem;
    list-style-type: disc;
}

    .plasma-bullets li {
        margin-bottom: 10px;
        font-size: 20px;
        color: #01724A;
    }

.p-bullets {
    font-size: 15px;
    color: #333;
}

#section-three-plasma, #section-raw-material {
    padding: 60px 0;
    position: relative;
}

.half-capsule {
    width: 100%;
    max-width: 50%;
    border-radius: 160px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.left-capsule {
    background: linear-gradient(to bottom, #e0e0e0, #ffffff);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 20px 50px 20px 70px;
}

.right-capsule {
    background: linear-gradient(to bottom, #35A987, #22604A);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 20px 70px 20px 50px;
}

.capsule-title-left {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 0.5rem;
    color: #333;
}

.capsule-content-left {
    font-size: 13px;
    color: #333;
}

.capsule-title-right {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 0.5rem;
    color: #fff;
}

.capsule-content-right {
    font-size: 13px;
    color: #fff;
}

.underline-left {
    width: 100%;
    height: 1px;
    background: #333;
    margin: 0 auto 1rem auto;
}

.underline-right {
    width: 100%;
    height: 1px;
    background: #fff;
    margin: 0 auto 1rem auto;
}

.plasma-icon {
    width: 44px;
    height: auto;
    margin-bottom: 15px;
}

.cap-2 {
    margin-top: 40px !important;
}

.raw-material-title {
    font-size: 60px;
    color: #333;
}

.raw-material-description {
    font-size: 16px;
    margin: 0 auto;
    color: #555;
}

.arrow-icon {
    width: 30px;
    height: auto;
}

.raw-margin {
    position: relative;
    left: -50px;
}

.raw-bullet {
    font-size: 14px;
    color: #333;
}

.raw-material-title-2 {
    font-size: 18px;
}

.raw-material-content-2 {
    font-size: 15px;
}

.custom-bullets {
    list-style-type: disc;
    padding-left: 1.5rem;
    color: #333;
    margin-left: 10px;
}

    .custom-bullets li {
        margin-bottom: 0;
        font-size: 20px;
        color: #01724A;
    }

.first-margin {
    margin-bottom: 40px;
}

.vaccine-bullets {
    padding-left: 1.5rem;
    list-style-type: disc;
    line-height: 25px;
}

    .vaccine-bullets li {
        margin-bottom: 2px;
        font-size: 30px;
        color: #01724A;
    }

.v-bullets {
    font-size: 15px;
    color: #333;
    margin-bottom: 2px;
}

.vaccine-b-margin {
    margin-top: -20px !important;
}

#section-overlap-circles {
    overflow: hidden;
    position: relative;
    padding-bottom: 60px;
}

    #section-overlap-circles .container {
        position: relative;
        height: 600px;
    }

.circle {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    padding: 50px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.circle-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff;
}

.circle-list {
    list-style: none;
    padding: 0;
    font-size: 14px;
    margin: 0;
    color: #fff;
}

.circle-2-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.circle-2-list {
    list-style: none;
    padding: 0;
    font-size: 14px;
    margin: 0;
    color: #333;
}

.circle-list li {
    font-size: 14px;
    margin-bottom: 6px;
}

.circle-content {
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
}

.circle-1 {
    background: linear-gradient(to bottom, #35A987, #22604A);
    top: 50px;
    left: 0;
    z-index: 1;
}

.circle-2 {
    background: linear-gradient(to bottom, #e0e0e0, #ffffff); /* Light to dark gray */
    top: 120px;
    left: 240px;
    z-index: 2;
}

.circle-3 {
    background: linear-gradient(to bottom, #35A987, #22604A);
    top: 200px;
    left: 500px;
    z-index: 3;
}

.top-arrow {
    position: absolute;
    top: 0;
    width: 150px;
    height: auto;
}

.arrow-1 {
    left: 320px;
    top: 50px;
    z-index: 5;
}

.arrow-2 {
    left: 580px;
    top: 130px;
    z-index: 5;
}

/* Keyframes for zoom animation */
@keyframes zoomInOut {
    0%, 100% {
        transform: scale(1);
    }

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

/* Arrow animation */
@keyframes arrowPulse {
    0%, 100% {
        transform: scale(1);
    }

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

/* Arrows zoom animation */
.arrow-1,
.arrow-2 {
    animation: arrowPulse 2s ease-in-out infinite;
    transform-origin: center;
}

.arrow-1 {
    animation-delay: 0s;
}

.arrow-2 {
    animation-delay: 1s;
}

/* Multi-Compendial Solutions ------------------------------------------------- */

.left-alt-box {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Subtle box shadow around the box */
}

.number-row {
    position: relative;
    font-size: 40px;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: visible;
    padding: 15px 20px;
}

    /* Arrow still here */
    .number-row::after {
        content: "";
        position: absolute;
        bottom: -12px;
        right: 1.5rem;
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 12px solid currentColor;
        z-index: 1;
    }

.inner-text {
    display: inline-block;
    animation-name: pianoPulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform, box-shadow;
}

/* Sequential delays */
.color-1 .inner-text {
    animation-delay: 0s;
}

.color-2 .inner-text {
    animation-delay: 0.2s;
}

.color-3 .inner-text {
    animation-delay: 0.4s;
}

.color-4 .inner-text {
    animation-delay: 0.6s;
}

.color-5 .inner-text {
    animation-delay: 0.8s;
}

/* Background colors */
.color-1 {
    background: #2F775F;
}

    .color-1::after {
        border-top-color: #2F775F;
    }

.color-2 {
    background: #3F8E74;
}

    .color-2::after {
        border-top-color: #3F8E74;
    }

.color-3 {
    background: #5BA88C;
}

    .color-3::after {
        border-top-color: #5BA88C;
    }

.color-4 {
    background: #7CC0A6;
}

    .color-4::after {
        border-top-color: #7CC0A6;
    }

.color-5 {
    background: #A3D9C2;
}

    .color-5::after {
        border-top-color: #A3D9C2;
    }

@keyframes pianoPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

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

.multi-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.multi-content {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.content-row {
    margin-bottom: 30px;
}

.right-alt-box {
    margin-top: 40px;
}

    /* Right side content */
    .right-alt-box .content-row {
        box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.15);
        margin-bottom: 35px;
        border-radius: 10px;
        background-color: #fff;
    }

/* Category Product Table --------------------------------------------- */

.section-product-table {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
}

.product-bg-wrapper {
    position: absolute;
    top: 48%;
    left: 11%;
    width: 79%;
    z-index: 0;
    pointer-events: none;
}

.product-vector {
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.3;
    animation: waveFlow 3s infinite ease-in-out;
}

@keyframes waveFlow {
    0% {
        transform: translateX(-20px);
        opacity: 0.2;
    }

    50% {
        transform: translateX(20px);
        opacity: 0.3;
    }

    100% {
        transform: translateX(-20px);
        opacity: 0.2;
    }
}

.custom-table {
    border-collapse: separate;
    border-spacing: 0 12px;
    width: 490px;
}

    .custom-table td {
        padding: 12px 20px;
        border-radius: 10px;
        height: 66px;
    }

.row-grey {
    background-color: #F5F5F5;
}

.row-green {
    background-color: #9BD7C5;
}

.custom-table a {
    display: block;
    color: #000;
    font-size: 14px;
    text-decoration: none;
    width: 98%;
}

.slider-btn {
    background: transparent;
    border: none;
    padding: 10px 18px;
    font-size: 24px;
    border-radius: 6px;
    cursor: pointer;
}

.slider-icon {
    width: 10px; /* adjust as needed */
    height: auto;
}

#sliderWrapper {
    display: flex;
    width: 520%; /* 5 slides */
    transition: transform 0.5s ease-in-out;
}

.slide-t {
    flex: 0 0 20%; /* 100 / 5 slides = 20% */
    display: flex;
    gap: 0px;
    flex-shrink: 0;
}

    .slide-t:after {
        opacity: 0;
    }

/* Reasources Hub --------------------------------------------- */

.rh-section {
    background: linear-gradient(to bottom, #9ad7c5, #ffffff);
    padding: 60px 0;
    margin-top: 60px;
}

.rh-h1 {
    font-size: 70px;
}

.rh-h6 {
    font-size: 20px;
}

.rh-menu-h5 {
    font-size: 25px;
    margin-bottom: 10px;
    color: #333;
}

.rh-link {
    font-size: 14px;
    color: #333;
}

.rh-h4 {
    font-size: 35px;
    color: #fff;
}

.rh-p1 {
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 5px;
}

.rh-p {
    font-size: 13px;
    color: #fff;
    max-width: 400px;
}

.slider-nav a:hover {
    color: #000;
}

.slider-nav .nav-block {
    margin-bottom: 20px;
}

.slider-nav {
    margin-top: 20px !important;
}




    .slider-nav a {
        display: block;
        text-decoration: none;
        margin-bottom: 5px;
    }

        .slider-nav a:hover {
            text-decoration: underline;
        }

a.rh-link:hover {
    font-weight: 500;
}

.slider-container {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    border-radius: 10px;
}

.slider-wrapper {
    position: relative;
    height: 510px; /* adjust based on your design */
    overflow: hidden;
}

.slider-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    border-radius: 20px;
    overflow: hidden;
    background: #3b917b;
    display: none;
    min-height: 500px;
}

    .slider-slide.active {
        display: block;
    }

    /* Polygon shape using pseudo-element */
    .slider-slide::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 77%;
        height: 100%;
        background: linear-gradient(to bottom right, #298970, #166250);
        clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
        z-index: 0;
    }

/* Content sits on top of polygon */
.slider-content,
.slider-image-link {
    position: absolute;
    z-index: 2;
    color: #fff;
}

.slider-slide.active {
    opacity: 1;
    z-index: 2;
}

.slider-content h2 {
    margin-bottom: 10px;
}

.slider-content h6 {
    margin-bottom: 5px;
    font-weight: 500;
}

.slider-bullets .bullet {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 20px 5px 5px 5px;
    border-radius: 50%;
    background: #aaa;
    cursor: pointer;
    transition: background 0.3s ease;
}

    .slider-bullets .bullet.active {
        background: #0073aa;
    }


.section-rh-two {
    background: linear-gradient(to bottom, #ffffff, #F4F4E0);
    padding: 60px 0;
}

.rh-title-h2 {
    font-size: 70px;
    margin-bottom: 10px;
}

.rh-description {
    font-size: 16px;
    color: #555;
}

.solution-box {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin: -40px 20px 0 20px;
    height: 130px;
}

.rh-box-p {
    font-size: 14px;
    margin-bottom: 20px;
    color: #333;
}

.rh-link-p {
    color: #01724A;
    margin-bottom: 0;
    font-size: 13px;
}

    .rh-link-p a {
        color: #01724A;
    }

.arrow-link {
    position: absolute;
    top: 84px;
    right: auto;
    margin-left: 50px;
    font-size: 18px;
    color: #01724A;
    text-decoration: none;
    transition: color 0.3s;
}

    .arrow-link:hover {
        color: #005f8d;
    }

/* Slider container */
.section-rh-three {
    padding: 60px 0;
}

.rh-title-h3 {
    font-size: 50px;
}

.rh-description {
    font-size: 16px;
}

.caption {
    font-size: 11px;
    margin-bottom: 5px;
}

.news-h5 {
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 5px;
}

.news-p {
    font-size: 12px;
    overflow: hidden;
    margin-top: 15px;
    white-space: normal
}

.rh-slider-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .rh-slider-wrapper::-webkit-scrollbar {
        display: none;
    }

/* Track contains all cards */
.rh-slider-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
    will-change: transform;
}

/* Each card */
.rh-card {
    background: linear-gradient(to bottom, #ffffff, #F4F4E0);
    border-radius: 8px;
    flex: 0 0 calc(33.333% - 20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    min-height: 100%; /* Ensure equal height */
}

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

    .rh-card img {
        width: 100%;
        border-bottom: 3px solid #ccc;
    }

.rh-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
}

.rh-btn {
    margin-top: auto;
    align-self: flex-start;
    padding: 8px 16px;
    background: transparent;
    border: 2px solid #333;
    color: #333;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    transition: background 0.3s;
}

    .rh-btn:hover {
        color: #333;
    }

.slider-arrow {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    cursor: pointer;
    z-index: 10;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

    .slider-arrow:hover {
        opacity: 1;
    }

#section-rh-four .rh-green-bg {
    background: linear-gradient(to right, #35A987, #22604A);
    padding: 60px 0;
    overflow: hidden;
    position: relative;
}

.rh-title-h5 {
    font-size: 40px;
}

.rh-description {
    font-size: 16px;
}

.rh-image-slider-track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}

/* Each slide */
.rh-img-slide {
    flex: 0 0 auto;
    width: 300px; /* or use JS for dynamic */
    margin-right: 20px;
}

/* INNER CONTAINER TO PRESERVE RADIUS */
.img-inner {
    overflow: hidden;
    border-radius: 20px;
    width: 100%;
    height: 100%;
}

    /* IMAGE */
    .img-inner img {
        width: 100%;
        height: auto;
        display: block;
    }

.rh-img-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

.slider-wrapper-rh {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
}

/* Viewport limits visible area */
.slider-viewport {
    overflow: hidden;
    Padding: 0 60px;
}

/* Blur overlays */
.blur-mask {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

    .blur-mask.left {
        left: 0;
        background: linear-gradient(to right, #35A987, rgba(53, 169, 135, 0));
    }

    .blur-mask.right {
        right: 0;
        background: linear-gradient(to left, #22604A, rgba(34, 96, 74, 0));
    }

.fade-in-stagger {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

    .fade-in-stagger.visible {
        opacity: 1;
        transform: translateY(0);
    }

.popup-trigger img {
    cursor: pointer;
    transition: transform 0.3s ease;
    min-height: 370px;
    max-height: 400px;
    bottom: 0;
    top: 50px;
    position: relative;
    left: 190px;
    right: 0;
}

    .popup-trigger img:hover {
        transform: scale(1.02);
    }

#media-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#popup-inner-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    background: #fff;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.download-btn-rh {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    display: inline-block;
    background: #3b917b;
    padding: 10px 20px;
}

a.download-btn-rh {
    font-size: 13px;
    color: #fff;
}

    a.download-btn-rh:hover {
        color: #f5f5f5;
    }

.download-icon {
    width: 20px; /* Adjust as needed */
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    margin-right: 5px;
}

.download-btn-rh:hover img.download-icon {
    transform: scale(1.1);
}

/* Category Button */
.six-button-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.animated-btn {
    display: flex;
    flex: 1 1 calc(16.66% - 15px);
    padding: 15px 10px;
    text-align: left;
    background-color: #3C5D6B;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    border: 2px solid #D0ED6B;
    margin: 5px;
    border-radius: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    gap: 12px;
    align-items: center;
}

    .animated-btn:hover {
        background-color: #2C4A57;
        color: #fff;
        transform: translateY(-5px);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    }

    .animated-btn img {
        width: 32px;
        height: 32px;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .animated-btn:hover img {
        transform: scale(1.1);
    }