/* =========================================
   MERCURIO - WHO WE SERVE COMMON CSS
========================================= */

.mserve-hero,
.mserve-cta {
    position: relative;
    
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mserve-hero {
    padding: 80px 0;
}

.mserve-hero-overlay,
.mserve-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(1, 19, 38, 0.94), rgba(18, 35, 54, 0.92));
}

.mserve-hero-content,
.mserve-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: auto;
    text-align: center;
    color: #fff;
}

    .mserve-hero-small,
    .mserve-section-label,
    .mserve-section-title span,
    .mserve-cta-content span {
        display: block;
        margin-bottom: 12px;
        color: #B88720;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .mserve-hero-small,
    .mserve-cta-content span {
        color: #B88720;
    }

.mserve-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(36px, 4vw, 60px);
    line-height: 1.15;
}

.mserve-hero p {
    max-width: 700px;
    margin: auto;
    color: rgba(255,255,255,.9);
    font-size: 17px;
    line-height: 1.7;
}


/* INTRO */

.mserve-intro {
    padding: 80px 0;
    background: #fff;
}

.mserve-intro-content {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

    .mserve-intro-content h2,
    .mserve-section-title h2 {
        margin: 0 0 15px;
        color: #011329;
        font-size: clamp(30px, 4vw, 42px);
        line-height: 1.2;
        font-weight:600;
    }

    .mserve-intro-content p,
    .mserve-section-title p {
        margin: auto;
        color: #607080;
        font-size: 16px;
        line-height: 1.8;
    }


/* OFFER */

.mserve-offer {
    padding: 80px 0;
    background: #f7faff;
}

.mserve-section-title {
    max-width: 750px;
    margin: 0 auto 45px;
    text-align: center;
}

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

.mserve-offer-card {
    padding: 30px 22px;
    background: #fff;
    border: 1px solid #e5edf4;
    border-radius: 8px;
    text-align: center;
    transition: .3s ease;
}

    .mserve-offer-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(16,42,67,.08);
    }

.mserve-offer-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #B88720;
    color: #fff;
    border-radius: 50%;
    font-size: 34px;

}
.mserve-offer-icon img {
    width: 50px;
    height: 50px;
}
    .mserve-offer-card h3 {
    margin: 0 0 10px;
    color: #102a43;
    font-size: 19px;
}

.mserve-offer-card p {
    margin: 0;
    color: #607080;
    font-size: 14px;
    line-height: 1.6;
}


/* CTA */

.mserve-cta {
    padding: 80px 0;
}

.mserve-cta-content h2 {
    margin: 0 0 18px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.2;
}

.mserve-cta-content p {
    max-width: 650px;
    margin: 0 auto 25px;
    color: rgba(255,255,255,.9);
    line-height: 1.7;
}

.mserve-btn {
    display: inline-flex;
    padding: 14px 28px;
    background: #fff;
    color: #B88720;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: .3s ease;
}

    .mserve-btn:hover {
        background: #B88720;
        color: #fff;
    }


/* RESPONSIVE */

@media (max-width: 991px) {

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

@media (max-width: 767px) {

    .mserve-hero {
        padding: 70px 15px;
    }

    .mserve-intro,
    .mserve-offer {
        padding: 65px 0;
    }

    .mserve-offer-grid {
        grid-template-columns: 1fr;
    }

    .mserve-hero h1 {
        font-size: 36px;
    }
}
/* =========================================
   CAREER COUNSELLING - COMMON
========================================= */

.mcareercounselling-hero,
.mcareercounselling-cta {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mcareercounselling-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(1, 19, 38, 0.94), rgba(18, 35, 54, 0.92));
}
.mcareercounselling-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(1, 25, 55, 0.96), rgba(3, 55, 105, 0.90));
}
.mcareercounselling-hero {
    padding: 80px 0;
}

.mcareercounselling-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.mcareercounselling-small-title {
    display: inline-block;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:#B88720;
}

.mcareercounselling-hero h1 {
    margin: 0 0 20px;
    font-size: clamp(36px, 4vw, 64px);
    line-height: 1.12;
    font-weight: 600;
}

.mcareercounselling-hero p {
    max-width: 750px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255,255,255,.92);
}


/* =========================================
   TITLES
========================================= */

.mcareercounselling-title {
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}

    .mcareercounselling-title > span,
    .mcareercounselling-section-head > span {
        display: block;
        margin-bottom: 12px;
        color: #B88720;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .mcareercounselling-title h2,
    .mcareercounselling-section-head h2 {
        margin: 0 0 18px;
        color: #000;
        font-size: clamp(30px, 4vw, 44px);
        line-height: 1.2;
        font-weight
            :600;
    }

    .mcareercounselling-title p,
    .mcareercounselling-section-head p {
        margin: 0 auto 12px;
        color: #515254;
        font-size: 16px;
        line-height: 1.8;
    }


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

.mcareercounselling-intro {
    padding: 80px 0;
    background: #fff;
}

.mcareercounselling-section-head {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.mcareercounselling-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf5fc;
    color: #1769aa;
    font-size: 30px;
}


/* =========================================
   WHAT YOU WILL LEARN
========================================= */

.mcareercounselling-learn {
    padding: 80px 0;
    background: #f7faff;
}

.mcareercounselling-learn-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.mcareercounselling-learn-item {
    display: flex;
    gap: 20px;
    padding: 30px;
    background: #fff;
    border: 1px solid #e6eef5;
    border-radius: 10px;
    transition: .3s ease;
}

    .mcareercounselling-learn-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(16, 42, 67, .08);
    }

.mcareercounselling-learn-icon {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff3dd;
    color: #B88720;
    font-size: 23px;
}

.mcareercounselling-learn-item h3 {
    margin: 0 0 8px;
    color: #102a43;
    font-size: 20px;
}

.mcareercounselling-learn-item p {
    margin: 0;
    color: #515254;
    line-height: 1.7;
    font-size: 15px;
}


/* =========================================
   AUDIENCE
========================================= */

.mcareercounselling-audience {
    padding: 80px 0;
    background: #fff;
}

.mcareercounselling-audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.mcareercounselling-audience-card {
    padding: 35px 25px;
    text-align: center;
    background: #faf6ed;
    border: 1px solid #B88720;
    border-radius: 10px;
    transition: .3s ease;
}

    .mcareercounselling-audience-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(16, 42, 67, .08);
    }

.mcareercounselling-card-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf5fc;
    color: #1769aa;
    font-size: 25px;
}

.mcareercounselling-audience-card h3 {
    margin: 0 0 12px;
    color: #102a43;
    font-size: 20px;
}

.mcareercounselling-audience-card p {
    margin: 0;
    color: #515254;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================
   APPROACH
========================================= */

.mcareercounselling-approach {
    padding: 80px 0;
    background: #f7faff;
}

.mcareercounselling-approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.mcareercounselling-approach-item {
    position: relative;
    padding: 35px 28px;
    background: #fff;
    border-radius: 10px;
    border-top: 4px solid #B88720;
}

    .mcareercounselling-approach-item > span {
        display: block;
        margin-bottom: 20px;
        color: #B88720;
        font-size: 30px;
        font-weight: 700;
    }

    .mcareercounselling-approach-item h3 {
        margin: 0 0 12px;
        color: #102a43;
        font-size: 22px;
    }

    .mcareercounselling-approach-item p {
        margin: 0;
        color: #515254;
        font-size: 15px;
        line-height: 1.7;
    }


/* =========================================
   BENEFITS
========================================= */

.mcareercounselling-benefits {
    padding: 80px 0;
    background: #fff;
}

.mcareercounselling-benefits-list {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 30px;
}

.mcareercounselling-benefit {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-bottom: 1px solid #e5edf4;
}

    .mcareercounselling-benefit i {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #fef7e9;
        color: #B88720;
    }

    .mcareercounselling-benefit span {
        color: #334e68;
        font-size: 16px;
        font-weight: 500;
    }


/* =========================================
   FINAL CTA
========================================= */

.mcareercounselling-cta {
    padding: 80px 0;
}

.mcareercounselling-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

    .mcareercounselling-cta-content > span {
        display: block;
        margin-bottom: 15px;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #B88720;
    }

    .mcareercounselling-cta-content h2 {
        margin: 0 0 20px;
        font-size: clamp(30px, 4vw, 48px);
        line-height: 1.2;
    }

    .mcareercounselling-cta-content p {
        max-width: 700px;
        margin: 0 auto 30px;
        color: rgba(255,255,255,.9);
        font-size: 17px;
        line-height: 1.8;
    }

.mcareercounselling-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    background: #fff;
    color: #B88720;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: .3s ease;
}

    .mcareercounselling-btn:hover {
        background: #B88720;
        color: #fff;
    }


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

@media (max-width: 991px) {

    .mcareercounselling-hero {
        padding: 85px 0;
    }

    .mcareercounselling-learn-grid {
        grid-template-columns: 1fr;
    }

    .mcareercounselling-audience-grid,
    .mcareercounselling-approach-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    .mcareercounselling-hero {
        padding: 70px 20px;
    }

    .mcareercounselling-intro,
    .mcareercounselling-learn,
    .mcareercounselling-audience,
    .mcareercounselling-approach,
    .mcareercounselling-benefits,
    .mcareercounselling-cta {
        padding: 70px 0;
    }

    .mcareercounselling-audience-grid,
    .mcareercounselling-approach-grid,
    .mcareercounselling-benefits-list {
        grid-template-columns: 1fr;
    }

    .mcareercounselling-learn-item {
        padding: 25px 20px;
    }

    .mcareercounselling-hero h1 {
        font-size: 36px;
    }
}
/* =========================================
   PUBLIC SPEAKING HERO
========================================= */

.mpublicspeaking-hero {
    position: relative;
    padding: clamp(80px, 4vw, 135px) 0;
    background: url('../../assets/img/Public-Speaking-Training-banner.jpg') center center / cover no-repeat;
    overflow: hidden;
}

.mpublicspeaking-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(1, 19, 38, 0.94), rgba(18, 35, 54, 0.92));
}

.mpublicspeaking-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.mpublicspeaking-hero-subtitle {
    display: inline-block;
    margin-bottom: 15px;
    color: #B88720;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mpublicspeaking-hero-content h1 {
    margin: 0 auto 20px;
    color: #fff;
    font-size: clamp(38px, 4vw, 64px);
    line-height: 1.15;
    font-weight: 600;
}

.mpublicspeaking-hero-content p {
    max-width: 720px;
    margin: auto;
    color: rgba(255,255,255,0.85);
    font-size: 17px;
    line-height: 1.8;
}


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

.mpublicspeaking-intro,
.mpublicspeaking-learn,
.mpublicspeaking-audience,
.mpublicspeaking-approach,
.mpublicspeaking-benefits {
    padding: clamp(70px, 4vw, 110px) 0;
}

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

    .mpublicspeaking-section-heading span,
    .mpublicspeaking-section-label {
        display: inline-block;
        margin-bottom: 12px;
        color: #B88720;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mpublicspeaking-section-heading h2,
    .mpublicspeaking-intro-content h2 {
        margin: 0 0 17px;
        color: #000;
        font-size: clamp(30px, 3.3vw, 46px);
        line-height: 1.2;
        font-weight: 700;
    }

    .mpublicspeaking-section-heading p,
    .mpublicspeaking-intro-content p {
        margin: 0;
        color: #515254;
        font-size: 16px;
        line-height: 1.8;
    }


/* =========================================
   INTRO
========================================= */

.mpublicspeaking-intro {
    background: #fff;
}

.mpublicspeaking-intro-content {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.mpublicspeaking-intro-icon {
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf5fc;
    color: #1769aa;
    font-size: 34px;
}

.mpublicspeaking-intro-content p + p {
    margin-top: 15px;
}


/* =========================================
   WHAT YOU WILL LEARN
========================================= */

.mpublicspeaking-learn {
    background: #f7faff;
}

.mpublicspeaking-learn-list {
    max-width: 1000px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.mpublicspeaking-learn-item {
    display: flex;
    align-items: center;
    padding: 23px 25px;
    background: #fff;
    border: 1px solid #e5edf5;
    border-radius: 10px;
    transition: all 0.3s ease;
}

    .mpublicspeaking-learn-item:hover {
        transform: translateY(-4px);
        border-color: #B88720;
        box-shadow: 0 12px 30px rgba(16,42,67,0.08);
    }

.mpublicspeaking-learn-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    margin-right: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fef7e9;
    color: #B88720;
}

.mpublicspeaking-learn-item h3 {
    margin: 0;
    color: #102a43;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 600;
}


/* =========================================
   AUDIENCE
========================================= */

.mpublicspeaking-audience {
    background: #fff;
}

.mpublicspeaking-audience-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 1050px;
    margin: auto;
}

.mpublicspeaking-audience-item {
    padding: 35px;
    background: #faf6ed;
    border: 1px solid #B88720;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

    .mpublicspeaking-audience-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(16,42,67,0.09);
    }

.mpublicspeaking-audience-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1769aa;
    color: #fff;
    font-size: 27px;
}

.mpublicspeaking-audience-item h3 {
    margin: 0 0 10px;
    color: #102a43;
    font-size: 20px;
}

.mpublicspeaking-audience-item p {
    margin: 0;
    color: #515254;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================
   TRAINING APPROACH
========================================= */

.mpublicspeaking-approach {
    background: #f7faff;
}

.mpublicspeaking-approach-list {
    max-width: 1050px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.mpublicspeaking-approach-item {
    padding: 30px 24px;
    background: #fff;
    border: 1px solid #e5edf5;
    border-radius: 10px;
    text-align: center;
}

    .mpublicspeaking-approach-item > span {
        display: block;
        margin-bottom: 15px;
        color: #B88720;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .mpublicspeaking-approach-item h3 {
        margin: 0 0 10px;
        color: #102a43;
        font-size: 20px;
    }

    .mpublicspeaking-approach-item p {
        margin: 0;
        color: #515254;
        font-size: 14px;
        line-height: 1.7;
    }


/* =========================================
   BENEFITS
========================================= */

.mpublicspeaking-benefits {
    background: #fff;
}

.mpublicspeaking-benefits-list {
    max-width: 900px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 40px;
}

.mpublicspeaking-benefit-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e9eef3;
}

    .mpublicspeaking-benefit-item i {
        margin-right: 14px;
        color: #B88720;
        font-size: 17px;
    }

    .mpublicspeaking-benefit-item span {
        color: #344054;
        font-size: 16px;
        line-height: 1.5;
    }


/* =========================================
   FINAL CTA
========================================= */

.mpublicspeaking-cta {
    position: relative;
    padding: clamp(70px, 4vw, 105px) 0;
    
    overflow: hidden;
}

.mpublicspeaking-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(1, 25, 55, 0.96), rgba(3, 55, 105, 0.90) );
}

.mpublicspeaking-cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: auto;
    text-align: center;
}

    .mpublicspeaking-cta-content > span {
        display: inline-block;
        margin-bottom: 12px;
        color: #B88720;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .mpublicspeaking-cta-content h2 {
        margin: 0 0 15px;
        color: #fff;
        font-size: clamp(30px, 3.5vw, 46px);
        line-height: 1.2;
    }

    .mpublicspeaking-cta-content p {
        max-width: 650px;
        margin: 0 auto 30px;
        color: rgba(255,255,255,0.82);
        font-size: 16px;
        line-height: 1.8;
    }

.mpublicspeaking-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 28px;
    border-radius: 5px;
    background: #fff;
    color: #B88720;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mpublicspeaking-cta-btn:hover {
        background: #B88720;
        color: #fff;
    }

    .mpublicspeaking-cta-btn i {
        transition: transform 0.3s ease;
    }

    .mpublicspeaking-cta-btn:hover i {
        transform: translateX(4px);
    }


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

@media (max-width: 991px) {

    .mpublicspeaking-approach-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    .mpublicspeaking-hero {
        padding: 75px 0;
    }

    .mpublicspeaking-hero-content p {
        font-size: 15px;
    }

    .mpublicspeaking-intro,
    .mpublicspeaking-learn,
    .mpublicspeaking-audience,
    .mpublicspeaking-approach,
    .mpublicspeaking-benefits {
        padding: 70px 0;
    }

    .mpublicspeaking-learn-list,
    .mpublicspeaking-audience-list,
    .mpublicspeaking-benefits-list,
    .mpublicspeaking-approach-list {
        grid-template-columns: 1fr;
    }

    .mpublicspeaking-section-heading {
        margin-bottom: 35px;
    }

    .mpublicspeaking-audience-item {
        padding: 28px 22px;
    }

    .mpublicspeaking-hero-content h1 {
        font-size: 38px;
    }
}

/* =========================================
   SOFT SKILLS HERO
========================================= */

.msoftskills-hero {
    position: relative;
    padding: clamp(80px, 6vw, 135px) 0;
    background: url('../../assets/img/Soft-Skills-Training-banner.jpg') center center / cover no-repeat;
    overflow: hidden;
}

.msoftskills-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(1, 19, 38, 0.94), rgba(18, 35, 54, 0.92));
}

.msoftskills-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.msoftskills-hero-subtitle {
    display: inline-block;
    margin-bottom: 15px;
    color: #B88720;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.msoftskills-hero-content h1 {
    margin: 0 auto 20px;
    color: #fff;
    font-size: clamp(38px, 4vw, 64px);
    line-height: 1.15;
    font-weight: 600;
}

.msoftskills-hero-content p {
    max-width: 720px;
    margin: auto;
    color: rgba(255,255,255,0.85);
    font-size: 17px;
    line-height: 1.8;
}


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

.msoftskills-intro,
.msoftskills-learn,
.msoftskills-audience,
.msoftskills-approach,
.msoftskills-benefits {
    padding: clamp(70px, 4vw, 110px) 0;
}

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

    .msoftskills-section-heading span,
    .msoftskills-section-label {
        display: inline-block;
        margin-bottom: 12px;
        color: #B88720;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .msoftskills-section-heading h2,
    .msoftskills-intro-content h2 {
        margin: 0 0 17px;
        color: #000;
        font-size: clamp(30px, 3.0vw, 46px);
        line-height: 1.2;
        font-weight: 700;
    }

    .msoftskills-section-heading p,
    .msoftskills-intro-content p {
        margin: 0;
        color: #515254;
        font-size: 16px;
        line-height: 1.8;
    }


/* =========================================
   INTRO
========================================= */

.msoftskills-intro {
    background: #fff;
}

.msoftskills-intro-content {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.msoftskills-intro-icon {
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf5fc;
    color: #1769aa;
    font-size: 34px;
}

.msoftskills-intro-content p + p {
    margin-top: 15px;
}


/* =========================================
   WHAT YOU WILL LEARN
========================================= */

.msoftskills-learn {
    background: #f7faff;
}

.msoftskills-learn-list {
    max-width: 1000px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.msoftskills-learn-item {
    display: flex;
    align-items: center;
    padding: 23px 25px;
    background: #fff;
    border: 1px solid #e5edf5;
    border-radius: 10px;
    transition: all 0.3s ease;
}

    .msoftskills-learn-item:hover {
        transform: translateY(-4px);
        border-color:#B88720;
        box-shadow: 0 12px 30px rgba(16,42,67,0.08);
    }

.msoftskills-learn-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    margin-right: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fef7e9;
    color: #B88720;
}

.msoftskills-learn-item h3 {
    margin: 0;
    color: #102a43;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 600;
}


/* =========================================
   AUDIENCE
========================================= */

.msoftskills-audience {
    background: #fff;
}

.msoftskills-audience-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 1050px;
    margin: auto;
}

.msoftskills-audience-item {
    padding: 35px;
    background: #faf6ed;
    border: 1px solid #B88720;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

    .msoftskills-audience-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(16,42,67,0.09);
    }

.msoftskills-audience-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1769aa;
    color: #fff;
    font-size: 27px;
}

.msoftskills-audience-item h3 {
    margin: 0 0 10px;
    color: #102a43;
    font-size: 20px;
}

.msoftskills-audience-item p {
    margin: 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================
   TRAINING APPROACH
========================================= */

.msoftskills-approach {
    background: #f7faff;
}

.msoftskills-approach-list {
    max-width: 1050px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.msoftskills-approach-item {
    padding: 30px 24px;
    background: #fff;
    border: 1px solid #e5edf5;
    border-radius: 10px;
    text-align: center;
}

    .msoftskills-approach-item > span {
        display: block;
        margin-bottom: 15px;
        color: #B88720;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .msoftskills-approach-item h3 {
        margin: 0 0 10px;
        color: #102a43;
        font-size: 24px;
    }

    .msoftskills-approach-item p {
        margin: 0;
        color: #515254;
        font-size: 14px;
        line-height: 1.7;
    }


/* =========================================
   BENEFITS
========================================= */

.msoftskills-benefits {
    background: #fff;
}

.msoftskills-benefits-list {
    max-width: 900px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 40px;
}

.msoftskills-benefit-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e9eef3;
}

    .msoftskills-benefit-item i {
        margin-right: 14px;
        color: #B88720;
        font-size: 17px;
    }

    .msoftskills-benefit-item span {
        color: #344054;
        font-size: 16px;
        line-height: 1.5;
    }


/* =========================================
   FINAL CTA
========================================= */

.msoftskills-cta {
    position: relative;
    padding: clamp(70px, 4vw, 105px) 0;
   
    overflow: hidden;
}

.msoftskills-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(1, 25, 55, 0.96), rgba(3, 55, 105, 0.90) );
}

.msoftskills-cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: auto;
    text-align: center;
}

    .msoftskills-cta-content > span {
        display: inline-block;
        margin-bottom: 12px;
        color: #B88720;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform:uppercase;
    }

    .msoftskills-cta-content h2 {
        margin: 0 0 15px;
        color: #fff;
        font-size: clamp(30px, 3.5vw, 46px);
        line-height: 1.2;
    }

    .msoftskills-cta-content p {
        max-width: 650px;
        margin: 0 auto 30px;
        color: rgba(255,255,255,0.82);
        font-size: 16px;
        line-height: 1.8;
    }

.msoftskills-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 28px;
    border-radius: 5px;
    background: #fff;
    color: #B88720;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .msoftskills-cta-btn:hover {
        background: #B88720;
        color: #fff;
    }

    .msoftskills-cta-btn i {
        transition: transform 0.3s ease;
    }

    .msoftskills-cta-btn:hover i {
        transform: translateX(4px);
    }


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

@media (max-width: 991px) {

    .msoftskills-approach-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    .msoftskills-hero {
        padding: 75px 0;
    }

    .msoftskills-hero-content p {
        font-size: 15px;
    }

    .msoftskills-intro,
    .msoftskills-learn,
    .msoftskills-audience,
    .msoftskills-approach,
    .msoftskills-benefits {
        padding: 70px 0;
    }

    .msoftskills-learn-list,
    .msoftskills-audience-list,
    .msoftskills-benefits-list,
    .msoftskills-approach-list {
        grid-template-columns: 1fr;
    }

    .msoftskills-section-heading {
        margin-bottom: 35px;
    }

    .msoftskills-audience-item {
        padding: 28px 22px;
    }

    .msoftskills-hero-content h1 {
        font-size: 38px;
    }
}
/* =========================================
   COMMUNICATION HERO
========================================= */

.mcommunication-hero {
    position: relative;
    padding: clamp(80px, 6vw, 135px) 0;
    background: url('../../assets/img/communication-skills-banner.jpg') center center / cover no-repeat;
    overflow: hidden;
}

.mcommunication-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(1, 19, 38, 0.94), rgba(18, 35, 54, 0.92) );
}

.mcommunication-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.mcommunication-hero-subtitle {
    display: inline-block;
    margin-bottom: 15px;
    color: #B88720;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mcommunication-hero-content h1 {
    margin: 0 auto 20px;
    color: #fff;
    font-size: clamp(38px, 4vw, 64px);
    line-height: 1.15;
    font-weight: 600;
}

.mcommunication-hero-content p {
    max-width: 720px;
    margin: auto;
    color: rgba(255,255,255,0.85);
    font-size: 17px;
    line-height: 1.8;
}


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

.mcommunication-intro,
.mcommunication-learn,
.mcommunication-audience,
.mcommunication-approach,
.mcommunication-benefits {
    padding: clamp(70px, 4vw, 110px) 0;
}

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

    .mcommunication-section-heading span,
    .mcommunication-section-label {
        display: inline-block;
        margin-bottom: 12px;
        color: #B88720;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mcommunication-section-heading h2,
    .mcommunication-intro-content h2 {
        margin: 0 0 17px;
        color: #000;
        font-size: clamp(30px, 3.0vw, 46px);
        line-height: 1.2;
        font-weight: 700;
    }

    .mcommunication-section-heading p,
    .mcommunication-intro-content p {
        margin: 0;
        color: #515254;
        font-size: 16px;
        line-height: 1.8;
    }


/* =========================================
   INTRO
========================================= */

.mcommunication-intro {
    background: #fff;
}

.mcommunication-intro-content {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.mcommunication-intro-icon {
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf5fc;
    color: #1769aa;
    font-size: 34px;
}

.mcommunication-intro-content p + p {
    margin-top: 15px;
}


/* =========================================
   WHAT YOU WILL LEARN
========================================= */

.mcommunication-learn {
    background: #f7faff;
}

.mcommunication-learn-list {
    max-width: 1000px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.mcommunication-learn-item {
    display: flex;
    align-items: center;
    padding: 23px 25px;
    background: #fff;
    border: 1px solid #e5edf5;
    border-radius: 10px;
    transition: all 0.3s ease;
}

    .mcommunication-learn-item:hover {
        transform: translateY(-4px);
        border-color: #B88720;
        box-shadow: 0 12px 30px rgba(16,42,67,0.08);
    }

.mcommunication-learn-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    margin-right: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fef7e9;
    color: #B88720;
}

.mcommunication-learn-item h3 {
    margin: 0;
    color: #102a43;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 600;
}


/* =========================================
   AUDIENCE
========================================= */

.mcommunication-audience {
    background: #fff;
}

.mcommunication-audience-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 1050px;
    margin: auto;
}

.mcommunication-audience-item {
    padding: 35px;
    background: #faf6ed;
    border: 1px solid #B88720;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

    .mcommunication-audience-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(16,42,67,0.09);
    }

.mcommunication-audience-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1769aa;
    color: #fff;
    font-size: 27px;
}

.mcommunication-audience-item h3 {
    margin: 0 0 10px;
    color: #102a43;
    font-size: 20px;
}

.mcommunication-audience-item p {
    margin: 0;
    color: #515254;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================
   TRAINING APPROACH
========================================= */

.mcommunication-approach {
    background: #f7faff;
}

.mcommunication-approach-list {
    max-width: 1050px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.mcommunication-approach-item {
    padding: 30px 24px;
    background: #fff;
    border: 1px solid #e5edf5;
    border-radius: 10px;
    text-align: center;
}

    .mcommunication-approach-item > span {
        display: block;
        margin-bottom: 15px;
        color: #B88720;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .mcommunication-approach-item h3 {
        margin: 0 0 10px;
        color: #102a43;
        font-size: 24px;
    }

    .mcommunication-approach-item p {
        margin: 0;
        color: #515254;
        font-size: 14px;
        line-height: 1.7;
    }


/* =========================================
   BENEFITS
========================================= */

.mcommunication-benefits {
    background: #fff;
}

.mcommunication-benefits-list {
    max-width: 900px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 40px;
}

.mcommunication-benefit-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e9eef3;
}

    .mcommunication-benefit-item i {
        margin-right: 14px;
        color: #B88720;
        font-size: 17px;
    }

    .mcommunication-benefit-item span {
        color: #344054;
        font-size: 16px;
        line-height: 1.5;
    }


/* =========================================
   CTA
========================================= */

.mcommunication-cta {
    position: relative;
    padding: clamp(70px, 4vw, 105px) 0;
    
    overflow: hidden;
}

.mcommunication-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(1, 25, 55, 0.96), rgba(3, 55, 105, 0.90) );
}

.mcommunication-cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: auto;
    text-align: center;
}

    .mcommunication-cta-content > span {
        display: inline-block;
        margin-bottom: 12px;
        color: #B88720;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform:uppercase;
    }

    .mcommunication-cta-content h2 {
        margin: 0 0 15px;
        color: #fff;
        font-size: clamp(30px, 3.5vw, 46px);
        line-height: 1.2;
    }

    .mcommunication-cta-content p {
        max-width: 650px;
        margin: 0 auto 30px;
        color: rgba(255,255,255,0.82);
        font-size: 16px;
        line-height: 1.8;
    }

.mcommunication-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 28px;
    border-radius: 5px;
    background: #fff;
    color: #B88720;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mcommunication-cta-btn:hover {
        background: #B88720;
        color: #fff;
    }

    .mcommunication-cta-btn i {
        transition: transform 0.3s ease;
    }

    .mcommunication-cta-btn:hover i {
        transform: translateX(4px);
    }


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

@media (max-width: 991px) {

    .mcommunication-approach-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    .mcommunication-hero {
        padding: 75px 0;
    }

    .mcommunication-hero-content p {
        font-size: 15px;
    }

    .mcommunication-intro,
    .mcommunication-learn,
    .mcommunication-audience,
    .mcommunication-approach,
    .mcommunication-benefits {
        padding: 70px 0;
    }

    .mcommunication-learn-list,
    .mcommunication-audience-list,
    .mcommunication-benefits-list,
    .mcommunication-approach-list {
        grid-template-columns: 1fr;
    }

    .mcommunication-section-heading {
        margin-bottom: 35px;
    }

    .mcommunication-audience-item {
        padding: 28px 22px;
    }

    .mcommunication-hero-content h1 {
        font-size: 38px;
    }
}

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

.mprogrammes-section {
    padding: 80px 0;
    background: #fff;
}




/* =========================================
   PROGRAMME ITEMS
========================================= */

.mprogrammes-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 1050px;
    margin: 0 auto;
}

.mprogrammes-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 145px;
    padding: 25px 30px;
    background: #f7faff;
    border: 1px solid #e5edf5;
    border-radius: 12px;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.35s ease;
}

    .mprogrammes-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: #B88720;
        transition: all 0.35s ease;
    }

    .mprogrammes-item:hover {
        transform: translateY(-6px);
        border-color: #B88720;
        box-shadow: 0 15px 35px rgba(16, 42, 67, 0.10);
    }


/* ICON */

.mprogrammes-icon {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24px;
    border-radius: 50%;
    background: #B88720;
    color: #fff;
    font-size: 30px;
    transition: all 0.35s ease;
}
    .mprogrammes-icon img {
        width: 50px;
        height: 50px;
    }
    .mprogrammes-item:hover .mprogrammes-icon {
    background: #B88720;
    color: #fff;
}


/* HEADING */

.mprogrammes-item h3 {
    margin: 0;
    padding-right: 35px;
    color: #011329;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.35s ease;
}

.mprogrammes-item:hover h3 {
    color: #B88720;
}


/* ARROW */

.mprogrammes-arrow {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: #B88720;
    font-size: 28px;
    transition: all 0.35s ease;
}

.mprogrammes-item:hover .mprogrammes-arrow {
    right: 18px;
}


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

@media (max-width: 767px) {

    .mprogrammes-hero {
        padding: 75px 0;
    }

    .mprogrammes-section {
        padding: 70px 0;
    }

    .mprogrammes-heading {
        margin-bottom: 35px;
    }

    .mprogrammes-list {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mprogrammes-item {
        min-height: 120px;
        padding: 20px;
    }

    .mprogrammes-icon {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
        margin-right: 18px;
        font-size: 25px;
    }

    .mprogrammes-item h3 {
        font-size: 18px;
    }

    .mprogrammes-arrow {
        right: 18px;
    }
}
/* =========================================
   TESTIMONIALS SECTION
========================================= */

.mtestimonials-section {
    padding: 90px 0 100px;
    background: #f7f9fc;
}


/* =========================================
   HEADING
========================================= */

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

    .mtestimonials-heading span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        color: #0b4f87;
    }

    .mtestimonials-heading h2 {
        margin: 0 0 18px;
        font-size: clamp(30px, 3vw, 44px);
        line-height: 1.2;
        font-weight: 700;
        color: #011329;
    }

    .mtestimonials-heading p {
        max-width: 680px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.8;
        color: #667085;
    }


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

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


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

.mtestimonials-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 35px;
    background: #ffffff;
    border: 1px solid #e7edf3;
    border-radius: 14px;
    transition: all 0.3s ease;
}

    .mtestimonials-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(1, 19, 41, 0.10);
    }


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

.mtestimonials-quote {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 50%;
    background: #faedd1;
}

    .mtestimonials-quote i {
        font-size: 22px;
        color: #B88720;
    }


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

.mtestimonials-content {
    flex: 1;
}

    .mtestimonials-content p {
        margin: 0;
        font-size: 15px;
        line-height: 1.85;
        color: #596575;
    }


/* =========================================
   AUTHOR
========================================= */

.mtestimonials-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #edf0f4;
}


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

.mtestimonials-author-img {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    overflow: hidden;
    border-radius: 50%;
}

    .mtestimonials-author-img img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }


/* =========================================
   AUTHOR INFO
========================================= */

.mtestimonials-author-info h4 {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 700;
    color: #011329;
}

.mtestimonials-author-info span {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: #7b8794;
}




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

@media (max-width: 991px) {

    .mtestimonials-section {
        padding: 75px 0 80px;
    }

    .mtestimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .mtestimonials-card {
        padding: 28px;
    }
}


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

@media (max-width: 767px) {

    .mtestimonials-section {
        padding: 60px 0 70px;
    }

    .mtestimonials-heading {
        margin-bottom: 35px;
    }

    .mtestimonials-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mtestimonials-card {
        padding: 25px;
    }

    .mtestimonials-cta {
        padding: 70px 0;
    }
}
/* =========================================
   MCLIENTS SECTION
========================================= */

.mclients-section {
    padding: 90px 0 100px;
    background: #f7f9fc;
}


/* =========================================
   MCLIENTS HEADING
========================================= */

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

    .mclients-heading span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        color: #0b4f87;
    }

    .mclients-heading h2 {
        margin: 0 0 18px;
        font-size: clamp(30px, 3vw, 44px);
        line-height: 1.2;
        font-weight: 700;
        color: #011329;
    }

    .mclients-heading p {
        max-width: 650px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.8;
        color: #667085;
    }


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

.mclients-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}


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

.mclients-card {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 35px;
    background: #ffffff;
    border: 1px solid #e7edf3;
    border-radius: 12px;
    transition: all 0.3s ease;
}

    .mclients-card:hover {
        transform: translateY(-6px);
        border-color: rgba(11, 79, 135, 0.25);
        box-shadow: 0 15px 35px rgba(1, 19, 41, 0.10);
    }


    /* =========================================
   MCLIENTS LOGO
========================================= */

    .mclients-card img {
        display: block;
        width: auto;
        height: auto;
        max-width: 180px;
        max-height: 95px;
        object-fit: contain;
        transition: all 0.3s ease;
    }

    .mclients-card:hover img {
        transform: scale(1.05);
    }


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

@media (max-width: 991px) {

    .mclients-section {
        padding: 75px 0 80px;
    }

    .mclients-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .mclients-card {
        height: 155px;
    }

        .mclients-card img {
            max-width: 160px;
            max-height: 85px;
        }
}


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

@media (max-width: 767px) {

    .mclients-section {
        padding: 60px 0 70px;
    }

    .mclients-heading {
        margin-bottom: 35px;
    }

    .mclients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .mclients-card {
        height: 130px;
        padding: 18px;
    }

        .mclients-card img {
            max-width: 130px;
            max-height: 70px;
        }
}


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

@media (max-width: 400px) {

    .mclients-grid {
        gap: 12px;
    }

    .mclients-card {
        height: 115px;
        padding: 12px;
    }

        .mclients-card img {
            max-width: 110px;
            max-height: 60px;
        }
}
/* =========================================
   MERCURIO - OUR TRAINER
========================================= */

.mercurio-trainer-section {
    padding: 80px 0;
    background: #f7f9fc;
    overflow: hidden;
}

/* Section Heading */

.mercurio-section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
}

.mercurio-sub-title {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #B88720;
}

.mercurio-section-heading h2 {
    margin: 0 0 18px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 700;
    color: #101828;
}

.mercurio-section-heading p {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #667085;
}


/* Trainer Card */
.mercurio-trainer-card-outer {
   
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.08);
}
.mercurio-trainer-card {
    display: grid;
    grid-template-columns: 38% 62%;
   
}


/* Trainer Image */

.mercurio-trainer-image {
    position: relative;
    min-height: 650px;
    display: flex;
    justify-content: center;
    padding: 45px;
}

.trainer-image-wrap {
    width: 100%;
    height: 100%;
    max-width: 430px;
    max-height: 560px;
    overflow: hidden;
    border-radius: 18px;
}

    .trainer-image-wrap img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }


/* Experience Badge */

.trainer-experience {
    position: absolute;
    right: -10px;
    bottom: 25px;
    min-width: 145px;
    padding: 18px 20px;
    background: #B88720;
    color: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 30px rgba(23, 105, 170, 0.25);
}

    .trainer-experience strong {
        font-size: 34px;
        line-height: 1;
    }

    .trainer-experience span {
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;
    }


/* Trainer Content */

.mercurio-trainer-content {
    padding: 40px 45px;
}

.trainer-label {
    display: inline-block;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #B88720;
}

.mercurio-trainer-content h3 {
    margin: 0 0 8px;
    font-size: 42px;
    line-height: 1.15;
    color: #101828;
    font-weight: 700;
}

.mercurio-trainer-content h4 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.6;
    color: #475467;
    font-weight: 600;
}

.mercurio-trainer-content > p {
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.8;
}
.mercurio-trainer-content > p b{ 
    color:#000;
}
    /* =========================================
   RESPONSIVE
========================================= */

    @media (max-width: 991px) {

        .mercurio-trainer-section {
            padding: 75px 0;
        }

        .mercurio-trainer-card {
            grid-template-columns: 1fr;
        }

        .mercurio-trainer-image {
            min-height: 550px;
        }

        .mercurio-trainer-content {
            padding: 45px 35px;
        }
    }


    @media (max-width: 575px) {

        .mercurio-trainer-section {
            padding: 60px 0;
        }

        .mercurio-section-heading {
            margin-bottom: 35px;
        }

            .mercurio-section-heading h2 {
                font-size: 32px;
            }

        .mercurio-trainer-image {
            min-height: 430px;
            padding: 25px;
        }

        .trainer-image-wrap {
            max-height: 380px;
        }

        .trainer-experience {
            right: 15px;
            bottom: 25px;
            min-width: 125px;
            padding: 14px;
        }

            .trainer-experience strong {
                font-size: 28px;
            }

        .mercurio-trainer-content {
            padding: 35px 22px;
        }

            .mercurio-trainer-content h3 {
                font-size: 34px;
            }

            .mercurio-trainer-content h4 {
                font-size: 14px;
            }

        .trainer-highlights {
            grid-template-columns: 1fr;
        }
    }
    /* =========================================
   MERCURIO - WHY CHOOSE MERCURIO
========================================= */

    .mwwww-wcm-page {
    color: #222c38;
    overflow: hidden;
}


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

.mwwww-wcm-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #B88720;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.mwwww-wcm-heading {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

    .mwwww-wcm-heading h2 {
        margin: 0 0 16px;
        color: #222c38;
        font-size: 42px;
        line-height: 1.2;
        font-weight: 700;
    }

    .mwwww-wcm-heading p {
        margin: 0;
        color: #6d7379;
        font-size: 16px;
        line-height: 1.8;
    }


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

.mwwww-wcm-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.mwwww-wcm-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

    .mwwww-wcm-hero-content h1 {
        margin: 0 auto 15px;
        color: #fff;
        font-size: clamp(38px, 3.5vw, 64px);
        line-height: 1.12;
        font-weight: 500;
    }

    .mwwww-wcm-hero-content p {
        max-width: 720px;
        margin: auto;
        color: rgba(255,255,255,0.78);
        font-size: 18px;
        line-height: 1.8;
    }


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

.mwwww-wcm-intro {
    padding: 80px 0;
    background: #fff;
}

.mwwww-wcm-intro-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 70px;
}

.mwwww-wcm-intro-content h2 {
    margin: 0 0 22px;
    color: #222c38;
    font-size: 42px;
    line-height: 1.2;
    font-weight:600;
}

.mwwww-wcm-intro-content p {
    margin: 0 0 18px;
    color: #666;
    font-size: 16px;
    line-height: 1.85;
}

.mwwww-wcm-intro-highlight {
    padding: 50px 40px;
    background: #f6f8fa;
    border-radius: 15px;
    border-left: 4px solid #B88720;
}

.mwwww-wcm-highlight-icon {
    width: 65px;
    height: 65px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(239, 174, 13, 0.09);
    color: #B88720;
    font-size: 25px;
}

.mwwww-wcm-intro-highlight h3 {
    margin: 0 0 12px;
    color: #222c38;
    font-size: 24px;
}

.mwwww-wcm-intro-highlight p {
    margin: 0;
    color: #6d7379;
    font-size: 15px;
    line-height: 1.75;
}


/* =========================================
   SIX REASONS
========================================= */

.mwwww-wcm-reasons {
    padding: 80px 0;
    background: #f6f8fa;
}

.mwwww-wcm-reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.mwwww-wcm-reason-card {
    position: relative;
    padding: 35px 30px;
    background: #fff;
    border: 1px solid #e7eaed;
    border-radius: 12px;
    transition: all 0.35s ease;
    overflow: hidden;
}

    .mwwww-wcm-reason-card:hover {
        transform: translateY(-7px);
        border-color: transparent;
        box-shadow: 0 15px 40px rgba(34,44,56,0.1);
    }

.mwwww-wcm-number {
    position: absolute;
    top: 22px;
    right: 25px;
    color: #e8eaed;
    font-size: 38px;
    line-height: 1;
    font-weight: 800;
}

.mwwww-wcm-icon {
    width: 65px;
    height: 65px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(239, 174, 13, 0.09);
    color: #B88720;
    font-size: 24px;
    transition: all 0.35s ease;
}

.mwwww-wcm-reason-card:hover .mwwww-wcm-icon {
    background: #B88720;
    color: #fff;
}

.mwwww-wcm-reason-card h3 {
    max-width: 85%;
    margin: 0 0 12px;
    color: #222c38;
    font-size: 20px;
    line-height: 1.4;
}

.mwwww-wcm-reason-card p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================
   LEARNING PHILOSOPHY
========================================= */

.mwwww-wcm-philosophy {
    padding: 80px 0;
    background: #fff;
}

.mwwww-wcm-process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.mwwww-wcm-process-item {
    position: relative;
    text-align: center;
    padding: 10px 15px;
}

.mwwww-wcm-process-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #222c38;
    color: #fff;
    font-size: 25px;
}

.mwwww-wcm-process-item > span {
    display: block;
    margin-bottom: 7px;
    color: #B88720;
    font-size: 16px;
    font-weight: 700;
}

.mwwww-wcm-process-item h3 {
    margin: 0 0 10px;
    color: #222c38;
    font-size: 21px;
}

.mwwww-wcm-process-item p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   BENEFITS
========================================= */

.mwwww-wcm-benefits {
    padding: 80px 0;
    background: #f6f8fa;
}

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

.mwwww-wcm-benefit-card {
    padding: 32px 25px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e7eaed;
}

    .mwwww-wcm-benefit-card > span {
        display: block;
        margin-bottom: 22px;
        color: #B88720;
        font-size: 18px;
        font-weight: 700;
    }

    .mwwww-wcm-benefit-card h3 {
        margin: 0 0 12px;
        color: #222c38;
        font-size: 20px;
    }

    .mwwww-wcm-benefit-card p {
        margin: 0;
        color: #777;
        font-size: 15px;
        line-height: 1.75;
    }


/* =========================================
   CTA
========================================= */

.mwwww-wcm-cta {
    padding: 80px 0;
    background: linear-gradient( 135deg, #011329, #021323 );
}

.mwwww-wcm-cta-content {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

    .mwwww-wcm-cta-content h2 {
        margin: 0 0 20px;
        color: #fff;
        font-size: clamp(34px, 3.5vw, 52px);
        line-height: 1.2;
    }

    .mwwww-wcm-cta-content p {
        max-width: 720px;
        margin: 0 auto 30px;
        color: rgba(255,255,255,0.75);
        font-size: 16px;
        line-height: 1.8;
    }

.mwwww-wcm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    background: #B88720;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mwwww-wcm-btn:hover {
        background: #fff;
        color: #222c38;
    }


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

@media (max-width: 991px) {

    .mwwww-wcm-intro-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .mwwww-wcm-reasons-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mwwww-wcm-process {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 45px;
    }

    .mwwww-wcm-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mwwww-wcm-heading h2,
    .mwwww-wcm-intro-content h2 {
        font-size: 35px;
    }
}


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

@media (max-width: 575px) {

    .mwwww-wcm-hero {
        padding: 85px 0;
    }

    .mwwww-wcm-hero-content h1 {
        font-size: 34px;
    }

    .mwwww-wcm-hero-content p {
        font-size: 16px;
    }

    .mwwww-wcm-intro,
    .mwwww-wcm-reasons,
    .mwwww-wcm-philosophy,
    .mwwww-wcm-benefits {
        padding: 65px 0;
    }

    .mwwww-wcm-reasons-grid,
    .mwwww-wcm-process,
    .mwwww-wcm-benefits-grid {
        grid-template-columns: 1fr;
    }

    .mwwww-wcm-heading {
        margin-bottom: 35px;
    }

        .mwwww-wcm-heading h2,
        .mwwww-wcm-intro-content h2 {
            font-size: 29px;
        }

    .mwwww-wcm-intro-highlight {
        padding: 35px 25px;
    }

    .mwwww-wcm-cta {
        padding: 70px 0;
    }
}
/* =========================================
   WHO WE WORK WITH
========================================= */
/* =========================================
   MERCURIO - WHO WE ARE PAGE
========================================= */

.mwwww-who-page {
    color: #222c38;
    overflow: hidden;
}


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

.mwwww-who-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #B88720;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

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

    .mwwww-who-section-heading h2 {
        margin: 0 0 18px;
        color: #222c38;
        font-size: 40px;
        line-height: 1.2;
        font-weight: 600;
    }

    .mwwww-who-section-heading p {
        margin: 0 0 12px;
        color: #6d7379;
        font-size: 16px;
        line-height: 1.8;
    }


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

.mwwww-who-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    
}

.mwwww-who-hero-content {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.mwwww-who-hero .mwwww-who-label {
    color: #B88720;
}

.mwwww-who-hero h1 {
    margin: 0 auto 25px;
    color: #fff;
    font-size: clamp(38px, 3.5vw, 64px);
    line-height: 1.12;
    font-weight: 500;
}
.mwwww-who-hero h1 span{
    color:#B88720;
}
    .mwwww-who-quote {
    max-width: 760px;
    margin: auto;
    color: rgba(255, 255, 255, 0.82);
    font-size: 20px;
    line-height: 1.7;
    font-style: italic;
}


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

.mwwww-who-intro {
    padding:80px 0;
    background: #fff;
}

.mwwww-who-intro-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 75px;
}

.mwwww-who-intro-image {
    position: relative;
}

    .mwwww-who-intro-image::after {
        content: "";
        position: absolute;
        left: 20px;
        bottom: -20px;
        width: 80%;
        height: 80%;
        border: 2px solid #B88720;
        border-radius: 15px;
        z-index: 0;
    }

    .mwwww-who-intro-image img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        border-radius: 15px;
        object-fit: cover;
    }

.mwwww-who-intro-content h2 {
    margin: 0 0 10px;
    color: #222c38;
    font-size: 42px;
    line-height: 1.2;
    font-weight:600;
}

.mwwww-who-intro-content p {
    margin: 0 0 18px;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}

.mwwww-who-intro-content strong {
    color: #222c38;
}


/* =========================================
   BELIEF
========================================= */

.mwwww-who-belief {
    padding: 80px 0;
    background: #f6f8fa;
}


/* =========================================
   PROGRAMMES
========================================= */

.mwwww-who-programmes {
    padding: 80px 0;
    background: #fff;
}

.mwwww-who-programme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top:50px;
}

.mwwww-who-programme-card {
    padding: 35px 30px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    text-align: center;
    transition: all 0.35s ease;
}

    .mwwww-who-programme-card:hover {
        transform: translateY(-7px);
        border-color: transparent;
        box-shadow: 0 15px 40px rgba(34, 44, 56, 0.10);
    }

.mwwww-who-programme-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(239, 174, 13, 0.09);
    color: #B88720;
    font-size: 25px;
    transition: all 0.35s ease;
}

.mwwww-who-programme-card:hover .mwwww-who-programme-icon {
    background: #B88720;
    color: #fff;
}

.mwwww-who-programme-card h3 {
    margin: 0 0 12px;
    color: #222c38;
    font-size: 20px;
    line-height: 1.35;
}

.mwwww-who-programme-card p {
    margin: 0;
    color: #777;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================
   WHO WE EMPOWER
========================================= */

.mwwww-who-audience {
    padding: 80px 0;
    background: #f6f8fa;
}

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

.mwwww-who-audience-card {
    position: relative;
    padding: 35px 28px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8eaed;
    overflow: hidden;
    margin-top:60px;
}

    .mwwww-who-audience-card span {
        display: block;
        margin-bottom: 25px;
        color: #B88720;
        font-size: 18px;
        font-weight: 700;
    }

    .mwwww-who-audience-card h3 {
        margin: 0 0 12px;
        color: #222c38;
        font-size: 20px;
    }

    .mwwww-who-audience-card p {
        margin: 0;
        color: #777;
        font-size: 15px;
        line-height: 1.7;
    }


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

.mwwww-who-philosophy {
    padding: 80px 0;
    background: #fff;
}

.mwwww-who-philosophy-box {
    max-width: 900px;
    margin: auto;
    padding: 65px 70px;
    background: #f6f8fa;
    border-left: 5px solid #B88720;
    border-radius: 12px;
    text-align: center;
}

    .mwwww-who-philosophy-box h2 {
        margin: 0 0 22px;
        color: #222c38;
        font-size: 40px;
        font-weight:600;
    }

    .mwwww-who-philosophy-box p {
        max-width: 750px;
        margin: 0 auto 15px;
        color: #666;
        font-size: 17px;
        line-height: 1.8;
    }


/* =========================================
   CTA
========================================= */

.mwwww-who-cta {
    padding: 95px 0;
    background: linear-gradient( 135deg, #011329, #021323 );
}

.mwwww-who-cta-content {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

    .mwwww-who-cta-content h2 {
        margin: 0 0 20px;
        color: #fff;
        font-size: clamp(32px, 4vw, 50px);
        line-height: 1.2;
    }

    .mwwww-who-cta-content p {
        max-width: 700px;
        margin: 0 auto 30px;
        color: rgba(255, 255, 255, 0.75);
        font-size: 16px;
        line-height: 1.8;
    }

.mwwww-who-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    background: #B88720;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mwwww-who-btn:hover {
        background: #fff;
        color: #222c38;
    }


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

@media (max-width: 991px) {

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

    .mwwww-who-intro-image {
        max-width: 700px;
        margin: auto;
    }

    .mwwww-who-programme-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mwwww-who-audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mwwww-who-section-heading h2,
    .mwwww-who-intro-content h2 {
        font-size: 34px;
    }
}


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

@media (max-width: 575px) {

    .mwwww-who-hero {
        padding: 90px 0;
    }

    .mwwww-who-quote {
        font-size: 17px;
    }

    .mwwww-who-intro,
    .mwwww-who-programmes,
    .mwwww-who-audience,
    .mwwww-who-philosophy {
        padding: 65px 0;
    }

    .mwwww-who-programme-grid,
    .mwwww-who-audience-grid {
        grid-template-columns: 1fr;
    }

    .mwwww-who-section-heading {
        margin-bottom: 35px;
    }

        .mwwww-who-section-heading h2,
        .mwwww-who-intro-content h2 {
            font-size: 29px;
        }

    .mwwww-who-philosophy-box {
        padding: 40px 25px;
    }

        .mwwww-who-philosophy-box h2 {
            font-size: 30px;
        }

    .mwwww-who-cta {
        padding: 70px 0;
    }
}
.text-white
{
    color:white;
}
.mwwww-section {
    padding: 90px 0;
    background: #f8f9fa;
}

.mwwww-heading {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

    .mwwww-heading span {
        display: inline-block;
        margin-bottom: 12px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mwwww-heading h2 {
        margin: 0 0 15px;
        color: #222c38;
        font-size: 38px;
        line-height: 1.2;
        font-weight: 700;
    }

    .mwwww-heading p {
        margin: 0;
        color: #666;
        font-size: 17px;
        line-height: 1.7;
    }


/* GRID */

.mwwww-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}


/* CARD */

.mwwww-card {
    position: relative;
    padding: 32px 28px;
    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    text-align: center;
    transition: all 0.35s ease;
    overflow: hidden;
}

    .mwwww-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background: #B88720;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s ease;
    }

    .mwwww-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 15px 35px rgba(34, 44, 56, 0.10);
        border-color: transparent;
    }

        .mwwww-card:hover::before {
            transform: scaleX(1);
        }


/* ICON */

.mwwww-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #041C33;
    color:#B88720;
    font-size: 26px;
    transition: all 0.35s ease;
}

.mwwww-card:hover .mwwww-icon {
    background: #B88720;
    color: #fff;
    transform: scale(1.05);
}


/* TITLE */

.mwwww-card h3 {
    margin: 0 0 10px;
    color: #222c38;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}


/* DESCRIPTION */

.mwwww-card p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


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

@media (max-width: 991px) {

    .mwwww-section {
        padding: 70px 0;
    }

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

    .mwwww-heading h2 {
        font-size: 32px;
    }
}


@media (max-width: 575px) {

    .mwwww-section {
        padding: 55px 0;
    }

    .mwwww-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mwwww-heading {
        margin-bottom: 35px;
    }

        .mwwww-heading h2 {
            font-size: 28px;
        }

    .mwwww-card {
        padding: 28px 22px;
    }
}
.ul-cta-wrapper .left{
    max-width:650px;

}
    .ul-cta-wrapper .left p {
        font-size: clamp(15px, 0.95vw, 18px);
        color: #eae7e7;
        line-height: 1.6;
        margin-top:20px;
    }
    .ul-2-header-bottom-right {
    display: none;
}
.awards-certifications {
    background: #fff;
    padding: 80px 0;
    overflow: hidden;
    position: relative;
}

    .awards-certifications:before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        background: rgba(184,135,32,.15);
        border-radius: 50%;
        filter: blur(120px);
        top: -200px;
        left: -200px;
    }



.ac-wrapper {
    display: flex;
    gap: 30px;
}

.ac-column {
    width: 50%;
    background-color: #fff;
    border: 1px solid #122c45;
    border-radius: 20px;
    padding: 40px;
    
}

.certification {
    background-color: #fff;
    border: 1px solid #B88720;
}

.ac-header {
    text-align: center;
    margin-bottom: 30px;
}



    .ac-header h3 {
        font-size: 38px;
        margin-bottom: 5px;
        font-weight: 700;
    }

.ac-header p {
    color: #333;
}

.ac-card {
    background: #041C33;
    border: 1px solid #041C33;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    transition: .4s;
}
.certification .ac-card {
    background: #B88720;
    border: 1px solid #B88720;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    transition: .4s;
}
    .ac-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(184,135,32,.2);
    }

    .ac-card img {
        width: 100%;
        height: 280px;
        object-fit: cover;
    }

    .ac-card h4 {
        color: #fff;
        padding: 20px 15px 10px;
        font-size: 20px;
    }

    .ac-card span {
        display: block;
        color: #eae7e7;
        padding-bottom: 20px;
        font-weight:500;
        font-size:20px;
    }


.ul-team-row
{
    background-color:#fff;
    border:1px solid #ddd;
}
.impact-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 30px;
}

.counter-box {
    background: #fff;
    padding: 30px 15px;
    text-align: center;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.08);
    transition: .3s;
}
.counter-box i{
    font-size:45px;
    color:#B88720;
}
    .counter-box:hover {
        transform: translateY(-5px);
        border-color: #B88720;
    }

.counter {
    font-size: 42px;
    font-weight: 700;
    color: #041C33;
    margin-bottom: 10px;
    line-height: 60px;
}

    .counter::after {
        content: "+";
    }

.counter-box h4 {
    font-size: 15px;
    line-height: 1.4;
    color: #333;
    margin: 0;
    font-weight: 500;
}

@media(max-width:1200px) {
    .impact-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:768px) {
    .impact-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:576px) {
    .impact-grid {
        grid-template-columns: 1fr;
    }
}
.ul-2-banner-sub-title i {
    font-size: 28px;
    color: #e4b243;
}
.quote-card {
    top: 40%;
    position: absolute;
    right: 30px;
    display: flex;
    flex-direction: column;
    max-width: 280px;
    padding: 25px 20px;
    color: #fff;
    z-index: 2;
}

    .quote-card p {
        font-size: clamp(16px, 1.2vw, 22px);
        line-height: 1.7;
        margin: 12px 0 20px;
        font-weight: 400;
    }

.quote-top,
.quote-bottom {
    position: absolute;
    color: #B88720;
    font-size: clamp(40px, 4vw, 55px);
    line-height: 1;
}

.quote-top {
    left: 10px;
    top: 0;
}

.quote-bottom {
    right: 10px;
    bottom: -10px;
}

.quote-line {
    width: 90px;
    height: 2px;
    background: #B88720;
}

.quote-card::after {
    content: "";
    position: absolute;
    top: 25px;
    right: 0;
    width: 110px;
    height: 160px;
    border-top: 2px solid #B88720;
    border-right: 2px solid #B88720;
    border-top-right-radius: 15px;
}

/* Tablet */
@media (max-width: 991px) {

    .quote-card {
        max-width: 240px;
        padding: 20px 25px;
    }

        .quote-card::after {
            width: 90px;
            height: 135px;
        }
}

/* Mobile */
@media (max-width: 767px) {

    .quote-card {
        max-width: 220px;
        padding: 18px 20px;
    }

        .quote-card p {
            line-height: 1.6;
        }

        .quote-card::after {
            width: 70px;
            height: 120px;
        }

    .quote-line {
        width: 70px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {

    .quote-card {
        max-width: 180px;
        padding: 15px;
    }

        .quote-card::after {
            width: 55px;
            height: 100px;
        }

    .quote-line {
        width: 55px;
    }
}
/* =========================================
   AWARDS & ACCOLADES
========================================= */


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

.mawards-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.mawards-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(1, 19, 41, 0.97), rgba(2, 19, 35, 0.92));
}

.mawards-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.mawards-hero-small {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #B88720;
}

.mawards-hero-content h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 3.5vw, 64px);
    line-height: 1.12;
    font-weight: 500;
    color: #fff;
}

.mawards-hero-content p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
}


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

.mawards-intro {
    padding: 80px 0;
    background: #fff;
}

.mawards-intro-content {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.mawards-section-label {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #B88720;
}

.mawards-intro-content h2 {
    margin: 0 0 18px;
    font-size: clamp(30px, 3.5vw, 42px);
    line-height: 1.2;
    font-weight: 600;
    color: #102a43;
}

.mawards-intro-content p {
    margin: 0 auto;
    max-width: 800px;
    font-size: 16px;
    line-height: 1.8;
    color: #607080;
}


/* =========================
   AWARDS LIST
========================= */

.mawards-list {
    padding: 80px 0;
    background: #f7faff;
}

.mawards-section-title {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

    .mawards-section-title span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }

    .mawards-section-title h2 {
        margin: 0;
        font-size: clamp(30px, 3.5vw, 42px);
        line-height: 1.2;
        font-weight: 600;
        color: #102a43;
    }


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

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


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

.maward-card {
    background: #fff;
    border: 1px solid #e5edf4;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.35s ease;
}

    .maward-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 18px 40px rgba(16, 42, 67, 0.12);
    }


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

.maward-image {
    position: relative;
    width: 100%;
    height: 320px;
    padding: 15px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .maward-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        object-position: center;
        transition: transform 0.5s ease;
    }

.maward-card:hover .maward-image img {
    transform: scale(1.03);
}


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

.maward-zoom {
    position: absolute;
    top: 50%;
    left: 45%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    color: #B88720;
    font-size: 17px;
    text-decoration: none;
   
    box-shadow: 0 8px 22px rgba(16, 42, 67, 0.18);
    transition: all 0.3s ease;
}

.maward-card:hover .maward-zoom {
    opacity: 1;
    visibility: visible;
}

.maward-zoom:hover {
    background: #B88720;
    color: #fff;
    transform: scale(1.08);
}


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

.maward-content {
    padding: 25px 25px 28px;
    text-align: center;
}

.maward-year {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 14px;
    border-radius: 30px;
    background: #B88720;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.maward-content h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    color: #102a43;
}

.maward-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7c8f;
}


/* =========================
   FEATURED RECOGNITION
========================= */

.mawards-featured {
    padding: 85px 0;
    background: #fff;
}

.mawards-featured-content {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

    .mawards-featured-content h2 {
        margin: 0 0 18px;
        font-size: clamp(30px, 4vw, 42px);
        line-height: 1.2;
        font-weight: 700;
        color: #102a43;
    }

    .mawards-featured-content p {
        max-width: 760px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.8;
        color: #607080;
    }


/* =========================
   CTA
========================= */

.mawards-cta {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.mawards-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, #011329, #021323);
}

.mawards-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

    .mawards-cta-content span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }

    .mawards-cta-content h2 {
        margin: 0 0 18px;
        font-size: clamp(30px, 3.5vw, 46px);
        line-height: 1.2;
        font-weight: 500;
        color: #fff;
    }

    .mawards-cta-content p {
        max-width: 700px;
        margin: 0 auto 28px;
        font-size: 16px;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.92);
    }

.mawards-btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 4px;
    background: #B88720;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mawards-btn:hover {
        background: #fff;
        color: #B88720;
    }


/* =========================================================
   DYNAMIC LIGHTBOX
   NOTE:
   Lightbox HTML jQuery se dynamically create hoga.
========================================================= */

.mawards-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .mawards-lightbox.active {
        opacity: 1;
        visibility: visible;
    }

.mawards-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 12, 24, 0.94);
}

.mawards-lightbox-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 90vh;
}

    .mawards-lightbox-content img {
        display: block;
        max-width: 92vw;
        max-height: 88vh;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 4px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    }


/* =========================
   LIGHTBOX CLOSE BUTTON
========================= */

.mawards-lightbox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #102a43;
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

    .mawards-lightbox-close:hover {
        background: #B88720;
        color: #fff;
        transform: rotate(90deg);
    }


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

@media (max-width: 991px) {

    .mawards-hero {
        padding: 85px 0;
    }

    .mawards-intro,
    .mawards-list {
        padding: 65px 0;
    }

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

    .maward-image {
        height: 340px;
        padding: 15px;
    }

    .mawards-featured {
        padding: 70px 0;
    }

    .mawards-cta {
        padding: 70px 0;
    }
}


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

@media (max-width: 767px) {

    .mawards-hero {
        padding: 70px 0;
    }

    .mawards-hero-content h1 {
        font-size: 36px;
    }

    .mawards-hero-content p {
        font-size: 15px;
    }

    .mawards-intro,
    .mawards-list {
        padding: 55px 0;
    }

    .mawards-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .maward-image {
        height: 280px;
    }

    .maward-zoom {
        width: 40px;
        height: 40px;
        top: 15px;
        right: 15px;
        opacity: 1;
        visibility: visible;
    }

    .maward-content {
        padding: 22px 20px 25px;
    }

    .mawards-featured {
        padding: 60px 0;
    }

    .mawards-cta {
        padding: 65px 0;
    }

    .mawards-cta-content h2 {
        font-size: 32px;
    }


    /* Mobile Lightbox */

    .mawards-lightbox {
        padding: 20px;
    }

    .mawards-lightbox-content {
        max-width: 94vw;
        max-height: 87vh;
    }

        .mawards-lightbox-content img {
            max-width: 94vw;
            max-height: 85vh;
        }

    .mawards-lightbox-close {
        top: -15px;
        right: -10px;
        width: 38px;
        height: 38px;
        font-size: 25px;
    }
}
/* =========================================
   CERTIFICATIONS
========================================= */


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

.mcert-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.mcert-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(1, 19, 41, 0.97), rgba(2, 19, 35, 0.92) );
}

.mcert-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.mcert-hero-small {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #B88720;
}

.mcert-hero-content h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 3.5vw, 64px);
    line-height: 1.12;
    font-weight: 500;
    color: #fff;
}

.mcert-hero-content p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
}


/* =========================
   CERTIFICATIONS LIST
========================= */

.mcert-list {
    padding: 80px 0;
    background: #f7faff;
}


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

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


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

.mcert-card {
    background: #fff;
    border: 1px solid #e5edf4;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.35s ease;
}

    .mcert-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 18px 40px rgba(16, 42, 67, 0.12);
    }


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

.mcert-image {
    position: relative;
    width: 100%;
    height: 320px;
    padding: 15px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mcert-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        object-position: center;
        transition: transform 0.5s ease;
    }

.mcert-card:hover .mcert-image img {
    transform: scale(1.03);
}


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

.mcert-zoom {
    position: absolute;
    top: 50%;
    left: 45%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    color: #B88720;
    font-size: 17px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(16, 42, 67, 0.18);
    transition: all 0.3s ease;
}

.mcert-card:hover .mcert-zoom {
    opacity: 1;
    visibility: visible;
}

.mcert-zoom:hover {
    background: #B88720;
    color: #fff;
    transform: scale(1.08);
}


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

.mcert-content {
    padding: 25px 25px 28px;
    text-align: center;
}

.mcert-year {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 14px;
    border-radius: 30px;
    background: #B88720;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.mcert-content h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    color: #102a43;
}

.mcert-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7c8f;
}


/* =========================
   CTA
========================= */

.mcert-cta {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.mcert-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 165deg, #011329, #021323 );
}

.mcert-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

    .mcert-cta-content span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }

    .mcert-cta-content h2 {
        margin: 0 0 18px;
        font-size: clamp(30px, 3.5vw, 46px);
        line-height: 1.2;
        font-weight: 500;
        color: #fff;
    }

    .mcert-cta-content p {
        max-width: 700px;
        margin: 0 auto 28px;
        font-size: 16px;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.92);
    }

.mcert-btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 4px;
    background: #B88720;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mcert-btn:hover {
        background: #fff;
        color: #B88720;
    }


/* =========================================================
   LIGHTBOX
========================================================= */

.mcert-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .mcert-lightbox.active {
        opacity: 1;
        visibility: visible;
    }

.mcert-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 12, 24, 0.94);
}

.mcert-lightbox-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 90vh;
}

    .mcert-lightbox-content img {
        display: block;
        max-width: 92vw;
        max-height: 88vh;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 4px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    }


/* =========================
   LIGHTBOX CLOSE
========================= */

.mcert-lightbox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #102a43;
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

    .mcert-lightbox-close:hover {
        background: #B88720;
        color: #fff;
        transform: rotate(90deg);
    }


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

@media (max-width: 991px) {

    .mcert-hero {
        padding: 85px 0;
    }

    .mcert-list {
        padding: 65px 0;
    }

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

    .mcert-image {
        height: 340px;
    }

    .mcert-cta {
        padding: 70px 0;
    }
}


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

@media (max-width: 767px) {

    .mcert-hero {
        padding: 70px 0;
    }

    .mcert-hero-content h1 {
        font-size: 36px;
    }

    .mcert-hero-content p {
        font-size: 15px;
    }

    .mcert-list {
        padding: 55px 0;
    }

    .mcert-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .mcert-image {
        height: 280px;
    }

    .mcert-zoom {
        width: 40px;
        height: 40px;
        top: 15px;
        right: 15px;
        left: auto;
        opacity: 1;
        visibility: visible;
    }

    .mcert-content {
        padding: 22px 20px 25px;
    }

    .mcert-cta {
        padding: 65px 0;
    }

    .mcert-cta-content h2 {
        font-size: 32px;
    }


    /* Mobile Lightbox */

    .mcert-lightbox {
        padding: 20px;
    }

    .mcert-lightbox-content {
        max-width: 94vw;
        max-height: 87vh;
    }

        .mcert-lightbox-content img {
            max-width: 94vw;
            max-height: 85vh;
        }

    .mcert-lightbox-close {
        top: -15px;
        right: -10px;
        width: 38px;
        height: 38px;
        font-size: 25px;
    }
}
/* =========================================
   WORKSHOPS
========================================= */


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

.mwork-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}


.mwork-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(1, 19, 41, 0.97), rgba(2, 19, 35, 0.92) );
}


.mwork-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}


.mwork-hero-small {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #B88720;
}


.mwork-hero-content h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 3.5vw, 64px);
    line-height: 1.12;
    font-weight: 500;
    color: #fff;
}


.mwork-hero-content p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
}



/* =========================================
   INTRO
========================================= */

.mwork-intro {
    padding: 80px 0;
    background: #fff;
}


.mwork-intro-content {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}


.mwork-section-label {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #B88720;
}


.mwork-intro-content h2 {
    margin: 0 0 18px;
    font-size: clamp(30px, 3.5vw, 42px);
    line-height: 1.2;
    font-weight: 600;
    color: #102a43;
}


.mwork-intro-content p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
    color: #607080;
}



/* =========================================
   WORKSHOP LIST
========================================= */

.mwork-list {
    padding: 80px 0;
    background: #f7faff;
}


.mwork-section-title {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}


    .mwork-section-title span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }


    .mwork-section-title h2 {
        margin: 0;
        font-size: clamp(30px, 3.5vw, 42px);
        line-height: 1.2;
        font-weight: 600;
        color: #102a43;
    }



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

.mwork-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}



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

.mwork-card {
    background: #fff;
    border: 1px solid #e5edf4;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.35s ease;
}


    .mwork-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 18px 40px rgba(16, 42, 67, 0.12);
    }



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

.mwork-image {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    background: #eef3f7;
}


.mwork-slides {
    position: relative;
    width: 100%;
    height: 100%;
}


.mwork-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}


    .mwork-slide.active {
        opacity: 1;
        visibility: visible;
    }


    .mwork-slide img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        transition: transform 0.6s ease;
    }


.mwork-card:hover .mwork-slide.active img {
    transform: scale(1.025);
}



/* =========================================
   CAROUSEL ARROWS
========================================= */

.mwork-prev,
.mwork-next {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.88);
    color: #102a43;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 6px 18px rgba(16, 42, 67, 0.18);
    transition: all 0.3s ease;
}


.mwork-prev {
    left: 15px;
}


.mwork-next {
    right: 15px;
}


    .mwork-prev:hover,
    .mwork-next:hover {
        background: #B88720;
        color: #fff;
        transform: translateY(-50%) scale(1.08);
    }



/* =========================================
   CAROUSEL DOTS
========================================= */

.mwork-dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 7px;
    transform: translateX(-50%);
}


.mwork-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: all 0.3s ease;
}


    .mwork-dot.active {
        width: 24px;
        border-radius: 10px;
        background: #B88720;
    }



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

.mwork-zoom {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 6;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    color: #B88720;
    font-size: 17px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(16, 42, 67, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}


.mwork-card:hover .mwork-zoom {
    opacity: 1;
    visibility: visible;
}


.mwork-zoom:hover {
    background: #B88720;
    color: #fff;
    transform: scale(1.08);
}



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

.mwork-content {
    padding: 25px 28px 30px;
    text-align: center;
}


.mwork-year {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 14px;
    border-radius: 30px;
    background: #B88720;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}


.mwork-content h3 {
    margin: 0 0 7px;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
    color: #102a43;
}


.mwork-organisation {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
    color: #B88720;
}


.mwork-description {
    max-width: 600px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.7;
    color: #6b7c8f;
}



/* =========================================
   WORKSHOP APPROACH
========================================= */

.mwork-approach {
    padding: 85px 0;
    background: #fff;
}


.mwork-approach-content {
    max-width: 800px;
    margin: 0 auto 45px;
    text-align: center;
}


    .mwork-approach-content h2 {
        margin: 0 0 18px;
        font-size: clamp(30px, 4vw, 42px);
        line-height: 1.2;
        font-weight: 700;
        color: #102a43;
    }


    .mwork-approach-content p {
        max-width: 720px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.8;
        color: #607080;
    }



/* =========================================
   PROCESS
========================================= */

.mwork-process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1050px;
    margin: 0 auto;
}


.mwork-process-item {
    position: relative;
    padding: 30px 25px;
    text-align: center;
    border: 1px solid #e5edf4;
    border-radius: 8px;
    background: #f7faff;
    transition: all 0.3s ease;
}


    .mwork-process-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(16, 42, 67, 0.08);
    }


.mwork-process-number {
    display: inline-block;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 700;
    color: #B88720;
}


.mwork-process-item h3 {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 700;
    color: #102a43;
}


.mwork-process-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #6b7c8f;
}



/* =========================================
   CTA
========================================= */

.mwork-cta {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}


.mwork-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 165deg, #011329, #021323 );
}


.mwork-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}


    .mwork-cta-content span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }


    .mwork-cta-content h2 {
        margin: 0 0 18px;
        font-size: clamp(30px, 3.5vw, 46px);
        line-height: 1.2;
        font-weight: 500;
        color: #fff;
    }


    .mwork-cta-content p {
        max-width: 700px;
        margin: 0 auto 28px;
        font-size: 16px;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.92);
    }


.mwork-btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 4px;
    background: #B88720;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}


    .mwork-btn:hover {
        background: #fff;
        color: #B88720;
    }



/* =========================================
   LIGHTBOX
========================================= */

.mwork-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}


    .mwork-lightbox.active {
        opacity: 1;
        visibility: visible;
    }


.mwork-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 12, 24, 0.94);
}


.mwork-lightbox-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 90vh;
}


    .mwork-lightbox-content img {
        display: block;
        max-width: 92vw;
        max-height: 88vh;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 4px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    }


.mwork-lightbox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #102a43;
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}


    .mwork-lightbox-close:hover {
        background: #B88720;
        color: #fff;
        transform: rotate(90deg);
    }



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

@media (max-width: 991px) {

    .mwork-hero {
        padding: 85px 0;
    }

    .mwork-intro,
    .mwork-list {
        padding: 65px 0;
    }

    .mwork-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .mwork-image {
        height: 330px;
    }

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

    .mwork-approach {
        padding: 70px 0;
    }

    .mwork-cta {
        padding: 70px 0;
    }
}



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

@media (max-width: 767px) {

    .mwork-hero {
        padding: 70px 0;
    }

    .mwork-hero-content h1 {
        font-size: 36px;
    }

    .mwork-hero-content p {
        font-size: 15px;
    }

    .mwork-intro,
    .mwork-list {
        padding: 55px 0;
    }

    .mwork-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .mwork-image {
        height: 280px;
    }

    .mwork-zoom {
        opacity: 1;
        visibility: visible;
    }

    .mwork-content {
        padding: 22px 20px 25px;
    }

        .mwork-content h3 {
            font-size: 20px;
        }

    .mwork-process {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mwork-approach {
        padding: 60px 0;
    }

    .mwork-cta {
        padding: 65px 0;
    }

    .mwork-cta-content h2 {
        font-size: 32px;
    }

    .mwork-lightbox {
        padding: 20px;
    }

    .mwork-lightbox-content {
        max-width: 94vw;
        max-height: 87vh;
    }

        .mwork-lightbox-content img {
            max-width: 94vw;
            max-height: 85vh;
        }

    .mwork-lightbox-close {
        top: -15px;
        right: -10px;
        width: 38px;
        height: 38px;
        font-size: 25px;
    }
}

/* =========================================
   VIDEOS & MEDIA
========================================= */
.mvideo-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.mvideo-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(1, 19, 41, 0.97), rgba(2, 19, 35, 0.92) );
}

.mvideo-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.mvideo-hero-small {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #B88720;
}

.mvideo-hero-content h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 3.5vw, 64px);
    line-height: 1.12;
    font-weight: 500;
    color: #fff;
}

.mvideo-hero-content p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
}


/* =========================================
   VIDEO LIST
========================================= */

.mvideo-list {
    padding: 80px 0;
    background: #f7faff;
}

.mvideo-section-title {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

    .mvideo-section-title span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }

    .mvideo-section-title h2 {
        margin: 0 0 15px;
        font-size: clamp(30px, 3.5vw, 42px);
        line-height: 1.2;
        font-weight: 600;
        color: #102a43;
    }

    .mvideo-section-title p {
        max-width: 720px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.8;
        color: #607080;
    }


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

.mvideo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}

.mvideo-folder {
    display: block;
    background: #fff;
    border: 1px solid #e5edf4;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.35s ease;
}

    .mvideo-folder:hover {
        transform: translateY(-7px);
        box-shadow: 0 18px 40px rgba(16, 42, 67, 0.13);
    }


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

.mvideo-folder-image {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: #eef3f8;
}

    .mvideo-folder-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        transition: transform 0.6s ease;
    }

.mvideo-folder:hover .mvideo-folder-image img {
    transform: scale(1.05);
}

.mvideo-folder-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(1, 19, 41, 0.82), rgba(1, 19, 41, 0.05) 65% );
}


/* Folder icon */

.mvideo-folder-icon {
    position: absolute;
    left: 25px;
    bottom: 22px;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #B88720;
    font-size: 23px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    transition: all 0.3s ease;
}

.mvideo-folder:hover .mvideo-folder-icon {
    background: #B88720;
    color: #fff;
    transform: translateY(-3px);
}


/* Video count */

.mvideo-folder-count {
    position: absolute;
    right: 20px;
    bottom: 22px;
    padding: 7px 14px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.94);
    color: #102a43;
    font-size: 13px;
    font-weight: 700;
}


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

.mvideo-folder-content {
    padding: 25px 25px 28px;
}

    .mvideo-folder-content h3 {
        margin: 0 0 8px;
        font-size: 22px;
        line-height: 1.35;
        font-weight: 700;
        color: #102a43;
    }

    .mvideo-folder-content p {
        margin: 0 0 18px;
        font-size: 15px;
        line-height: 1.7;
        color: #6b7c8f;
    }

.mvideo-folder-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #B88720;
    transition: all 0.3s ease;
}

    .mvideo-folder-link i {
        transition: transform 0.3s ease;
    }

.mvideo-folder:hover .mvideo-folder-link i {
    transform: translateX(5px);
}


/* =========================================
   CTA
========================================= */

.mvideo-cta {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.mvideo-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 165deg, #011329, #021323 );
}

.mvideo-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

    .mvideo-cta-content span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }

    .mvideo-cta-content h2 {
        margin: 0 0 18px;
        font-size: clamp(30px, 3.5vw, 46px);
        line-height: 1.2;
        font-weight: 500;
        color: #fff;
    }

    .mvideo-cta-content p {
        max-width: 700px;
        margin: 0 auto 28px;
        font-size: 16px;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.92);
    }

.mvideo-btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 4px;
    background: #B88720;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mvideo-btn:hover {
        background: #fff;
        color: #B88720;
    }


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

@media (max-width: 991px) {

    .mvideo-hero {
        padding: 85px 0;
    }

    .mvideo-list {
        padding: 65px 0;
    }

    .mvideo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .mvideo-folder-image {
        height: 280px;
    }

    .mvideo-cta {
        padding: 70px 0;
    }
}


@media (max-width: 767px) {

    .mvideo-hero {
        padding: 70px 0;
    }

    .mvideo-hero-content h1 {
        font-size: 36px;
    }

    .mvideo-hero-content p {
        font-size: 15px;
    }

    .mvideo-list {
        padding: 55px 0;
    }

    .mvideo-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .mvideo-folder-image {
        height: 250px;
    }

    .mvideo-folder-content {
        padding: 22px 20px 25px;
    }

        .mvideo-folder-content h3 {
            font-size: 20px;
        }

    .mvideo-cta {
        padding: 65px 0;
    }

    .mvideo-cta-content h2 {
        font-size: 32px;
    }
}
/* =========================================
   VIDEO DETAIL HERO
========================================= */

.mvideo-detail-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.mvideo-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(1, 19, 41, 0.97), rgba(2, 19, 35, 0.92) );
}

.mvideo-detail-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.mvideo-detail-hero-small {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #B88720;
}

.mvideo-detail-hero-content h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 3.5vw, 64px);
    line-height: 1.12;
    font-weight: 500;
    color: #fff;
}

.mvideo-detail-hero-content p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
}


/* =========================================
   VIDEO GALLERY
========================================= */

.mvideo-detail-list {
    padding: 80px 0;
    background: #f7faff;
}

.mvideo-detail-section-title {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

    .mvideo-detail-section-title span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }

    .mvideo-detail-section-title h2 {
        margin: 0;
        font-size: clamp(30px, 3.5vw, 42px);
        line-height: 1.2;
        font-weight: 600;
        color: #102a43;
    }


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

.mvideo-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}


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

.mvideo-detail-card {
    background: #fff;
    border: 1px solid #e5edf4;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.35s ease;
}

    .mvideo-detail-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 18px 40px rgba(16, 42, 67, 0.13);
    }


/* =========================================
   VIDEO THUMBNAIL
========================================= */

.mvideo-detail-image {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    background: #e9eef4;
}

    .mvideo-detail-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        transition: transform 0.5s ease;
    }

.mvideo-detail-card:hover .mvideo-detail-image img {
    transform: scale(1.04);
}


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

.mvideo-detail-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #B88720;
    font-size: 25px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    transition: all 0.3s ease;
}

    .mvideo-detail-play i {
        margin-left: 3px;
    }

    .mvideo-detail-play:hover {
        background: #B88720;
        color: #fff;
        transform: translate(-50%, -50%) scale(1.1);
    }


/* =========================================
   VIDEO TITLE
========================================= */

.mvideo-detail-content {
    padding: 22px 25px 25px;
    text-align: center;
}

    .mvideo-detail-content h3 {
        margin: 0;
        font-size: 20px;
        line-height: 1.45;
        font-weight: 700;
        color: #102a43;
    }


/* =========================================
   VIDEO LIGHTBOX
========================================= */

.mvideo-detail-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .mvideo-detail-lightbox.active {
        opacity: 1;
        visibility: visible;
    }

.mvideo-detail-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 12, 24, 0.96);
}

.mvideo-detail-lightbox-content {
    position: relative;
    z-index: 2;
    width: 90vw;
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 5px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.5);
    overflow: visible;
}

    .mvideo-detail-lightbox-content iframe {
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
        border-radius: 5px;
    }


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

.mvideo-detail-lightbox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 5;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #102a43;
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

    .mvideo-detail-lightbox-close:hover {
        background: #B88720;
        color: #fff;
        transform: rotate(90deg);
    }


/* =========================================
   CTA
========================================= */

.mvideo-detail-cta {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.mvideo-detail-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 165deg, #011329, #021323 );
}

.mvideo-detail-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

    .mvideo-detail-cta-content span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }

    .mvideo-detail-cta-content h2 {
        margin: 0 0 18px;
        font-size: clamp(30px, 3.5vw, 46px);
        line-height: 1.2;
        font-weight: 500;
        color: #fff;
    }

    .mvideo-detail-cta-content p {
        max-width: 700px;
        margin: 0 auto 28px;
        font-size: 16px;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.92);
    }

.mvideo-detail-btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 4px;
    background: #B88720;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mvideo-detail-btn:hover {
        background: #fff;
        color: #B88720;
    }


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

@media (max-width: 991px) {

    .mvideo-detail-hero {
        padding: 75px 0;
    }

    .mvideo-detail-list {
        padding: 65px 0;
    }

    .mvideo-detail-grid {
        gap: 25px;
    }

    .mvideo-detail-image {
        height: 300px;
    }

    .mvideo-detail-cta {
        padding: 70px 0;
    }
}


@media (max-width: 767px) {

    .mvideo-detail-hero {
        padding: 65px 0;
    }

    .mvideo-detail-hero-content h1 {
        font-size: 36px;
    }

    .mvideo-detail-hero-content p {
        font-size: 15px;
    }

    .mvideo-detail-list {
        padding: 55px 0;
    }

    .mvideo-detail-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .mvideo-detail-image {
        height: 250px;
    }

    .mvideo-detail-play {
        width: 62px;
        height: 62px;
        font-size: 22px;
    }

    .mvideo-detail-content {
        padding: 20px 18px 23px;
    }

        .mvideo-detail-content h3 {
            font-size: 18px;
        }

    .mvideo-detail-lightbox {
        padding: 20px;
    }

    .mvideo-detail-lightbox-content {
        width: 94vw;
    }

    .mvideo-detail-lightbox-close {
        top: -15px;
        right: -10px;
        width: 38px;
        height: 38px;
        font-size: 25px;
    }

    .mvideo-detail-cta {
        padding: 65px 0;
    }

    .mvideo-detail-cta-content h2 {
        font-size: 32px;
    }
}

/* =========================================
   PHOTOS & ALBUMS HERO
========================================= */
.mphoto-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.mphoto-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(1, 19, 41, 0.97), rgba(2, 19, 35, 0.92) );
}

.mphoto-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.mphoto-hero-small {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #B88720;
}

.mphoto-hero-content h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 3.5vw, 64px);
    line-height: 1.12;
    font-weight: 500;
    color: #fff;
}

.mphoto-hero-content p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
}


/* =========================================
   PHOTO ALBUM LIST
========================================= */

.mphoto-list {
    padding: 80px 0;
    background: #f7faff;
}


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

.mphoto-section-title {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

    .mphoto-section-title span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }

    .mphoto-section-title h2 {
        margin: 0;
        font-size: clamp(30px, 3.5vw, 42px);
        line-height: 1.2;
        font-weight: 600;
        color: #102a43;
    }


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

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


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

.mphoto-card {
    background: #fff;
    border: 1px solid #e5edf4;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.35s ease;
}

    .mphoto-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 18px 40px rgba(16, 42, 67, 0.13);
    }


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

.mphoto-image {
    position: relative;
    width: 100%;
    height: 270px;
    overflow: hidden;
    background: #e9eef4;
}

    .mphoto-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        transition: transform 0.5s ease;
    }

.mphoto-card:hover .mphoto-image img {
    transform: scale(1.05);
}


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

.mphoto-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(1, 19, 41, 0.72), rgba(1, 19, 41, 0.05) 65% );
    pointer-events: none;
}


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

.mphoto-folder-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #B88720;
    font-size: 20px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    transition: all 0.3s ease;
}

.mphoto-card:hover .mphoto-folder-icon {
    background: #B88720;
    color: #fff;
    transform: scale(1.08);
}


/* =========================================
   PHOTO COUNT
========================================= */

.mphoto-count {
    position: absolute;
    right: 18px;
    bottom: 18px;
    padding: 6px 13px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.94);
    color: #102a43;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}


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

.mphoto-content {
    padding: 25px 25px 28px;
    text-align: center;
}

    .mphoto-content h3 {
        margin: 0 0 10px;
        font-size: 21px;
        line-height: 1.4;
        font-weight: 700;
        color: #102a43;
    }

    .mphoto-content p {
        margin: 0 auto 20px;
        max-width: 390px;
        font-size: 14px;
        line-height: 1.7;
        color: #6b7c8f;
    }


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

.mphoto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 23px;
    border-radius: 4px;
    background: #B88720;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mphoto-btn i {
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .mphoto-btn:hover {
        background: #102a43;
        color: #fff;
    }

        .mphoto-btn:hover i {
            transform: translateX(4px);
        }


/* =========================================
   CTA
========================================= */

.mphoto-cta {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.mphoto-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 165deg, #011329, #021323 );
}

.mphoto-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

    .mphoto-cta-content span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }

    .mphoto-cta-content h2 {
        margin: 0 0 18px;
        font-size: clamp(30px, 3.5vw, 46px);
        line-height: 1.2;
        font-weight: 500;
        color: #fff;
    }

    .mphoto-cta-content p {
        max-width: 700px;
        margin: 0 auto 28px;
        font-size: 16px;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.92);
    }


/* CTA BUTTON */

.mphoto-cta .mphoto-btn {
    padding: 13px 30px;
    background: #B88720;
    color: #fff;
}

    .mphoto-cta .mphoto-btn:hover {
        background: #fff;
        color: #B88720;
    }


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

@media (max-width: 991px) {

    .mphoto-hero {
        padding: 75px 0;
    }

    .mphoto-list {
        padding: 65px 0;
    }

    .mphoto-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .mphoto-image {
        height: 280px;
    }

    .mphoto-content {
        padding: 23px 22px 26px;
    }

    .mphoto-cta {
        padding: 70px 0;
    }
}


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

@media (max-width: 767px) {

    .mphoto-hero {
        padding: 65px 0;
    }

    .mphoto-hero-content h1 {
        font-size: 36px;
    }

    .mphoto-hero-content p {
        font-size: 15px;
    }

    .mphoto-list {
        padding: 55px 0;
    }

    .mphoto-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .mphoto-image {
        height: 250px;
    }

    .mphoto-folder-icon {
        width: 44px;
        height: 44px;
        top: 15px;
        left: 15px;
        font-size: 18px;
    }

    .mphoto-count {
        right: 15px;
        bottom: 15px;
    }

    .mphoto-content {
        padding: 22px 20px 25px;
    }

        .mphoto-content h3 {
            font-size: 20px;
        }

        .mphoto-content p {
            font-size: 14px;
        }

    .mphoto-cta {
        padding: 65px 0;
    }

    .mphoto-cta-content h2 {
        font-size: 32px;
    }
}

/* =========================================
   PHOTO DETAIL HERO
========================================= */
.mphoto-detail-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.mphoto-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(1, 19, 41, 0.97), rgba(2, 19, 35, 0.92) );
}

.mphoto-detail-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.mphoto-detail-hero-small {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #B88720;
}

.mphoto-detail-hero-content h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 3.5vw, 64px);
    line-height: 1.12;
    font-weight: 500;
    color: #fff;
}

.mphoto-detail-hero-content p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255,255,255,0.92);
}


/* =========================================
   PHOTO LIST
========================================= */

.mphoto-detail-list {
    padding: 80px 0;
    background: #f7faff;
}


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

.mphoto-detail-section-title {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

    .mphoto-detail-section-title span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }

    .mphoto-detail-section-title h2 {
        margin: 0;
        font-size: clamp(30px, 3.5vw, 42px);
        line-height: 1.2;
        font-weight: 600;
        color: #102a43;
    }


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

.mphoto-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


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

.mphoto-detail-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5edf4;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.35s ease;
}

    .mphoto-detail-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 18px 40px rgba(16,42,67,0.13);
    }


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

.mphoto-detail-image {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    background: #e9eef4;
}

    .mphoto-detail-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        transition: transform 0.5s ease;
    }

.mphoto-detail-card:hover .mphoto-detail-image img {
    transform: scale(1.04);
}


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

.mphoto-detail-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255,255,255,0.52);
    color: #B88720;
    font-size: 20px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
    
    transition: all 0.3s ease;
}

.mphoto-detail-card:hover .mphoto-detail-zoom {
    opacity: 1;
    visibility: visible;
}

.mphoto-detail-zoom:hover {
    background: #B88720;
    color: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}


/* =========================================
   LIGHTBOX
========================================= */

.mphoto-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .mphoto-lightbox.active {
        opacity: 1;
        visibility: visible;
    }


/* OVERLAY */

.mphoto-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1,12,24,0.96);
}


/* CONTENT */

.mphoto-lightbox-content {
    position: relative;
    z-index: 2;
    width: 90vw;
    max-width: 1200px;
    height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


    /* IMAGE */

    .mphoto-lightbox-content img {
        max-width: 100%;
        max-height: 82vh;
        width: auto;
        height: auto;
        display: block;
        object-fit: contain;
        border-radius: 4px;
        box-shadow: 0 20px 70px rgba(0,0,0,0.5);
    }


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

.mphoto-lightbox-close {
    position: absolute;
    top: -10px;
    right: 0;
    z-index: 5;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #102a43;
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

    .mphoto-lightbox-close:hover {
        background: #B88720;
        color: #fff;
        transform: rotate(90deg);
    }


/* =========================================
   PREVIOUS / NEXT
========================================= */

.mphoto-lightbox-prev,
.mphoto-lightbox-next {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255,255,255,0.94);
    color: #102a43;
    font-size: 20px;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    transition: all 0.3s ease;
    z-index: 5;
}

.mphoto-lightbox-prev {
    left: -70px;
}

.mphoto-lightbox-next {
    right: -70px;
}

    .mphoto-lightbox-prev:hover,
    .mphoto-lightbox-next:hover {
        background: #B88720;
        color: #fff;
    }


/* =========================================
   PLAY / PAUSE
========================================= */

.mphoto-lightbox-play {
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #B88720;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    z-index: 5;
}

    .mphoto-lightbox-play:hover {
        background: #fff;
        color: #B88720;
    }


/* =========================================
   COUNTER
========================================= */

.mphoto-lightbox-counter {
    position: absolute;
    bottom: -5px;
    right: 0;
    padding: 8px 14px;
    border-radius: 30px;
    background: rgba(255,255,255,0.95);
    color: #102a43;
    font-size: 13px;
    font-weight: 700;
    z-index: 5;
}


/* =========================================
   CTA
========================================= */

.mphoto-detail-cta {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.mphoto-detail-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 165deg, #011329, #021323 );
}

.mphoto-detail-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

    .mphoto-detail-cta-content span {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #B88720;
    }

    .mphoto-detail-cta-content h2 {
        margin: 0 0 18px;
        font-size: clamp(30px, 3.5vw, 46px);
        line-height: 1.2;
        font-weight: 500;
        color: #fff;
    }

    .mphoto-detail-cta-content p {
        max-width: 700px;
        margin: 0 auto 28px;
        font-size: 16px;
        line-height: 1.8;
        color: rgba(255,255,255,0.92);
    }

.mphoto-detail-btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 4px;
    background: #B88720;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mphoto-detail-btn:hover {
        background: #fff;
        color: #B88720;
    }


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

@media (max-width: 991px) {

    .mphoto-detail-hero {
        padding: 75px 0;
    }

    .mphoto-detail-list {
        padding: 65px 0;
    }

    .mphoto-detail-grid {
        gap: 25px;
    }

    .mphoto-detail-image {
        height: 300px;
    }

    .mphoto-lightbox-prev {
        left: -20px;
    }

    .mphoto-lightbox-next {
        right: -20px;
    }

    .mphoto-detail-cta {
        padding: 70px 0;
    }
}


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

@media (max-width: 767px) {

    .mphoto-detail-hero {
        padding: 65px 0;
    }

    .mphoto-detail-hero-content h1 {
        font-size: 36px;
    }

    .mphoto-detail-hero-content p {
        font-size: 15px;
    }

    .mphoto-detail-list {
        padding: 55px 0;
    }

    .mphoto-detail-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .mphoto-detail-image {
        height: 280px;
    }

    .mphoto-detail-zoom {
        width: 48px;
        height: 48px;
        opacity: 1;
        visibility: visible;
        top: 15px;
        right: 15px;
        left: auto;
        transform: none;
    }

    .mphoto-detail-card:hover .mphoto-detail-zoom {
        transform: none;
    }

    .mphoto-detail-zoom:hover {
        transform: scale(1.08);
    }


    /* LIGHTBOX */

    .mphoto-lightbox {
        padding: 20px;
    }

    .mphoto-lightbox-content {
        width: 100%;
        height: 82vh;
    }

        .mphoto-lightbox-content img {
            max-width: 100%;
            max-height: 70vh;
        }

    .mphoto-lightbox-close {
        top: -15px;
        right: 0;
        width: 38px;
        height: 38px;
        font-size: 25px;
    }

    .mphoto-lightbox-prev,
    .mphoto-lightbox-next {
        top: auto;
        bottom: 15px;
        width: 42px;
        height: 42px;
        transform: none;
    }

    .mphoto-lightbox-prev {
        left: 10px;
    }

    .mphoto-lightbox-next {
        right: 10px;
    }

    .mphoto-lightbox-play {
        bottom: 15px;
        width: 42px;
        height: 42px;
    }

    .mphoto-lightbox-counter {
        bottom: 70px;
        right: 50%;
        transform: translateX(50%);
    }


    .mphoto-detail-cta {
        padding: 65px 0;
    }

    .mphoto-detail-cta-content h2 {
        font-size: 32px;
    }
}
/* =========================================
   PRESS & MEDIA HERO
========================================= */

.mpress-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mpress-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(7, 20, 48, 0.96), rgba(7, 20, 48, 0.82), rgba(7, 20, 48, 0.70) );
}

.mpress-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.mpress-hero-small {
    display: inline-block;
    margin-bottom: 15px;
    color: #B88720;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mpress-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.12;
    font-weight: 700;
}

.mpress-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 17px;
    line-height: 1.8;
}


/* =========================================
   PRESS LIST
========================================= */

.mpress-list {
    padding: 80px 0;
    background: #f7faff;
}

.mpress-section-title {
    max-width: 760px;
    margin: 0 auto 45px;
    text-align: center;
}

    .mpress-section-title > span {
        display: block;
        margin-bottom: 8px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mpress-section-title h2 {
        margin: 0 0 15px;
        color: #071530;
        font-size: 38px;
        line-height: 1.2;
        font-weight: 700;
    }

    .mpress-section-title p {
        margin: 0;
        color: #68758a;
        font-size: 16px;
        line-height: 1.7;
    }


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

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


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

.mpress-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5eaf2;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(20, 45, 80, 0.05);
    transition: all 0.3s ease;
}

    .mpress-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(20, 45, 80, 0.11);
    }


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

.mpress-image {
    position: relative;
    height: 350px;
    overflow: hidden;
    background: #eef3f8;
}

    .mpress-image img {
        display: block;
        width: 100%;
        height: 100%;
        transition: transform 0.4s ease;
    }


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

.mpress-newspaper .mpress-image {
    background: #eef1f5;
}

    .mpress-newspaper .mpress-image img {
        padding: 15px;
        object-fit: contain;
        background: #f2f4f7;
    }


/* Newspaper par halka zoom */
.mpress-newspaper:hover .mpress-image img {
    transform: scale(1.015);
}


/* =========================================
   ONLINE MEDIA IMAGE
========================================= */

.mpress-online .mpress-image img {
    object-fit: cover;
}

.mpress-online:hover .mpress-image img {
    transform: scale(1.04);
}


/* =========================================
   MEDIA BADGE
========================================= */

.mpress-media-badge {
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 4px;
    background: rgba(7, 21, 48, 0.90);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* =========================================
   ZOOM / EXTERNAL BUTTON
========================================= */

.mpress-zoom,
.mpress-external {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #071530;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -40%);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.3s ease, color 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.20);
    text-decoration: none;
    cursor: pointer;
}

    .mpress-zoom i,
    .mpress-external i {
        font-size: 18px;
        line-height: 1;
    }


/* Show on hover */

.mpress-card:hover .mpress-zoom,
.mpress-card:hover .mpress-external {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}


/* Button hover */

.mpress-zoom:hover,
.mpress-external:hover {
    background: #B88720;
    color: #fff;
}


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

.mpress-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 25px 27px;
}

.mpress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
    color: #B88720;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.mpress-content h3 {
    margin: 0 0 10px;
    color: #071530;
    font-size: 21px;
    line-height: 1.4;
    font-weight: 700;
}

.mpress-publication {
    margin-bottom: 12px !important;
    color: #B88720 !important;
    font-weight: 600;
}

.mpress-content p {
    margin: 0 0 18px;
    color: #6d788a;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   ACTION
========================================= */

.mpress-view {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    margin-top: auto;
    color: #071530;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
    border-radius:10px !important;
    padding:5px 15px;
    height:45px;
}

    .mpress-view i {
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .mpress-view:hover {
        color: #fff;
    }

        .mpress-view:hover i {
            transform: translateX(4px);
        }


/* =========================================
   PRESS & MEDIA LIGHTBOX
========================================= */

.mpress-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .mpress-lightbox.active {
        opacity: 1;
        visibility: visible;
    }


/* Overlay */

.mpress-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 10, 25, 0.96);
}


/* Content */

.mpress-lightbox-content {
    position: relative;
    z-index: 2;
    width: 92vw;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Image wrapper */

.mpress-lightbox-image-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 85px;
}


    /* Actual image */

    .mpress-lightbox-image-wrap img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 82vh;
        object-fit: contain;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
    }


/* =========================================
   LIGHTBOX CLOSE
========================================= */

.mpress-lightbox-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 31px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .mpress-lightbox-close:hover {
        background: #B88720;
    }


/* =========================================
   LIGHTBOX PREV / NEXT
========================================= */

.mpress-lightbox-prev,
.mpress-lightbox-next {
    position: absolute;
    top: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.mpress-lightbox-prev {
    left: 10px;
}

.mpress-lightbox-next {
    right: 10px;
}

    .mpress-lightbox-prev:hover,
    .mpress-lightbox-next:hover {
        background: #B88720;
    }


/* =========================================
   LIGHTBOX PLAY
========================================= */

.mpress-lightbox-play {
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #B88720;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transform: translateX(-50%);
}


/* =========================================
   LIGHTBOX COUNTER
========================================= */

.mpress-lightbox-counter {
    position: absolute;
    right: 15px;
    bottom: 20px;
    z-index: 20;
    padding: 7px 12px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================
   CTA
========================================= */

.mpress-cta {
    position: relative;
    padding: 90px 0;
    background: url("../../assets/img/breadcrumb-bg.jpg") center/cover no-repeat;
    overflow: hidden;
}

.mpress-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 21, 48, 0.94);
}

.mpress-cta-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: auto;
    text-align: center;
}

    .mpress-cta-content > span {
        display: block;
        margin-bottom: 10px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mpress-cta-content h2 {
        margin: 0 0 15px;
        color: #fff;
        font-size: 40px;
        line-height: 1.2;
    }

    .mpress-cta-content p {
        max-width: 650px;
        margin: 0 auto 28px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 16px;
        line-height: 1.7;
    }

.mpress-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border: 1px solid #B88720;
    border-radius: 5px;
    background: #B88720;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mpress-btn:hover {
        background: transparent;
        color: #fff;
    }


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

@media (max-width: 1199px) {

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


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

@media (max-width: 767px) {

    .mpress-hero {
        padding: 65px 0;
    }

        .mpress-hero h1 {
            font-size: 36px;
        }

        .mpress-hero p {
            font-size: 15px;
        }


    .mpress-list {
        padding: 60px 0;
    }

    .mpress-section-title h2 {
        font-size: 30px;
    }


    .mpress-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }


    .mpress-image {
        height: 300px;
    }


    .mpress-content {
        padding: 21px;
    }


    /* Mobile zoom button */

    .mpress-zoom,
    .mpress-external {
        top: 15px;
        right: 15px;
        left: auto;
        width: 44px;
        height: 44px;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .mpress-card:hover .mpress-zoom,
    .mpress-card:hover .mpress-external {
        transform: none;
    }


    /* Lightbox */

    .mpress-lightbox {
        padding: 15px;
    }

    .mpress-lightbox-content {
        width: 100%;
        height: 90vh;
    }

    .mpress-lightbox-image-wrap {
        padding: 55px 5px 85px;
    }

        .mpress-lightbox-image-wrap img {
            max-width: 100%;
            max-height: 72vh;
        }


    .mpress-lightbox-prev,
    .mpress-lightbox-next {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .mpress-lightbox-prev {
        left: 0;
    }

    .mpress-lightbox-next {
        right: 0;
    }


    .mpress-lightbox-close {
        top: 0;
        right: 0;
        width: 42px;
        height: 42px;
        font-size: 28px;
    }


    .mpress-lightbox-play {
        bottom: 12px;
    }

    .mpress-lightbox-counter {
        right: 10px;
        bottom: 18px;
    }


    /* CTA */

    .mpress-cta {
        padding: 65px 0;
    }

    .mpress-cta-content h2 {
        font-size: 30px;
    }
}
/* =========================================
   FAQ HERO
========================================= */

.mfaq-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mfaq-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(7, 20, 48, 0.96), rgba(7, 20, 48, 0.82), rgba(7, 20, 48, 0.70) );
}

.mfaq-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.mfaq-hero-small {
    display: inline-block;
    margin-bottom: 15px;
    color: #B88720;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mfaq-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.12;
    font-weight: 700;
}

.mfaq-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 17px;
    line-height: 1.8;
}


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

.mfaq-list {
    padding: 80px 0;
    background: #f7faff;
}

.mfaq-section-title {
    max-width: 760px;
    margin: 0 auto 45px;
    text-align: center;
}

    .mfaq-section-title > span {
        display: block;
        margin-bottom: 8px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mfaq-section-title h2 {
        margin: 0 0 15px;
        color: #071530;
        font-size: 38px;
        line-height: 1.2;
        font-weight: 700;
    }

    .mfaq-section-title p {
        margin: 0;
        color: #68758a;
        font-size: 16px;
        line-height: 1.7;
    }


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

   1 | 2
   3 | 4
   5 | 6
   7 | 8
========================================= */

.mfaq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 25px;
    row-gap: 18px;
    align-items: start;
}


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

.mfaq-item {
    align-self: start;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .mfaq-item:hover {
        border-color: rgba(184, 135, 32, 0.45);
        box-shadow: 0 10px 30px rgba(20, 45, 80, 0.07);
    }

    .mfaq-item.active {
        border-color: rgba(184, 135, 32, 0.45);
    }


/* =========================================
   QUESTION
========================================= */

.mfaq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 22px;
    border: 0;
    background: transparent;
    color: #071530;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

    .mfaq-question span {
        flex: 1;
    }

    .mfaq-question i {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #eef3f9;
        color: #071530;
        font-size: 13px;
        transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
    }


/* =========================================
   ACTIVE QUESTION
========================================= */

.mfaq-item.active .mfaq-question {
    color: #B88720;
}

    .mfaq-item.active .mfaq-question i {
        background: #B88720;
        color: #fff;
        transform: rotate(45deg);
    }


/* =========================================
   ANSWER
========================================= */

.mfaq-answer {
    display: none;
    padding: 0 22px 22px;
}

    .mfaq-answer p {
        margin: 0;
        padding-top: 2px;
        color: #68758a;
        font-size: 14px;
        line-height: 1.8;
    }


/* =========================================
   CTA
========================================= */

.mfaq-cta {
    position: relative;
    padding: 90px 0;
    background: url("../../assets/img/breadcrumb-bg.jpg") center/cover no-repeat;
    overflow: hidden;
}

.mfaq-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 21, 48, 0.94);
}

.mfaq-cta-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: auto;
    text-align: center;
}

    .mfaq-cta-content > span {
        display: block;
        margin-bottom: 10px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mfaq-cta-content h2 {
        margin: 0 0 15px;
        color: #fff;
        font-size: 40px;
        line-height: 1.2;
    }

    .mfaq-cta-content p {
        max-width: 650px;
        margin: 0 auto 28px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 16px;
        line-height: 1.7;
    }

.mfaq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border: 1px solid #B88720;
    border-radius: 5px;
    background: #B88720;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mfaq-btn:hover {
        background: transparent;
        color: #fff;
    }


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

@media (max-width: 991px) {

    .mfaq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 16px;
    }
}


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

@media (max-width: 767px) {

    .mfaq-hero {
        padding: 65px 0;
    }

        .mfaq-hero h1 {
            font-size: 36px;
        }

        .mfaq-hero p {
            font-size: 15px;
        }


    .mfaq-list {
        padding: 60px 0;
    }

    .mfaq-section-title {
        margin-bottom: 35px;
    }

        .mfaq-section-title h2 {
            font-size: 30px;
        }


    .mfaq-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    .mfaq-question {
        padding: 18px;
        font-size: 15px;
    }

        .mfaq-question i {
            width: 28px;
            height: 28px;
        }

    .mfaq-answer {
        padding: 0 18px 20px;
    }


    .mfaq-cta {
        padding: 65px 0;
    }

    .mfaq-cta-content h2 {
        font-size: 30px;
    }
}
/* =========================================
   BLOG HERO
========================================= */

.mblog-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mblog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(7, 20, 48, 0.96), rgba(7, 20, 48, 0.82), rgba(7, 20, 48, 0.70) );
}

.mblog-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.mblog-hero-small {
    display: inline-block;
    margin-bottom: 15px;
    color: #B88720;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mblog-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.12;
    font-weight: 700;
}

.mblog-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 17px;
    line-height: 1.8;
}


/* =========================================
   BLOG LIST
========================================= */

.mblog-list {
    padding: 80px 0;
    background: #f7faff;
}

.mblog-section-title {
    max-width: 760px;
    margin: 0 auto 45px;
    text-align: center;
}

    .mblog-section-title > span {
        display: block;
        margin-bottom: 8px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mblog-section-title h2 {
        margin: 0 0 15px;
        color: #071530;
        font-size: 38px;
        line-height: 1.2;
        font-weight: 700;
    }

    .mblog-section-title p {
        margin: 0;
        color: #68758a;
        font-size: 16px;
        line-height: 1.7;
    }


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

.mblog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}


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

.mblog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(20, 45, 80, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .mblog-card:hover {
        transform: translateY(-6px);
        border-color: rgba(184, 135, 32, 0.35);
        box-shadow: 0 18px 40px rgba(20, 45, 80, 0.10);
    }


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

.mblog-image {
    position: relative;
    height: 245px;
    overflow: hidden;
    background: #edf2f7;
}

    .mblog-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

.mblog-card:hover .mblog-image img {
    transform: scale(1.04);
}


/* =========================================
   CATEGORY
========================================= */

.mblog-category {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 4px;
    background: #071530;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}


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

.mblog-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 23px 24px 25px;
}

.mblog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    color: #9a6f18;
    font-size: 12px;
    font-weight: 600;
}

    .mblog-meta span:last-child {
        color: #8995a7;
        font-weight: 500;
    }

.mblog-content h3 {
    margin: 0 0 12px;
    color: #071530;
    font-size: 21px;
    line-height: 1.4;
    font-weight: 700;
}

.mblog-content p {
    margin: 0 0 20px;
    color: #68758a;
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================
   READ ARTICLE
========================================= */

.mblog-read {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    margin-top: auto;
    color: #071530;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .mblog-read i {
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .mblog-read:hover {
        color: #B88720;
    }

        .mblog-read:hover i {
            transform: translateX(4px);
        }


/* =========================================
   LOAD MORE
========================================= */

.mblog-load-more {
    margin-top: 45px;
    text-align: center;
}

.mblog-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 27px;
    border: 1px solid #071530;
    border-radius: 5px;
    color: #071530;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mblog-btn-outline:hover {
        background: #071530;
        color: #fff;
    }


/* =========================================
   CTA
========================================= */

.mblog-cta {
    position: relative;
    padding: 90px 0;
    background: url("../../assets/img/breadcrumb-bg.jpg") center / cover no-repeat;
    overflow: hidden;
}

.mblog-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 21, 48, 0.94);
}

.mblog-cta-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: auto;
    text-align: center;
}

    .mblog-cta-content > span {
        display: block;
        margin-bottom: 10px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mblog-cta-content h2 {
        margin: 0 0 15px;
        color: #fff;
        font-size: 40px;
        line-height: 1.2;
    }

    .mblog-cta-content p {
        max-width: 650px;
        margin: 0 auto 28px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 16px;
        line-height: 1.7;
    }

.mblog-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border: 1px solid #B88720;
    border-radius: 5px;
    background: #B88720;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mblog-btn:hover {
        background: transparent;
        color: #fff;
    }


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

@media (max-width: 991px) {

    .mblog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }
}


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

@media (max-width: 767px) {

    .mblog-hero {
        padding: 65px 0;
    }

        .mblog-hero h1 {
            font-size: 36px;
        }

        .mblog-hero p {
            font-size: 15px;
        }


    .mblog-list {
        padding: 60px 0;
    }

    .mblog-section-title {
        margin-bottom: 35px;
    }

        .mblog-section-title h2 {
            font-size: 30px;
        }


    .mblog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .mblog-image {
        height: 230px;
    }


    .mblog-content {
        padding: 21px 20px 23px;
    }

        .mblog-content h3 {
            font-size: 20px;
        }


    .mblog-cta {
        padding: 65px 0;
    }

    .mblog-cta-content h2 {
        font-size: 30px;
    }
}
/* =========================================
   BLOG DETAIL HERO
========================================= */

.mblog-detail-hero {
    position: relative;
    padding: 75px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mblog-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(7, 20, 48, 0.97), rgba(7, 20, 48, 0.86), rgba(7, 20, 48, 0.72) );
}

.mblog-detail-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.mblog-detail-hero-small {
    display: inline-block;
    margin-bottom: 14px;
    color: #B88720;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mblog-detail-hero h1 {
    margin: 0 0 22px;
    color: #fff;
    font-size: clamp(36px, 3.5vw, 58px);
    line-height: 1.15;
    font-weight: 600;
}

.mblog-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
}

    .mblog-detail-meta span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 13px;
    }

    .mblog-detail-meta i {
        color: #B88720;
    }


/* =========================================
   MAIN ARTICLE
========================================= */

.mblog-detail {
    padding: 80px 0;
    background: #f7faff;
}

.mblog-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 45px;
    align-items: start;
}


/* =========================================
   ARTICLE
========================================= */

.mblog-detail-article {
    min-width: 0;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 10px;
    overflow: hidden;
}

.mblog-detail-featured {
    width: 100%;
    height: 450px;
    overflow: hidden;
    background: #edf2f7;
}

    .mblog-detail-featured img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.mblog-detail-content {
    padding: 38px 42px 40px;
}

    .mblog-detail-content p {
        margin: 0 0 20px;
        color: #5f6d81;
        font-size: 16px;
        line-height: 1.9;
    }

    .mblog-detail-content .mblog-detail-intro {
        margin-bottom: 30px;
        color: #273852;
        font-size: 19px;
        line-height: 1.8;
        font-weight: 500;
    }

    .mblog-detail-content h2 {
        margin: 32px 0 14px;
        color: #071530;
        font-size: 28px;
        line-height: 1.35;
        font-weight: 700;
    }


/* =========================================
   HIGHLIGHT
========================================= */

.mblog-detail-highlight {
    margin: 32px 0;
    padding: 25px 28px;
    border-left: 4px solid #B88720;
    background: #f7f8fb;
}

    .mblog-detail-highlight span {
        display: block;
        color: #071530;
        font-size: 19px;
        line-height: 1.6;
        font-weight: 600;
    }


/* =========================================
   TAGS
========================================= */

.mblog-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid #e6ebf2;
}

    .mblog-detail-tags span {
        padding: 7px 12px;
        border-radius: 4px;
        background: #eef3f8;
        color: #536176;
        font-size: 12px;
        font-weight: 600;
    }


/* =========================================
   AUTHOR
========================================= */

.mblog-detail-author {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 42px 42px;
    padding: 24px;
    border: 1px solid #e3e9f1;
    border-radius: 8px;
    background: #f8fafd;
}

.mblog-detail-author-image {
    flex: 0 0 75px;
    width: 75px;
    height: 75px;
    overflow: hidden;
    border-radius: 50%;
    background: #e9eef5;
}

    .mblog-detail-author-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mblog-detail-author-content span {
    display: block;
    margin-bottom: 4px;
    color: #B88720;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mblog-detail-author-content h3 {
    margin: 0 0 6px;
    color: #071530;
    font-size: 20px;
}

.mblog-detail-author-content p {
    margin: 0;
    color: #68758a;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================
   SIDEBAR
========================================= */

.mblog-detail-sidebar {
    position: sticky;
    top: 100px;
}

.mblog-detail-widget {
    margin-bottom: 25px;
    padding: 24px;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 8px;
}

    .mblog-detail-widget h3 {
        margin: 0 0 18px;
        color: #071530;
        font-size: 20px;
        font-weight: 700;
    }


/* SEARCH */

.mblog-detail-search {
    display: flex;
    border: 1px solid #dfe5ed;
    border-radius: 5px;
    overflow: hidden;
}

    .mblog-detail-search input {
        width: 100%;
        min-width: 0;
        padding: 12px 13px;
        border: 0;
        outline: 0;
        background: #fff;
        color: #071530;
        font-family: inherit;
        font-size: 13px;
    }

    .mblog-detail-search button {
        flex: 0 0 45px;
        border: 0;
        background: #071530;
        color: #fff;
        cursor: pointer;
    }

        .mblog-detail-search button:hover {
            background: #B88720;
        }


/* CATEGORIES */

.mblog-detail-category-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .mblog-detail-category-list li {
        border-bottom: 1px solid #edf0f4;
    }

        .mblog-detail-category-list li:last-child {
            border-bottom: 0;
        }

    .mblog-detail-category-list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 11px 0;
        color: #5c6a7d;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .mblog-detail-category-list a span {
            color: #9ba5b3;
        }

        .mblog-detail-category-list a:hover {
            color: #B88720;
        }


/* RECENT */

.mblog-detail-recent {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f4;
    text-decoration: none;
}

    .mblog-detail-recent:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .mblog-detail-recent:first-of-type {
        padding-top: 0;
    }

.mblog-detail-recent-image {
    flex: 0 0 72px;
    width: 72px;
    height: 65px;
    overflow: hidden;
    border-radius: 5px;
    background: #edf2f7;
}

    .mblog-detail-recent-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

.mblog-detail-recent:hover img {
    transform: scale(1.05);
}

.mblog-detail-recent span {
    display: block;
    margin-bottom: 4px;
    color: #B88720;
    font-size: 13px;
}

.mblog-detail-recent h4 {
    margin: 0;
    color: #071530;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
}


/* =========================================
   RELATED BLOGS
========================================= */

.mblog-related {
    padding: 75px 0;
    background: #fff;
}

    .mblog-related .mblog-section-title {
        margin-bottom: 40px;
        text-align: center;
    }

.mblog-section-title > span {
    display: block;
    margin-bottom: 8px;
    color: #B88720;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mblog-section-title h2 {
    margin: 0;
    color: #071530;
    font-size: 36px;
    line-height: 1.2;
}


/* RELATED GRID */

.mblog-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.mblog-related-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 9px;
    transition: all 0.3s ease;
}

    .mblog-related-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(20, 45, 80, 0.09);
    }

.mblog-related-image {
    height: 210px;
    overflow: hidden;
    background: #edf2f7;
}

    .mblog-related-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

.mblog-related-card:hover .mblog-related-image img {
    transform: scale(1.04);
}

.mblog-related-content {
    padding: 21px 22px 23px;
}

    .mblog-related-content > span {
        display: block;
        margin-bottom: 8px;
        color: #B88720;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .mblog-related-content h3 {
        margin: 0 0 16px;
        color: #071530;
        font-size: 19px;
        line-height: 1.45;
    }

    .mblog-related-content a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #071530;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

        .mblog-related-content a:hover {
            color: #B88720;
        }


/* =========================================
   CTA
========================================= */

.mblog-detail-cta {
    position: relative;
    padding: 90px 0;
    background: url("../../assets/img/breadcrumb-bg.jpg") center / cover no-repeat;
    overflow: hidden;
}

.mblog-detail-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 21, 48, 0.94);
}

.mblog-detail-cta-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: auto;
    text-align: center;
}

    .mblog-detail-cta-content > span {
        display: block;
        margin-bottom: 10px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mblog-detail-cta-content h2 {
        margin: 0 0 15px;
        color: #fff;
        font-size: 40px;
        line-height: 1.2;
    }

    .mblog-detail-cta-content p {
        max-width: 650px;
        margin: 0 auto 28px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 16px;
        line-height: 1.7;
    }

.mblog-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border: 1px solid #B88720;
    border-radius: 5px;
    background: #B88720;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mblog-detail-btn:hover {
        background: transparent;
        color: #fff;
    }


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

@media (max-width: 991px) {

    .mblog-detail-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .mblog-detail-sidebar {
        position: static;
    }

    .mblog-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


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

@media (max-width: 767px) {

    .mblog-detail-hero {
        padding: 65px 0;
    }

        .mblog-detail-hero h1 {
            font-size: 35px;
        }

    .mblog-detail-meta {
        gap: 12px 18px;
    }


    .mblog-detail {
        padding: 55px 0;
    }

    .mblog-detail-featured {
        height: 280px;
    }

    .mblog-detail-content {
        padding: 28px 20px 30px;
    }

        .mblog-detail-content p {
            font-size: 15px;
        }

        .mblog-detail-content .mblog-detail-intro {
            font-size: 17px;
        }

        .mblog-detail-content h2 {
            font-size: 25px;
        }


    .mblog-detail-author {
        margin: 0 20px 25px;
        padding: 18px;
        align-items: flex-start;
    }


    .mblog-related {
        padding: 60px 0;
    }

    .mblog-section-title h2 {
        font-size: 30px;
    }

    .mblog-related-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .mblog-detail-cta {
        padding: 65px 0;
    }

    .mblog-detail-cta-content h2 {
        font-size: 30px;
    }
}
/* =========================================
   CONTACT HERO
========================================= */

.mcontact-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mcontact-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(7, 20, 48, 0.96), rgba(7, 20, 48, 0.82), rgba(7, 20, 48, 0.70) );
}

.mcontact-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.mcontact-hero-small {
    display: inline-block;
    margin-bottom: 15px;
    color: #B88720;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mcontact-hero h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.12;
    font-weight: 700;
}

.mcontact-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 17px;
    line-height: 1.8;
}


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

.mcontact-intro {
    padding: 70px 0 20px;
    background: #fff;
}

.mcontact-intro-content {
    max-width: 760px;
    margin: auto;
    text-align: center;
}

    .mcontact-intro-content > span {
        display: block;
        margin-bottom: 8px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mcontact-intro-content h2 {
        margin: 0 0 15px;
        color: #071530;
        font-size: 38px;
        line-height: 1.2;
    }

    .mcontact-intro-content p {
        margin: 0;
        color: #68758a;
        font-size: 16px;
        line-height: 1.8;
    }


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

.mcontact-main {
    padding: 60px 0 80px;
    background: #fff;
}

.mcontact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 55px;
    align-items: start;
}


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

.mcontact-info {
    padding: 15px 0;
}

.mcontact-section-small {
    display: block;
    margin-bottom: 8px;
    color: #B88720;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.mcontact-info h2 {
    margin: 0 0 13px;
    color: #071530;
    font-size: 38px;
    line-height: 1.2;
}

.mcontact-info-intro {
    max-width: 520px;
    margin: 0 0 32px;
    color: #68758a;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   INFO ITEMS
========================================= */

.mcontact-info-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.mcontact-info-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef3f9;
    color: #071530;
    font-size: 17px;
}

.mcontact-info-text span {
    display: block;
    margin-bottom: 3px;
    color: #8995a7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mcontact-info-text a,
.mcontact-info-text p {
    margin: 0;
    color: #071530;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

    .mcontact-info-text a:hover {
        color: #B88720;
    }


/* =========================================
   SOCIAL
========================================= */

.mcontact-social {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid #e7ebf1;
}

    .mcontact-social > span {
        display: block;
        margin-bottom: 13px;
        color: #071530;
        font-size: 13px;
        font-weight: 700;
    }

.mcontact-social-links {
    display: flex;
    gap: 9px;
}

    .mcontact-social-links a {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #dfe5ed;
        border-radius: 50%;
        color: #071530;
        text-decoration: none;
        transition: all 0.3s ease;
    }

        .mcontact-social-links a:hover {
            border-color: #B88720;
            background: #B88720;
            color: #fff;
        }


/* =========================================
   FORM BOX
========================================= */

.mcontact-form-box {
    padding: 35px;
    background: #f7faff;
    border: 1px solid #e1e8f1;
    border-radius: 10px;
}

.mcontact-form-heading {
    margin-bottom: 25px;
}

    .mcontact-form-heading > span {
        display: block;
        margin-bottom: 7px;
        color: #B88720;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .mcontact-form-heading h2 {
        margin: 0 0 10px;
        color: #071530;
        font-size: 30px;
        line-height: 1.25;
    }

    .mcontact-form-heading p {
        margin: 0;
        color: #68758a;
        font-size: 14px;
        line-height: 1.7;
    }


/* =========================================
   FORM
========================================= */

.mcontact-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.mcontact-field {
    margin-bottom: 18px;
}

    .mcontact-field label {
        display: block;
        margin-bottom: 7px;
        color: #071530;
        font-size: 13px;
        font-weight: 700;
    }

    .mcontact-field input,
    .mcontact-field select,
    .mcontact-field textarea {
        width: 100%;
        display: block;
        padding: 12px 14px;
        border: 1px solid #dce3ec;
        border-radius: 5px;
        outline: none;
        background: #fff;
        color: #071530;
        font-family: inherit;
        font-size: 13px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .mcontact-field input,
    .mcontact-field select {
        height: 46px;
    }

    .mcontact-field textarea {
        min-height: 135px;
        resize: vertical;
    }

        .mcontact-field input:focus,
        .mcontact-field select:focus,
        .mcontact-field textarea:focus {
            border-color: #B88720;
            box-shadow: 0 0 0 3px rgba(184, 135, 32, 0.08);
        }

.mcontact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 27px;
    border: 1px solid #B88720;
    border-radius: 5px;
    background: #B88720;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .mcontact-submit i {
        transition: transform 0.3s ease;
    }

    .mcontact-submit:hover {
        background: #071530;
        border-color: #071530;
    }

        .mcontact-submit:hover i {
            transform: translateX(4px);
        }


/* =========================================
   WAYS TO CONNECT
========================================= */

.mcontact-connect {
    padding: 80px 0;
    background: #f7faff;
}

.mcontact-section-title {
    max-width: 760px;
    margin: 0 auto 45px;
    text-align: center;
}

    .mcontact-section-title > span {
        display: block;
        margin-bottom: 8px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mcontact-section-title h2 {
        margin: 0 0 14px;
        color: #071530;
        font-size: 38px;
        line-height: 1.2;
    }

    .mcontact-section-title p {
        margin: 0;
        color: #68758a;
        font-size: 16px;
        line-height: 1.7;
    }


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

.mcontact-connect-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.mcontact-connect-card {
    padding: 28px 23px;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
}

    .mcontact-connect-card:hover {
        transform: translateY(-5px);
        border-color: rgba(184, 135, 32, 0.4);
        box-shadow: 0 15px 35px rgba(20, 45, 80, 0.08);
    }

.mcontact-connect-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef3f9;
    color: #071530;
    font-size: 19px;
}

.mcontact-connect-card h3 {
    margin: 0 0 10px;
    color: #071530;
    font-size: 19px;
    line-height: 1.4;
}

.mcontact-connect-card p {
    margin: 0;
    color: #68758a;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================
   CTA
========================================= */

.mcontact-cta {
    position: relative;
    padding: 90px 0;
    background: url("../../assets/img/breadcrumb-bg.jpg") center / cover no-repeat;
    overflow: hidden;
}

.mcontact-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 21, 48, 0.94);
}

.mcontact-cta-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: auto;
    text-align: center;
}

    .mcontact-cta-content > span {
        display: block;
        margin-bottom: 10px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mcontact-cta-content h2 {
        margin: 0 0 15px;
        color: #fff;
        font-size: 40px;
        line-height: 1.2;
    }

    .mcontact-cta-content p {
        max-width: 650px;
        margin: 0 auto 28px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 16px;
        line-height: 1.7;
    }

.mcontact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border: 1px solid #B88720;
    border-radius: 5px;
    background: #B88720;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mcontact-btn:hover {
        background: transparent;
        color: #fff;
    }


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

@media (max-width: 991px) {

    .mcontact-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mcontact-connect-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


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

@media (max-width: 767px) {

    .mcontact-hero {
        padding: 65px 0;
    }

        .mcontact-hero h1 {
            font-size: 36px;
        }

        .mcontact-hero p {
            font-size: 15px;
        }


    .mcontact-intro {
        padding: 60px 0 10px;
    }

    .mcontact-intro-content h2 {
        font-size: 30px;
    }


    .mcontact-main {
        padding: 50px 0 60px;
    }

    .mcontact-info h2 {
        font-size: 32px;
    }


    .mcontact-form-box {
        padding: 25px 20px;
    }

    .mcontact-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }


    .mcontact-connect {
        padding: 60px 0;
    }

    .mcontact-section-title h2 {
        font-size: 30px;
    }

    .mcontact-connect-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }


    .mcontact-cta {
        padding: 65px 0;
    }

    .mcontact-cta-content h2 {
        font-size: 30px;
    }
}
/* =========================================
   BOOK A SESSION - HERO
========================================= */

.mbook-hero {
    position: relative;
    padding: 80px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mbook-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(8, 22, 45, 0.94), rgba(14, 39, 75, 0.82) );
}

.mbook-hero .container {
    position: relative;
    z-index: 2;
}

.mbook-hero-content {
    max-width: 850px;
    text-align: center;
    margin: 0 auto;
    color: #fff;
}

.mbook-hero-small {
    display: block;
    margin-bottom: 14px;
    color: #B88720;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mbook-hero-content h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.12;
    font-weight: 700;
}

.mbook-hero-content p {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255,255,255,0.85);
    font-size: 17px;
    line-height: 1.8;
}


/* =========================================
   COMMON SECTION TITLE
========================================= */

.mbook-section-title {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

    .mbook-section-title > span {
        display: block;
        margin-bottom: 10px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mbook-section-title h2 {
        margin: 0 0 15px;
        color: #102746;
        font-size: 38px;
        line-height: 1.2;
        font-weight: 700;
    }

    .mbook-section-title p {
        margin: 0;
        color: #667085;
        font-size: 16px;
        line-height: 1.8;
    }


/* =========================================
   SESSION OPTIONS
========================================= */

.mbook-sessions {
    padding: 85px 0;
    background: #f7faff;
}

.mbook-session-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.mbook-session-card {
    position: relative;
    padding: 38px 28px 32px;
    background: #fff;
    border: 1px solid #e5eaf2;
    border-radius: 10px;
    text-align: center;
    transition: all 0.35s ease;
}

    .mbook-session-card:hover {
        transform: translateY(-7px);
        border-color: rgba(184, 135, 32, 0.45);
        box-shadow: 0 18px 40px rgba(16, 39, 70, 0.10);
    }

.mbook-session-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef4fc;
    color: #B88720;
    font-size: 28px;
    transition: all 0.3s ease;
}

.mbook-session-card:hover .mbook-session-icon {
    background: #102746;
    color: #fff;
}

.mbook-session-card h3 {
    margin: 0 0 14px;
    color: #102746;
    font-size: 21px;
    line-height: 1.35;
}

.mbook-session-card p {
    min-height: 95px;
    margin: 0 0 25px;
    color: #667085;
    font-size: 14px;
    line-height: 1.75;
}

.mbook-session-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #102746;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mbook-session-btn i {
        color: #B88720;
        transition: transform 0.3s ease;
    }

    .mbook-session-btn:hover {
        color: #B88720;
    }

        .mbook-session-btn:hover i {
            transform: translateX(4px);
        }


/* =========================================
   HOW IT WORKS
========================================= */

.mbook-process {
    padding: 85px 0;
    background: #fff;
}

.mbook-process-title {
    margin-bottom: 55px;
}

.mbook-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.mbook-process-card {
    position: relative;
    padding: 35px 25px;
    text-align: center;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    background: #fff;
    transition: all 0.3s ease;
}

    .mbook-process-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(16, 39, 70, 0.08);
    }

.mbook-process-number {
    position: absolute;
    top: 15px;
    right: 18px;
    color: #dce4ee;
    font-size: 25px;
    font-weight: 800;
}

.mbook-process-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #102746;
    color: #fff;
    font-size: 23px;
}

.mbook-process-card h3 {
    margin: 0 0 12px;
    color: #102746;
    font-size: 19px;
}

.mbook-process-card p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   BOOKING FORM
========================================= */

.mbook-form-section {
    padding: 85px 0;
    background: #f7faff;
}

.mbook-form-wrapper {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    
}

.mbook-form-intro {
    padding-right: 20px;
}

    .mbook-form-intro > span {
        display: block;
        margin-bottom: 10px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mbook-form-intro h2 {
        margin: 0 0 18px;
        color: #102746;
        font-size: 38px;
        line-height: 1.2;
    }

    .mbook-form-intro > p {
        margin: 0 0 30px;
        color: #667085;
        font-size: 16px;
        line-height: 1.8;
    }

.mbook-form-note {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

    .mbook-form-note > i {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #102746;
        border-radius: 50%;
        color: #fff;
        font-size: 15px;
    }

    .mbook-form-note strong {
        display: block;
        margin-bottom: 4px;
        color: #102746;
        font-size: 15px;
    }

    .mbook-form-note p {
        margin: 0;
        color: #667085;
        font-size: 13px;
        line-height: 1.6;
    }

.mbook-form-box {
    padding: 40px;
    background: #fff;
    border: 1px solid #e1e7ef;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(16, 39, 70, 0.07);
}

.mbook-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

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

    .mbook-form-group label {
        display: block;
        margin-bottom: 8px;
        color: #102746;
        font-size: 14px;
        font-weight: 600;
    }

    .mbook-form-group input,
    .mbook-form-group select,
    .mbook-form-group textarea {
        width: 100%;
        padding: 13px 15px;
        border: 1px solid #dce3ec;
        border-radius: 6px;
        outline: none;
        background: #fff;
        color: #344054;
        font-size: 14px;
        font-family: inherit;
        transition: all 0.25s ease;
    }

    .mbook-form-group input,
    .mbook-form-group select {
        height: 48px;
    }

    .mbook-form-group textarea {
        min-height: 70px;
        resize: vertical;
    }

        .mbook-form-group input::placeholder,
        .mbook-form-group textarea::placeholder {
            color: #98a2b3;
        }

        .mbook-form-group input:focus,
        .mbook-form-group select:focus,
        .mbook-form-group textarea:focus {
            border-color: #B88720;
            box-shadow: 0 0 0 3px rgba(184, 135, 32, 0.08);
        }

.mbook-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 13px 25px;
    border: 0;
    border-radius: 6px;
    background: #102746;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .mbook-submit i {
        color: #B88720;
        transition: transform 0.3s ease;
    }

    .mbook-submit:hover {
        background: #B88720;
    }

        .mbook-submit:hover i {
            color: #fff;
            transform: translateX(4px);
        }


/* =========================================
   CTA
========================================= */

.mbook-cta {
    position: relative;
    padding: 85px 0;
    background-image: url("../../assets/img/breadcrumb-bg.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mbook-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 22, 45, 0.92);
}

.mbook-cta .container {
    position: relative;
    z-index: 2;
}

.mbook-cta-content {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

    .mbook-cta-content > span {
        display: block;
        margin-bottom: 12px;
        color: #B88720;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .mbook-cta-content h2 {
        margin: 0 0 15px;
        color: #fff;
        font-size: 40px;
    }

    .mbook-cta-content p {
        margin: 0 auto 30px;
        max-width: 650px;
        color: rgba(255,255,255,0.78);
        font-size: 16px;
        line-height: 1.8;
    }

.mbook-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: 6px;
    background: #B88720;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .mbook-btn:hover {
        background: #fff;
        color: #102746;
    }


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

@media (max-width: 1199px) {

    .mbook-session-grid,
    .mbook-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mbook-session-card p {
        min-height: auto;
    }

    .mbook-form-wrapper {
        gap: 40px;
    }
}


@media (max-width: 991px) {

    .mbook-hero {
        padding: 70px 0;
    }

    .mbook-sessions,
    .mbook-process,
    .mbook-form-section {
        padding: 70px 0;
    }

    .mbook-form-wrapper {
        grid-template-columns: 1fr;
    }

    .mbook-form-intro {
        padding-right: 0;
    }

    .mbook-form-box {
        padding: 35px;
    }
}


@media (max-width: 767px) {

    .mbook-hero {
        padding: 60px 0;
    }

    .mbook-hero-content h1 {
        font-size: 38px;
    }

    .mbook-hero-content p {
        font-size: 15px;
    }

    .mbook-section-title h2,
    .mbook-form-intro h2 {
        font-size: 30px;
    }

    .mbook-section-title {
        margin-bottom: 35px;
    }

    .mbook-session-grid,
    .mbook-process-grid {
        grid-template-columns: 1fr;
    }

    .mbook-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mbook-form-box {
        padding: 25px 20px;
    }

    .mbook-cta {
        padding: 65px 0;
    }

    .mbook-cta-content h2 {
        font-size: 31px;
    }
}


@media (max-width: 480px) {

    .mbook-hero-content h1 {
        font-size: 32px;
    }

    .mbook-session-card {
        padding: 30px 22px;
    }

    .mbook-form-box {
        padding: 22px 16px;
    }
}
/* Large Desktop */
@media (max-width: 1399px) {
}

/* Desktop */
@media (max-width: 1199px) {
}

/* Laptop */
@media (max-width: 991px) {
}

/* Tablet */
@media (max-width: 767px) {
}

/* Large Mobile */
@media (max-width: 575px) {
    .ul-2-header-bottom-right {
        display: block;
    }
}

/* Mobile */
@media (max-width: 479px) {

}

/* Small Mobile */
@media (max-width: 375px) {
}

/* Extra Small Mobile */
@media (max-width: 320px) {
}