/* =========================================================
   ELDER LABORATORIES - ABOUT OUR BRAND
   ========================================================= */

.brand-page {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    color: #17486b;
}


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

.brand-container {
    width: min(1120px, calc(100% - 60px));
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


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

.brand-hero {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient( 120deg, #e9f7ff 0%, #f5fbff 48%, #eef8ff 100% );
}

.brand-hero-content {
    position: relative;
    z-index: 5;
    max-width: 650px;
    padding: 75px 0 95px;
}

.brand-small-title {
    position: relative;
    display: inline-block;
    padding-bottom: 13px;
    margin-bottom: 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #0876bd;
}

    .brand-small-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 125px;
        height: 2px;
        background: linear-gradient( to right, #0876bd 0%, #0876bd 45%, rgba(8, 118, 189, 0.45) 70%, rgba(8, 118, 189, 0) 100% );
    }

.brand-hero h1 {
    margin: 0;
    font-family: 'DM Serif Display', serif;
    font-size: clamp(48px, 5vw, 70px);
    line-height: 1.05;
    font-weight: 400;
    color: #164b70;
}

.brand-hero-subtitle {
    margin-top: 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #5d86a4;
    letter-spacing: 0.2px;
}


/* =========================================================
   HERO ABSTRACT SHAPES
   ========================================================= */

.brand-hero-bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.brand-hero-bg-circle-left {
    width: 280px;
    height: 280px;
    left: -145px;
    bottom: -145px;
    background: rgba(76, 169, 222, 0.12);
}

.brand-hero-bg-circle-right {
    width: 430px;
    height: 430px;
    right: -165px;
    top: -210px;
    background: rgba(79, 160, 210, 0.10);
    box-shadow: inset 0 0 0 35px rgba(255, 255, 255, 0.18);
}

.brand-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: 8%;
    bottom: -390px;
    border-radius: 50%;
    border: 1px solid rgba(40, 124, 177, 0.10);
}


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

.brand-hero-wave {
    position: absolute;
    left: -5%;
    bottom: -92px;
    width: 110%;
    height: 155px;
    background: #ffffff;
    border-radius: 50% 50% 0 0 / 42% 42% 0 0;
    z-index: 4;
}


/* =========================================================
   BRAND INTRODUCTION
   ========================================================= */

.brand-introduction {
    position: relative;
    padding: 100px 0 95px;
    background: #ffffff;
}

.brand-intro-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 80px;
    align-items: center;
}

.brand-section-label {
    display: inline-block;
    margin-bottom: 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #0876bd;
}

.brand-intro-content h2 {
    margin: 0 0 22px;
    font-family: 'DM Serif Display', serif;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 400;
    color: #174d72;
}

.brand-intro-content p {
    margin: 0 0 17px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.85;
    color: #63839b;
}

    .brand-intro-content p:last-child {
        margin-bottom: 0;
    }


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

.brand-intro-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-visual-card {
    position: relative;
    width: 390px;
    height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background: linear-gradient( 145deg, #eef8ff 0%, #ffffff 55%, #e5f4fd 100% );
    border: 1px solid #d6e9f5;
    box-shadow: 0 25px 55px rgba(25, 90, 130, 0.10);
    overflow: hidden;
}

    .brand-visual-card::before {
        content: "";
        position: absolute;
        width: 190px;
        height: 190px;
        top: -75px;
        right: -60px;
        border-radius: 50%;
        background: rgba(52, 145, 201, 0.10);
    }

    .brand-visual-card::after {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        bottom: -65px;
        left: -45px;
        border-radius: 50%;
        background: rgba(35, 123, 181, 0.08);
    }

    .brand-visual-card img {
        position: relative;
        z-index: 2;
        width: 245px;
        height: auto;
        object-fit: contain;
        filter: drop-shadow( 0 15px 20px rgba(24, 72, 105, 0.12) );
    }


/* =========================================================
   BRAND VALUES
   ========================================================= */

.brand-values {
    position: relative;
    padding: 100px 0 110px;
    background: linear-gradient( 180deg, #f7fbfe 0%, #eef8fd 100% );
}

.brand-section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

    .brand-section-heading h2 {
        margin: 0 0 15px;
        font-family: 'DM Serif Display', serif;
        font-size: clamp(34px, 4vw, 46px);
        line-height: 1.15;
        font-weight: 400;
        color: #174d72;
    }

    .brand-section-heading p {
        max-width: 700px;
        margin: 0 auto;
        font-family: 'DM Sans', sans-serif;
        font-size: 15px;
        line-height: 1.8;
        color: #6b899f;
    }


/* =========================================================
   VALUE CARDS
   ========================================================= */

.brand-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.brand-value-card {
    position: relative;
    padding: 32px 25px 30px;
    min-height: 270px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid #dcecf6;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(28, 91, 128, 0.07);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

    .brand-value-card:hover {
        transform: translateY(-7px);
        border-color: #b8d9ed;
        box-shadow: 0 22px 45px rgba(28, 91, 128, 0.13);
    }

.brand-value-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 16px;
    background: #e7f4fc;
    color: #0876bd;
    font-size: 25px;
    transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.brand-value-card:hover .brand-value-icon {
    transform: scale(1.08);
    background: #0876bd;
    color: #ffffff;
}

.brand-value-card h3 {
    margin: 0 0 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #174d72;
}

.brand-value-card p {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.75;
    color: #6c899e;
}


/* =========================================================
   BRAND PHILOSOPHY
   ========================================================= */

.brand-philosophy {
    padding: 105px 0;
    background: #ffffff;
}

.brand-philosophy-box {
    position: relative;
    padding: 70px 85px;
    border-radius: 28px;
    background: linear-gradient( 120deg, #0b5b8d 0%, #147bb6 52%, #2c91c7 100% );
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(15, 82, 121, 0.16);
}

    .brand-philosophy-box::before {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        right: -100px;
        top: -170px;
        border-radius: 50%;
        border: 45px solid rgba(255, 255, 255, 0.06);
    }

    .brand-philosophy-box::after {
        content: "";
        position: absolute;
        width: 230px;
        height: 230px;
        left: -100px;
        bottom: -150px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
    }

.brand-philosophy-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

    .brand-philosophy-content .brand-section-label {
        color: #bde7ff;
    }

    .brand-philosophy-content h2 {
        margin: 0 0 22px;
        font-family: 'DM Serif Display', serif;
        font-size: clamp(34px, 4vw, 50px);
        line-height: 1.15;
        font-weight: 400;
        color: #ffffff;
    }

    .brand-philosophy-content p {
        margin: 0 0 15px;
        font-family: 'DM Sans', sans-serif;
        font-size: 15px;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.86);
    }

        .brand-philosophy-content p:last-child {
            margin-bottom: 0;
        }


/* =========================================================
   OUR BRANDS
   ========================================================= */

.brand-products {
    padding: 100px 0 115px;
    background: linear-gradient( 180deg, #f7fbfe 0%, #ffffff 100% );
}

.brand-products-placeholder {
    max-width: 850px;
    min-height: 210px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed #bdd9e9;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(28, 91, 128, 0.06);
}

.brand-placeholder-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #e8f5fd;
    color: #0876bd;
    font-size: 26px;
}

.brand-products-placeholder h3 {
    margin: 0 0 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #174d72;
}

.brand-products-placeholder p {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #7894a8;
}


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

@media (max-width: 991px) {

    .brand-container {
        width: min(100% - 40px, 760px);
    }

    .brand-intro-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .brand-intro-visual {
        order: -1;
    }

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

    .brand-philosophy-box {
        padding: 55px 50px;
    }
}


@media (max-width: 767px) {

    .brand-container {
        width: calc(100% - 32px);
    }

    .brand-hero {
        min-height: 390px;
    }

    .brand-hero-content {
        padding: 60px 0 90px;
    }

    .brand-hero h1 {
        font-size: 45px;
    }

    .brand-hero-subtitle {
        font-size: 15px;
    }

    .brand-hero-bg-circle-right {
        width: 300px;
        height: 300px;
        right: -150px;
        top: -130px;
    }

    .brand-introduction,
    .brand-values,
    .brand-philosophy,
    .brand-products {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .brand-values-grid {
        grid-template-columns: 1fr;
    }

    .brand-value-card {
        min-height: auto;
    }

    .brand-visual-card {
        width: 100%;
        height: 290px;
    }

        .brand-visual-card img {
            width: 210px;
        }

    .brand-philosophy-box {
        padding: 45px 28px;
        border-radius: 22px;
    }

    .brand-section-heading {
        margin-bottom: 40px;
    }
}


@media (max-width: 480px) {

    .brand-hero h1 {
        font-size: 39px;
    }

    .brand-small-title {
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .brand-intro-content h2,
    .brand-section-heading h2 {
        font-size: 32px;
    }

    .brand-philosophy-content h2 {
        font-size: 32px;
    }

    .brand-value-card {
        padding: 27px 22px;
    }
}

.brand-visual-image {
    position: relative;
    width: 100%;
    max-width: 580px;
    overflow: hidden;
    border-radius: 26px;
    transition: transform 0.45s ease;
}

    .brand-visual-image:hover {
        transform: translateY(-6px);
    }

    .brand-visual-image img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .brand-visual-image:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 65px rgba(25, 90, 130, 0.17);
    }

    .brand-visual-image,
    .brand-visual-image img {
        box-shadow: none !important;
        filter: none !important;
    }

.brand-visual-image {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    overflow: hidden;
    border-radius: 26px;
    transition: transform 0.45s ease;
}

    .brand-visual-image img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .brand-visual-image:hover {
        transform: translateY(-6px);
    }

.brand-intro-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 45px;
    align-items: center;
}

/* =========================================================
   BRAND HERO - SCROLL PARALLAX
   ========================================================= */

.brand-hero {
    position: relative;
    overflow: hidden;
}

.brand-hero-content {
    position: relative;
    z-index: 5;
    will-change: transform, opacity;
}

.brand-hero-bg-circle-left,
.brand-hero-bg-circle-right {
    will-change: transform;
}

.brand-hero::before {
    will-change: transform;
}

.brand-hero-wave {
    will-change: transform;
}


/* Smooth transition when scroll movement changes */

.brand-hero-content,
.brand-hero-bg-circle-left,
.brand-hero-bg-circle-right,
.brand-hero-wave {
    transition: transform 0.08s linear;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .brand-hero-content,
    .brand-hero-bg-circle-left,
    .brand-hero-bg-circle-right,
    .brand-hero-wave {
        transform: none !important;
        transition: none !important;
    }
}


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

@media (max-width: 767px) {

    .brand-hero-content {
        transform: none !important;
    }

    .brand-hero-bg-circle-left,
    .brand-hero-bg-circle-right,
    .brand-hero-wave {
        transform: none !important;
    }
}