/* =========================================================
   ELDER LABORATORIES
   ABOUT / WHO WE ARE PAGE
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');


/* =========================================================
   ELDER LABORATORIES BRAND COLORS
   ========================================================= */

:root {
    --elder-deep-blue: #133868;
    --elder-brand-blue: #234E86;
    --elder-primary-blue: #3978CB;
    --elder-medium-blue: #538AD2;
    --elder-light-blue: #8DB2E1;
    --elder-soft-blue: #E8EFF9;
    --elder-very-light-blue: #F5F8FC;
    --elder-dark: #0B1A2D;
    --elder-body-text: #3F4F63;
    --elder-muted-text: #718096;
    --elder-white: #FFFFFF;
    --elder-border: #DBE6F5;
    --elder-soft-border: #E1EBF7;
    --elder-shadow: rgba(19, 56, 104, 0.08);
    --elder-shadow-medium: rgba(19, 56, 104, 0.14);
    --elder-shadow-strong: rgba(19, 56, 104, 0.20);
}


/* =========================================================
   COMMON
   ========================================================= */

.clsAboutMain,
.clsAboutHero {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    color: var(--elder-body-text);
}

.clsAboutMain {
    position: relative;
    background: var(--elder-white);
    overflow: hidden;
}



    .clsAboutMain::after {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        bottom: 80px;
        left: -190px;
        border-radius: 50%;
        background: rgba(57, 120, 203, 0.035);
        pointer-events: none;
    }


.clsAboutTitle,
.clsWhoWeAreTitle,
.clsAboutFeatureTitle,
.clsOurValuesTitle,
.clsPurposeTitle,
.clsAboutCTATitle {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    letter-spacing: 0;
}


.clsValueTitle {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0;
}


.clsAboutTitle {
    font-weight: 400;
    letter-spacing: 0;
}


.clsWhoWeAreTitle {
    font-weight: 400;
    letter-spacing: 0;
}


.clsWhoWeAreLead {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    line-height: 1.8;
}


.clsWhoWeAreParagraph,
.clsAboutFeatureDescription,
.clsValueDescription,
.clsPurposeDescription,
.clsAboutCTADescription {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.8;
}


.clsAboutNavLink {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
}


.clsSectionLabel,
.clsAboutEyebrow {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
}


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

.clsAboutHero {
    position: relative;
    background: radial-gradient(circle at 85% 20%, rgba(57, 120, 203, 0.12), transparent 28%), radial-gradient(circle at 10% 90%, rgba(141, 178, 225, 0.14), transparent 30%), var(--elder-very-light-blue);
    border-bottom: 1px solid var(--elder-border);
    overflow: hidden;
}


    .clsAboutHero::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        left: -100px;
        top: -90px;
        border: 1px solid rgba(35, 78, 134, 0.10);
        border-radius: 50%;
        animation: elderHeroFloat 8s ease-in-out infinite;
    }


    .clsAboutHero::after {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        right: -150px;
        top: -150px;
        border-radius: 50%;
        border: 1px solid rgba(35, 78, 134, 0.08);
        box-shadow: 0 0 0 30px rgba(35, 78, 134, 0.025), 0 0 0 60px rgba(35, 78, 134, 0.018);
        animation: elderHeroFloat 10s ease-in-out infinite reverse;
    }


.clsAboutHeroContent {
    position: relative;
    z-index: 1;
    padding: 70px 0 65px;
    animation: elderFadeUp 0.8s ease both;
}


.clsAboutEyebrow,
.clsSectionLabel {
    display: inline-block;
    color: var(--elder-brand-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
}


.clsAboutEyebrow {
    position: relative;
    padding-left: 28px;
}


    .clsAboutEyebrow::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 18px;
        height: 2px;
        background: var(--elder-primary-blue);
        transform: translateY(-50%);
    }


.clsAboutTitle {
    margin: 10px 0 18px;
    color: var(--elder-deep-blue);
    font-size: 46px;
    font-weight: 400;
    line-height: 1.15;
    text-shadow: 0 8px 25px rgba(19, 56, 104, 0.08);
}


.clsAboutBreadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: var(--elder-muted-text);
    font-size: 13px;
}


.clsAboutBreadcrumbLink {
    color: var(--elder-brand-blue);
    font-weight: 600;
    transition: color 0.2s ease;
}


    .clsAboutBreadcrumbLink:hover {
        color: var(--elder-primary-blue);
    }


.clsAboutBreadcrumbCurrent {
    color: var(--elder-body-text);
    font-weight: 600;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.clsAboutLayout {
    position: relative;
    z-index: 1;
    display: block;
}

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

.clsWhoWeAreContent {
    position: relative;
    width: 100%;
    animation: elderFadeUp 0.8s ease both;
}


.clsWhoWeAreHeading {
    position: relative;
    max-width: 760px;
    margin-bottom: 28px;
}


    .clsWhoWeAreHeading::after {
        content: "";
        display: block;
        width: 55px;
        height: 3px;
        margin-top: 22px;
        background: linear-gradient( 90deg, var(--elder-brand-blue), var(--elder-light-blue) );
        transform-origin: right center;
        animation: elderHeadingSwipe 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

@keyframes elderHeadingSwipe {

    0% {
        width: 200px;
        opacity: 0;
    }

    20% {
        opacity: 0.5;
    }

    100% {
        width: 55px;
        opacity: 1;
    }
}


.clsWhoWeAreTitle {
    margin: 0;
    color: var(--elder-deep-blue);
    font-family: 'DM Serif Display', serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.3px;
}


.clsWhoWeAreIntroduction {
    max-width: 820px;
}


.clsWhoWeAreParagraph {
    margin: 0 0 20px;
    color: #55657A;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.1px;
}


.clsWhoWeAreLead {
    position: relative;
    margin: 0 0 22px;
    padding-left: 18px;
    color: #172A46;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 1.75;
    font-weight: 600;
}


    .clsWhoWeAreLead::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 3px;
        background: var(--elder-brand-blue);
    }
/* =========================================================
   FEATURE
   ========================================================= */

.clsAboutFeature {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    margin-top: 25px;
    background: var(--elder-soft-blue);
    overflow: hidden;
    box-shadow: 0 15px 45px var(--elder-shadow);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}


    .clsAboutFeature + .clsAboutStats {
        margin-bottom: 0;
    }

    .clsAboutFeature:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 55px var(--elder-shadow-medium);
    }


    .clsAboutFeature::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        right: -90px;
        bottom: -90px;
        border: 1px solid rgba(35, 78, 134, 0.10);
        border-radius: 50%;
        pointer-events: none;
        animation: elderSlowRotate 16s linear infinite;
    }


.clsAboutFeatureImage {
    min-height: 350px;
    overflow: hidden;
    position: relative;
}


    .clsAboutFeatureImage::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(19, 56, 104, 0) 60%, rgba(19, 56, 104, 0.12) 100% );
        pointer-events: none;
    }


#IDAboutFeatureImageElement {
    width: 100%;
    height: 350px;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s ease;
}


.clsAboutFeature:hover #IDAboutFeatureImageElement {
    transform: scale(1.035);
}


.clsAboutImagePlaceholder {
    width: 100%;
    height: 100%;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--elder-brand-blue);
    background: var(--elder-soft-blue);
}


#IDAboutFeatureIcon {
    font-size: 62px;
}


#IDAboutFeatureImageText {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}


.clsAboutFeatureContent {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 45px;
}


.clsAboutFeatureNumber {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--elder-brand-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}


    .clsAboutFeatureNumber::after {
        content: "";
        width: 30px;
        height: 1px;
        background: var(--elder-light-blue);
    }


.clsAboutFeatureTitle {
    margin: 0 0 15px;
    color: var(--elder-deep-blue);
    font-size: 25px;
    font-weight: 400;
    line-height: 1.25;
}


.clsAboutFeatureDescription {
    margin: 0;
    color: var(--elder-body-text);
    font-size: 14px;
    line-height: 1.8;
}
/* =========================================================
   STATS
   ========================================================= */

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


.clsAboutStatCard {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 23px 20px;
    border: 1px solid var(--elder-border);
    background: var(--elder-white);
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(19, 56, 104, 0.035);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}


    .clsAboutStatCard::before {
        content: "";
        position: absolute;
        width: 80px;
        height: 80px;
        right: -40px;
        top: -40px;
        border-radius: 50%;
        background: rgba(57, 120, 203, 0.05);
        transition: transform 0.4s ease;
    }


    .clsAboutStatCard:hover {
        transform: translateY(-5px);
        border-color: var(--elder-light-blue);
        box-shadow: 0 14px 35px var(--elder-shadow);
    }


        .clsAboutStatCard:hover::before {
            transform: scale(1.8);
        }


.clsAboutStatIcon {
    position: relative;
    z-index: 1;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--elder-soft-blue);
    color: var(--elder-brand-blue);
    font-size: 20px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}


.clsAboutStatCard:hover .clsAboutStatIcon {
    background: var(--elder-brand-blue);
    color: var(--elder-white);
    transform: rotate(-5deg);
}


.clsAboutStatCard > div:last-child {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.clsAboutStatValue {
    color: var(--elder-deep-blue);
    font-size: 15px;
    font-weight: 800;
}


.clsAboutStatLabel {
    color: var(--elder-muted-text);
    font-size: 11px;
}
/* =========================================================
   VALUES
   ========================================================= */

.clsOurValues {
    position: relative;
    margin-top: 45px;
}


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


.clsValueCard {
    position: relative;
    padding: 30px 25px;
    border: 1px solid var(--elder-border);
    background: var(--elder-white);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}


    .clsValueCard::before {
        content: "";
        position: absolute;
        width: 110px;
        height: 110px;
        right: -60px;
        top: -60px;
        border-radius: 50%;
        background: rgba(35, 78, 134, 0.045);
        transition: transform 0.45s ease;
    }


    .clsValueCard::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient( 90deg, var(--elder-brand-blue), var(--elder-light-blue) );
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s ease;
    }


    .clsValueCard:hover {
        transform: translateY(-6px);
        border-color: var(--elder-light-blue);
        box-shadow: 0 16px 35px var(--elder-shadow);
    }


        .clsValueCard:hover::before {
            transform: scale(1.7);
        }


        .clsValueCard:hover::after {
            transform: scaleX(1);
        }


.clsValueIcon {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--elder-soft-blue);
    color: var(--elder-brand-blue);
    font-size: 21px;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}


.clsValueCard:hover .clsValueIcon {
    background: var(--elder-brand-blue);
    color: var(--elder-white);
    transform: translateY(-2px);
}


.clsValueTitle {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: var(--elder-deep-blue);
    font-size: 18px;
    font-weight: 700;
}


.clsValueDescription {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--elder-body-text);
    font-size: 13px;
    line-height: 1.75;
}
/* =========================================================
   PURPOSE
   ========================================================= */

.clsOurPurpose {
    position: relative;
    margin-top: 55px;
}


.clsPurposeCard {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 35px;
    background: radial-gradient( circle at 90% 20%, rgba(83, 138, 210, 0.20), transparent 28% ), linear-gradient( 135deg, #133868 0%, #234E86 100% );
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(19, 56, 104, 0.18);
}


    .clsPurposeCard::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        right: -100px;
        bottom: -130px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 50%;
        box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.025), 0 0 0 60px rgba(255, 255, 255, 0.015);
        animation: elderSlowRotate 18s linear infinite;
    }


    .clsPurposeCard::after {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        left: -50px;
        top: -50px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.04);
    }


.clsPurposeIcon {
    position: relative;
    z-index: 1;
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--elder-light-blue);
    font-size: 24px;
    transition: transform 0.4s ease;
}


.clsPurposeCard:hover .clsPurposeIcon {
    transform: rotate(8deg) scale(1.05);
}


.clsPurposeContent {
    position: relative;
    z-index: 1;
}


    .clsPurposeContent .clsSectionLabel {
        color: var(--elder-light-blue);
    }


.clsPurposeTitle {
    margin: 8px 0 12px;
    color: var(--elder-white);
    font-size: 25px;
    font-weight: 400;
    line-height: 1.25;
}


.clsPurposeDescription {
    max-width: 720px;
    margin: 0;
    color: #E8EFF9;
    font-size: 14px;
    line-height: 1.8;
}
/* =========================================================
   CTA
   ========================================================= */

.clsAboutCTA {
    position: relative;
    margin-top: 55px;
    padding: 45px;
    border: 1px solid var(--elder-border);
    background: radial-gradient( circle at 100% 0%, rgba(57, 120, 203, 0.08), transparent 32% ), var(--elder-very-light-blue);
    overflow: hidden;
}


    .clsAboutCTA::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        right: -90px;
        top: -90px;
        border-radius: 50%;
        border: 1px solid rgba(35, 78, 134, 0.10);
        animation: elderHeroFloat 9s ease-in-out infinite;
    }


    .clsAboutCTA::after {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        left: -50px;
        bottom: -50px;
        border-radius: 50%;
        background: rgba(141, 178, 225, 0.10);
    }


.clsAboutCTAContent {
    position: relative;
    z-index: 1;
    width: 100%;
}


.clsAboutCTATitle {
    max-width: 650px;
    margin: 8px 0 12px;
    color: var(--elder-deep-blue);
    font-size: 27px;
    font-weight: 400;
    line-height: 1.3;
}


.clsAboutCTADescription {
    max-width: 680px;
    margin: 0;
    color: var(--elder-body-text);
    font-size: 14px;
    line-height: 1.8;
}


.clsAboutCTAActions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


.clsPrimaryCTA,
.clsSecondaryCTA {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 45px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}


.clsPrimaryCTA {
    background: var(--elder-brand-blue);
    color: var(--elder-white);
    box-shadow: 0 8px 20px rgba(35, 78, 134, 0.18);
}


    .clsPrimaryCTA:hover {
        background: var(--elder-deep-blue);
        color: var(--elder-white);
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(19, 56, 104, 0.22);
    }


.clsSecondaryCTA {
    border: 1px solid var(--elder-deep-blue);
    color: var(--elder-deep-blue);
    background: var(--elder-white);
}


    .clsSecondaryCTA:hover {
        background: var(--elder-deep-blue);
        color: var(--elder-white);
        transform: translateY(-2px);
    }
/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes elderFadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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


@keyframes elderFadeLeft {
    from {
        opacity: 0;
        transform: translateX(-25px);
    }

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


@keyframes elderFadeRight {
    from {
        opacity: 0;
        transform: translateX(25px);
    }

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


@keyframes elderHeroFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

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


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

    to {
        transform: rotate(360deg);
    }
}
/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .clsAboutLayout {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 60px;
        align-items: start;
    }

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


    .clsAboutFeatureImage,
    .clsAboutImagePlaceholder {
        min-height: 280px;
    }


    #IDAboutFeatureImageElement {
        height: 280px;
    }


    .clsAboutStats,
    .clsValuesGrid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .clsAboutMain {
        padding: 50px 0;
    }


    .clsAboutHeroContent {
        padding: 50px 0;
    }


    .clsAboutTitle {
        font-size: 36px;
    }


    .clsAboutLayout {
        display: block;
    }

    .clsWhoWeAreTitle {
        font-size: 29px;
    }


    .clsWhoWeAreLead {
        font-size: 16px;
    }


    .clsAboutFeatureContent {
        padding: 30px 25px;
    }


    .clsAboutFeatureImage,
    .clsAboutImagePlaceholder {
        min-height: 230px;
    }


    #IDAboutFeatureImageElement {
        height: 230px;
    }


    #IDAboutFeatureIcon {
        font-size: 48px;
    }


    .clsOurValues {
        margin-top: 60px;
    }


    .clsPurposeCard {
        flex-direction: column;
        padding: 30px 25px;
    }


    .clsPurposeTitle {
        font-size: 22px;
    }


    .clsAboutCTA {
        padding: 30px 25px;
    }


    .clsAboutCTATitle {
        font-size: 23px;
    }


    .clsAboutCTAActions {
        flex-direction: column;
        align-items: stretch;
    }


    .clsPrimaryCTA,
    .clsSecondaryCTA {
        width: 100%;
    }


    .clsAboutHero::after {
        width: 260px;
        height: 260px;
    }
}
/* =========================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .clsAboutTitle {
        font-size: 31px;
    }


    .clsAboutBreadcrumb {
        font-size: 12px;
    }


    .clsWhoWeAreTitle {
        font-size: 26px;
    }


    .clsWhoWeAreParagraph {
        font-size: 14px;
    }


    .clsAboutStatCard {
        padding: 18px 15px;
    }


    .clsAboutFeatureContent {
        padding: 25px 20px;
    }


    .clsPurposeCard {
        padding: 25px 20px;
    }


    .clsAboutCTA {
        padding: 25px 20px;
    }
}
/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .clsAboutHero::before,
    .clsAboutHero::after,
    .clsAboutFeature::after,
    .clsPurposeCard::before,
    .clsAboutCTA::before {
        animation: none;
    }


    .clsAboutHeroContent,
    .clsWhoWeAreContent {
        animation: none;
    }


    .clsAboutFeature,
    .clsAboutStatCard,
    .clsValueCard,
    .clsPrimaryCTA,
    .clsSecondaryCTA {
        transition: none;
    }
}
/* =========================================================
   LIQUID ABSTRACT BACKGROUND
   ========================================================= */

.clsAboutLiquidShape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    filter: blur(45px);
    opacity: 0.14;
    transform-origin: center;
}


.clsAboutLiquidShapeOne {
    width: 420px;
    height: 230px;
    top: 12%;
    right: -180px;
    background: #DBE6F5;
    transform: rotate(-20deg);
    animation: elderLiquidOne 18s ease-in-out infinite;
}


.clsAboutLiquidShapeTwo {
    width: 340px;
    height: 190px;
    top: 43%;
    left: -170px;
    background: #8DB2E1;
    transform: rotate(25deg);
    opacity: 0.13;
    animation: elderLiquidTwo 22s ease-in-out infinite;
}


.clsAboutLiquidShapeThree {
    width: 400px;
    height: 220px;
    bottom: 8%;
    right: -170px;
    background: #538AD2;
    transform: rotate(-15deg);
    opacity: 0.10;
    animation: elderLiquidThree 25s ease-in-out infinite;
}
/* =========================================================
   LIQUID ANIMATIONS
   ========================================================= */

@keyframes elderLiquidOne {

    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-20deg) scale(1);
    }

    50% {
        transform: translate3d(-45px, 25px, 0) rotate(-8deg) scale(1.08);
    }
}


@keyframes elderLiquidTwo {

    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(25deg) scale(1);
    }

    50% {
        transform: translate3d(45px, -30px, 0) rotate(10deg) scale(1.12);
    }
}


@keyframes elderLiquidThree {

    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-15deg) scale(1);
    }

    50% {
        transform: translate3d(-35px, -25px, 0) rotate(5deg) scale(1.10);
    }
}
/* =========================================================
   KEEP ABOUT CONTENT ABOVE LIQUID EFFECT
   ========================================================= */

.clsAboutLayout {
    position: relative;
    z-index: 2;
}


.clsAboutHeroContent {
    position: relative;
    z-index: 2;
}
/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .clsAboutLiquidShapeOne {
        width: 280px;
        height: 170px;
        right: -150px;
    }


    .clsAboutLiquidShapeTwo {
        width: 240px;
        height: 150px;
        left: -130px;
    }


    .clsAboutLiquidShapeThree {
        width: 260px;
        height: 160px;
        right: -140px;
    }
}
/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .clsAboutLiquidShapeOne,
    .clsAboutLiquidShapeTwo,
    .clsAboutLiquidShapeThree {
        animation: none;
    }
}
/* =========================================================
   MOUSE WATER EFFECT
   ========================================================= */

.clsAboutWaterEffect {
    position: absolute;
    top: 0;
    left: 0;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient( circle at center, rgba(141, 178, 225, 0.28) 0%, rgba(83, 138, 210, 0.18) 25%, rgba(35, 78, 134, 0.08) 45%, rgba(219, 230, 245, 0) 72% );
    filter: blur(18px);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.15s ease;
}


.clsAboutHero.clsWaterActive .clsAboutWaterEffect {
    opacity: 1;
}

.clsAboutWaterEffect::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(83, 138, 210, 0.22);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: elderWaterRippleOne 3s ease-out infinite;
}


.clsAboutWaterEffect::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(35, 78, 134, 0.18);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: elderWaterRippleTwo 3s ease-out infinite;
}


@keyframes elderWaterRippleOne {

    0% {
        width: 120px;
        height: 120px;
        opacity: 0.8;
    }

    100% {
        width: 360px;
        height: 360px;
        opacity: 0;
    }
}


@keyframes elderWaterRippleTwo {

    0% {
        width: 80px;
        height: 80px;
        opacity: 0.6;
    }

    100% {
        width: 260px;
        height: 260px;
        opacity: 0;
    }
}
/* =========================================================
ABOUT ABSTRACT DESIGN ELEMENTS
========================================================= */


.clsAboutMain {
    position: relative;
    overflow: hidden;
}
/* common abstract shape */

.clsAboutAbstract {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
/* top right soft circle */

.clsAboutAbstractOne {
    width: 350px;
    height: 350px;
    right: -150px;
    top: 120px;
    background: radial-gradient( circle, rgba(36,92,160,0.15), transparent 70% );
}
/* left bottom circle */

.clsAboutAbstractTwo {
    width: 280px;
    height: 280px;
    left: -120px;
    bottom: 300px;
    background: radial-gradient( circle, rgba(90,150,220,0.12), transparent 70% );
}
/* center wave */

.clsAboutAbstractThree {
    width: 500px;
    height: 500px;
    right: -250px;
    bottom: -200px;
    border: 1px solid rgba(36,92,160,0.08);
}

.clsAboutContent {
    position: relative;
    z-index: 2;
}

.clsAboutMain {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 135deg, #f7fbff, #eaf5ff );
}
    /* Abstract floating shapes */
    .clsAboutMain::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at 20% 30%, rgba(0,120,255,0.15), transparent 35% ), radial-gradient( circle at 80% 70%, rgba(0,180,200,0.12), transparent 40% ), radial-gradient( circle at 50% 10%, rgba(255,255,255,0.8), transparent 30% );
        animation: aboutMainFloat 18s infinite alternate ease-in-out;
        z-index: 0;
    }


@keyframes aboutMainFloat {

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

    50% {
        transform: translate(-30px,20px) scale(1.05);
    }

    100% {
        transform: translate(30px,-20px) scale(1);
    }
}

.rain-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}



@keyframes rainFall {


    from {
        transform: translateY(-120px);
    }


    to {
        transform: translateY(110vh);
    }
}

.water-ripple {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0,130,255,.25);
    animation: ripple 3s infinite;
}



@keyframes ripple {


    0% {
        transform: scale(.2);
        opacity: .8;
    }


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


.water-drop-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}



.water-ripple {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    border-radius: 50%;
    border: 2px solid rgba(0,120,255,.35);
    animation: waterRipple 1.8s ease-out;
}



    .water-ripple::before {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        background: rgba(255,255,255,.6);
    }



@keyframes waterRipple {


    0% {
        transform: scale(.2);
        opacity: 1;
    }


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

.water-drop-effect {
    position: absolute;
    width: 80px;
    height: 80px;
    transform: translate(-50%,-50%);
}



    .water-drop-effect .drop {
        position: absolute;
        width: 12px;
        height: 12px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background: radial-gradient( circle at 30% 30%, white, #7cc9ff );
        border-radius: 50%;
        animation: dropImpact .5s ease-out;
    }



.ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(100,190,255,.5);
    transform: translate(-50%,-50%);
    animation: rippleExpand 2s ease-out;
}



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


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



@keyframes rippleExpand {


    from {
        width: 20px;
        height: 20px;
        opacity: 1;
    }


    to {
        width: 180px;
        height: 180px;
        opacity: 0;
    }
}



@keyframes dropImpact {


    0% {
        transform: translate(-50%,-100px) scale(.5);
    }


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


    100% {
        transform: translate(-50%,0) scale(.8);
    }
}

.water-drop-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
}



.water-drop-effect {
    position: absolute;
    width: 100px;
    height: 100px;
    transform: translate(-50%,-50%);
}



.drop {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 30% 30%,white,#5aa9e6);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    animation: dropHit .5s ease-out;
}



.ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 2px solid rgba(60,150,220,.45);
    transform: translate(-50%,-50%);
}



.ripple1 {
    animation: rippleEffect 1.5s ease-out;
}



.ripple2 {
    animation: rippleEffect 1.8s ease-out .15s;
}



@keyframes dropHit {

    0% {
        transform: translate(-50%,-80px) scale(.5);
        opacity: 0;
    }


    70% {
        transform: translate(-50%,0) scale(1.3);
        opacity: 1;
    }


    100% {
        transform: translate(-50%,0) scale(.8);
    }
}



@keyframes rippleEffect {


    from {
        width: 20px;
        height: 20px;
        opacity: .8;
    }


    to {
        width: 180px;
        height: 180px;
        opacity: 0;
    }
}

.clsAboutIntroCard {
    padding: 35px 30px;
    background: white;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,70,150,0.08);
}


    .clsAboutIntroCard::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        right: -70px;
        top: -70px;
        background: radial-gradient(circle, rgba(42,117,255,.15), transparent 70%);
        border-radius: 50%;
    }



.clsAboutIntroBadge {
    color: #1f63b5;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 700;
}



.clsAboutIntroCard h2 {
    font-family: 'DM Serif Display',serif;
    font-size: 32px;
    color: #123968;
    margin-top: 20px;
}


    .clsAboutIntroCard h2 span {
        color: #1f6fc2;
    }



.clsAboutIntroCard p {
    margin-top: 20px;
    line-height: 1.8;
    color: #64748b;
}



.clsAboutHighlights {
    margin-top: 30px;
}


.clsHighlightItem {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}


    .clsHighlightItem i {
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eef6ff;
        color: #1f6fc2;
        border-radius: 12px;
        font-size: 20px;
    }



    .clsHighlightItem h4 {
        margin: 0;
        font-size: 16px;
        color: #173b6d;
    }


    .clsHighlightItem span {
        font-size: 13px;
        color: #7b8794;
    }

.clsAboutSidebarIntro {
    padding: 35px 25px;
}


.clsAboutSidebarLabel {
    font-size: 13px;
    letter-spacing: 2px;
    color: #2467b5;
    font-weight: 700;
    margin-bottom: 20px;
}


.clsAboutSidebarIntro h2 {
    font-family: 'DM Serif Display',serif;
    font-size: 34px;
    line-height: 1.25;
    color: #173b6d;
}


    .clsAboutSidebarIntro h2 span {
        color: #276fc2;
    }


.clsAboutSidebarIntro p {
    margin-top: 20px;
    line-height: 1.8;
    color: #667892;
}


.clsAboutMiniPoints {
    margin-top: 30px;
}


    .clsAboutMiniPoints span {
        display: block;
        margin-bottom: 15px;
        color: #173b6d;
        font-weight: 600;
    }


    .clsAboutMiniPoints i {
        color: #276fc2;
        margin-right: 10px;
    }

/* =========================================================
   ABOUT HERO - PRIVACY STYLE
   ========================================================= */

.clsAboutHero {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: #123f63;
    color: #ffffff;
}


.clsAboutHeroBackground {
    position: absolute;
    inset: 0;
    background-image: url('/images/about/elder-laboratories-quality.png');
    background-size: cover;
    background-position: 62% center;
    background-repeat: no-repeat;
    z-index: 0;
}


.clsAboutHeroContent {
    position: relative;
    z-index: 3;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 760px;
    padding: 70px 0 110px;
    animation: elderFadeUp 0.8s ease both;
}


.clsAboutEyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding-left: 28px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}


    .clsAboutEyebrow::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 18px;
        height: 2px;
        background: #8DB2E1;
        transform: translateY(-50%);
    }


.clsAboutTitle {
    margin: 14px 0 12px;
    color: #ffffff;
    font-family: 'DM Serif Display', serif;
    font-size: 58px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.5px;
}


.clsAboutHeroSubtitle {
    margin: 0;
    color: #E8F2FB;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
}


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

.clsAboutHeroDecor {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    pointer-events: none;
    z-index: 2;
}


.clsAboutHeroDecorOne {
    width: 220px;
    height: 220px;
    left: -90px;
    top: -80px;
    box-shadow: 0 0 0 25px rgba(255,255,255,0.025), 0 0 0 50px rgba(255,255,255,0.018);
    animation: elderHeroFloat 9s ease-in-out infinite;
}


.clsAboutHeroDecorTwo {
    width: 380px;
    height: 380px;
    right: -170px;
    top: -180px;
    box-shadow: 0 0 0 35px rgba(255,255,255,0.025), 0 0 0 70px rgba(255,255,255,0.015);
    animation: elderHeroFloat 12s ease-in-out infinite reverse;
}


/* =========================================================
   CURVED HERO BOTTOM
   ========================================================= */

.clsAboutHeroWave {
    position: absolute;
    left: -5%;
    bottom: -105px;
    width: 110%;
    height: 170px;
    background: #ffffff;
    border-radius: 50% 50% 0 0 / 65% 65% 0 0;
    z-index: 4;
}

@keyframes elderHeroFloat {

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

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

.clsAboutHeroBackground {
    position: absolute;
    inset: 0;
    background-image: url('/images/about/elder-laboratories-quality.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

.clsAboutHeroContent {
    position: relative;
    z-index: 3;
}

/* =========================================================
   WHO WE ARE - PREMIUM HERO
   ========================================================= */

.clsAboutHero {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: #0b4f7d;
    color: #ffffff;
}


/* =========================================================
   HERO BACKGROUND IMAGE
   ========================================================= */

.clsAboutHeroBackground {
    position: absolute;
    inset: 0;
    background-image: url('/images/about/elder-laboratories-quality.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}


/* =========================================================
   HERO BLUE OVERLAY
   ========================================================= */

.clsAboutHeroOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(4, 63, 101, 0.97) 0%, rgba(5, 76, 116, 0.91) 25%, rgba(8, 91, 130, 0.72) 48%, rgba(12, 103, 143, 0.48) 70%, rgba(12, 92, 130, 0.30) 100% );
    z-index: 1;
    pointer-events: none;
}


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

.clsAboutHeroContent {
    position: relative;
    z-index: 5;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 760px;
    padding: 70px 0 125px;
    animation: elderFadeUp 0.8s ease both;
}


.clsAboutEyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding-left: 28px;
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}


    .clsAboutEyebrow::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 18px;
        height: 2px;
        background: #dcecff;
        transform: translateY(-50%);
    }


.clsAboutTitle {
    margin: 14px 0 12px;
    color: #ffffff;
    font-family: 'DM Serif Display', serif;
    font-size: 58px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-shadow: 0 8px 25px rgba(0, 30, 60, 0.18);
}


.clsAboutHeroSubtitle {
    margin: 0;
    color: #edf7ff;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
}


/* =========================================================
   HERO DECORATIVE CIRCLES
   ========================================================= */

.clsAboutHeroDecor {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    pointer-events: none;
    z-index: 2;
}


.clsAboutHeroDecorOne {
    width: 220px;
    height: 220px;
    left: -100px;
    top: -80px;
    box-shadow: 0 0 0 25px rgba(255, 255, 255, 0.025), 0 0 0 50px rgba(255, 255, 255, 0.015);
    animation: elderHeroFloat 9s ease-in-out infinite;
}


.clsAboutHeroDecorTwo {
    width: 360px;
    height: 360px;
    right: -160px;
    top: -180px;
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.025), 0 0 0 60px rgba(255, 255, 255, 0.015);
    animation: elderHeroFloat 11s ease-in-out infinite reverse;
}

/* =========================================================
   PREMIUM SINUSOIDAL WAVE
   ========================================================= */

.clsAboutHeroWave {
    position: absolute;
    left: -5%;
    bottom: -1px;
    width: 110%;
    height: 145px;
    z-index: 4;
    background: transparent;
    overflow: hidden;
}


    .clsAboutHeroWave::before {
        content: "";
        position: absolute;
        left: -5%;
        bottom: 15px;
        width: 110%;
        height: 105px;
        background: #dcecff;
        border-radius: 48% 52% 0 0 / 70% 65% 0 0;
        transform: rotate(-1deg);
    }


    .clsAboutHeroWave::after {
        content: "";
        position: absolute;
        left: -5%;
        bottom: 0;
        width: 110%;
        height: 105px;
        background: #ffffff;
        border-radius: 48% 52% 0 0 / 70% 65% 0 0;
        transform: rotate(1deg);
    }

/* =========================================================
   ABOUT MAIN - PREMIUM LIGHT BACKGROUND
   ========================================================= */

.clsAboutMain {
    position: relative;
    overflow: hidden;
    background: radial-gradient( circle at 8% 20%, rgba(57, 120, 203, 0.08), transparent 28% ), radial-gradient( circle at 92% 60%, rgba(141, 178, 225, 0.10), transparent 30% ), linear-gradient( 135deg, #f7fbff 0%, #eef6ff 100% );
    padding-top: 45px;
}

/* =========================================================
   ABOUT ELDER INTRO
   ========================================================= */

.clsAboutSidebarIntro {
    padding: 45px 0 30px;
    max-width: 1000px;
    position: relative;
}


.clsAboutSidebarLabel {
    margin-bottom: 14px;
    color: #1670bd;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}


.clsAboutSidebarIntro h2 {
    margin: 0;
    color: #173f70;
    font-family: 'DM Serif Display', serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.3;
}


    .clsAboutSidebarIntro h2 span {
        color: #2678ca;
    }


.clsAboutSidebarIntro p {
    max-width: 900px;
    margin: 18px 0 22px;
    color: #7186a0;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.85;
}


.clsAboutMiniPoints {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 22px;
}


    .clsAboutMiniPoints span {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin: 0;
        color: #244a76;
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
    }


    .clsAboutMiniPoints i {
        color: #2378ca;
        font-size: 17px;
        margin: 0;
    }

/* =========================================================
   REMOVE HEAVY CARD FEEL
   ========================================================= */

.clsAboutFeature {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}


    .clsAboutFeature:hover {
        transform: none;
        box-shadow: none;
    }


.clsAboutStatCard,
.clsValueCard {
    border-radius: 0;
    box-shadow: none;
}


    .clsAboutStatCard:hover,
    .clsValueCard:hover {
        box-shadow: 0 10px 30px rgba(19, 56, 104, 0.08);
    }

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

@media (max-width: 768px) {

    .clsAboutHero {
        min-height: 440px;
    }


    .clsAboutHeroContent {
        min-height: 440px;
        padding: 55px 20px 105px;
    }


    .clsAboutTitle {
        font-size: 42px;
    }


    .clsAboutHeroSubtitle {
        font-size: 15px;
    }


    .clsAboutHeroWave {
        height: 100px;
    }


        .clsAboutHeroWave::before,
        .clsAboutHeroWave::after {
            height: 80px;
        }


    .clsAboutMain {
        padding-top: 25px;
    }


    .clsAboutSidebarIntro {
        padding: 35px 20px 25px;
    }


        .clsAboutSidebarIntro h2 {
            font-size: 29px;
        }


    .clsAboutMiniPoints {
        flex-direction: column;
        gap: 14px;
    }
}

/* =========================================================
   FINAL ELDER ABOUT HERO OVERRIDES
   Laboratory hero + sinusoidal double wave
   ========================================================= */

.clsAboutHero {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: #0b4f7d;
    color: #ffffff;
}

.clsAboutHeroBackground {
    position: absolute;
    inset: 0;
    background-image: url('/images/about/elder-laboratories-quality.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

.clsAboutHeroOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(4, 63, 101, 0.97) 0%, rgba(5, 76, 116, 0.91) 25%, rgba(8, 91, 130, 0.72) 48%, rgba(12, 103, 143, 0.48) 70%, rgba(12, 92, 130, 0.30) 100% );
    z-index: 1;
    pointer-events: none;
}

.clsAboutHeroContent {
    position: relative;
    z-index: 5;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 760px;
    padding: 70px 0 125px;
    animation: elderFadeUp 0.8s ease both;
}

.clsAboutEyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding-left: 28px;
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

    .clsAboutEyebrow::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 18px;
        height: 2px;
        background: #dcecff;
        transform: translateY(-50%);
    }

.clsAboutTitle {
    margin: 14px 0 12px;
    color: #ffffff;
    font-family: 'DM Serif Display', serif;
    font-size: 58px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-shadow: 0 8px 25px rgba(0, 30, 60, 0.18);
}

.clsAboutHeroSubtitle {
    margin: 0;
    color: #edf7ff;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
}

.clsAboutHeroDecor {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    pointer-events: none;
    z-index: 2;
}

.clsAboutHeroDecorOne {
    width: 220px;
    height: 220px;
    left: -100px;
    top: -80px;
    box-shadow: 0 0 0 25px rgba(255, 255, 255, 0.025), 0 0 0 50px rgba(255, 255, 255, 0.015);
    animation: elderHeroFloat 9s ease-in-out infinite;
}

.clsAboutHeroDecorTwo {
    width: 360px;
    height: 360px;
    right: -160px;
    top: -180px;
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.025), 0 0 0 60px rgba(255, 255, 255, 0.015);
    animation: elderHeroFloat 11s ease-in-out infinite reverse;
}

/* =========================================================
   SINUSOIDAL DOUBLE WAVE
   ========================================================= */

.clsAboutHeroWave {
    position: absolute;
    left: -5%;
    bottom: -1px;
    width: 110%;
    height: 145px;
    z-index: 10;
    background: transparent;
    overflow: hidden;
    pointer-events: none;
}

    .clsAboutHeroWave::before {
        content: "";
        position: absolute;
        left: -5%;
        bottom: 15px;
        width: 110%;
        height: 105px;
        background: #dcecff;
        border-radius: 48% 52% 0 0 / 70% 65% 0 0;
        transform: rotate(-1deg);
    }

    .clsAboutHeroWave::after {
        content: "";
        position: absolute;
        left: -5%;
        bottom: 0;
        width: 110%;
        height: 105px;
        background: #ffffff;
        border-radius: 48% 52% 0 0 / 70% 65% 0 0;
        transform: rotate(1deg);
    }

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

.clsAboutMain {
    position: relative;
    overflow: hidden;
    background: radial-gradient( circle at 8% 20%, rgba(57, 120, 203, 0.08), transparent 28% ), radial-gradient( circle at 92% 60%, rgba(141, 178, 225, 0.10), transparent 30% ), linear-gradient( 135deg, #f7fbff 0%, #eef6ff 100% );
    padding-top: 45px;
}

.clsAboutSidebarIntro {
    padding: 45px 0 30px;
    max-width: 1000px;
    position: relative;
}

.clsAboutSidebarLabel {
    margin-bottom: 14px;
    color: #1670bd;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.clsAboutSidebarIntro h2 {
    margin: 0;
    color: #173f70;
    font-family: 'DM Serif Display', serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.3;
}

    .clsAboutSidebarIntro h2 span {
        color: #2678ca;
    }

.clsAboutSidebarIntro p {
    max-width: 900px;
    margin: 18px 0 22px;
    color: #7186a0;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.85;
}

.clsAboutMiniPoints {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 22px;
}

    .clsAboutMiniPoints span {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin: 0;
        color: #244a76;
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
    }

    .clsAboutMiniPoints i {
        color: #2378ca;
        font-size: 17px;
        margin: 0;
    }

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

@media (max-width: 768px) {

    .clsAboutHero {
        min-height: 440px;
    }

    .clsAboutHeroContent {
        min-height: 440px;
        padding: 55px 20px 105px;
    }

    .clsAboutTitle {
        font-size: 42px;
    }

    .clsAboutHeroSubtitle {
        font-size: 15px;
    }

    .clsAboutHeroWave {
        height: 100px;
    }

        .clsAboutHeroWave::before,
        .clsAboutHeroWave::after {
            height: 80px;
        }

    .clsAboutMain {
        padding-top: 25px;
    }

    .clsAboutSidebarIntro {
        padding: 35px 20px 25px;
    }

        .clsAboutSidebarIntro h2 {
            font-size: 29px;
        }

    .clsAboutMiniPoints {
        flex-direction: column;
        gap: 14px;
    }
}

@media (max-width: 480px) {

    .clsAboutHero {
        min-height: 410px;
    }

    .clsAboutHeroContent {
        min-height: 410px;
        padding: 45px 18px 95px;
    }

    .clsAboutTitle {
        font-size: 34px;
    }

    .clsAboutHeroSubtitle {
        font-size: 14px;
    }

    .clsAboutHeroWave {
        height: 85px;
    }

        .clsAboutHeroWave::before,
        .clsAboutHeroWave::after {
            height: 68px;
        }

    .clsAboutSidebarIntro h2 {
        font-size: 27px;
    }
}
/* =========================================================
   ABOUT HERO - FINAL CLEAN VERSION
   ========================================================= */

.clsAboutHero {
    position: relative;
    min-height: 500px;
    overflow: hidden !important;
    background: #0b4f7d;
    color: #ffffff;
    border-bottom: none !important;
}


/* =========================================================
   HERO BACKGROUND IMAGE
   ========================================================= */

.clsAboutHeroBackground {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('/images/about/elder-laboratories-quality-banner.png') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    /*
       IMPORTANT:
       Image is positioned slightly toward the upper-middle
       so the Elder logo remains properly visible.
    */
    background-position: center 42% !important;
    z-index: 0 !important;
    overflow: hidden !important;
    border: none !important;
}


/* =========================================================
   BLUE HERO OVERLAY
   ========================================================= */

.clsAboutHeroOverlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient( 90deg, rgba(4, 63, 101, 0.96) 0%, rgba(5, 76, 116, 0.88) 25%, rgba(8, 91, 130, 0.62) 50%, rgba(12, 103, 143, 0.38) 75%, rgba(12, 92, 130, 0.20) 100% ) !important;
    z-index: 1 !important;
    pointer-events: none;
    border: none !important;
}


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

.clsAboutHeroDecor {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    pointer-events: none;
    z-index: 2;
}

.clsAboutHeroDecorOne {
    width: 220px;
    height: 220px;
    left: -90px;
    top: -80px;
    box-shadow: 0 0 0 25px rgba(255, 255, 255, 0.025), 0 0 0 50px rgba(255, 255, 255, 0.018);
    animation: elderHeroFloat 9s ease-in-out infinite;
}

.clsAboutHeroDecorTwo {
    width: 380px;
    height: 380px;
    right: -170px;
    top: -180px;
    box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.025), 0 0 0 70px rgba(255, 255, 255, 0.015);
    animation: elderHeroFloat 12s ease-in-out infinite reverse;
}


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

.clsAboutHeroContent {
    position: relative !important;
    z-index: 10 !important;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 760px;
    padding: 70px 0 105px;
    animation: elderFadeUp 0.8s ease both;
}


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

.clsAboutEyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding-left: 28px;
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

    .clsAboutEyebrow::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 18px;
        height: 2px;
        background: #8DB2E1;
        transform: translateY(-50%);
    }


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

.clsAboutTitle {
    margin: 14px 0 12px;
    color: #ffffff;
    font-family: 'DM Serif Display', serif;
    font-size: 58px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}


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

.clsAboutHeroSubtitle {
    margin: 0;
    color: #E8F2FB;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
}


/* =========================================================
   SINUSOIDAL WAVE
   ========================================================= */

.clsAboutHeroWave {
    position: absolute !important;
    left: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: 110px !important;
    z-index: 30 !important;
    pointer-events: none;
    overflow: hidden;
    line-height: 0;
}


    /* =========================================================
   WAVE SVG
   ========================================================= */

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


    /* =========================================================
   BACK LIGHT-BLUE WAVE
   ========================================================= */

    .clsAboutHeroWave .hero-wave-back {
        fill: #dcecff;
    }


    /* =========================================================
   FRONT WHITE WAVE
   ========================================================= */

    .clsAboutHeroWave .hero-wave-front {
        fill: #ffffff;
    }


/* =========================================================
   REMOVE OLD STRAIGHT BORDERS
   ========================================================= */

.clsAboutHero,
.clsAboutHeroBackground,
.clsAboutHeroOverlay {
    border-bottom: none !important;
}


/* =========================================================
   MAIN SECTION
   ========================================================= */

.clsAboutMain {
    position: relative;
    z-index: 2;
    margin-top: 0 !important;
    background: linear-gradient( 135deg, #f7fbff 0%, #eef7ff 50%, #e8f4ff 100% );
}


/* =========================================================
   DESKTOP IMAGE POSITION
   ========================================================= */

@media (min-width: 769px) {

    .clsAboutHeroBackground {
        background-position: center 42% !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .clsAboutHero {
        min-height: 470px;
    }

    .clsAboutHeroContent {
        min-height: 470px;
    }

    .clsAboutHeroWave {
        height: 95px !important;
    }
}


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

@media (max-width: 768px) {

    .clsAboutHero {
        min-height: 440px;
    }

    .clsAboutHeroContent {
        min-height: 440px;
        padding: 55px 0 85px;
    }

    .clsAboutTitle {
        font-size: 40px;
    }

    .clsAboutHeroSubtitle {
        font-size: 15px;
    }

    .clsAboutHeroWave {
        height: 78px !important;
    }

    .clsAboutHeroBackground {
        background-position: center 42% !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .clsAboutHero {
        min-height: 410px;
    }

    .clsAboutHeroContent {
        min-height: 410px;
    }

    .clsAboutTitle {
        font-size: 34px;
    }

    .clsAboutHeroWave {
        height: 65px !important;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .clsAboutHeroDecorOne,
    .clsAboutHeroDecorTwo,
    .clsAboutHeroContent {
        animation: none;
    }
}

/* =========================================================
   FINAL HERO WAVE - SOFT & SHALLOW
   ========================================================= */

.clsAboutHeroWave {
    position: absolute !important;
    left: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: 62px !important;
    z-index: 30 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

    .clsAboutHeroWave svg {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .clsAboutHeroWave .hero-wave-back {
        fill: #dcecff !important;
    }

    .clsAboutHeroWave .hero-wave-front {
        fill: #ffffff !important;
    }

/* =========================================================
   FINAL ABOUT HERO IMAGE + VISIBLE SINUSOIDAL WAVE
   ========================================================= */

/* IMAGE - MOVE SLIGHTLY DOWN */
.clsAboutHeroBackground {
    background-position: center calc(42% + 28px) !important;
}


/* =========================================================
   SINUSOIDAL WAVE
   ========================================================= */

.clsAboutHeroWave {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: 92px !important;
    display: block !important;
    overflow: hidden !important;
    z-index: 30 !important;
    pointer-events: none !important;
    line-height: 0 !important;
}


    /* SVG */
    .clsAboutHeroWave svg {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
    }


    /* BACK WAVE - MAKE IT VISIBLE */
    .clsAboutHeroWave .hero-wave-back {
        fill: #d6e9fb !important;
    }


    /* FRONT WHITE WAVE */
    .clsAboutHeroWave .hero-wave-front {
        fill: #ffffff !important;
    }


/* =========================================================
   REMOVE ANY OLD STRAIGHT LINE
   ========================================================= */

.clsAboutHero,
.clsAboutHeroBackground,
.clsAboutHeroOverlay {
    border-bottom: none !important;
}


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

@media (max-width: 768px) {

    .clsAboutHeroBackground {
        background-position: center calc(42% + 18px) !important;
    }

    .clsAboutHeroWave {
        height: 70px !important;
    }
}


@media (max-width: 480px) {

    .clsAboutHeroBackground {
        background-position: center calc(42% + 12px) !important;
    }

    .clsAboutHeroWave {
        height: 58px !important;
    }
}