/* =========================================================
   HERBAYU WELLNESS INC.
   GLOBAL WEBSITE CSS
========================================================= */

:root {

    --green: #0d7b4f;
    --green-dark: #07583a;
    --green-soft: #eaf6ef;

    --lime: #8bc72f;

    --ink: #15221d;
    --muted: #68746e;

    --cream: #f8f7f2;
    --white: #ffffff;

    --line: #dfe6e1;

    --radius: 22px;

    --shadow:
        0 18px 55px rgba(16,48,34,.10);

}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;

    scroll-padding-top: 90px;
}


body {

    margin: 0;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    color: var(--ink);

    background: #fff;

    line-height: 1.7;

}


body.menu-open {
    overflow: hidden;
}


img {
    max-width: 100%;
    display: block;
}


a {
    text-decoration: none;
    color: inherit;
}


button,
input,
textarea,
select {
    font: inherit;
}


h1,
h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    line-height: 1.18;

    letter-spacing: -.025em;

}


h3 {
    line-height: 1.25;
}


p {
    margin-bottom: 16px;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    background:#ffffff;
       

    border-bottom:
        1px solid rgba(0,0,0,.07);

    backdrop-filter:
        blur(15px);

    transition: .25s ease;

}


.site-header.scrolled {

    box-shadow:
        0 8px 30px rgba(0,0,0,.08);

}


.nav-wrap {

    min-height: 84px;

    display: flex;

    align-items: center;

    gap: 20px;

}


.brand {
    flex-shrink: 0;
}


.brand-logo {

    width: 165px;

    height: auto;

    object-fit: contain;

}


.main-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    flex: 1;

}


.main-nav a {

    position: relative;

    padding:
        8px 0;

    color: #26362f;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

}


.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    right: 100%;

    bottom: 0;

    height: 2px;

    background:
        var(--green);

    transition: .25s;

}


.main-nav a:hover::after,
.main-nav a.active::after {

    right: 0;

}


.nav-actions {

    display: flex;

    gap: 8px;

}


.menu-toggle {

    display: none;

    width: 42px;

    height: 42px;

    border: 0;

    background: transparent;

}


.menu-toggle span {

    display: block;

    width: 24px;

    height: 2px;

    margin: 5px auto;

    background:
        var(--ink);

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding:
        12px 23px;

    border-radius: 999px;

    font-weight: 700;

    font-size: 14px;

    transition:
        transform .2s,
        box-shadow .2s;

}


.btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0,0,0,.12);

}


.btn-primary {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--green),
            var(--green-dark)
        );

}


.btn-outline {

    color: var(--green);

    border:
        1px solid var(--green);

    background: #fff;

}


.btn-light {

    color:
        var(--green-dark);

    background: #fff;

}


.btn-small {

    min-height: 38px;

    padding:
        8px 15px;

    font-size: 12px;

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1 {
    font-size:
        clamp(44px,6vw,78px);
}


h2 {
    font-size:
        clamp(32px,4vw,52px);
}


.section-kicker {

    display: inline-block;

    margin-bottom: 12px;

    color:
         #fff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}

.section-kicker-counsling {

    display: inline-block;

    margin-bottom: 12px;

    color:
        var(--green);

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.section {

    padding:
        100px 0;

}


.page-section {

    padding:
        100px 0 100px;

}


.soft-section {

    background:
        var(--cream);

}


.section-heading {

    margin-bottom:
        42px;

}


.section-heading.centered {

    max-width:
        850px;

    margin:
        0 auto 42px;

    text-align:
        center;

}


.section-heading p {

    max-width:
        720px;

    margin:
        0 auto;

    color:
        var(--muted);

}


.lead-copy {

    color:
        var(--muted);

    font-size:
        17px;

}


.text-link {

    color:
        var(--green);

    font-weight:
        800;

}


/* =========================================================
   HOME HERO SLIDER
========================================================= */

.hero {

    min-height:
        100vh;

    padding-top:
        84px;

    background:
        #183d2e;

}


.hero-slider {

    position:
        relative;

    min-height:
        calc(100vh - 84px);

    overflow:
        hidden;

}


.hero-slide {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    opacity:
        0;

    visibility:
        hidden;

    background-image:
        var(--hero-image);

    background-size:
        cover;

    background-position:
        center;

    transition:
        opacity .8s ease;

}


.hero-slide.active {

    position:
        relative;

    opacity:
        1;

    visibility:
        visible;

}


.hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(4,36,24,.82),
            rgba(4,36,24,.45),
            rgba(4,36,24,.15)
        );

}


.hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        800px;

    padding:
        100px 0;

    color:
        #fff;

}


.hero-content .eyebrow {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        #d8f1bf;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .18em;

}


.hero-content h1 {

    margin-bottom:
        22px;

}


.hero-content h1 em {

    color:
        #c6ec73;

    font-style:
        normal;

}


.hero-content p {

    max-width:
        650px;

    font-size:
        18px;

    color:
        rgba(255,255,255,.88);

}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        30px;

}


.slider-arrow {

    position:
        absolute;

    z-index:
        10;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        52px;

    height:
        76px;

    border:
        0;

    color:
        #4d5d55;

    background:
        rgba(255,255,255,.84);

    font-size:
        28px;

}


.slider-prev {

    left: 0;

    border-radius:
        0 12px 12px 0;

}


.slider-next {

    right: 0;

    border-radius:
        12px 0 0 12px;

}


.slider-dots {

    position:
        absolute;

    z-index:
        10;

    bottom:
        30px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    gap:
        9px;

}


.dot {

    width:
        10px;

    height:
        10px;

    padding:
        0;

    border:
        1px solid #fff;

    border-radius:
        50%;

    background:
        transparent;

}


.dot.active {

    background:
        #fff;

}


/* =========================================================
   HOME CARDS
========================================================= */

.info-card {

    min-height:
        230px;

    padding:
        34px;

    border:
        1px solid var(--line);

    border-radius:
        var(--radius);

    background:
        #fff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.04);

}


.info-card.featured {

    color:
        #fff;

    background:
        linear-gradient(
            145deg,
            var(--green-dark),
            var(--green)
        );

}


.card-number {

    display:
        block;

    margin-bottom:
        45px;

    color:
        var(--lime);

    font-weight:
        800;

}


.info-card p {

    color:
        var(--muted);

}


.info-card.featured p {

    color:
        rgba(255,255,255,.82);

}


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

.page-hero {

    padding-bottom:
        70px;

    border-bottom:
        1px solid var(--line);

}


.page-hero h1 {

    max-width:
        900px;

    margin-bottom:
        15px;

}


.page-hero p {

    max-width:
        780px;

    color:
        var(--muted);

    font-size:
        18px;

}


.content-block {

    padding-top:
        60px;

}


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

.feature-panel {

    display:
        grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap:
        60px;

    padding:
        55px;

    margin:
        60px 0;

    color:
        #fff;

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            135deg,
            var(--green-dark),
            var(--green)
        );

}


.feature-panel p {

    color:
        rgba(255,255,255,.84);

}


.principles-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        16px;

}


.principle-card {

    padding:
        28px;

    border-radius:
        18px;

    background:
        var(--cream);

}


.principle-card strong {

    display:
        block;

    margin-bottom:
        8px;

}


.principle-card span {

    color:
        var(--muted);

    font-size:
        14px;

}


/* =========================================================
   QUOTE
========================================================= */

.quote-panel {

    padding:
        55px;

    margin:
        60px 0;

    border-left:
        5px solid var(--lime);

    border-radius:
        0 var(--radius) var(--radius) 0;

    background:
        var(--green-soft);

}


.quote-panel p {

    margin:
        0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(23px,3vw,34px);

    line-height:
        1.4;

}


/* =========================================================
   WHAT WE BELIEVE
========================================================= */

.styled-beliefs {

    padding-top:
        80px;

    margin-top:
        90px;

    border-top:
        1px solid var(--line);

}


.belief-heading {

    max-width:
        780px;

    margin-bottom:
        45px;

}


.belief-heading h2 {

    margin-bottom:
        15px;

}


.belief-heading p {

    color:
        var(--muted);

    font-size:
        17px;

}


.belief-card {

    position:
        relative;

    height:
        100%;

    min-height:
        245px;

    padding:
        30px;

    overflow:
        hidden;

    border:
        1px solid var(--line);

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f7faf7
        );

    transition:
        .25s ease;

}


.belief-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--lime)
        );

}


.belief-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 45px
        rgba(13,78,49,.10);

}


.belief-number {

    display:
        inline-grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    margin-bottom:
        28px;

    border-radius:
        50%;

    color:
        #fff;

    background:
        var(--green);

    font-size:
        12px;

    font-weight:
        800;

}


.belief-card h3 {

    font-size:
        20px;

}


.belief-card p {

    color:
        var(--muted);

    font-size:
        14px;

}


/* =========================================================
   ORGANISATION
========================================================= */

.pillar-card {

    height:
        100%;

    padding:
        34px;

    border:
        1px solid var(--line);

    border-radius:
        var(--radius);

    background:
        #fff;

    box-shadow:
        var(--shadow);

}


.pillar-icon {

    display:
        grid;

    place-items:
        center;

    width:
        48px;

    height:
        48px;

    margin-bottom:
        30px;

    border-radius:
        50%;

    color:
        #fff;

    background:
        var(--green);

    font-size:
        12px;

    font-weight:
        800;

}


.pillar-card p {

    color:
        var(--muted);

}


/* =========================================================
   LEADERSHIP
========================================================= */

.leadership-section {

    margin-top:
        100px;

}


.india-leadership {

    padding-top:
        90px;

    border-top:
        1px solid var(--line);

}


.leader-card {

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid var(--line);

    border-radius:
        var(--radius);

    background:
        #fff;

    box-shadow:
        0 12px 40px rgba(0,0,0,.06);

    transition:
        .25s ease;

}


.leader-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow);

}


.leader-image-wrap {

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    background:
        #eaf3ed;

}


.leader-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.leader-content {

    padding:
        28px;

}


.leader-role {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.leader-content p {

    color:
        var(--muted);

    font-size:
        14px;

}


.text-button {

    padding:
        0;

    border:
        0;

    color:
        var(--green);

    background:
        transparent;

    font-weight:
        800;

}


/* =========================================================
   PRODUCT PORTFOLIO
========================================================= */

.scientific-message {

    max-width:
        950px;

    margin:
        0 auto 100px;

}


.message-header {

    text-align:
        center;

    margin-bottom:
        50px;

}


.message-byline {

    color:
        var(--green);

    font-weight:
        700;

}


.message-body {

    color:
        #35443d;

    font-size:
        17px;
         line-height: 1.85;

    font-weight: 400;

}
/* Section Headings */

.message-body h2 {

    margin-top: 45px;

    margin-bottom: 18px;

    color: var(--green-dark, #1b5e45);

    font-size: 25px;

    font-weight: 700;

    line-height: 1.35;

    letter-spacing: -0.3px;

}


/* First Heading Spacing */

.message-body h2:first-of-type {

    margin-top: 35px;

}
/* Paragraph Styling */

.message-body p {

    margin-bottom: 20px;

}
/* Executive Signature */

.message-body .message-signature {

    margin-top: 40px;

    color: var(--green-dark, #1b5e45);

    font-weight: 600;

    line-height: 1.8;

}


/* Responsive Typography */

@media (max-width: 768px) {

    .message-body {

        font-size: 16px;

        line-height: 1.75;

    }

    .message-body h2 {

        font-size: 22px;

        margin-top: 35px;

        margin-bottom: 15px;

    }

}


/* Small Mobile Devices */

@media (max-width: 480px) {

    .message-body {

        font-size: 15.5px;

        line-height: 1.7;

    }

    .message-body h2 {

        font-size: 20px;

    }

}
.message-body h3 {

    margin-top:
        45px;

    color:
        var(--green-dark);

}



/* ========================================
   PRODUCT CARD
======================================== 

.product-card {

    height: 100%;

    overflow: hidden;

    border: 1px solid var(--line);

    border-radius: var(--radius);

    background: #fff;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);

    transition: 0.25s ease;

}
 */

/* CARD HOVER EFFECT */

.product-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow);

}


/* ========================================
   PRODUCT IMAGE AREA
======================================== 

.product-visual {

    width: 100%;

    height: 400px;

    overflow: hidden;

    background: #f5f5f5;

}
*/

/* PRODUCT IMAGE 

.product-visual img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

}*/


/* ========================================
   PRODUCT INFORMATION
======================================== 

.product-info {

    padding: 28px;

}*/


/* PRODUCT TITLE */

.product-info h3 {

    margin-bottom: 20px;

    color: #092b35;

    font-size: 28px;

    font-weight: 700;

}


/* ========================================
   ACCORDION BUTTON
======================================== 

.accordion-btn {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 0;

    border: none;

    border-top: 1px solid var(--line);

    background: transparent;

    color: #092b35;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

}
*/

/* PLUS SIGN */

.accordion-btn span {

    font-size: 22px;

    font-weight: 400;

}


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

.accordion-content {

    display: none;

    padding: 10px 0 15px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;

}
*/

/* SHOW CONTENT WHEN ACTIVE */

.accordion-btn.active + .accordion-content {

    display: block;

}


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

@media (max-width: 768px) {

    .product-visual {

        height: 320px;

    }

    .product-info {

        padding: 20px;

    }

    .product-info h3 {

        font-size: 24px;

    }

}

/* =========================================================
   COUNSELLING
========================================================= */

.counselling-section {

    margin-top:
        100px;

    padding:
        65px;

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            #edf7ef,
            #f7f8ef
        );

}


.counselling-copy {

    max-width:
        850px;

    margin-bottom:
        45px;

}


.counselling-copy p {

    color:
        var(--muted);

}


.step-card {

    height:
        100%;

    padding:
        25px;

    border:
        1px solid var(--line);

    border-radius:
        16px;

    background:
        #fff;

}


.step-card span {

    color:
        var(--green);

    font-weight:
        800;

}


.step-card h3 {

    margin-top:
        25px;

    font-size:
        18px;

}


.step-card p {

    color:
        var(--muted);

    font-size:
        14px;

}


.counselling-form,
.contact-form {

    padding:
        38px;

    border:
        1px solid var(--line);

    border-radius:
        var(--radius);

    background:
        #fff;

}
/* ADD THIS CSS */

.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}

label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #2c3b34;

    font-size:
        13px;

    font-weight:
        700;

}


input,
textarea,
select {

    width:
        100%;

    margin-top:
        7px;

    padding:
        13px 15px;

    border:
        1px solid #d5ddd8;

    border-radius:
        10px;

    outline:
        none;

    background:
        #fff;

}


input:focus,
textarea:focus,
select:focus {

    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(13,123,79,.10);

}


.check-row {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        20px 0;

}


.check-row input {

    width:
        auto;

    margin:
        0;

}


.form-message {

    margin-top:
        15px;

    color:
        var(--green);

    font-weight:
        700;

}
/* MOBILE RESPONSIVE */

@media (max-width: 576px) {

    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }

}

/* =========================================================
   FAQ
========================================================= */

.faq-group {

    max-width:
        950px;

    margin:
        0 auto 60px;

}


details {

    border-bottom:
        1px solid var(--line);

}


summary {

    position:
        relative;

    padding:
        23px 40px 23px 0;

    cursor:
        pointer;

    list-style:
        none;

    font-size:
        18px;

    font-weight:
        700;

}


summary::-webkit-details-marker {

    display:
        none;

}


summary::after {

    content:
        "+";

    position:
        absolute;

    right:
        0;

    color:
        var(--green);

    font-size:
        25px;

}


details[open] summary::after {

    content:
        "−";

}


details p {

    padding:
        0 0 25px;

    color:
        var(--muted);

}


/* =========================================================
   CONTACT
========================================================= */

.contact-card {

    height:
        100%;

    padding:
        45px;

    border-radius:
        var(--radius);

    color:
        #fff;

    background:
        linear-gradient(
            145deg,
            var(--green-dark),
            var(--green)
        );

}


.contact-card h2 {

    font-size:
        40px;

}


.contact-item {

    margin-top:
        35px;

}


.contact-item span {

    display:
        block;

    color:
        #c5eb83;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.contact-item a,
.contact-item p {

    color:
        rgba(255,255,255,.9);

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    color:
        #eaf4ef;

    background:
        #092f21;

}


.footer-main {

    display:
        grid;

    grid-template-columns:
        1.5fr .7fr;

    gap:
        60px;

    padding:
        70px 0;

}


.footer-logo {

    width:
        180px;

    padding:
        4px;

    margin-bottom:
        18px;

    border-radius:
        8px;

    background:
        #fff;

}


.footer-description {

    max-width:
        430px;

    color:
        rgba(255,255,255,.62);

}


.social-links {

    display:
        grid;

    gap:
        10px;

}


.social-links a {

    color:
        rgba(255,255,255,.68);

}


.social-links a:hover {

    color:
        #c5eb83;

}


.footer-bottom {

    padding:
        20px 0;

    border-top:
        1px solid
        rgba(255,255,255,.12);

    color:
        rgba(255,255,255,.5);

    font-size:
        12px;

}


/* =========================================================
   LEADERSHIP MODAL
========================================================= */

.profile-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        2000;

    display:
        none;

}


.profile-modal.show {

    display:
        block;

}

.modal-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;

    background: #ffffff;

    z-index: 9998;
}

.profile-dialog {
    position: relative;
    z-index: 9999;

    width: min(760px, calc(100% - 30px));
    max-height: 88vh;
    overflow-y: auto;

    margin: 6vh auto;
    padding: 45px;

    border-radius: 25px;
    background: #fff;

    /* SOFT GREEN SHADOW */
    box-shadow:
        0 10px 30px rgba(46, 125, 50, 0.18),
        0 20px 60px rgba(46, 125, 50, 0.12);
}
.modal-close {

    position:
        absolute;

    top:
        15px;

    right:
        18px;

    width:
        42px;

    height:
        42px;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--cream);

    font-size:
        25px;

}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {

    position:
        fixed;

    right:
        20px;

    bottom:
        20px;

    z-index:
        900;

    width:
        45px;

    height:
        45px;

    border:
        0;

    border-radius:
        50%;

    color:
        #fff;

    background:
        var(--green);

    opacity:
        0;

    visibility:
        hidden;

}


.back-to-top.show {

    opacity:
        1;

    visibility:
        visible;

}


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

@media (max-width: 991px) {

    .nav-wrap {

        min-height:
            75px;

    }


    .menu-toggle {

        display:
            block;

        margin-left:
            auto;

    }


    .nav-actions {

        display:
            none;

    }


    .main-nav {

        position:
            fixed;

        top:
            75px;

        left:
            0;

        right:
            0;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        padding:
            20px;

        background:
            #fff;

        box-shadow:
            0 20px 35px rgba(0,0,0,.1);

    }


    .main-nav.open {

        display:
            flex;

    }


    .main-nav a {

        padding:
            12px 8px;

    }


    .hero {

        padding-top:
            75px;

    }


    .hero-slider {

        min-height:
            calc(100vh - 75px);

    }


    .feature-panel {

        grid-template-columns:
            1fr;

    }


    .principles-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .footer-main {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 767px) {

    .brand-logo {

        width:
            135px;

    }


    .hero-content {

        padding:
            70px 0;

    }


    .hero-content h1 {

        font-size:
            42px;

    }


    .hero-content p {

        font-size:
            16px;

    }


    .hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .hero-actions .btn {

        width:
            100%;

    }


    .slider-arrow {

        top:
            auto;

        bottom:
            55px;

        width:
            44px;

        height:
            44px;

        border-radius:
            50%;

    }


    .slider-prev {

        left:
            15px;

    }


    .slider-next {

        right:
            15px;

    }


    .slider-dots {

        bottom:
            70px;

    }


    .page-section {

        padding:
            100px 0 70px;

    }


    .content-block {

        padding-top:
            50px;

    }


    .principles-grid {

        grid-template-columns:
            1fr;

    }


    .counselling-section {

        padding:
            30px;

    }


    .counselling-form,
    .contact-form,
    .contact-card {

        padding:
            30px;

    }


    .belief-card {

        min-height:
            auto;

    }


    .profile-dialog {

        padding:
            30px 22px;

    }

}


/* =========================================================
   HERBAYU E-UNIVERSITY
========================================================= */

.e-university {

    scroll-margin-top: 90px;

}


/* UNIVERSITY SECTION HEADING */

.e-university .page-hero h1 {

    color: var(--green-dark);

}


.e-university .page-hero p {

    color: #35443d;

}


/* PRINCIPLES SECTION */

.e-university .principles-section {

    margin-top: 50px;
    

}


.e-university .section-heading {

    margin-bottom: 30px;

}

.e-university .section-heading h2 {

    margin-top: 15px;

    margin-bottom: 15px;

    color: var(--green-dark);

    font-size: 30px;

    font-weight: 700;

    line-height: 1.35;

}


.e-university .section-heading p {

    color: #35443d;

    font-size: 17px;

    line-height: 1.8;

}


/* PRINCIPLES GRID */

.e-university .principles-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    margin-top: 30px;

}


/* PRINCIPLE CARDS */

.e-university .principle-card {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 150px;

    padding: 28px 24px;

    background: #f5f8f5;

    border: 1px solid #dce7df;

    border-radius: 12px;

    transition: transform 0.3s ease,
                box-shadow 0.3s ease;

}


.e-university .principle-card strong {

    display: block;

    color: var(--green-dark, #1b5e45);

    font-size: 18px;

    font-weight: 700;

    line-height: 1.5;

}


.e-university .principle-card span {

    display: block;

    margin-top: 10px;

    color: #64756c;

    font-size: 15px;

    line-height: 1.6;

}


/* HOVER EFFECT */

.e-university .principle-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 24px rgba(27, 94, 69, 0.10);

}


/* RESPONSIVE DESIGN */

@media (max-width: 991px) {

    .e-university .principles-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


@media (max-width: 576px) {

    .e-university .principles-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }


    .e-university .section-heading h2 {

        font-size: 25px;

    }


    .e-university .principle-card {

        min-height: 130px;

        padding: 22px 20px;

    }


    .e-university .principle-card strong {

        font-size: 17px;

    }

}


/* =========================================================
   PRODUCT PORTFOLIO
========================================================= */

.products-section {
    padding: 40px 0 100px;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.product-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 28px;

}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {

    position: relative;

    height: 390px;

    overflow: hidden;

    border: 1px solid #dfe7e2;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


/* HOVER CARD */

.product-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.12);

}


/* =========================================================
   PRODUCT IMAGE AREA
========================================================= */

.product-visual {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background: #ffffff;

}


/* PRODUCT IMAGE */

.product-visual img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

    padding: 25px;

    transition:
        transform 0.45s ease;

}


/* IMAGE ZOOM */

.product-card:hover .product-visual img {

    transform: scale(1.06);

}


/* =========================================================
   PRODUCT NAME
========================================================= */

.product-name {

    position: absolute;

    left: 20px;

    right: 20px;

    bottom: 20px;

    z-index: 3;

    padding: 13px 18px;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.94);

    color: var(--green-dark, #1b5e45);

    font-size: 20px;

    font-weight: 700;

    text-align: center;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.08);

}


/* =========================================================
   HOVER INFORMATION PANEL
========================================================= */

.product-overlay {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    padding: 28px;

    background:
        rgba(255, 255, 255, 0.97);

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;

    overflow-y: auto;

}


/* SHOW INFORMATION ON HOVER */

.product-card:hover .product-overlay {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* =========================================================
   OVERLAY PRODUCT TITLE
========================================================= */

.product-overlay h3 {

    margin: 0 0 18px;

    color: var(--green-dark, #1b5e45);

    font-size: 24px;

    font-weight: 700;

}


/* =========================================================
   INFORMATION BLOCK
========================================================= */

.product-detail {

    margin-bottom: 16px;

}


.product-detail strong {

    display: block;

    margin-bottom: 5px;

    color: var(--green);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;

}


.product-detail p {

    margin: 0;

    color: #4d5d55;

    font-size: 13px;

    line-height: 1.65;

}


/* =========================================================
   VIEW DETAILS LABEL
========================================================= */

.product-view-label {

    margin-top: auto;

    padding-top: 15px;

    color: var(--green);

    font-size: 12px;

    font-weight: 700;

    text-align: center;

    border-top: 1px solid #dce7df;

}


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

@media (max-width: 991px) {

    .product-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


@media (max-width: 576px) {

    .product-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .product-card {

        height: 360px;

    }


    .product-overlay {

        padding: 22px;

    }


    .product-overlay h3 {

        font-size: 21px;

    }

}