/* ── Token System ────────────────────────────────── */
:root {
    --sage: #3B6E52;
    --sage-light: #5A9070;
    --sage-pale: #EAF2EC;
    --ivory: #F8F5EF;
    --gold: #f00b10;
    --gold-light: #D4AE78;
    --charcoal: #1E2B24;
    --warm-gray: #6B7770;
    --white: #FFFFFF;

    --display: 'Cormorant Garamond', Georgia, serif;
    --body: 'DM Sans', system-ui, sans-serif;

    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}


/* ── ABOUT SECTION ───────────────────────────────── */
.mhmc-about {
    position: relative;
    overflow: hidden;
    padding: 60px 0 40px;
}

/* Botanical watermark background */
.mhmc-about::before {
    content: '';
    position: absolute;
    right: -80px;
    top: -60px;
    width: 560px;
    height: 560px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%233B6E52' stroke-width='0.8' opacity='0.07'%3E%3Cellipse cx='200' cy='200' rx='180' ry='180'/%3E%3Cellipse cx='200' cy='200' rx='140' ry='140'/%3E%3Cpath d='M200,20 Q260,100 200,200 Q140,100 200,20Z'/%3E%3Cpath d='M200,380 Q260,300 200,200 Q140,300 200,380Z'/%3E%3Cpath d='M20,200 Q100,140 200,200 Q100,260 20,200Z'/%3E%3Cpath d='M380,200 Q300,140 200,200 Q300,260 380,200Z'/%3E%3Cpath d='M60,60 Q160,120 200,200 Q120,160 60,60Z'/%3E%3Cpath d='M340,60 Q240,120 200,200 Q280,160 340,60Z'/%3E%3Cpath d='M60,340 Q160,280 200,200 Q120,240 60,340Z'/%3E%3Cpath d='M340,340 Q240,280 200,200 Q280,240 340,340Z'/%3E%3Ccircle cx='200' cy='200' r='8'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    animation: slowRotate 60s linear infinite;
}

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

    to {
        transform: rotate(360deg);
    }
}


/* ── EYEBROW ─────────────────────────────────────── */
.mhmc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp 0.7s var(--ease-out-quart) 0.1s forwards;
}

.mhmc-eyebrow::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--gold);
}

/* ── HEADING ─────────────────────────────────────── */
.mhmc-heading {
    font-family: var(--display);
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--charcoal);
    max-width: 620px;
    margin-bottom: 56px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.7s var(--ease-out-quart) 0.2s forwards;
}

.mhmc-heading em {
    font-style: italic;
    color: var(--sage);
}

/* ── GRID ────────────────────────────────────────── */
.mhmc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px 80px;
    align-items: start;
}

/* ── IMAGE COLUMN ────────────────────────────────── */
.mhmc-image-col {
    position: relative;
    opacity: 0;
    transform: translateX(-24px);
    animation: fadeRight 0.8s var(--ease-out-quart) 0.35s forwards;
}

.mhmc-image-frame {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

/* Decorative offset border */
.mhmc-image-frame::before {
    content: '';
    position: absolute;
    inset: -10px -10px auto auto;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    border: 2px solid var(--gold-light);
    border-radius: 4px;
    z-index: 0;
    transition: transform 0.4s var(--ease-out-quart);
}

.mhmc-image-frame:hover::before {
    transform: translate(6px, -6px);
}

.mhmc-image-frame img {
    position: relative;
    z-index: 1;
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    transition: transform 0.6s var(--ease-out-quart), filter 0.4s ease;
    filter: saturate(0.9);
}

.mhmc-image-frame:hover img {
    transform: scale(1.04);
    filter: saturate(1.1);
}

/* Image caption band */
.mhmc-image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(30, 43, 36, 0.88) 0%, transparent 100%);
    padding: 40px 20px 18px;
    border-radius: 0 0 4px 4px;
}

.mhmc-image-caption p {
    font-family: var(--display);
    font-style: italic;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
}

/* Pill badges */
.mhmc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.mhmc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 100px;
    background: var(--white);
    border: 1px solid rgba(59, 110, 82, 0.2);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sage);
    letter-spacing: 0.02em;
    transition: background 0.25s, border-color 0.25s, transform 0.2s;
    cursor: default;
}

.mhmc-badge:hover {
    background: var(--sage);
    color: var(--white);
    border-color: var(--sage);
    transform: translateY(-2px);
}

.mhmc-badge svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ── TEXT COLUMN ─────────────────────────────────── */
.mhmc-text-col {
    opacity: 0;
    transform: translateX(24px);
    animation: fadeLeft 0.8s var(--ease-out-quart) 0.45s forwards;
}

.mhmc-lead {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--charcoal);
    margin-bottom: 24px;
    padding-left: 18px;
    border-left: 3px solid var(--gold);
}

.mhmc-body {
    margin-bottom: 20px;
}

/* ── ACCREDITATION STRIP ─────────────────────────── */
.mhmc-accred {
    margin-top: 36px;
    padding: 20px 22px;
    background: var(--sage-pale);
    border-left: 4px solid var(--sage);
    border-radius: 0 6px 6px 0;
}

.mhmc-accred-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 10px;
}

.mhmc-accred-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mhmc-accred-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 15.5px;
    color: var(--charcoal);
    line-height: 1.5;
}

.mhmc-accred-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    margin-top: 6px;
    flex-shrink: 0;
}

/* ── PROGRAMS ROW ────────────────────────────────── */
.mhmc-programs {
    padding-top: 40px;
    opacity: 0;
    transform: translateY(24px);
    animation: fadeUp 0.7s var(--ease-out-quart) 0.7s forwards;
}

.mhmc-programs-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mhmc-programs-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(184, 147, 90, 0.3);
}

.mhmc-program-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mhmc-program-card {
    padding: 28px 24px;
    background: var(--white);
    border-radius: 6px;
    border: 1px solid rgba(59, 110, 82, 0.1);
    cursor: default;
    transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
    position: relative;
    overflow: hidden;
}

.mhmc-program-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sage), var(--gold));
    transition: width 0.4s var(--ease-out-quart);
}

.mhmc-program-card:hover {
    box-shadow: 0 12px 40px rgba(59, 110, 82, 0.12);
    transform: translateY(-4px);
    border-color: rgba(59, 110, 82, 0.22);
}

.mhmc-program-card:hover::after {
    width: 100%;
}

.mhmc-program-icon {
    width: 40px;
    height: 40px;
    background: var(--sage-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.mhmc-program-icon svg {
    width: 20px;
    height: 20px;
    color: var(--sage);
}

.mhmc-program-name {
    font-family: var(--display);
    font-size: 24px;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 6px;
}

.mhmc-program-desc {
    font-size: 15px;
}

/* ── KEYFRAMES ───────────────────────────────────── */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

/* ── REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .mhmc-eyebrow,
    .mhmc-heading,
    .mhmc-image-col,
    .mhmc-text-col,
    .mhmc-programs {
        opacity: 1;
        transform: none;
    }
}

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 900px) {
    .mhmc-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mhmc-image-col {
        animation-name: fadeUp;
    }

    .mhmc-text-col {
        animation-name: fadeUp;
    }

    .mhmc-program-cards {
        grid-template-columns: 1fr 1fr;
    }

    .mhmc-about::before {
        width: 300px;
        height: 300px;
        right: -60px;
    }
}

@media (max-width: 560px) {
    .mhmc-about {
        padding: 64px 0 56px;
    }

    .mhmc-container {
        padding: 0 20px;
    }

    .mhmc-program-cards {
        grid-template-columns: 1fr;
    }
}

/*=================================
MARIA TRUST
==================================*/

.metrust-about-section {
    position: relative;
    padding: 60px 0;
    background: #f8fbff;
    overflow: hidden;
}

.metrust-image-area {
    position: relative;
}

.metrust-image-box {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .12);
}

.metrust-image-box img {
    width: 100%;
    display: block;
    transition: .8s;
}

.metrust-image-box:hover img {
    transform: scale(1.08) rotate(1deg);
}

.metrust-shape-circle {
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(13, 110, 253, .15);
    border-radius: 50%;
    top: -60px;
    right: -60px;
    animation: metrustFloat 6s infinite ease-in-out;
}

.metrust-content {
    padding-left: 20px;
}

.metrust-subtitle {

    display: inline-block;
    padding: 8px 22px;
    background: #006400;
    color: #fff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 18px;
    transition: .4s;
}

.metrust-subtitle:hover {
    background: #063b82;
}

.metrust-title {
    font-weight: 700;
    color: #092c4c;
    margin-bottom: 25px;
}

.metrust-content p {

    color: #5d6d7e;
    line-height: 32px;
    font-size: 17px;
    margin-bottom: 22px;
}

.metrust-list-title {

    font-size: 24px;
    color: #092c4c;
    margin: 35px 0 25px;
    font-weight: 700;
}

.metrust-list {

    padding: 0;
    margin: 0;
    list-style: none;
}

.metrust-list li {

    position: relative;
    padding: 16px 20px 16px 55px;
    margin-bottom: 15px;
    background: #fff;
    border-radius: 14px;
    transition: .4s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
    font-weight: 500;
}

.metrust-list li::before {

    content: "\ea6e";
    position: absolute;
    font-family: "remixicon";
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #006400;
    color: #fff;
    text-align: center;
    line-height: 26px;
    font-size: 14px;
    transition: .4s;
}

.metrust-list li:hover {

    transform: translateY(-8px);
    background: #006400;
    color: #fff;
    box-shadow: 0 20px 45px rgba(13, 110, 253, .30);
}

.metrust-list li:hover::before {

    background: #fff;
    color: #006400;
}

.metrust-last-text {

    margin-top: 35px;
    padding: 30px;
    background: #ffffff;
    border-left: 6px solid #006400;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
    transition: .5s;
}

.metrust-last-text:hover {

    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, .15);
}

@keyframes metrustFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-25px);
    }

    100% {
        transform: translateY(0px);
    }

}

@media(max-width:991px) {

    .metrust-content {

        padding-left: 0;
        margin-top: 40px;
    }

    .metrust-title {

        font-size: 34px;
    }

}

@media(max-width:767px) {

    .metrust-about-section {

        padding: 80px 0;
    }

    .metrust-title {

        font-size: 28px;
    }

    .metrust-content p {

        font-size: 16px;
        line-height: 30px;
    }

}

/*====================================
HISTORY & MILESTONES
====================================*/

.mhm-history-area {
    padding: 60px 0;
    background: #f4f9ff;
    overflow: hidden;
    position: relative;
}

.mhm-history-area::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    right: -120px;
    top: -120px;
    border-radius: 50%;
    background: rgba(10, 94, 168, .05);
}

.mhm-history-subtitle {

    display: inline-block;
    padding: 10px 24px;
    background: #0a5ea8;
    color: #fff;
    border-radius: 40px;
    font-weight: 600;
    margin-bottom: 18px;
    transition: .4s;
}

.mhm-history-subtitle:hover {
    letter-spacing: 1px;
}

.mhm-history-title {


    font-weight: 700;
    color: #0d2746;
    margin-bottom: 25px;
}

.mhm-history-desc {

    font-size: 17px;
    line-height: 33px;
    color: #5b6778;
    margin-bottom: 35px;
}

.mhm-milestone-heading {

    margin-bottom: 30px;
    font-weight: 700;
    color: #0d2746;
}

/* Cards */

.mhm-milestone-card {

    position: relative;
    background: #fff;
    padding: 28px 25px 28px 90px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
    transition: .45s;
    height: 100%;
}

.mhm-milestone-card::before {

    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: #0a5ea8;
    transition: .4s;
}

.mhm-milestone-card span {

    position: absolute;
    left: 22px;
    top: 22px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e9f3ff;
    color: #0a5ea8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    transition: .4s;
}

.mhm-milestone-card p {

    margin: 0;
    color: #44515f;
    line-height: 30px;
    font-weight: 500;
}

.mhm-milestone-card:hover {

    transform: translateY(-10px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, .15);
}

.mhm-milestone-card:hover::before {

    width: 100%;
    opacity: .95;
}

.mhm-milestone-card:hover span {

    background: #fff;
    color: #0a5ea8;
}

.mhm-milestone-card:hover p {

    color: #fff;
    position: relative;
    z-index: 2;
}

.mhm-milestone-card:hover span {

    z-index: 2;
}

/* Footer */

.mhm-history-footer {

    margin-top: 40px;
    background: #fff;
    padding: 35px;
    border-radius: 20px;
    border-left: 5px solid #0a5ea8;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
    transition: .4s;
}

.mhm-history-footer:hover {

    transform: translateY(-8px);
}

.mhm-history-footer p {

    margin: 0;
    line-height: 33px;
    color: #5b6778;
}

/* Image */

.mhm-history-image {

    position: relative;
    padding-left: 35px;
}

.mhm-image-wrapper {

    position: relative;
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .15);
}

.mhm-image-wrapper img {

    width: 100%;
    transition: .8s;
}

.mhm-image-wrapper:hover img {

    transform: scale(1.08);
}

.mhm-image-badge {

    position: absolute;
    bottom: 30px;
    left: 30px;
    width: 120px;
    height: 120px;
    background: #0a5ea8;
    color: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    animation: mhmPulse 3s infinite;
}

.mhm-image-badge strong {

    font-size: 34px;
}

.mhm-image-pattern {

    position: absolute;
    width: 180px;
    height: 180px;
    right: -40px;
    top: -40px;
    border: 18px dotted rgba(255, 255, 255, .35);
    border-radius: 50%;
    animation: mhmRotate 18s linear infinite;
}

/* Animation */

@keyframes mhmRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes mhmPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }

}

/* Responsive */

@media(max-width:991px) {

    .mhm-history-image {

        padding-left: 0;
        margin-top: 50px;

    }

    .mhm-history-title {

        font-size: 36px;

    }

}

@media(max-width:767px) {

    .mhm-history-area {

        padding: 80px 0;

    }

    .mhm-history-title {

        font-size: 30px;

    }

    .mhm-history-desc {

        font-size: 16px;

    }

    .mhm-milestone-card {

        padding: 25px 20px 25px 80px;

    }

}

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

.mhmc-homeopathy-area {
    position: relative;
    padding: 60px 0;
    background: linear-gradient(180deg, #f8fbff, #eef6ff);
    overflow: hidden;
}

.mhmc-homeopathy-area::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    background: rgba(20, 118, 199, .05);
    border-radius: 50%;
    top: -180px;
    right: -120px;
}

.mhmc-homeopathy-subtitle {

    display: inline-block;
    padding: 10px 24px;
    border-radius: 50px;
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 18px;
    transition: .4s;
}

.mhmc-homeopathy-subtitle:hover {

    letter-spacing: 2px;
    background: #0a4fb7;
}

.mhmc-homeopathy-title {


    font-weight: 700;
    color: #0b2d52;
    margin-bottom: 25px;
}

.mhmc-homeopathy-content p {

    color: #5c6777;
    line-height: 33px;
    font-size: 17px;
    margin-bottom: 25px;
}

.mhmc-treatment-title {

    margin: 35px 0;
    color: #0b2d52;
    font-weight: 700;
}

/* Treatment Cards */

.mhmc-treatment-card {

    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
    transition: .45s;
    overflow: hidden;
    position: relative;
}

.mhmc-treatment-card::before {

    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: #0d6efd;
    transition: .4s;
}

.mhmc-treatment-card i {

    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #e8f2ff;
    color: #0d6efd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    transition: .4s;
}

.mhmc-treatment-card span {

    font-size: 17px;
    font-weight: 600;
    color: #334155;
    transition: .4s;
}

.mhmc-treatment-card:hover {

    transform: translateY(-10px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, .15);
    background: #0d6efd;
}

.mhmc-treatment-card:hover::before {

    width: 100%;
}

.mhmc-treatment-card:hover i {

    background: #fff;
    color: #0d6efd;
    position: relative;
    z-index: 2;
}

.mhmc-treatment-card:hover span {

    color: #fff;
    position: relative;
    z-index: 2;
}

/* Footer */

.mhmc-homeopathy-footer {

    margin-top: 40px;
    padding: 30px;
    border-radius: 20px;
    background: #fff;
    border-left: 5px solid #0d6efd;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
    transition: .4s;
}

.mhmc-homeopathy-footer:hover {

    transform: translateY(-8px);
}

.mhmc-homeopathy-footer p {

    margin: 0;
}

/* Image */

.mhmc-homeopathy-image {

    position: relative;
}

.mhmc-homeopathy-img-box {

    position: relative;
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .15);
}

.mhmc-homeopathy-img-box img {

    width: 100%;
    transition: 1s;
}

.mhmc-homeopathy-img-box:hover img {

    transform: scale(1.08);
}

.mhmc-homeopathy-badge {

    position: absolute;
    left: 25px;
    bottom: 25px;
    width: 140px;
    height: 140px;
    background: #0d6efd;
    color: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: mhmcPulse 3s infinite;
}

.mhmc-homeopathy-badge span {

    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

.mhmc-homeopathy-badge small {

    font-size: 15px;
    margin-top: 6px;
}

.mhmc-homeopathy-shape {

    position: absolute;
    width: 180px;
    height: 180px;
    border: 15px dotted rgba(255, 255, 255, .4);
    right: -45px;
    top: -45px;
    border-radius: 50%;
    animation: mhmcRotate 20s linear infinite;
}

/* Animations */

@keyframes mhmcRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes mhmcPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }

}

/* Responsive */

@media(max-width:991px) {

    .mhmc-homeopathy-title {

        font-size: 36px;

    }

    .mhmc-homeopathy-image {

        margin-bottom: 50px;

    }

}

@media(max-width:767px) {

    .mhmc-homeopathy-area {

        padding: 80px 0;

    }

    .mhmc-homeopathy-title {

        font-size: 30px;

    }

    .mhmc-homeopathy-content p {

        font-size: 16px;
        line-height: 30px;

    }

    .mhmc-homeopathy-badge {

        width: 110px;
        height: 110px;

    }

    .mhmc-homeopathy-badge span {

        font-size: 28px;

    }

}

/*=====================================
BHMS PROGRAM
======================================*/

.mhb-program-area {

    padding: 120px 0;
    background: #f7fbff;
    overflow: hidden;

}

.mhb-image-box {

    position: relative;
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .12);

}

.mhb-image-box img {

    width: 100%;
    transition: 1s;

}

.mhb-image-box:hover img {

    transform: scale(1.08);

}

.mhb-badge {

    position: absolute;
    bottom: 30px;
    left: 30px;
    background: #0B5ED7;
    color: #fff;
    padding: 18px 25px;
    border-radius: 20px;
    animation: mhbFloat 3s infinite;

}

.mhb-badge span {

    display: block;
    font-size: 32px;
    font-weight: 700;

}

.mhb-subtitle {

    display: inline-block;
    padding: 10px 22px;
    background: #EAF3FF;
    color: #0B5ED7;
    font-weight: 600;
    border-radius: 40px;
    margin-bottom: 20px;

}

.mhb-content h2 {

    font-size: 48px;
    font-weight: 700;
    color: #17375E;

}

.mhb-content h5 {

    margin: 15px 0 25px;
    font-size: 24px;
    color: #0B5ED7;

}

.mhb-content p {

    font-size: 17px;
    line-height: 32px;
    color: #5E6A78;
    margin-bottom: 35px;

}

.mhb-feature {

    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    background: #fff;
    border-radius: 18px;
    margin-bottom: 25px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
    transition: .4s;
    position: relative;
    overflow: hidden;

}

.mhb-feature::before {

    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: #0B5ED7;
    transition: .4s;

}

.mhb-feature i {

    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #EAF3FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #0B5ED7;
    transition: .4s;

}

.mhb-feature span {

    font-size: 17px;
    font-weight: 600;
    color: #17375E;

}

.mhb-feature:hover {

    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(13, 110, 253, .18);

}

.mhb-feature:hover::before {

    width: 100%;

}

.mhb-feature:hover span {

    color: #fff;
    position: relative;
    z-index: 2;

}

.mhb-feature:hover i {

    background: #fff;
    position: relative;
    z-index: 2;

}

@keyframes mhbFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }
}

.mhmc-chairman-section {
    padding: 60px 0;
    background: #f7fbff;
}

.mhmc-subtitle {
    display: inline-block;
    color: #0d6efd;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.mhmc-chairman-content h2 {
    font-weight: 800;
    color: #0b2f63;
    margin-bottom: 15px;
}

.mhmc-chairman-content h4 {
    color: #0d6efd;
    font-weight: 700;
}

.mhmc-chairman-content h6 {
    color: #666;
    margin-bottom: 20px;
}

.mhmc-chairman-content p {
    color: #555;
    line-height: 1.9;
    text-align: justify;
}

.mhmc-chairman-message {
    margin-top: 30px;
    padding: 25px;
    border-left: 5px solid #0d6efd;
    background: #fff;
    border-radius: 12px;
    font-style: italic;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.mhmc-sign {
    margin-top: 25px;
    color: #0b2f63;
}

.mhmc-chairman-img {
    max-width: 580px;
    width: 100%;
    border-radius: 20px;
    transition: .4s ease;
    animation: chairmanFloat 5s ease-in-out infinite;
}

.mhmc-chairman-img:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .20);
}

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

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

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

@media (max-width:991px) {
    .mhmc-chairman-content {
        margin-bottom: 40px;
    }

    .mhmc-chairman-img {
        float: none !important;
        margin: auto !important;
        display: block;
    }

    .mhmc-chairman-content h2 {
        font-size: 32px;
    }
}

/*==========================================
VICE CHAIRPERSON SECTION
==========================================*/

.mhmc-vicechair-section {
    padding: 60px 0;
    background: #ffffff;
}

.mhmc-vicechair-content h2 {
    font-weight: 800;
    color: #0b2f63;
    margin-bottom: 15px;
}

.mhmc-vicechair-content h4 {
    color: #0d6efd;
    font-weight: 700;
}

.mhmc-vicechair-content h6 {
    color: #666;
    margin-bottom: 20px;
}

.mhmc-vicechair-content p {
    color: #555;
    line-height: 1.9;
    text-align: justify;
    margin-bottom: 18px;
}

.mhmc-vicechair-message {
    background: #f8fbff;
    border-left: 5px solid #0d6efd;
    padding: 25px;
    border-radius: 15px;
    font-style: italic;
    margin-top: 30px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    transition: .4s;
}

.mhmc-vicechair-message:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}

.mhmc-sign {
    margin-top: 25px;
    color: #0b2f63;
    font-weight: 600;
}

.mhmc-vicechair-img {
    max-width: 600px;
    width: 100%;
    border-radius: 20px;
    transition: .4s ease;
    animation: viceFloat 5s ease-in-out infinite;
}

.mhmc-vicechair-img:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .18);
}

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

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

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

@media(max-width:991px) {

    .mhmc-vicechair-content {
        margin-bottom: 40px;
    }

    .mhmc-vicechair-img {
        float: none !important;
        display: block;
        margin: auto !important;
    }

    .mhmc-vicechair-content h2 {
        font-size: 32px;
    }

}

/*==========================================
PRINCIPAL SECTION
==========================================*/

.mhmc-principal-section {
    padding: 60px 0;
    background: #f8fbff;
}

.mhmc-principal-content h2 {
    font-weight: 800;
    color: #0b2f63;
    margin-bottom: 15px;
}

.mhmc-principal-content h4 {
    color: #0d6efd;
    font-weight: 700;
}

.mhmc-principal-content h6 {
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 20px;
}

.mhmc-principal-content p {
    color: #555;
    line-height: 1.9;
    text-align: justify;
    margin-bottom: 18px;
}

.mhmc-principal-message {
    margin-top: 30px;
    padding: 28px;
    background: #ffffff;
    border-left: 5px solid #0d6efd;
    border-radius: 15px;
    font-style: italic;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    transition: .4s;
}

.mhmc-principal-message:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .14);
}

.mhmc-principal-sign {
    margin-top: 25px;
    color: #0b2f63;
    font-weight: 700;
}

.mhmc-principal-img {
    width: 100%;
    max-width: 580px;
    border-radius: 20px;
    transition: all .4s ease;
    animation: principalFloat 5s ease-in-out infinite;
}

.mhmc-principal-img:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .18);
}

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

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

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

@media (max-width:991px) {

    .mhmc-principal-content {
        margin-bottom: 40px;
    }

    .mhmc-principal-img {
        float: none !important;
        display: block;
        margin: auto !important;
    }

    .mhmc-principal-content h2 {
        font-size: 32px;
    }

}

/*==============================
  HOSPITAL ABOUT SECTION
==============================*/

:root {

    --mh-primary: #0E5A8A;
    --mh-secondary: #0E8E72;
    --mh-dark: #12314A;
    --mh-light: #F7FBFD;
    --mh-border: #E5EEF5;

}

.mh-about-section {

    padding: 60px 0;
    background: #fff;
    position: relative;
    overflow: hidden;

}

.mh-about-section::before {

    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(14, 142, 114, .05);
    border-radius: 50%;
    top: -220px;
    left: -180px;

}

.mh-about-grid {

    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 70px;
    align-items: center;

}

.mh-image-wrapper {

    position: relative;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .15);

}

.mh-image-wrapper img {

    width: 100%;
    display: block;
    transition: .8s;

}

.mh-image-wrapper:hover img {

    transform: scale(1.08);

}

.mh-image-wrapper::after {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, .35),
            transparent);

}

.mh-floating-card {

    position: absolute;
    right: -25px;
    top: 40px;
    background: #fff;
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    animation: floatCard 4s ease-in-out infinite;
    z-index: 2;

}

.mh-floating-card h3 {

    margin: 0;
    font-size: 34px;
    color: var(--mh-secondary);

}

.mh-floating-card span {

    font-size: 15px;
    font-weight: 600;

}

.mh-experience-box {

    position: absolute;
    left: -25px;
    bottom: 40px;
    background: var(--mh-primary);
    color: #fff;
    padding: 20px 28px;
    border-radius: 20px;
    z-index: 2;
    animation: floatCard 5s ease-in-out infinite;

}

.mh-experience-box h2 {

    margin: 0;
    font-size: 40px;
    color: #fff;
}

.mh-experience-box p {

    margin: 0;
    font-size: 15px;
    color: #fff;
}

.mh-subtitle {

    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 10px 18px;
    border-radius: 40px;
    background: #EAF6FB;
    color: var(--mh-primary);
    font-weight: 700;
    margin-bottom: 18px;

}

.mh-about-content h2 {
    margin-bottom: 20px;
    color: var(--mh-dark);

}

.mh-about-content h2 span {

    color: var(--mh-secondary);

}

.mh-about-content p {

    font-size: 17px;
    line-height: 1.9;
    color: #5f6d77;
    margin-bottom: 20px;

}

.mh-feature-grid {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 40px;

}

.mh-feature-card {

    background-color: #064235;
    background-image: url(../img/counter-bg-1.png);
    background-position: center;
    background-size: cover;
    padding: 30px;
    border-radius: 18px;
    border: 1px solid var(--mh-border);
    transition: .45s;
    position: relative;
    overflow: hidden;

}

.mh-feature-card::before {

    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: var(--mh-secondary);
    transition: .4s;

}

.mh-feature-card:hover {

    transform: translateY(-10px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, .12);

}

.mh-feature-card:hover::before {

    width: 100%;

    opacity: .08;

}

.mh-feature-card i {

    font-size: 42px;
    color: var(--mh-primary);
    margin-bottom: 15px;
    transition: .4s;

}

.mh-feature-card:hover i {

    transform: rotate(12deg) scale(1.1);
    color: var(--mh-secondary);

}

.mh-feature-card h4 {

    margin-bottom: 8px;
    font-size: 24px;
    color: #ffffff;

}

.mh-feature-card p {

    margin: 0;
    font-size: 15px;
    color: #ffffff;
}

.mh-service-wrapper {

    margin-top: 90px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

}

.mh-service-box {

    background: var(--mh-light);
    padding: 40px;
    border-radius: 22px;
    transition: .45s;
    border: 1px solid transparent;

}

.mh-service-box:hover {

    background: #fff;
    transform: translateY(-12px);
    border-color: #d9e7f0;
    box-shadow: 0 25px 45px rgba(0, 0, 0, .10);

}

.mh-service-box i {

    font-size: 50px;
    margin-bottom: 20px;
    color: var(--mh-secondary);
    transition: .4s;

}

.mh-service-box:hover i {

    transform: rotateY(180deg);

}

.mh-service-box h4 {

    margin-bottom: 20px;
    color: var(--mh-dark);

}

.mh-service-box ul {

    padding-left: 18px;
    margin: 0;

}

.mh-service-box li {

    margin-bottom: 12px;
    color: #64727a;

}

@keyframes floatCard {

    0% {
        transform: translateY(0px);
    }

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

    100% {
        transform: translateY(0px);
    }

}

@media(max-width:991px) {

    .mh-about-grid {

        grid-template-columns: 1fr;

    }

    .mh-service-wrapper {

        grid-template-columns: 1fr;

    }

    .mh-feature-grid {

        grid-template-columns: 1fr;

    }

    .mh-about-content h2 {

        font-size: 36px;

    }

}

@media(max-width:576px) {

    .mh-about-section {

        padding: 70px 0;

    }

    .mh-floating-card,
    .mh-experience-box {

        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        top: auto;
        margin: 15px;

    }

    .mh-about-content h2 {

        font-size: 30px;

    }

}

/*==========================================
   SCHOLARSHIP SECTION
==========================================*/

:root {

    --mh-primary: #0b6bcb;
    --mh-secondary: #0ea66c;
    --mh-dark: #16324f;
    --mh-light: #f7fbff;
    --mh-border: #dfeaf3;
    --mh-text: #6b7280;
    --mh-white: #ffffff;

}

.mhms-scholarship-section {

    padding: 110px 0;
    background: linear-gradient(180deg, #ffffff, #f7fbfd);
    position: relative;
    overflow: hidden;

}

.mhms-scholarship-section::before {

    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: rgba(14, 166, 108, .08);
    top: -180px;
    left: -180px;

}

.mhms-scholarship-section::after {

    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(11, 107, 203, .05);
    right: -120px;
    bottom: -120px;

}

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

.mhms-scholarship-grid {

    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 70px;
    align-items: center;

}

/*========================
IMAGE
========================*/

.mhms-scholarship-image {

    position: relative;

}

.mhms-scholarship-image img {

    width: 100%;
    display: block;
    border-radius: 25px;
    transition: .7s;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .15);

}

.mhms-scholarship-image:hover img {

    transform: scale(1.06) rotate(1deg);

}

.mhms-floating-box {

    position: absolute;
    bottom: 35px;
    left: -25px;
    background: #fff;
    padding: 22px 28px;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);
    animation: mhFloat 4s infinite ease-in-out;

}

.mhms-floating-box h2 {

    margin: 0;
    color: var(--mh-secondary);
    font-size: 42px;
    font-weight: 700;

}

.mhms-floating-box span {

    display: block;
    color: #555;
    font-size: 15px;
    margin-top: 6px;

}

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

.mhms-subtitle {

    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #eaf5ff;
    color: var(--mh-primary);
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 20px;

}

.mhms-subtitle i {

    font-size: 22px;

}

.mhms-scholarship-content h2 {
    color: var(--mh-dark);
    margin-bottom: 22px;

}

.mhms-scholarship-content h2 span {

    color: var(--mh-secondary);

}

.mhms-scholarship-content p {

    color: var(--mh-text);
    line-height: 1.9;
    font-size: 16px;
    margin-bottom: 35px;

}

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

.mhms-scholarship-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin: 40px 0 0;
}

.mhms-scholarship-card {

    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #fff;
    border-radius: 18px;
    padding: 22px;
    border: 1px solid var(--mh-border);
    transition: .4s;
    position: relative;
    overflow: hidden;

}

.mhms-scholarship-card::before {

    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--mh-primary), var(--mh-secondary));
    left: -100%;
    top: 0;
    transition: .45s;

}

.mhms-scholarship-card:hover::before {

    left: 0;

}

.mhms-scholarship-card:hover {

    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .10);

}

.mhms-icon {

    min-width: 68px;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef8ff;
    transition: .4s;

}

.mhms-icon i {

    font-size: 30px;
    color: var(--mh-primary);
    transition: .4s;

}

.mhms-scholarship-card:hover .mhms-icon {

    background: var(--mh-secondary);
    transform: rotate(360deg);

}

.mhms-scholarship-card:hover .mhms-icon i {

    color: #fff;

}

.mhms-info h4 {

    font-size: 20px;
    color: var(--mh-dark);
    margin-bottom: 10px;

}

.mhms-info p {

    margin: 0;
    font-size: 15px;
    line-height: 1.7;

}

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

.mhms-btn {

    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 45px;
    background: linear-gradient(90deg, var(--mh-primary), var(--mh-secondary));
    color: #fff;
    text-decoration: none;
    padding: 16px 35px;
    border-radius: 50px;
    font-weight: 600;
    transition: .4s;
    overflow: hidden;
    position: relative;

}

.mhms-btn::before {

    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, .15);
    left: 0;
    top: 0;
    transition: .5s;

}

.mhms-btn:hover::before {

    width: 100%;

}

.mhms-btn i {

    font-size: 20px;
    transition: .4s;

}

.mhms-btn:hover {

    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(11, 107, 203, .30);

}

.mhms-btn:hover i {

    transform: translateX(6px);

}

/*========================
ANIMATION
========================*/

@keyframes mhFloat {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0px);

    }

}

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

@media(max-width:1199px) {

    .mhms-scholarship-grid {

        grid-template-columns: 1fr;
        gap: 60px;

    }

}

@media(max-width:991px) {

    .mhms-scholarship-list {

        grid-template-columns: 1fr;

    }

    .mhms-scholarship-content h2 {

        font-size: 38px;

    }

}

@media(max-width:767px) {

    .mhms-scholarship-section {

        padding: 80px 0;

    }

    .mhms-floating-box {

        left: 15px;
        bottom: 15px;
        padding: 18px 22px;

    }

    .mhms-floating-box h2 {

        font-size: 32px;

    }

    .mhms-scholarship-content h2 {

        font-size: 30px;

    }

    .mhms-scholarship-card {

        flex-direction: column;
        text-align: center;
        align-items: center;

    }

    .mhms-btn {

        width: 100%;
        justify-content: center;

    }

}

@media(max-width:575px) {

    .mhms-subtitle {

        font-size: 14px;

    }

    .mhms-scholarship-content h2 {

        font-size: 26px;

    }

    .mhms-icon {

        width: 60px;
        height: 60px;
        min-width: 60px;

    }

    .mhms-icon i {

        font-size: 26px;

    }

}

/*=========================================
CAREER OPPORTUNITIES
PART 2A
=========================================*/

:root {

    --mhcareer-primary: #0A5AA5;
    --mhcareer-secondary: #0AA56A;
    --mhcareer-dark: #16314d;
    --mhcareer-light: #f6fbff;
    --mhcareer-border: #dfeaf3;
    --mhcareer-text: #6d7684;
    --mhcareer-white: #ffffff;

}

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

.mhcareer-section {

    position: relative;
    padding: 60px 0;
    background: #fff;
    overflow: hidden;

}

.mhcareer-section::before {

    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    background: rgba(10, 90, 165, .05);
    border-radius: 50%;
    left: -220px;
    top: -220px;

}

.mhcareer-section::after {

    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    background: rgba(10, 165, 106, .05);
    border-radius: 50%;
    right: -180px;
    bottom: -180px;

}

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

.mhcareer-grid {

    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 70px;
    align-items: center;

}

/*=========================================
IMAGE
=========================================*/

.mhcareer-image-area {

    position: relative;

}

.mhcareer-image {

    position: relative;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .15);

}

.mhcareer-image img {

    width: 100%;
    display: block;
    transition: .8s ease;

}

.mhcareer-image:hover img {

    transform: scale(1.08);

}

.mhcareer-image::after {

    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, .30),
            transparent);

}

/*=========================================
FLOATING CARD
=========================================*/

.mhcareer-floating-card {

    position: absolute;
    right: -25px;
    bottom: 40px;
    background: #fff;
    padding: 25px 30px;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
    animation: mhcareerFloat 4s infinite ease-in-out;
    z-index: 5;

}

.mhcareer-floating-card h2 {

    margin: 0;
    color: var(--mhcareer-secondary);
    font-size: 42px;
    font-weight: 700;

}

.mhcareer-floating-card span {

    display: block;
    margin-top: 6px;
    color: #666;
    font-weight: 600;
    font-size: 15px;

}

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

.mhcareer-content {

    position: relative;

}

.mhcareer-subtitle {

    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: #EAF5FF;
    color: var(--mhcareer-primary);
    border-radius: 40px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;

}

.mhcareer-subtitle i {

    font-size: 22px;

}

.mhcareer-content h2 {
    color: var(--mhcareer-dark);
    margin-bottom: 25px;

}

.mhcareer-content h2 span {

    color: var(--mhcareer-secondary);

}

.mhcareer-content p {

    color: var(--mhcareer-text);
    line-height: 1.9;
    font-size: 16px;
    margin-bottom: 40px;

}

/*=========================================
CAREER CARD GRID
=========================================*/

.mhcareer-card-wrapper {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;

}

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

.mhcareer-card {

    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--mhcareer-border);
    position: relative;
    overflow: hidden;
    transition: .45s ease;

}

.mhcareer-card::before {

    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(135deg,
            rgba(10, 90, 165, .08),
            rgba(10, 165, 106, .08));
    transition: .5s;

}

.mhcareer-card:hover::before {

    width: 100%;

}

.mhcareer-card:hover {

    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);

}

/*=========================================
ICON
=========================================*/

.mhcareer-icon {

    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eef8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .45s;

}

.mhcareer-icon i {

    font-size: 20px;
    color: var(--mhcareer-primary);
    transition: .45s;

}

.mhcareer-card:hover .mhcareer-icon {

    background: var(--mhcareer-secondary);
    transform: rotate(360deg);

}

.mhcareer-card:hover .mhcareer-icon i {

    color: #fff;

}

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

.mhcareer-info {

    position: relative;
    z-index: 2;

}

.mhcareer-info h4 {

    color: var(--mhcareer-dark);
        font-size: 17px;
    line-height: 26px;
    margin-bottom: 10px;
    font-weight: 700;

}

.mhcareer-info p {

    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--mhcareer-text);

}

/*=========================================
FLOAT ANIMATION
=========================================*/

@keyframes mhcareerFloat {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0px);

    }

}

/*=========================================
CAREER HIGHLIGHTS
=========================================*/

.mhcareer-highlight-area {

    margin-top: 50px;

}

.mhcareer-title {

    text-align: center;
    margin-bottom: 45px;

}

.mhcareer-title h3 {

    font-size: 34px;
    color: var(--mhcareer-dark);
    display: inline-flex;
    align-items: center;
    gap: 12px;

}

.mhcareer-title h3 i {

    color: var(--mhcareer-secondary);
    font-size: 34px;

}

.mhcareer-highlight-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

}

.mhcareer-highlight-card {

    /* background:#fff; */
    background-color: #064235;
    background-image: url(../img/bg-footer.png);
    background-position: center;
    background-size: cover;
    border: 1px solid var(--mhcareer-border);
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    transition: .45s;
    position: relative;
    overflow: hidden;

}

.mhcareer-highlight-card::before {

    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    left: 0;
    top: 0;
    background: linear-gradient(90deg,
            var(--mhcareer-primary),
            var(--mhcareer-secondary));
    transform: scaleX(0);
    transition: .4s;

}

.mhcareer-highlight-card:hover::before {

    transform: scaleX(1);

}

.mhcareer-highlight-card:hover {

    transform: translateY(-10px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .10);

}

.mhcareer-highlight-card i {
    font-size: 50px;
    color: #ffff;
    margin-bottom: 20px;
    transition: .45s;
}

.mhcareer-highlight-card:hover i {

    color: var(--mhcareer-secondary);
    transform: rotateY(180deg);

}

.mhcareer-highlight-card h4 {

    font-size: 20px;
    color: #ffff;
    line-height: 1.5;

}

/*=========================================
HIGHER EDUCATION
=========================================*/

.mhcareer-study-section {

    margin-top: 60px;
    padding: 60px;
    border-radius: 30px;
    background: linear-gradient(135deg, #f7fbff, #eef8ff);

}

.mhcareer-study-content {

    text-align: center;
    margin-bottom: 50px;

}

.mhcareer-study-content span {

    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--mhcareer-primary);
    padding: 10px 20px;
    border-radius: 40px;
    font-weight: 600;
    margin-bottom: 20px;

}

.mhcareer-study-content span i {

    font-size: 22px;

}

.mhcareer-study-content h2 {

    font-size: 42px;
    color: var(--mhcareer-dark);
    margin-bottom: 20px;

}

.mhcareer-study-content p {

    max-width: 800px;
    margin: auto;
    color: var(--mhcareer-text);
    line-height: 1.9;

}

.mhcareer-study-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;

}

.mhcareer-study-card {

    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 25px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--mhcareer-border);
    font-weight: 600;
    color: var(--mhcareer-dark);
    transition: .4s;

}

.mhcareer-study-card i {

    color: var(--mhcareer-secondary);
    font-size: 22px;
    transition: .4s;

}

.mhcareer-study-card:hover {

    background: var(--mhcareer-primary);
    color: #fff;
    transform: translateX(8px);

}

.mhcareer-study-card:hover i {

    color: #fff;
    transform: translateX(8px);

}

/*=========================================
BOTTOM BUTTON
=========================================*/

.mhcareer-bottom {

    text-align: center;
    margin-top: 70px;

}

.mhcareer-btn {

    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    border-radius: 60px;
    background: linear-gradient(90deg,
            var(--mhcareer-primary),
            var(--mhcareer-secondary));
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: .45s;
    position: relative;
    overflow: hidden;

}

.mhcareer-btn::before {

    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .15);
    transition: .45s;

}

.mhcareer-btn:hover::before {

    left: 100%;

}

.mhcareer-btn:hover {

    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(10, 90, 165, .30);

}

.mhcareer-btn i {

    font-size: 22px;
    transition: .4s;

}

.mhcareer-btn:hover i {

    transform: translateX(8px);

}

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

@media(max-width:1200px) {

    .mhcareer-grid {

        grid-template-columns: 1fr;

    }

}

@media(max-width:992px) {

    .mhcareer-card-wrapper {

        grid-template-columns: 1fr;

    }

    .mhcareer-highlight-grid {

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

    }

    .mhcareer-study-grid {

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

    }

    .mhcareer-content h2 {

        font-size: 38px;

    }

    .mhcareer-study-content h2 {

        font-size: 34px;

    }

}

@media(max-width:768px) {

    .mhcareer-section {

        padding: 80px 0;

    }

    .mhcareer-highlight-grid {

        grid-template-columns: 1fr;

    }

    .mhcareer-study-grid {

        grid-template-columns: 1fr;

    }

    .mhcareer-study-section {

        padding: 40px 25px;

    }

    .mhcareer-content h2 {

        font-size: 30px;

    }

    .mhcareer-study-content h2 {

        font-size: 28px;

    }

    .mhcareer-floating-card {

        left: 20px;
        right: auto;
        bottom: 20px;

    }

}

@media(max-width:576px) {

    .mhcareer-subtitle {

        font-size: 14px;

    }

    .mhcareer-card {

        flex-direction: column;
        text-align: center;
        align-items: center;

    }

    .mhcareer-btn {

        width: 100%;
        justify-content: center;

    }

    .mhcareer-title h3 {

        font-size: 26px;

    }

    .mhcareer-highlight-card {

        padding: 30px 20px;

    }

}