:root {

    --primary: #155EEF;
    --primary-dark: #0B3EA8;

    --secondary: #0F172A;

    --text: #475569;

    --light: #F8FAFC;

    --white: #ffffff;

    --border: #E2E8F0;

}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {

    font-family: 'Poppins', 'Hind Siliguri', sans-serif;

    color: var(--text);

    line-height: 1.7;

}


a {
    text-decoration: none;
}


/* TOP BAR */

.top-bar {

    background: var(--secondary);

    color: #fff;

    font-size: 13px;

    padding: 8px 0;

}


/* NAVBAR */

.navbar {

    padding: 14px 0;

}


.brand-logo {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: var(--primary);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    font-weight: 800;

    margin-right: 10px;

}


.brand-text {

    display: flex;

    flex-direction: column;

}


.brand-text strong {

    color: var(--secondary);

    font-size: 17px;

    line-height: 1.2;

}


.brand-text small {

    font-size: 9px;

    color: var(--primary);

}


.nav-link {

    color: #334155 !important;

    font-weight: 500;

    margin: 0 6px;

}


.nav-link:hover,
.nav-link.active {

    color: var(--primary) !important;

}


.admission-btn {

    padding: 10px 18px;

    border-radius: 8px;

}


/* HERO */

.hero-section {

    background:
        linear-gradient(
            110deg,
            #F8FAFF 0%,
            #EEF4FF 100%
        );

    padding: 90px 0;

    overflow: hidden;

}


.hero-badge {

    display: inline-block;

    background: #E0EAFF;

    color: var(--primary);

    padding: 7px 14px;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 20px;

}


.hero-section h1 {

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.1;

    color: var(--secondary);

    font-weight: 800;

    margin-bottom: 22px;

}


.hero-section h1 span {

    color: var(--primary);

}


.hero-text {

    max-width: 600px;

    font-size: 17px;

    color: #64748B;

    margin-bottom: 30px;

}


.hero-buttons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}


.hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 30px;

    font-size: 13px;

}


.hero-features i {

    color: #16A34A;

    margin-right: 5px;

}


.hero-image {

    position: relative;

}


.hero-image img {

    width: 100%;

    min-height: 420px;

    object-fit: cover;

    border-radius: 25px;

}


.hero-floating-card {

    position: absolute;

    left: -25px;

    bottom: 30px;

    background: #fff;

    padding: 16px 20px;

    border-radius: 15px;

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

    display: flex;

    align-items: center;

    gap: 12px;

}


.hero-floating-card i {

    width: 45px;

    height: 45px;

    background: #E0EAFF;

    color: var(--primary);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.hero-floating-card strong {

    display: block;

    font-size: 20px;

    color: var(--secondary);

}


.hero-floating-card small {

    color: #64748B;

}


/* STATS */

.stats-section {

    margin-top: -40px;

    position: relative;

    z-index: 5;

}


.stat-card {

    background: #fff;

    padding: 25px 15px;

    border-radius: 15px;

    text-align: center;

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

}


.stat-card i {

    font-size: 28px;

    color: var(--primary);

}


.stat-card h3 {

    color: var(--secondary);

    font-weight: 800;

    margin: 5px 0;

}


.stat-card p {

    margin: 0;

    color: #64748B;

}


/* SECTION */

.section-padding {

    padding: 90px 0;

}


.section-label {

    color: var(--primary);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.section-title {

    color: var(--secondary);

    font-size: 38px;

    font-weight: 800;

    line-height: 1.2;

    margin: 10px 0 18px;

}


.section-title span {

    color: var(--primary);

}


.section-heading {

    max-width: 700px;

    margin: auto;

}


/* ABOUT */

.about-image {

    position: relative;

}


.about-image img {

    border-radius: 20px;

}


.experience-card {

    position: absolute;

    bottom: 25px;

    right: -20px;

    background: var(--primary);

    color: #fff;

    padding: 20px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 10px;

}


.experience-card strong {

    font-size: 35px;

}


.experience-card span {

    font-size: 12px;

}


/* COURSE */

.course-card {

    background: #fff;

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

    padding: 30px;

    border-radius: 18px;

    height: 100%;

    transition: .3s;

}


.course-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 15px 35px rgba(0,0,0,.08);

    border-color: transparent;

}


.course-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #EAF0FF;

    color: var(--primary);

    border-radius: 14px;

    font-size: 25px;

    margin-bottom: 20px;

}


.course-card h4 {

    color: var(--secondary);

    font-weight: 700;

}


.course-card a {

    color: var(--primary);

    font-weight: 600;

}


/* FEATURE */

.feature-card {

    text-align: center;

    padding: 30px 20px;

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

    border-radius: 15px;

    height: 100%;

}


.feature-card > i {

    font-size: 35px;

    color: var(--primary);

}


.feature-card h5 {

    margin-top: 15px;

    color: var(--secondary);

}


/* CTA */

.cta-section {

    background: var(--primary);

    color: #fff;

    padding: 65px 0;

}


.cta-section h2 {

    font-size: 38px;

    font-weight: 800;

}


.cta-section p {

    opacity: .9;

}


/* FOOTER */

.footer {

    background: #0B1220;

    color: #94A3B8;

    padding: 70px 0 25px;

}


.footer-brand {

    color: #fff;

    font-size: 22px;

    font-weight: 800;

}


.footer h5 {

    color: #fff;

    margin-bottom: 20px;

}


.footer-links {

    list-style: none;

    padding: 0;

}


.footer-links li {

    margin-bottom: 8px;

}


.footer-links a {

    color: #94A3B8;

}


.footer-links a:hover {

    color: #fff;

}


.footer-contact p {

    display: flex;

    gap: 10px;

}


.footer-contact i {

    color: var(--primary);

}


.social-links {

    display: flex;

    gap: 10px;

}


.social-links a {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: #172033;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

}


.social-links a:hover {

    background: var(--primary);

}


.footer hr {

    border-color: #263044;

    margin: 40px 0 20px;

}


.copyright {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    font-size: 13px;

}


/* RESPONSIVE */

@media (max-width: 991px) {

    .hero-section {

        padding: 60px 0;

    }

    .hero-image {

        margin-top: 50px;

    }

    .stats-section {

        margin-top: 30px;

    }

}


@media (max-width: 767px) {

    .section-padding {

        padding: 60px 0;

    }

    .section-title {

        font-size: 30px;

    }

    .hero-section h1 {

        font-size: 42px;

    }

    .hero-floating-card {

        left: 15px;

    }

    .experience-card {

        right: 15px;

    }

    .copyright {

        flex-direction: column;

    }

}

/*about section css*/
/* =========================================
   ABOUT PAGE
========================================= */

.page-header {
    background:
        linear-gradient(
            110deg,
            #F8FAFF 0%,
            #EEF4FF 100%
        );

    padding: 75px 0;
}

.page-header h1 {
    color: var(--secondary);
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.15;
    margin: 12px 0 15px;
}

.page-header h1 span {
    color: var(--primary);
}

.page-header p {
    max-width: 650px;
    margin: auto;
    color: #64748B;
}

.breadcrumb-area {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
}

.breadcrumb-area a {
    color: var(--primary);
    font-weight: 600;
}

.breadcrumb-area span {
    color: #64748B;
}


/* ABOUT IMAGE */

.about-main-image {
    position: relative;
}

.about-main-image img {
    width: 100%;
    min-height: 480px;
    object-fit: cover;
    border-radius: 24px;
}

.about-experience-card {
    position: absolute;
    right: -20px;
    bottom: 25px;

    background: #fff;

    padding: 18px 22px;

    border-radius: 15px;

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

    display: flex;
    align-items: center;
    gap: 12px;
}

.experience-number {
    font-size: 38px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.about-experience-card strong,
.about-experience-card span {
    display: block;
}

.about-experience-card strong {
    color: var(--secondary);
}

.about-experience-card span {
    font-size: 12px;
    color: #64748B;
}


/* CHECK LIST */

.about-check-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 22px;
}

.about-check-list div {
    font-size: 14px;
    font-weight: 500;
    color: #334155;
}

.about-check-list i {
    color: #16A34A;
    margin-right: 6px;
}


/* MISSION */

.mission-card {
    background: #fff;
    padding: 35px;

    border-radius: 20px;

    height: 100%;

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

    display: flex;

    gap: 22px;

    transition: .3s;
}

.mission-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

.mission-icon {
    flex-shrink: 0;

    width: 60px;
    height: 60px;

    border-radius: 15px;

    background: #EAF0FF;

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;
}

.mission-card h3 {
    color: var(--secondary);

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 12px;
}


/* LEARNING PROCESS */

.learning-process {
    position: relative;

    padding-left: 25px;
}

.learning-process::before {
    content: "";

    position: absolute;

    left: 28px;

    top: 25px;

    bottom: 25px;

    width: 2px;

    background: #DCE5F7;
}

.learning-step {
    position: relative;

    display: flex;

    gap: 20px;

    margin-bottom: 25px;

    background: #fff;

    padding: 22px;

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

    border-radius: 15px;
}

.step-number {
    flex-shrink: 0;

    position: relative;

    z-index: 2;

    width: 55px;
    height: 55px;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;
}

.learning-step h5 {
    color: var(--secondary);

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 5px;
}

.learning-step p {
    margin: 0;

    font-size: 14px;
}


/* ABOUT FEATURES */

.about-feature-card {
    background: #fff;

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

    padding: 30px;

    border-radius: 18px;

    height: 100%;

    transition: .3s;
}

.about-feature-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 15px 35px rgba(0,0,0,.08);

    border-color: transparent;
}

.about-feature-icon {
    width: 58px;
    height: 58px;

    border-radius: 14px;

    background: #EAF0FF;

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

    margin-bottom: 20px;
}

.about-feature-card h4 {
    color: var(--secondary);

    font-size: 19px;

    font-weight: 700;
}


/* ENVIRONMENT */

.environment-list {
    margin-top: 25px;
}

.environment-list div {
    margin-bottom: 13px;

    font-weight: 500;

    color: #334155;
}

.environment-list i {
    color: var(--primary);

    margin-right: 8px;

    font-size: 18px;
}

.environment-box {
    min-height: 420px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #155EEF,
            #0B3EA8
        );

    padding: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;
}

.environment-box::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

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

    top: -80px;
    right: -70px;
}

.environment-box::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

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

    bottom: -60px;
    left: -50px;
}

.environment-inner {
    position: relative;

    z-index: 2;

    text-align: center;

    color: #fff;

    max-width: 450px;
}

.environment-inner i {
    width: 80px;
    height: 80px;

    border-radius: 50%;

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

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 25px;

    font-size: 38px;
}

.environment-inner h3 {
    font-size: 32px;

    font-weight: 800;

    margin-bottom: 8px;
}

.environment-inner p {
    font-size: 18px;

    opacity: .9;
}

.environment-inner strong {
    display: block;

    margin-top: 25px;

    font-size: 18px;
}


/* ABOUT STATS */

.about-stats-section {
    background: var(--secondary);

    padding: 60px 0;
}

.about-stat {
    color: #fff;
}

.about-stat i {
    font-size: 30px;

    color: #8FB3FF;
}

.about-stat h3 {
    font-size: 35px;

    font-weight: 800;

    margin: 5px 0 0;
}

.about-stat p {
    color: #94A3B8;

    margin: 0;
}


/* CTA */

.cta-small-title {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    opacity: .8;
}

.cta-section h2 {
    margin-top: 8px;
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .about-main-image {
        margin-bottom: 25px;
    }

    .about-experience-card {
        right: 15px;
    }

}


@media (max-width: 767px) {

    .about-check-list {
        grid-template-columns: 1fr;
    }

    .mission-card {
        padding: 25px;

        flex-direction: column;
    }

    .learning-process {
        padding-left: 0;
    }

    .learning-process::before {
        display: none;
    }

    .about-main-image img {
        min-height: 350px;
    }

    .environment-box {
        min-height: 350px;
    }

    .environment-inner h3 {
        font-size: 26px;
    }

}

/* =========================================
   COURSES PAGE
========================================= */

.course-benefits {
    margin-top: 25px;
}

.course-benefits div {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
}

.course-benefits i {
    color: #16A34A;
    margin-right: 8px;
}


/* COURSE INTRO */

.course-intro-box {
    background: #F1F5FF;
    border: 1px solid #DCE6FF;
    padding: 45px;
    border-radius: 25px;
    text-align: center;
}

.course-intro-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 20px;

    border-radius: 20px;

    background: var(--primary);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 32px;
}

.course-intro-box h3 {
    color: var(--secondary);
    font-weight: 800;
    margin-bottom: 12px;
}


/* CATEGORY */

.course-category-section {
    background: #F8FAFC;
    padding: 90px 0;
}

.course-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.course-filter-btn {
    border: 1px solid var(--border);
    background: #fff;

    color: #475569;

    padding: 9px 18px;

    border-radius: 50px;

    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition: .3s;
}

.course-filter-btn:hover,
.course-filter-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}


/* COURSE CARD */

.course-page-card {
    background: #fff;

    border-radius: 18px;

    overflow: hidden;

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

    height: 100%;

    transition: .3s;
}

.course-page-card:hover {
    transform: translateY(-7px);

    box-shadow: 0 18px 40px rgba(0,0,0,.09);

    border-color: transparent;
}


.course-image {
    height: 210px;

    position: relative;

    overflow: hidden;

    background: #EAF0FF;
}

.course-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .4s;
}

.course-page-card:hover .course-image img {
    transform: scale(1.05);
}

.course-tag {
    position: absolute;

    top: 15px;
    left: 15px;

    background: var(--primary);

    color: #fff;

    padding: 5px 12px;

    border-radius: 50px;

    font-size: 11px;

    font-weight: 600;
}

.course-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--primary);

    font-size: 55px;
}

.course-content {
    padding: 25px;
}

.course-card-icon {
    width: 45px;
    height: 45px;

    border-radius: 10px;

    background: #EAF0FF;

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    margin-bottom: 15px;
}

.course-content h3 {
    color: var(--secondary);

    font-size: 21px;

    font-weight: 700;

    margin-bottom: 10px;
}

.course-content p {
    font-size: 14px;

    color: #64748B;

    min-height: 70px;
}

.course-info {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    padding: 14px 0;

    margin-top: 10px;

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

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

    font-size: 12px;

    color: #64748B;
}

.course-info i {
    color: var(--primary);

    margin-right: 4px;
}

.course-details-btn {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 17px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 700;
}

.course-details-btn:hover {
    color: var(--primary-dark);
}


/* LEARNING OUTCOMES */

.course-learning-box {
    min-height: 430px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #EEF4FF,
            #DCE8FF
        );

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;
}

.learning-circle {
    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 70px;

    box-shadow:
        0 0 0 25px rgba(21,94,239,.08),
        0 0 0 50px rgba(21,94,239,.04);
}

.learning-decoration {
    position: absolute;

    border-radius: 50%;

    border: 2px solid rgba(21,94,239,.12);
}

.learning-decoration.one {
    width: 300px;
    height: 300px;
}

.learning-decoration.two {
    width: 420px;
    height: 420px;
}


/* OUTCOME LIST */

.learning-outcome-list {
    margin-top: 25px;
}

.learning-outcome {
    display: flex;

    gap: 15px;

    margin-bottom: 20px;
}

.learning-outcome > span {
    flex-shrink: 0;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background: #E8F8EE;

    color: #16A34A;

    display: flex;

    align-items: center;

    justify-content: center;
}

.learning-outcome h5 {
    color: var(--secondary);

    font-size: 16px;

    font-weight: 700;

    margin-bottom: 3px;
}

.learning-outcome p {
    margin: 0;

    font-size: 13px;
}


/* JOURNEY */

.journey-card {
    background: #fff;

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

    border-radius: 18px;

    padding: 30px;

    height: 100%;

    position: relative;

    transition: .3s;
}

.journey-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

.journey-number {
    position: absolute;

    top: 18px;
    right: 18px;

    color: #CBD5E1;

    font-size: 28px;

    font-weight: 800;
}

.journey-card > i {
    display: block;

    color: var(--primary);

    font-size: 32px;

    margin-bottom: 18px;
}

.journey-card h4 {
    color: var(--secondary);

    font-weight: 700;
}

.journey-card p {
    font-size: 14px;

    margin: 0;
}


/* MOBILE */

@media (max-width: 767px) {

    .course-intro-box {
        padding: 30px 20px;
    }

    .course-category-section {
        padding: 60px 0;
    }

    .course-image {
        height: 190px;
    }

    .course-info {
        flex-direction: column;
    }

    .course-learning-box {
        min-height: 330px;
    }

    .learning-circle {
        width: 130px;
        height: 130px;

        font-size: 50px;
    }

}


/* =========================================
   TEACHERS PAGE
========================================= */

.teacher-intro-points {
    margin-top: 25px;
}

.teacher-intro-points div {
    margin-bottom: 12px;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
}

.teacher-intro-points i {
    color: #16A34A;
    margin-right: 8px;
}


/* INTRO CARD */

.teacher-intro-card {
    background: linear-gradient(
        135deg,
        #EEF4FF,
        #F8FAFC
    );

    border: 1px solid #DCE6FF;

    border-radius: 25px;

    padding: 45px;

    text-align: center;
}

.teacher-intro-icon {
    width: 80px;
    height: 80px;

    margin: 0 auto 20px;

    background: var(--primary);

    color: #fff;

    border-radius: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 35px;
}

.teacher-intro-card h3 {
    color: var(--secondary);

    font-weight: 800;

    margin-bottom: 12px;
}

.teacher-mini-stats {
    display: flex;

    justify-content: center;

    gap: 40px;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #DCE6FF;
}

.teacher-mini-stats strong,
.teacher-mini-stats span {
    display: block;
}

.teacher-mini-stats strong {
    color: var(--primary);

    font-size: 18px;
}

.teacher-mini-stats span {
    font-size: 12px;

    color: #64748B;
}


/* TEACHER SECTION */

.teacher-section {
    padding: 90px 0;
}

.teacher-filter {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;
}

.teacher-filter-btn {
    border: 1px solid var(--border);

    background: #fff;

    color: #475569;

    padding: 9px 18px;

    border-radius: 50px;

    font-size: 14px;

    cursor: pointer;

    transition: .3s;
}

.teacher-filter-btn:hover,
.teacher-filter-btn.active {
    background: var(--primary);

    color: #fff;

    border-color: var(--primary);
}


/* TEACHER CARD */

.teacher-card {
    background: #fff;

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

    border-radius: 20px;

    overflow: hidden;

    height: 100%;

    transition: .3s;
}

.teacher-card:hover {
    transform: translateY(-7px);

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

    border-color: transparent;
}

.teacher-image {
    height: 330px;

    position: relative;

    overflow: hidden;

    background: #EAF0FF;
}

.teacher-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .4s;
}

.teacher-card:hover .teacher-image img {
    transform: scale(1.04);
}

.teacher-social {
    position: absolute;

    right: 15px;

    bottom: 15px;

    display: flex;

    gap: 8px;
}

.teacher-social a {
    width: 38px;
    height: 38px;

    border-radius: 50%;

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

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .3s;
}

.teacher-social a:hover {
    background: var(--primary);

    color: #fff;
}

.teacher-content {
    padding: 25px;
}

.teacher-department {
    display: inline-block;

    background: #EAF0FF;

    color: var(--primary);

    padding: 5px 11px;

    border-radius: 50px;

    font-size: 11px;

    font-weight: 600;

    margin-bottom: 12px;
}

.teacher-content h3 {
    color: var(--secondary);

    font-size: 21px;

    font-weight: 800;

    margin-bottom: 5px;
}

.teacher-designation {
    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 5px;
}

.teacher-qualification {
    color: #64748B;

    font-size: 13px;

    margin-bottom: 15px;
}

.teacher-meta {
    padding: 12px 0;

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

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

    font-size: 12px;

    color: #64748B;
}

.teacher-meta i {
    color: var(--primary);

    margin-right: 5px;
}

.teacher-profile-btn {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 15px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 700;
}


/* PHILOSOPHY */

.teacher-philosophy-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.philosophy-item {
    background: #F8FAFC;

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

    border-radius: 18px;

    padding: 25px;

    transition: .3s;
}

.philosophy-item:hover {
    transform: translateY(-4px);

    background: #fff;

    box-shadow: 0 12px 30px rgba(0,0,0,.07);
}

.philosophy-icon {
    width: 50px;
    height: 50px;

    border-radius: 13px;

    background: #EAF0FF;

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;

    margin-bottom: 15px;
}

.philosophy-item h4 {
    color: var(--secondary);

    font-size: 17px;

    font-weight: 700;
}

.philosophy-item p {
    font-size: 13px;

    margin: 0;
}


/* JOIN CTA */

.teacher-join-section {
    background:
        linear-gradient(
            110deg,
            #155EEF,
            #0B3EA8
        );

    padding: 70px 0;

    color: #fff;
}

.teacher-join-section span {
    font-size: 12px;

    letter-spacing: 1.5px;

    font-weight: 700;

    opacity: .85;
}

.teacher-join-section h2 {
    font-size: 38px;

    font-weight: 800;

    margin: 8px 0;
}

.teacher-join-section p {
    color: rgba(255,255,255,.8);

    margin: 0;
}


/* RESPONSIVE */

@media (max-width: 767px) {

    .teacher-section {
        padding: 60px 0;
    }

    .teacher-intro-card {
        padding: 30px 20px;
    }

    .teacher-mini-stats {
        gap: 20px;
    }

    .teacher-image {
        height: 300px;
    }

    .teacher-philosophy-grid {
        grid-template-columns: 1fr;
    }

    .teacher-join-section h2 {
        font-size: 28px;
    }

}

/* =========================================
   ADMISSION PAGE
========================================= */

.admission-process-section {
    padding: 60px 0;
    background: #fff;
}

.admission-step {
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px;
    height: 100%;
    position: relative;
    transition: .3s;
}

.admission-step:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,.07);
}

.admission-step-number {
    position: absolute;
    top: 15px;
    right: 18px;
    color: #CBD5E1;
    font-size: 28px;
    font-weight: 800;
}

.admission-step-icon {
    width: 55px;
    height: 55px;
    border-radius: 15px;
    background: #EAF0FF;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
}

.admission-step h4 {
    color: var(--secondary);
    font-size: 18px;
    font-weight: 700;
}

.admission-step p {
    color: #64748B;
    font-size: 13px;
    margin: 0;
}


/* ADMISSION INFO */

.admission-info-card {
    position: sticky;
    top: 100px;
}

.admission-info-card h2 {
    color: var(--secondary);
    font-size: 36px;
    font-weight: 800;
    margin: 12px 0;
}

.admission-info-card h2 span {
    color: var(--primary);
}

.admission-info-card > p {
    color: #64748B;
}

.admission-info-list {
    margin-top: 30px;
}

.admission-info-item {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
}

.admission-info-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #EAF0FF;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.admission-info-item strong,
.admission-info-item span {
    display: block;
}

.admission-info-item strong {
    color: var(--secondary);
    font-size: 14px;
    margin-bottom: 3px;
}

.admission-info-item span {
    color: #64748B;
    font-size: 12px;
}


/* CONTACT BOX */

.admission-contact-box {
    margin-top: 30px;
    padding: 22px;
    border-radius: 17px;
    background: linear-gradient(
        135deg,
        #155EEF,
        #0B3EA8
    );
    color: #fff;
}

.admission-contact-box small,
.admission-contact-box strong,
.admission-contact-box a {
    display: block;
}

.admission-contact-box small {
    opacity: .75;
    margin-bottom: 5px;
}

.admission-contact-box strong {
    font-size: 17px;
    margin-bottom: 10px;
}

.admission-contact-box a {
    color: #fff;
    font-weight: 600;
}


/* FORM CARD */

.admission-form-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 35px;
    box-shadow: 0 10px 35px rgba(0,0,0,.04);
}

.form-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 25px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border);
}

.form-card-header > div:first-child span {
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.form-card-header h3 {
    color: var(--secondary);
    font-size: 25px;
    font-weight: 800;
    margin: 5px 0 0;
}

.required-note {
    color: #94A3B8;
    font-size: 12px;
}


/* FORM SECTION TITLE */

.form-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.form-section-title > span {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #EAF0FF;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
}

.form-section-title h4 {
    color: var(--secondary);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 2px;
}

.form-section-title p {
    color: #94A3B8;
    font-size: 12px;
    margin: 0;
}


/* FORM */

.form-label {
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
}

.form-label span {
    color: #DC2626;
}

.form-control,
.form-select {
    border: 1px solid #D8DEE8;
    min-height: 46px;
    border-radius: 10px;
    font-size: 13px;
    padding: 10px 13px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(21,94,239,.10);
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}


/* PHOTO */

.photo-upload-box {
    border: 2px dashed #CBD5E1;
    border-radius: 15px;
    padding: 28px;
    text-align: center;
    background: #F8FAFC;
}

.photo-upload-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 10px;
    border-radius: 15px;
    background: #EAF0FF;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.photo-upload-box h5 {
    color: var(--secondary);
    font-weight: 700;
    margin-bottom: 5px;
}

.photo-upload-box p {
    color: #94A3B8;
    font-size: 12px;
}

.photo-upload-box input {
    max-width: 400px;
    margin: 15px auto 0;
}


/* DECLARATION */

.admission-declaration {
    margin-top: 30px;
    padding: 18px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid var(--border);
}

.admission-declaration label {
    color: #475569;
    font-size: 13px;
    line-height: 1.7;
}


/* SUBMIT */

.form-submit-area {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--border);
}

.form-submit-area .btn {
    padding: 11px 20px;
    border-radius: 9px;
    font-size: 13px;
}


/* FAQ */

#admissionFAQ .accordion-item {
    border: 1px solid var(--border);
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
}

#admissionFAQ .accordion-button {
    color: var(--secondary);
    font-weight: 600;
    font-size: 14px;
    box-shadow: none;
}

#admissionFAQ .accordion-button:not(.collapsed) {
    color: var(--primary);
    background: #F5F8FF;
}

#admissionFAQ .accordion-body {
    color: #64748B;
    font-size: 13px;
    line-height: 1.8;
}


/* MOBILE */

@media (max-width: 991px) {

    .admission-info-card {
        position: static;
    }

}

@media (max-width: 767px) {

    .admission-form-card {
        padding: 22px 18px;
    }

    .form-card-header {
        align-items: flex-start;
        gap: 15px;
    }

    .form-card-header h3 {
        font-size: 20px;
    }

    .admission-info-card h2 {
        font-size: 29px;
    }

    .form-submit-area {
        flex-direction: column;
    }

    .form-submit-area .btn {
        width: 100%;
    }

}

/* =========================================
   NOTICE PAGE
========================================= */

.notice-section {
    background: #fff;
}


/* HEADER */

.notice-list-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
}

.notice-count {
    background: #F1F5F9;
    color: #64748B;
    border-radius: 50px;
    padding: 8px 14px;
    font-size: 12px;
    white-space: nowrap;
}

.notice-count i {
    color: var(--primary);
    margin-right: 5px;
}


/* SEARCH */

.notice-search-box {
    margin-bottom: 15px;
}

.notice-search-box .input-group-text {
    background: #fff;
    border-right: 0;
    color: #94A3B8;
}

.notice-search-box .form-control {
    border-left: 0;
}

.notice-search-box .form-control:focus {
    box-shadow: none;
}


/* FILTER */

.notice-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.notice-filter {
    border: 1px solid var(--border);
    background: #fff;
    color: #64748B;
    border-radius: 50px;
    padding: 7px 15px;
    font-size: 12px;
    cursor: pointer;
    transition: .3s;
}

.notice-filter:hover,
.notice-filter.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}


/* NOTICE CARD */

.notice-card {
    display: flex;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 17px;
    padding: 20px;
    margin-bottom: 15px;
    transition: .3s;
}

.notice-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.07);
    border-color: transparent;
}


/* DATE */

.notice-date-box {
    width: 72px;
    min-width: 72px;
    height: 82px;
    border-radius: 14px;
    background: #EEF4FF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.notice-date-box strong {
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
}

.notice-date-box span {
    font-size: 11px;
    font-weight: 800;
    margin-top: 3px;
}

.notice-date-box small {
    color: #94A3B8;
    font-size: 9px;
}


/* CONTENT */

.notice-content {
    flex: 1;
    min-width: 0;
}

.notice-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}

.notice-category {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
}

.notice-category.admission {
    background: #DCFCE7;
    color: #15803D;
}

.notice-category.class {
    background: #DBEAFE;
    color: #1D4ED8;
}

.notice-category.exam {
    background: #FEF3C7;
    color: #B45309;
}

.notice-category.event {
    background: #F3E8FF;
    color: #7E22CE;
}

.notice-new {
    background: #EF4444;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    padding: 4px 7px;
    border-radius: 4px;
}

.notice-content h3 {
    color: var(--secondary);
    font-size: 18px;
    font-weight: 750;
    margin-bottom: 7px;
}

.notice-content p {
    color: #64748B;
    font-size: 12px;
    line-height: 1.7;
    margin-bottom: 12px;
}

.notice-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    color: #94A3B8;
    font-size: 10px;
}

.notice-meta i {
    color: var(--primary);
    margin-right: 4px;
}


/* ACTION */

.notice-action {
    display: flex;
    align-items: center;
}

.notice-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.notice-view-btn:hover {
    color: var(--secondary);
}


/* NO RESULT */

.notice-no-result {
    display: none;
    padding: 60px 20px;
    text-align: center;
    border: 1px dashed #CBD5E1;
    border-radius: 15px;
    background: #F8FAFC;
}

.notice-no-result i {
    font-size: 45px;
    color: #CBD5E1;
}

.notice-no-result h4 {
    color: var(--secondary);
    margin-top: 15px;
}

.notice-no-result p {
    color: #94A3B8;
    font-size: 13px;
}


/* SIDEBAR */

.notice-sidebar-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 20px;
}

.sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.sidebar-icon {
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: #EEF4FF;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-card-header span {
    display: block;
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.sidebar-card-header h4 {
    color: var(--secondary);
    font-size: 17px;
    font-weight: 750;
    margin: 2px 0 0;
}


/* PINNED */

.pinned-card {
    background: linear-gradient(
        145deg,
        #F5F8FF,
        #FFFFFF
    );
}

.pinned-notice {
    border-left: 3px solid var(--primary);
    padding-left: 15px;
}

.pinned-notice h3 {
    color: var(--secondary);
    font-size: 18px;
    font-weight: 750;
    margin: 12px 0 7px;
}

.pinned-notice p {
    color: #64748B;
    font-size: 12px;
    line-height: 1.7;
}

.pinned-notice a {
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}


/* QUICK LINKS */

.notice-quick-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #EEF2F7;
    color: #475569;
    font-size: 13px;
}

.notice-quick-links a:last-child {
    border-bottom: 0;
}

.notice-quick-links a:hover {
    color: var(--primary);
}

.notice-quick-links a span {
    display: flex;
    align-items: center;
    gap: 9px;
}

.notice-quick-links a span i {
    color: var(--primary);
}


/* DOWNLOAD */

.download-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #EEF2F7;
}

.download-item:last-child {
    border-bottom: 0;
}

.download-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #FEF2F2;
    color: #DC2626;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-item > div:nth-child(2) {
    flex: 1;
}

.download-item strong,
.download-item small {
    display: block;
}

.download-item strong {
    color: #334155;
    font-size: 12px;
}

.download-item small {
    color: #94A3B8;
    font-size: 10px;
}

.download-item > a {
    color: var(--primary);
}


/* CONTACT CARD */

.notice-contact-card {
    padding: 30px 25px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        #155EEF,
        #0B3EA8
    );
    color: #fff;
    text-align: center;
}

.notice-contact-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 15px;
    border-radius: 15px;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.notice-contact-card h4 {
    font-size: 19px;
    font-weight: 750;
}

.notice-contact-card p {
    color: rgba(255,255,255,.75);
    font-size: 12px;
    line-height: 1.7;
}

.notice-contact-card .btn {
    font-size: 12px;
    padding: 9px 16px;
}


/* PAGINATION */

.notice-pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 30px;
}

.notice-pagination a {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    font-size: 12px;
}

.notice-pagination a:hover,
.notice-pagination a.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}


/* UPDATE CTA */

.notice-update-section {
    padding: 65px 0;
    color: #fff;
    background: linear-gradient(
        110deg,
        #155EEF,
        #0B3EA8
    );
}

.notice-update-section span {
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 700;
    opacity: .8;
}

.notice-update-section h2 {
    font-size: 34px;
    font-weight: 800;
    margin: 8px 0;
}

.notice-update-section p {
    color: rgba(255,255,255,.75);
    margin: 0;
}

.notice-update-section .btn {
    font-size: 13px;
    padding: 11px 20px;
}


/* MOBILE */

@media (max-width: 767px) {

    .notice-list-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .notice-card {
        gap: 13px;
        padding: 15px;
    }

    .notice-date-box {
        width: 58px;
        min-width: 58px;
        height: 70px;
    }

    .notice-date-box strong {
        font-size: 21px;
    }

    .notice-content h3 {
        font-size: 15px;
    }

    .notice-action {
        display: none;
    }

    .notice-update-section h2 {
        font-size: 27px;
    }

}

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

.contact-section {
    background: #fff;
}


/* CONTACT INFO CARD */

.contact-info-card {
    height: 100%;
    padding: 25px 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 17px;
    text-align: center;
    transition: .3s;
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.07);
    border-color: transparent;
}

.contact-info-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 15px;
    border-radius: 14px;
    background: #EEF4FF;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.contact-info-card > span {
    display: block;
    color: var(--primary);
    font-size: 9px;
    letter-spacing: 1px;
    font-weight: 800;
}

.contact-info-card h4 {
    color: var(--secondary);
    font-size: 17px;
    margin: 5px 0;
    font-weight: 750;
}

.contact-info-card a,
.contact-info-card strong {
    display: block;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

.contact-info-card a:hover {
    color: var(--primary);
}

.contact-info-card small {
    display: block;
    color: #94A3B8;
    font-size: 10px;
    margin-top: 7px;
}


/* MAIN INFO */

.contact-main-info {
    padding-right: 25px;
}

.contact-main-info > p {
    color: #64748B;
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 30px;
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.contact-detail-icon {
    width: 43px;
    height: 43px;
    min-width: 43px;
    border-radius: 11px;
    background: #EEF4FF;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-detail-item span {
    display: block;
    color: #94A3B8;
    font-size: 10px;
    margin-bottom: 3px;
}

.contact-detail-item strong {
    display: block;
    color: var(--secondary);
    font-size: 13px;
}

.contact-detail-item strong a {
    color: inherit;
}

.contact-detail-item strong a:hover {
    color: var(--primary);
}

.contact-detail-item p {
    color: #64748B;
    font-size: 12px;
    line-height: 1.6;
    margin: 3px 0 0;
}


/* SOCIAL */

.contact-social-area {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid var(--border);
}

.contact-social-area > span {
    display: block;
    color: var(--secondary);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.contact-social-links {
    display: flex;
    gap: 8px;
}

.contact-social-links a {
    width: 37px;
    height: 37px;
    border-radius: 10px;
    background: #EEF4FF;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

.contact-social-links a:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}


/* CONTACT FORM */

.contact-form-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 35px rgba(0,0,0,.04);
}

.contact-form-header {
    margin-bottom: 25px;
}

.contact-form-header > span {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.contact-form-header h3 {
    color: var(--secondary);
    font-size: 25px;
    font-weight: 800;
    margin: 5px 0;
}

.contact-form-header p {
    color: #94A3B8;
    font-size: 12px;
    margin: 0;
}


/* WHATSAPP */

.contact-whatsapp-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px;
    background: #F0FDF4;
    border: 1px solid #DCFCE7;
    border-radius: 12px;
}

.contact-whatsapp-option strong,
.contact-whatsapp-option small {
    display: block;
}

.contact-whatsapp-option strong {
    color: #166534;
    font-size: 13px;
}

.contact-whatsapp-option strong i {
    margin-right: 5px;
}

.contact-whatsapp-option small {
    color: #65A30D;
    font-size: 10px;
    margin-top: 3px;
}

.contact-whatsapp-option .btn {
    font-size: 11px;
    padding: 8px 13px;
    white-space: nowrap;
}


/* SUBMIT */

.contact-submit-btn {
    width: 100%;
    padding: 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
}

.contact-submit-btn i {
    margin-left: 7px;
}


/* MAP */

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

.map-wrapper {
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

.map-wrapper iframe {
    display: block;
}

.map-location-card {
    position: absolute;
    left: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 300px;
    padding: 14px 16px;
    background: rgba(255,255,255,.96);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,.12);
}

.map-location-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: #EEF4FF;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-location-card strong,
.map-location-card span {
    display: block;
}

.map-location-card strong {
    color: var(--secondary);
    font-size: 13px;
}

.map-location-card span {
    color: #64748B;
    font-size: 10px;
    margin-top: 3px;
}


/* FAQ */

.contact-faq-section {
    background: #F8FAFC;
}

#contactFAQ .accordion-item {
    border: 1px solid var(--border);
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
}

#contactFAQ .accordion-button {
    color: var(--secondary);
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
}

#contactFAQ .accordion-button:not(.collapsed) {
    color: var(--primary);
    background: #F5F8FF;
}

#contactFAQ .accordion-body {
    color: #64748B;
    font-size: 13px;
    line-height: 1.8;
}


/* CTA */

.contact-cta-section {
    padding: 65px 0;
    color: #fff;
    background: linear-gradient(
        110deg,
        #155EEF,
        #0B3EA8
    );
}

.contact-cta-section > .container > .row {
    min-height: 130px;
}

.contact-cta-section > .container > .row > div:first-child > span {
    color: rgba(255,255,255,.75);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.contact-cta-section h2 {
    font-size: 32px;
    font-weight: 800;
    margin: 8px 0;
}

.contact-cta-section p {
    color: rgba(255,255,255,.75);
    margin: 0;
}

.contact-cta-section .btn {
    padding: 11px 20px;
    font-size: 12px;
}


/* MOBILE */

@media (max-width: 767px) {

    .contact-main-info {
        padding-right: 0;
    }

    .contact-form-card {
        padding: 22px 18px;
    }

    .contact-form-header h3 {
        font-size: 21px;
    }

    .contact-whatsapp-option {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-whatsapp-option .btn {
        width: 100%;
    }

    .map-wrapper iframe {
        height: 350px;
    }

    .map-location-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }

    .contact-cta-section {
        text-align: center;
    }

    .contact-cta-section h2 {
        font-size: 26px;
    }

    .contact-cta-section .btn {
        margin-top: 20px;
    }

}


.page-header {
    background: linear-gradient(
        110deg,
        #064E3B 0%,
        #073D30 100%
    );
}

.page-header h1 {
    color: #FFFFFF;
}

.page-header h1 span,
.page-header .section-label {
    color: #A7F3D0;
}

.page-header p,
.page-header .breadcrumb-area span,
.page-header .breadcrumb-area i {
    color: #D1FAE5;
}

.page-header .breadcrumb-area a {
    color: #FFFFFF;
}


/* Wahid's Spoken - Course Card Redesign */

.course-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 30px 25px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    transition: all 0.3s ease;
}

.course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Icon in center */
.course-card .course-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    border-radius: 20px;
    background: #eaf1ff;
    color: #1765e9;
    font-size: 34px;
}

.course-card .course-icon i {
    font-size: 34px;
}

/* Center title */
.course-card h3,
.course-card h4 {
    width: 100%;
    text-align: center;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 12px;
    color: #101828;
}

/* Center description */
.course-card p {
    text-align: center;
    font-size: 16px;
    line-height: 1.8;
    color: #667085;
    margin-bottom: 25px;
}

/* Full width button */
.course-card .course-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding: 14px 18px;
    border-radius: 10px;
    background: #08764d;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s ease;
}

.course-card .course-btn:hover {
    background: #ff6347;
    color: #ffffff;
}

.course-card .course-btn i {
    transition: transform 0.3s;
}

.course-card .course-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 767px) {
    .course-card {
        padding: 25px 20px;
    }

    .course-card h3,
    .course-card h4 {
        font-size: 21px;
    }
}


/* Feature Card */
.ws-feature-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 30px 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.ws-feature-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

/* 1. Bigger Centered Icon */
.ws-feature-icon {
    width: 90px;
    height: 90px;
    background: #eaf0ff;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 22px;
}

.ws-feature-icon i {
    font-size: 44px;
    color: #14532d;
    line-height: 1;
}

/* 2. Centered Heading */
.ws-feature-title {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 22px;
}

/* Heading Colors */
.ws-feature-title.bg-green {
    background-color: #064e3b;
}

.ws-feature-title.bg-tomato {
    background-color: #ff6347;
}

/* 3. Justified Description */
.ws-feature-description {
    width: 100%;
    text-align: justify;
    text-justify: inter-word;
    font-size: 16px;
    line-height: 1.9;
    color: #555555;
    margin: 0;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .ws-feature-card {
        padding: 25px 20px;
    }

    .ws-feature-icon {
        width: 80px;
        height: 80px;
    }

    .ws-feature-icon i {
        font-size: 38px;
    }

    .ws-feature-title {
        font-size: 19px;
    }

    .ws-feature-description {
        font-size: 15px;
        line-height: 1.8;
    }
}


/* Premium CTA Gradient Background */
.ws-cta-section {
    background: linear-gradient(
        120deg,
        #064e3b 0%,
        #0f766e 55%,
        #34a0a4 100%
    );

    padding: 75px 0;
    position: relative;
    overflow: hidden;
}

/* Subtle Shaded Light Effect */
.ws-cta-section::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -100px;
    top: -150px;
    border-radius: 50%;
    background: rgba(255,255,255,0.09);
    filter: blur(55px);
    pointer-events: none;
}

.ws-cta-section .container {
    position: relative;
    z-index: 1;
}

/* Text Color */
.ws-cta-section h2,
.ws-cta-section h3,
.ws-cta-section p {
    color: #ffffff;
}

/* CTA Button */
.ws-cta-section .btn {
    background: #ffffff;
    color: #064e3b;
    border: none;
    border-radius: 10px;
    padding: 14px 28px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.ws-cta-section .btn:hover {
    background: #ff6347;
    color: #ffffff;
    transform: translateY(-3px);
}


/* ===== Wahid's Spoken Course Cards ===== */

.ws-course-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.ws-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

/* 1. Course Icon Area */
.ws-course-visual {
    height: 190px;
    background: linear-gradient(
        135deg,
        #e8f5ee 0%,
        #d5eee1 100%
    );
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ws-course-main-icon {
    width: 105px;
    height: 105px;
    border-radius: 25px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.07);
}

.ws-course-main-icon i {
    font-size: 55px;
    color: #064e3b;
    line-height: 1;
}

/* Course Badge */
.ws-course-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #ff6347;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
}

/* Card Body */
.ws-course-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 2. Centered Course Title */
.ws-course-title {
    font-size: 21px;
    font-weight: 700;
    color: #064e3b;
    line-height: 1.5;
    text-align: center;
    min-height: 65px;
    margin-bottom: 15px;
}

/* Justified Description */
.ws-course-desc {
    font-size: 15px;
    line-height: 1.9;
    color: #555555;
    text-align: justify;
    margin-bottom: 22px;
}

/* Course Meta */
.ws-course-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #e5e7eb;
    padding: 15px 0;
    margin-top: auto;
    font-size: 13px;
    color: #666666;
}

.ws-course-meta i {
    color: #064e3b;
    margin-right: 5px;
}

/* 3. Full Width Admission Button */
.ws-course-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #064e3b;
    color: #ffffff;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ws-course-btn:hover {
    background: #ff6347;
    color: #ffffff;
}

.ws-course-btn i {
    transition: transform 0.3s ease;
}

.ws-course-btn:hover i {
    transform: translateX(5px);
}

/* Responsive */
@media (max-width: 767px) {
    .ws-course-visual {
        height: 160px;
    }

    .ws-course-main-icon {
        width: 85px;
        height: 85px;
    }

    .ws-course-main-icon i {
        font-size: 45px;
    }

    .ws-course-title {
        font-size: 19px;
        min-height: auto;
    }

    .ws-course-body {
        padding: 20px;
    }
}

<i class="bi bi-mic-fill"></i>