/* =========================================================
   SCHOOL "BACKPACK"
   MODERN 2026 DESIGN
========================================================= */

:root {

    --navy: #102a43;
    --navy-dark: #071b2d;

    --teal: #159a9c;
    --teal-dark: #087f81;
    --teal-light: #dff6f4;

    --blue: #2676d9;
    --green: #25a36f;
    --purple: #7957c7;
    --orange: #e88a35;

    --white: #ffffff;
    --gray-50: #f7fafc;
    --gray-100: #eef3f7;
    --gray-200: #dfe7ee;
    --gray-500: #6b7c8f;
    --gray-700: #334e68;

    --shadow-sm:
        0 4px 16px rgba(16, 42, 67, .07);

    --shadow-md:
        0 12px 35px rgba(16, 42, 67, .12);

    --shadow-lg:
        0 25px 70px rgba(16, 42, 67, .18);

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;

    --container: 1180px;

}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    font-family:
        "Noto Sans Georgian",
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--navy);

    background: var(--white);

    line-height: 1.6;

}

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

button {
    font-family: inherit;
}

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


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

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

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

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

    backdrop-filter:
        blur(14px);

}

.header-inner {
    width: min(
        var(--container),
        calc(100% - 40px)
    );

    min-height: 82px;
    margin: auto;

    display: flex;
    align-items: center;

    gap: 18px;
}

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

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}

.brand-logo img {

    width: 58px;
    height: 58px;

    object-fit: contain;

}

.brand-text {
    line-height: 1.15;
}

.brand-title {

    font-size: 12px;

    color: var(--gray-500);

    letter-spacing: .4px;

}

.brand-name {

    font-size: 21px;

    font-weight: 800;

    color: var(--navy);

}


/* =========================================================
   NAVIGATION
========================================================= */

.main-nav {

    display: flex;

    align-items: center;

    gap: 4px;

    margin-left: auto;

}

.main-nav > a,
.nav-dropdown > button {

    border: 0;

    background: transparent;

    padding: 10px 11px;

    border-radius: 8px;

    color: var(--gray-700);

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: .2s ease;

}

.main-nav > a:hover,
.nav-dropdown > button:hover,
.main-nav > a.active {

    background: var(--teal-light);

    color: var(--teal-dark);

}


.nav-dropdown {

    position: relative;

}

.nav-dropdown button {

    display: flex;

    align-items: center;

    gap: 7px;

}

.nav-dropdown button i {

    font-size: 9px;

}


.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu {

    position: absolute;

    top: calc(100% + 8px);

    left: 0;

    min-width: 210px;

    padding: 8px;

    background: white;

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

    border-radius: 12px;

    box-shadow: var(--shadow-md);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-8px);

    transition: .2s ease;

}

.nav-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}

.dropdown-menu a {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 12px;

    border-radius: 8px;

    color: var(--gray-700);

    font-size: 14px;

}

.dropdown-menu a:hover {

    background: var(--gray-100);

    color: var(--teal-dark);

}

.dropdown-menu i {

    width: 18px;

}


/* =========================================================
   ACCOUNT
========================================================= */

.header-account {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-left: 10px;

}

.login-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 38px;
    padding: 0 10px;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);

    white-space: nowrap;

    transition: .2s ease;
}

.login-link i {
    margin-right: 0;
}

.login-link:hover {
    background: var(--teal-light);
    color: var(--teal-dark);
}


.register-button {

    background: var(--teal);

    color: white;

    padding: 10px 17px;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 700;

    transition: .2s ease;

}

.register-button:hover {

    background: var(--teal-dark);

    transform:
        translateY(-1px);

}


.user-menu {

    display: flex;

    align-items: center;

    gap: 12px;

}

.user-email {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 13px;

    color: var(--gray-700);

}

.user-email i {

    color: var(--teal);

}

.logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 0 14px;

    border: 1px solid #e3b5b5;
    border-radius: 8px;

    background: #fff7f7;
    color: #a33;

    font-size: 13px;
    font-weight: 700;

    transition: all .2s ease;
}

.logout-button:hover {
    background: #a33;
    border-color: #a33;
    color: #fff;
}


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

.mobile-menu-button {

    display: none;

    border: 0;

    background: transparent;

    font-size: 23px;

    color: var(--navy);

}

.mobile-nav {

    display: none;

}


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

.hero {

    position: relative;

    overflow: hidden;

    min-height: 570px;

    background:
        linear-gradient(
            135deg,
            #f2fbfb 0%,
            #f7fbff 55%,
            #edf5ff 100%
        );

}

.hero::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        rgba(21,154,156,.08);

    top: -230px;
    right: -120px;

}

.hero::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        rgba(38,118,217,.06);

    bottom: -180px;
    left: -100px;

}

.hero-inner {

    width: min(
        var(--container),
        calc(100% - 40px)
    );

    min-height: 570px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1.05fr
        .95fr;

    align-items: center;

    gap: 60px;

    position: relative;

    z-index: 2;

}

.hero-content {

    padding: 70px 0;

}


.hero-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 13px;

    border-radius: 30px;

    background: white;

    color: var(--teal-dark);

    box-shadow: var(--shadow-sm);

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 20px;

}

.hero h1 {

    margin: 0;

    font-size: clamp(
        38px,
        5vw,
        50px
    );

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--orange);

}

.hero h1 span {

    display: block;

    color: var(--teal);

}

.hero-description {

    max-width: 620px;

    margin:
        24px 0 30px;

    color: var(--gray-500);

    font-size: 17px;

    line-height: 1.8;

}


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

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 50px;

    padding:
        0 22px;

    border-radius: 10px;

    font-weight: 700;

    font-size: 14px;

    transition: .25s ease;

}

.button-primary {

    background: var(--teal);

    color: white;

    box-shadow:
        0 8px 20px
        rgba(21,154,156,.25);

}

.button-primary:hover {

    background: var(--teal-dark);

    transform:
        translateY(-2px);

}

.button-secondary {

    background: white;

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

    color: var(--navy);

}

.button-secondary:hover {

    border-color: var(--teal);

    color: var(--teal-dark);

}


.button-light {

    background: white;

    color: var(--navy);

}


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

.hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 30px;

}

.hero-feature {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 12px;

    color: var(--gray-500);

}

.hero-feature i {

    color: var(--teal);

}


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

.hero-visual {

    min-height: 430px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}

.hero-visual::before {

    content: "";

    position: absolute;

    width: 370px;
    height: 370px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(21,154,156,.16),
            rgba(38,118,217,.08)
        );

}

.science-card {

    position: relative;

    width: 310px;

    min-height: 260px;

    border-radius: 30px;
    
    background-image: url('../img/hero_image.png');
    	background-repeat: no-repeat;
    	background-position: bottom center;
    	background-size: 100% auto;

    	
    	overflow: hidden;       
/*
    background:
        linear-gradient(
            145deg,
            var(--navy),
            #174e69
        );

    color: white;
*/
    box-shadow: var(--shadow-lg);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}

.science-card-icon {

    width: 100px;
    height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    margin-bottom: 20px;

}

.science-card-icon i {

    font-size: 54px;

    color: #66d8d8;

}

.science-card strong {

    display: block;

    font-size: 24px;

}

.science-card span {

    display: block;

    color: #b7d8e0;

    font-size: 14px;

}


.floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    background: white;

    border-radius: 13px;

    box-shadow: var(--shadow-md);

}

.floating-card i {

    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 10px;

    background: var(--teal-light);

    color: var(--teal-dark);

}

.floating-card strong {

    display: block;

    font-size: 13px;

}

.floating-card span {

    display: block;

    font-size: 10px;

    color: var(--gray-500);

}

.floating-card-top {

    top: 55px;

    right: 10px;

}

.floating-card-bottom {

    bottom: 45px;

    left: 0;

}


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

.section-container {

    width: min(
        var(--container),
        calc(100% - 40px)
    );

    margin: auto;

}

.quick-section,
.program-section,
.how-section {

    padding:
        90px 0;

}

.section-heading {

    max-width: 700px;

    margin:
        0 auto 45px;

    text-align: center;

}

.section-kicker {

    color: var(--teal-dark);

    text-transform: uppercase;

    letter-spacing: 1.2px;

    font-size: 11px;

    font-weight: 800;

}

.section-heading h2,
.how-content h2 {

    margin:
        8px 0 12px;

    font-size:
        clamp(30px, 4vw, 42px);

    line-height: 1.2;

    letter-spacing: -.8px;

}

.section-heading p,
.how-content > p {

    margin: 0;

    color: var(--gray-500);

    font-size: 15px;

}


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

.quick-section {

    background: white;

}

.feature-grid {

    display: grid;

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

    gap: 18px;

}

.feature-card {

    position: relative;

    padding: 26px;

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

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

    background: white;

    min-height: 245px;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

.feature-card:hover {

    transform:
        translateY(-6px);

    box-shadow: var(--shadow-md);

    border-color:
        rgba(21,154,156,.3);

}

.feature-icon {

    width: 54px;
    height: 54px;

    display: flex;

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

    border-radius: 14px;

    margin-bottom: 20px;

}

.feature-icon i {

    font-size: 21px;

}

.feature-icon.blue {
    background: #e8f1ff;
    color: var(--blue);
}

.feature-icon.green {
    background: #e6f7ef;
    color: var(--green);
}

.feature-icon.purple {
    background: #f0ebff;
    color: var(--purple);
}

.feature-icon.orange {
    background: #fff1e4;
    color: var(--orange);
}

.feature-card h3 {

    margin:
        0 0 8px;

    font-size: 18px;

}

.feature-card p {

    margin: 0;

    color: var(--gray-500);

    font-size: 13px;

    line-height: 1.7;

}

.feature-arrow {

    position: absolute;

    bottom: 22px;
    right: 22px;

    color: var(--teal);

}


/* =========================================================
   PROGRAMS
========================================================= */

.program-section {

    background:
        var(--gray-50);

}

.program-grid {

    display: grid;

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

    gap: 20px;

}

.program-card {

    position: relative;

    min-height: 300px;

    padding: 32px;

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

    color: white;

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.program-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow-lg);

}

.chemistry-program {

    background:
        linear-gradient(
            140deg,
            #087f81,
            #159a9c
        );

}

.biology-program {

    background:
        linear-gradient(
            140deg,
            #246b58,
            #25a36f
        );

}

.schedule-program {

    background:
        linear-gradient(
            140deg,
            #28558a,
            #2676d9
        );

}

.program-number {

    position: absolute;

    top: 25px;
    right: 28px;

    font-size: 12px;

    opacity: .55;

}

.program-icon {

    width: 65px;
    height: 65px;

    display: flex;

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

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

    border-radius: 17px;

    margin-bottom: 35px;

}

.program-icon i {

    font-size: 27px;

}

.program-card h3 {

    margin:
        0 0 10px;

    font-size: 28px;

}

.program-card p {

    max-width: 350px;

    margin:
        0 0 28px;

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

    font-size: 14px;

}

.program-card span {

    font-size: 13px;

    font-weight: 700;

}

.program-card span i {

    margin-left: 7px;

}


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

.how-section {

    background: white;

}

.how-layout {

    display: grid;

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

    gap: 90px;

    align-items: center;

}

.how-content h2 {

    font-size: 38px;

}

.text-button {

    display: inline-flex;

    gap: 10px;

    align-items: center;

    margin-top: 25px;

    color: var(--teal-dark);

    font-size: 14px;

    font-weight: 800;

}

.steps {

    display: grid;

    gap: 15px;

}

.step {

    display: grid;

    grid-template-columns:
        60px
        1fr;

    gap: 20px;

    padding:
        20px;

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

    border-radius:
        14px;

}

.step-number {

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 12px;

    background:
        var(--teal-light);

    color:
        var(--teal-dark);

    font-weight: 800;

    font-size: 12px;

}

.step h3 {

    margin:
        0 0 5px;

    font-size: 16px;

}

.step p {

    margin: 0;

    color: var(--gray-500);

    font-size: 13px;

}


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

.cta-section {

    padding:
        0 0 90px;

}

.cta-box {

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 25px;

    padding:
        40px 45px;

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

    background:
        linear-gradient(
            135deg,
            var(--navy),
            #174e69
        );

    color: white;

}

.cta-box::after {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

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

    right: -80px;
    top: -100px;

}

.cta-icon {

    width: 65px;
    height: 65px;

    display: flex;

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

    border-radius: 17px;

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

    flex-shrink: 0;

}

.cta-icon i {

    font-size: 28px;

}

.cta-content {

    flex: 1;

}

.cta-content span {

    color: #86dada;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

}

.cta-content h2 {

    margin:
        3px 0 4px;

    font-size: 26px;

}

.cta-content p {

    margin: 0;

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

    font-size: 13px;

}


/* =========================================================
   ACTIVE DROPDOWN
========================================================= */

.nav-dropdown > button.active {
    background: var(--teal-light);
    color: var(--teal-dark);
}

.dropdown-menu a.active {
    background: var(--gray-100);
    color: var(--teal-dark);
    font-weight: 700;
}


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

.mobile-dropdown {
    width: 100%;
}

.mobile-dropdown-button {
    width: 100%;

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

    border: 0;
    background: transparent;

    padding: 13px 15px;

    border-radius: 8px;

    color: var(--gray-700);

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

    cursor: pointer;
}

.mobile-dropdown-button i {
    font-size: 10px;

    transition: transform .2s ease;
}

.mobile-dropdown.open
.mobile-dropdown-button i {
    transform: rotate(180deg);
}

.mobile-dropdown-button:hover,
.mobile-dropdown-button.active {
    background: var(--teal-light);
    color: var(--teal-dark);
}


/* =========================================================
   MOBILE DROPDOWN CONTENT
========================================================= */

.mobile-dropdown-menu {
    display: none;

    padding: 4px 0 6px 15px;
}

.mobile-dropdown.open
.mobile-dropdown-menu {
    display: block;
}

.mobile-dropdown-menu a {
    display: block;

    padding: 10px 15px;

    border-radius: 7px;

    color: var(--gray-600);

    font-size: 14px;
}

.mobile-dropdown-menu a:hover,
.mobile-dropdown-menu a.active {
    background: var(--gray-100);
    color: var(--teal-dark);
}


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

.mobile-account {
    margin-top: 10px;

    padding-top: 12px;

    border-top: 1px solid var(--gray-200);
}

.mobile-account > a,
.mobile-logout {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px 15px;

    border-radius: 8px;

    color: var(--gray-700);

    font-size: 14px;
    font-weight: 600;
}

.mobile-account > a:hover {
    background: var(--gray-100);
    color: var(--teal-dark);
}

.mobile-user {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px 15px;

    color: var(--gray-700);

    font-size: 13px;

    overflow: hidden;
}

.mobile-user span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-user i {
    color: var(--teal);
}

.mobile-logout {
    color: #a33;
}

.mobile-logout:hover {
    background: #fff0f0;
    color: #a33;
}


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

.site-footer {

    background:
        var(--navy-dark);

    color: white;

}

.footer-inner {

    width: min(
        var(--container),
        calc(100% - 40px)
    );

    margin: auto;

    min-height: 150px;

    display: flex;

    align-items: center;

    gap: 40px;

}

.footer-brand {

    display: flex;

    align-items: center;

    gap: 15px;

    flex: 1;

}

.footer-brand img {

    width: 52px;
    height: 52px;

}

.footer-brand strong {

    font-size: 14px;

}

.footer-brand p {

    margin: 3px 0 0;

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

    font-size: 11px;

}

.footer-links {

    display: flex;

    gap: 22px;

}

.footer-links a {

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

    font-size: 12px;

}

.footer-links a:hover {

    color: white;

}

.footer-social a {

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 50%;

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

}

.footer-bottom {

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

    text-align: center;

    padding:
        18px 20px;

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

    font-size: 11px;

}

.footer-bottom span {

    margin:
        0 8px;

}


@media (max-width: 900px) {

    .main-nav,
    .header-account {
        display: none;
    }

    .mobile-menu-button {
        display: block;
        margin-left: auto;
    }

    .mobile-nav {
        display: none;
        padding: 12px 20px 20px;
        border-top: 1px solid var(--gray-200);
    }

    .mobile-nav.open {
        display: block;
    }

    .mobile-nav > a {
        display: block;

        padding: 13px 15px;

        border-radius: 8px;

        color: var(--gray-700);

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

    .mobile-nav > a:hover,
    .mobile-nav > a.active {
        background: var(--teal-light);
        color: var(--teal-dark);
    }

}

/* =========================================================
   TABLET / MOBILE HEADER
========================================================= */

@media (max-width: 1100px) {

    .main-nav,
    .header-account {
        display: none;
    }

    .mobile-menu-button {
        display: block;
        margin-left: auto;
        cursor: pointer;
    }

    .hero-inner {
        gap: 30px;
    }

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

}

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

@media (max-width: 768px) {

    .header-inner {
        min-height: 70px;
        width: calc(100% - 28px);
    }

    .brand-logo img {
        width: 48px;
        height: 48px;
    }

    .brand-title {
        font-size: 10px;
    }

    .brand-name {
        font-size: 18px;
    }


    /* -----------------------------------------------------
       MOBILE NAVIGATION
    ----------------------------------------------------- */

    .mobile-nav {
        display: flex;
        flex-direction: column;

        max-height: 0;
        overflow: hidden;

        background: white;

        transition:
            max-height .3s ease;
    }

    .mobile-nav.open {
        max-height: 1000px;

        border-top:
            1px solid var(--gray-200);
    }


    /* -----------------------------------------------------
       MOBILE MAIN LINKS
    ----------------------------------------------------- */

    .mobile-nav > a {
        display: block;

        padding:
            13px 25px;

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

        border-radius: 0;

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

        color: var(--gray-700);
    }

    .mobile-nav > a:hover,
    .mobile-nav > a.active {
        background:
            var(--gray-50);

        color:
            var(--teal-dark);
    }


    /* -----------------------------------------------------
       MOBILE DROPDOWNS
    ----------------------------------------------------- */

    .mobile-dropdown {
        width: 100%;
    }

    .mobile-dropdown-button {
        width: 100%;

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

        padding:
            13px 25px;

        border: 0;
        border-bottom:
            1px solid var(--gray-100);

        background: transparent;

        color: var(--gray-700);

        font-family: inherit;
        font-size: 14px;
        font-weight: 600;

        text-align: left;

        cursor: pointer;
    }

    .mobile-dropdown-button i {
        font-size: 10px;

        transition:
            transform .2s ease;
    }

    .mobile-dropdown-button:hover,
    .mobile-dropdown-button.active {
        background:
            var(--gray-50);

        color:
            var(--teal-dark);
    }

    .mobile-dropdown.open
    .mobile-dropdown-button i {
        transform:
            rotate(180deg);
    }


    /* -----------------------------------------------------
       DROPDOWN CHILDREN
    ----------------------------------------------------- */

    .mobile-dropdown-menu {
        display: none;

        padding:
            4px 0 6px 15px;

        background:
            var(--gray-50);
    }

    .mobile-dropdown.open
    .mobile-dropdown-menu {
        display: block;
    }

    .mobile-dropdown-menu a {
        display: block;

        padding:
            10px 25px;

        border-bottom: 0;

        color:
            var(--gray-600);

        font-size: 13px;
        font-weight: 500;
    }

    .mobile-dropdown-menu a:hover,
    .mobile-dropdown-menu a.active {
        background:
            var(--gray-100);

        color:
            var(--teal-dark);

        font-weight: 700;
    }


    /* -----------------------------------------------------
       MOBILE ACCOUNT
    ----------------------------------------------------- */

    .mobile-account {
        margin-top: 10px;
        padding-top: 12px;

        border-top:
            1px solid var(--gray-200);
    }

    .mobile-account > a,
    .mobile-logout {
        display: flex;
        align-items: center;

        gap: 9px;

        padding:
            12px 25px;

        border-bottom: 0;

        border-radius: 8px;

        color:
            var(--gray-700);

        font-size: 14px;
        font-weight: 600;
    }

    .mobile-account > a:hover {
        background:
            var(--gray-100);

        color:
            var(--teal-dark);
    }


    /* LOGGED-IN USER */

    .mobile-user {
        display: flex;
        align-items: center;

        gap: 9px;

        padding:
            12px 25px;

        color:
            var(--gray-700);

        font-size: 13px;

        overflow: hidden;
    }

    .mobile-user span {
        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

    .mobile-user i {
        color:
            var(--teal);
    }


    /* LOGOUT */

    .mobile-logout {
        color:
            #a33;
    }

    .mobile-logout:hover {
        background:
            #fff0f0;

        color:
            #a33;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero {
        min-height:
            auto;
    }

    .hero-inner {
        min-height:
            auto;

        grid-template-columns:
            1fr;

        gap:
            20px;
    }

    .hero-content {
        padding:
            55px 0 20px;
    }

    .hero h1 {
        font-size:
            42px;
    }

    .hero-description {
        font-size:
            15px;
    }

    .hero-visual {
        min-height:
            360px;

        margin-bottom:
            35px;
    }

    .science-card {
        width: 260px;
    	min-height: 220px;

    	
    }

    .floating-card-top {
        right:
            0;

        top:
            20px;
    }

    .floating-card-bottom {
        left:
            0;

        bottom:
            20px;
    }


    /* -----------------------------------------------------
       SECTIONS
    ----------------------------------------------------- */

    .quick-section,
    .program-section,
    .how-section {
        padding:
            65px 0;
    }

    .feature-grid {
        grid-template-columns:
            1fr;
    }

    .feature-card {
        min-height:
            210px;
    }

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


    /* -----------------------------------------------------
       HOW
    ----------------------------------------------------- */

    .how-layout {
        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .cta-box {
        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            30px;
    }

    .cta-box .button {
        width:
            100%;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-inner {
        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            35px 0;

        gap:
            25px;
    }

    .footer-links {
        flex-wrap:
            wrap;
    }

}



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

.page-section {
    padding: 70px 0 90px;
}

.page-container {
    width: min(
        var(--container),
        calc(100% - 40px)
    );

    margin: auto;
}


/* ---------------------------------------------------------
   PAGE HEADER
--------------------------------------------------------- */

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

.page-header h1 {
    margin: 0 0 18px;

    font-size: clamp(32px, 4vw, 44px);

    line-height: 1.2;

    letter-spacing: -.8px;

    color: var(--navy);
}

.page-header p {
    margin: 0;

    color: var(--gray-500);

    font-size: 15px;

    line-height: 1.85;
}


/* ---------------------------------------------------------
   TEACHERS SECTION
--------------------------------------------------------- */

.teachers-section {
    margin-top: 55px;
}

.teachers-section:first-of-type {
    margin-top: 0;
}

.teachers-section-title {
    display: flex;
    align-items: center;
    gap: 15px;

    margin: 0 0 30px;

    color: var(--navy);

    font-size: 27px;

    line-height: 1.3;
}

.teachers-section-title::before {
    content: "";

    width: 5px;
    height: 32px;

    flex-shrink: 0;

    border-radius: 5px;

    background: var(--teal);
}


/* ---------------------------------------------------------
   TEACHERS GRID
--------------------------------------------------------- */

.teachers-grid {

    display: grid;

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

    gap: 20px;

}


/* ---------------------------------------------------------
   TEACHER CARD
--------------------------------------------------------- */

.teacher-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 30px 20px 25px;

    background: white;

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

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

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

.teacher-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-md);

    border-color:
        rgba(21,154,156,.35);

}


/* ---------------------------------------------------------
   TEACHER PHOTO
--------------------------------------------------------- */

.teacher-photo {

    width: 110px;
    height: 110px;

    object-fit: cover;

    border-radius: 50%;

    border:
        4px solid var(--teal-light);

    margin-bottom: 17px;

    box-shadow:
        0 5px 15px rgba(16,42,67,.10);

}


/* ---------------------------------------------------------
   TEACHER NAME
--------------------------------------------------------- */

.teacher-card h3 {

    margin:
        0 0 13px;

    color:
        var(--navy);

    font-size:
        16px;

    line-height:
        1.4;

}


/* ---------------------------------------------------------
   EMAIL BUTTON
--------------------------------------------------------- */

.teacher-email {

    width: 40px;
    height: 18px;

    display: inline-flex;

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

    opacity: .8;

    transition:
        opacity .2s ease,
        transform .2s ease;

}

.teacher-email img {

    width: 40px;
    height: 18px;

    object-fit: contain;

}

.teacher-email:hover {

    opacity: 1;

    transform:
        translateY(-1px);

}


/* ---------------------------------------------------------
   SUPERVISORY BOARD
--------------------------------------------------------- */

.supervisory-section {

    margin-top: 75px;

    padding-top: 55px;

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

}


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

@media (max-width: 900px) {

    .teachers-grid {

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

    }

}


@media (max-width: 600px) {

    .page-section {

        padding:
            50px 0 65px;

    }

    .page-container {

        width:
            calc(100% - 28px);

    }

    .page-header {

        margin-bottom:
            40px;

    }

    .page-header h1 {

        font-size:
            32px;

    }

    .page-header p {

        font-size:
            14px;

        line-height:
            1.75;

    }

    .teachers-section {

        margin-top:
            45px;

    }

    .teachers-section-title {

        font-size:
            23px;

        margin-bottom:
            22px;

    }

    .teachers-grid {

        grid-template-columns:
            1fr;

        gap:
            15px;

    }

    .teacher-card {

        padding:
            25px 15px 22px;

    }

}

/* =========================================================
   AUTHENTICATION PAGE
========================================================= */

.auth-card {
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 35px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: var(--navy);
    font-size: 15px;
    font-weight: 600;
}

.form-group input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: #fff;
    color: var(--navy);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.form-group input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(21,154,156,.12);
}

.auth-button {
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: 14px 20px;
    background: var(--teal);
    color: white;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.auth-button:hover {
    background: var(--teal-dark);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(21,154,156,.20);
}

.auth-links {
    margin-top: 22px;
    text-align: center;
}

.auth-links a {
    color: var(--teal-dark);
    font-size: 14px;
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

.auth-register {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 25px;
    padding-top: 22px;
    border-top: 1px solid var(--gray-200);
    color: var(--gray-500);
    font-size: 14px;
}

.auth-register a {
    color: var(--teal-dark);
    font-weight: 600;
    text-decoration: none;
}

.auth-register a:hover {
    text-decoration: underline;
}


@media (max-width: 600px) {

    .auth-card {
        padding: 25px 18px;
    }

    .auth-register {
        flex-direction: column;
        gap: 5px;
    }

}



/* =========================================================
   SIGNUP / REGISTRATION PAGE
========================================================= */

.signup-card {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 40px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}


.signup-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}


.signup-block {
    padding: 0 0 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--gray-200);
}


.signup-block:last-of-type {
    margin-bottom: 0;
}


.signup-block h2 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 21px;
    line-height: 1.4;
}


.signup-help {
    margin: 0 0 22px;
    color: var(--gray-500);
    font-size: 14px;
    line-height: 1.7;
}


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

.signup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}


.signup-full {
    grid-column: 1 / -1;
}


/* =========================================================
   FORM GROUP
========================================================= */

.signup-card .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.signup-card .form-group label {
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
}


.signup-card .form-group input,
.signup-card .form-group select {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 11px 14px;

    border: 1px solid var(--gray-200);
    border-radius: 8px;

    background: var(--white);
    color: var(--navy);

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.signup-card .form-group input::placeholder {
    color: var(--gray-500);
    opacity: .75;
}


.signup-card .form-group input:focus,
.signup-card .form-group select:focus {
    border-color: var(--teal);

    box-shadow:
        0 0 0 3px rgba(21,154,156,.12);
}


.signup-card .form-group select {
    cursor: pointer;
}


/* =========================================================
   FIELD NOTE
========================================================= */

.field-note {
    display: block;
    margin-top: 1px;
    color: var(--gray-500);
    font-size: 12px;
    line-height: 1.6;
}


.field-note strong {
    color: var(--navy);
}


/* =========================================================
   RADIO OPTIONS
========================================================= */

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


.radio-card {
    position: relative;
    display: block;
    cursor: pointer;
}


.radio-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.radio-content {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 18px;

    border: 1px solid var(--gray-200);
    border-radius: 10px;

    background: var(--white);

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.radio-content strong {
    color: var(--navy);
    font-size: 15px;
}


.radio-content small {
    color: var(--gray-500);
    font-size: 12px;
    line-height: 1.5;
}


.radio-card:hover .radio-content {
    border-color: rgba(21,154,156,.45);
    transform: translateY(-1px);
}


.radio-card input:checked + .radio-content {
    border-color: var(--teal);
    background: var(--teal-light);

    box-shadow:
        0 0 0 2px rgba(21,154,156,.08);
}


/* =========================================================
   CAPTCHA
========================================================= */

.captcha-area {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}


.captcha-image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 65px;
    height: 38px;

    overflow: hidden;

    border: 1px solid var(--gray-200);
    border-radius: 7px;

    background: var(--teal);
}


.captcha-image img {
    display: block;

    width: 65px;
    height: 23px;

    object-fit: contain;
}


.captcha-input {
    width: 220px;

    display: flex;
    flex-direction: column;
    gap: 8px;
}


.captcha-input label {
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
}


.captcha-input input {
    width: 100%;
    box-sizing: border-box;

    min-height: 46px;
    padding: 11px 14px;

    border: 1px solid var(--gray-200);
    border-radius: 8px;

    color: var(--navy);
    background: var(--white);

    font-family: inherit;
    font-size: 14px;

    outline: none;

    letter-spacing: 2px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.captcha-input input:focus {
    border-color: var(--teal);

    box-shadow:
        0 0 0 3px rgba(21,154,156,.12);
}


/* =========================================================
   PASSWORD MESSAGE
========================================================= */

.password-message {
    min-height: 20px;
    margin-top: 8px;

    font-size: 13px;
    font-weight: 500;
}


.password-message.error {
    color: #c0392b;
}


.password-message.success {
    color: var(--green);
}


/* =========================================================
   TERMS
========================================================= */

.signup-terms {
    margin-top: 5px;
    margin-bottom: 25px;
}


.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    cursor: pointer;

    color: var(--gray-500);
    font-size: 13px;
    line-height: 1.6;
}


.checkbox-label input {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    margin: 2px 0 0;

    accent-color: var(--teal);

    cursor: pointer;
}


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

.signup-button {
    width: 100%;

    border: 0;
    border-radius: 8px;

    padding: 14px 20px;

    background: var(--teal);
    color: var(--white);

    font-family: inherit;
    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.signup-button:hover {
    background: var(--teal-dark);

    transform: translateY(-1px);

    box-shadow:
        0 5px 15px rgba(21,154,156,.20);
}


.signup-button:active {
    transform: translateY(0);
}


/* =========================================================
   LOGIN LINK
========================================================= */

.signup-login {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;

    margin-top: 22px;
    padding-top: 20px;

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

    color: var(--gray-500);
    font-size: 14px;
}


.signup-login a {
    color: var(--teal-dark);
    font-weight: 600;
    text-decoration: none;
}


.signup-login a:hover {
    text-decoration: underline;
}


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

@media (max-width: 700px) {

    .signup-card {
        padding: 25px 18px;
    }


    .signup-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }


    .signup-full {
        grid-column: auto;
    }


    .radio-options {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    .captcha-area {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }


    .captcha-image {
        width: 65px;
    }


    .captcha-input {
        width: 100%;
    }


    .signup-login {
        flex-direction: column;
        gap: 5px;
    }

}


@media (max-width: 450px) {

    .signup-card {
        padding: 22px 15px;
    }


    .signup-block {
        padding-bottom: 25px;
        margin-bottom: 25px;
    }


    .signup-block h2 {
        font-size: 19px;
    }


    .signup-help {
        font-size: 13px;
    }

}


/* =========================================================
   PROGRAMS PAGE
   ========================================================= */

.programs-page-section {
    padding: 50px 0 70px;
}

.programs-page-section .section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* =========================================================
   PROGRAM TABS
========================================================= */

.program-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 35px;
    padding: 8px;
    background: #f5f7fa;
    border-radius: 14px;
}

.program-tab {
    flex: 1 1 auto;
    min-width: 130px;
    border: none;
    background: transparent;
    color: #475569;
    padding: 13px 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.program-tab:hover {
    background: #ffffff;
    color: #2563eb;
}

.program-tab.active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);
}


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

.program-tab-content {
    display: none;
    animation: programFadeIn 0.3s ease;
}

.program-tab-content.active {
    display: block;
}

@keyframes programFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

.program-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 25px;
    color: #1e293b;
    font-size: 28px;
    font-weight: 700;
}

.program-heading-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 21px;
}


/* =========================================================
   SEMESTER ACCORDION
========================================================= */

.semester-accordion {
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
}

.semester-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 22px;
    border: none;
    background: #ffffff;
    color: #1e293b;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.semester-button:hover {
    background: #f8fafc;
}

.semester-button i {
    color: #2563eb;
    font-size: 14px;
    transition: transform 0.25s ease;
}

.semester-button.active i {
    transform: rotate(180deg);
}

.semester-panel {
    display: none;
    padding: 0 22px 22px;
}

.semester-panel.active {
    display: block;
}


/* =========================================================
   PROGRAM TABLE
========================================================= */

.program-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.program-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
    font-size: 14px;
}

.program-table thead th {
    padding: 13px 15px;
    background: #f8fafc;
    color: #334155;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.program-table tbody td {
    padding: 13px 15px;
    color: #475569;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}

.program-table tbody tr:last-child td {
    border-bottom: none;
}

.program-table tbody tr:hover {
    background: #f8fafc;
}

.program-table th:first-child,
.program-table td:first-child {
    width: 55px;
    text-align: center;
}

.program-table th:nth-child(2),
.program-table td:nth-child(2) {
    width: 120px;
    white-space: nowrap;
}

.program-table th:last-child,
.program-table td:last-child {
    width: 150px;
}


/* =========================================================
   LESSON TYPE
========================================================= */

.program-table td:last-child {
    font-weight: 600;
}

.program-table td:last-child::before {
    content: "";
}


/* =========================================================
   EMPTY / ERROR MESSAGE
========================================================= */

.program-empty,
.program-error {
    margin: 10px 0 0;
    padding: 18px;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.program-error {
    background: #fef2f2;
    color: #b91c1c;
}


/* =========================================================
   ADVANCED PROGRAMS
========================================================= */

.advanced-program {
    padding: 28px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.advanced-program + .advanced-program {
    margin-top: 20px;
}

.advanced-program h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    color: #1e293b;
    font-size: 22px;
}

.advanced-program h3 i {
    color: #2563eb;
}

.advanced-program h4 {
    margin: 25px 0 12px;
    color: #334155;
    font-size: 18px;
}

.advanced-program p {
    margin: 0 0 12px;
    color: #475569;
    line-height: 1.7;
}

.advanced-program ul {
    margin: 0;
    padding-left: 25px;
}

.advanced-program li {
    margin-bottom: 9px;
    color: #475569;
    line-height: 1.6;
}

.advanced-program li::marker {
    color: #2563eb;
}


/* =========================================================
   ADVANCED PROGRAM ICON COLORS
========================================================= */

.program-tab-content#class13 .program-heading-icon {
    background: #eff6ff;
    color: #2563eb;
}

.program-tab-content#class23 .program-heading-icon {
    background: #ecfdf5;
    color: #059669;
}


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

@media (max-width: 768px) {

    .programs-page-section {
        padding: 35px 0 50px;
    }

    .programs-page-section .section-container {
        padding: 0 15px;
    }

    .program-tabs {
        gap: 7px;
        padding: 6px;
        margin-bottom: 25px;
    }

    .program-tab {
        min-width: calc(50% - 4px);
        padding: 11px 10px;
        font-size: 14px;
    }

    .program-heading {
        font-size: 23px;
        margin-bottom: 20px;
    }

    .program-heading-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .semester-button {
        padding: 16px;
        font-size: 16px;
    }

    .semester-panel {
        padding: 0 12px 15px;
    }

    .program-table {
        font-size: 13px;
    }

    .program-table thead th,
    .program-table tbody td {
        padding: 11px 10px;
    }

    .advanced-program {
        padding: 20px 16px;
    }

    .advanced-program h3 {
        font-size: 20px;
    }
}


@media (max-width: 480px) {

    .program-tab {
        min-width: 100%;
    }

    .program-heading {
        font-size: 21px;
    }

    .program-heading-icon {
        width: 38px;
        height: 38px;
    }

    .semester-button {
        font-size: 15px;
    }
}


/* =========================================================
   SPECIAL LESSON ROWS
========================================================= */

/* სემინარი */
.program-table tbody tr.seminar {
    background: #fff7ed;
}

.program-table tbody tr.seminar td {
    color: #9a3412;
}

/* ტესტი */
.program-table tbody tr.test {
    background: #fef2f2;
}

.program-table tbody tr.test td {
    color: #b91c1c;
}

/* hover */
.program-table tbody tr.seminar:hover {
    background: #ffedd5;
}

.program-table tbody tr.test:hover {
    background: #fee2e2;
}

/* =========================================================
   LIBRARY PAGE
========================================================= */

.library-page-section {
    padding: 55px 0 80px;
}

.library-page-section .section-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}


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

.library-card {
    display: flex;
    align-items: center;
    gap: 30px;

    padding: 40px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 20px;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.06);
}


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

.library-icon {
    width: 85px;
    height: 85px;

    flex-shrink: 0;

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

    border-radius: 18px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 38px;
}


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

.library-content {
    flex: 1;
}

.library-content h2 {
    margin: 0 0 15px;

    color: #1e293b;

    font-size: 27px;

    font-weight: 700;
}

.library-content p {
    margin: 0 0 8px;

    color: #475569;

    font-size: 17px;

    line-height: 1.7;
}

.library-content .library-note {
    margin-bottom: 25px;

    color: #64748b;

    font-size: 15px;
}


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

.library-login-button {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 12px 22px;

    border-radius: 10px;

    background: #2563eb;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.library-login-button:hover {
    background: #1d4ed8;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 6px 15px rgba(37, 99, 235, 0.25);
}


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

@media (max-width: 700px) {

    .library-page-section {
        padding: 35px 0 55px;
    }

    .library-page-section .section-container {
        padding: 0 15px;
    }

    .library-card {
        flex-direction: column;

        align-items: center;

        text-align: center;

        padding: 30px 20px;

        gap: 20px;
    }

    .library-icon {
        width: 70px;
        height: 70px;

        border-radius: 15px;

        font-size: 30px;
    }

    .library-content h2 {
        font-size: 23px;
    }

    .library-content p {
        font-size: 16px;
    }

    .library-login-button {
        padding: 11px 20px;
    }
}



/* =========================================================
   LIBRARY PAGE
========================================================= */

.library-page-section {
    padding-top: 30px;
}


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

.library-intro-card {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-bottom: 28px;
    padding: 22px 24px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06);
}


.library-intro-icon {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

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

    border-radius: 16px;

    background: #ecfeff;
    color: #0f766e;

    font-size: 25px;
}


.library-intro-content h2 {
    margin: 0 0 5px;

    font-size: 21px;
    font-weight: 700;
    color: #172033;
}


.library-intro-content p {
    margin: 0;

    color: #64748b;
    line-height: 1.6;
}


/* =========================================================
   LIBRARY TABS
========================================================= */

.library-tabs {
    margin-bottom: 28px;
}


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

.library-page-section .program-tab-content {
    display: none;
}


.library-page-section .program-tab-content.active {
    display: block;
}


/* =========================================================
   LIBRARY CHAPTERS
========================================================= */

.library-chapters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* =========================================================
   CHAPTER
========================================================= */

.library-chapter {
    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 15px;

    overflow: hidden;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.library-chapter:hover {
    border-color: #cbd5e1;

    box-shadow:
        0 7px 22px rgba(15, 23, 42, 0.06);
}


.library-chapter.active {
    border-color: #99f6e4;
}


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

.library-chapter-button {
    width: 100%;

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

    gap: 15px;

    padding: 18px 20px;

    border: none;
    background: #ffffff;

    cursor: pointer;

    text-align: left;

    font-family: inherit;

    color: #172033;

    transition:
        background 0.2s ease;
}


.library-chapter-button:hover {
    background: #f8fafc;
}


.library-chapter-left {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 0;
}


.library-chapter-number {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

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

    border-radius: 11px;

    background: #ecfeff;
    color: #0f766e;

    font-size: 14px;
    font-weight: 700;
}


.library-chapter-title {
    font-size: 16px;
    font-weight: 650;

    line-height: 1.5;

    color: #1e293b;
}


.library-chapter-arrow {
    flex-shrink: 0;

    color: #64748b;

    transition:
        transform 0.25s ease;
}


.library-chapter.active
.library-chapter-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   CHAPTER PANEL
========================================================= */

.library-chapter-panel {
    max-height: 0;

    overflow: hidden;

    background: #f8fafc;

    transition:
        max-height 0.3s ease;
}


/* =========================================================
   LESSONS
========================================================= */

.library-lessons {
    padding: 8px 14px 14px;
}


.library-lesson {
    display: flex;
    align-items: center;

    gap: 13px;

    margin: 6px 0;

    padding: 12px 14px;

    text-decoration: none;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 11px;

    color: #334155;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}


.library-lesson:hover {
    transform: translateX(3px);

    border-color: #99f6e4;

    background: #f0fdfa;

    box-shadow:
        0 4px 14px rgba(15, 118, 110, 0.08);
}


.library-lesson-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

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

    border-radius: 9px;

    background: #f0fdfa;
    color: #0f766e;

    font-size: 15px;
}


.library-lesson-text {
    flex: 1;

    display: flex;
    align-items: baseline;

    gap: 8px;

    min-width: 0;
}


.library-lesson-number {
    flex-shrink: 0;

    color: #64748b;

    font-size: 14px;
    font-weight: 600;
}


.library-lesson-title {
    color: #334155;

    font-size: 15px;

    line-height: 1.5;
}


.library-lesson-arrow {
    flex-shrink: 0;

    color: #94a3b8;

    font-size: 13px;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}


.library-lesson:hover
.library-lesson-arrow {
    color: #0f766e;

    transform: translateX(3px);
}


/* =========================================================
   EMPTY / ERROR
========================================================= */

.library-empty,
.library-error {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 18px 20px;

    border-radius: 12px;

    background: #f8fafc;

    color: #64748b;

    font-size: 15px;
}


.library-empty i {
    color: #94a3b8;
}


.library-error {
    background: #fef2f2;

    color: #b91c1c;
}


.library-error i {
    color: #dc2626;
}


.library-empty.small,
.library-error.small {
    margin: 10px 14px 14px;

    font-size: 14px;
}


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

.library-bottom-action {
    display: flex;
    justify-content: flex-start;

    margin-top: 30px;
}


.back-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 11px 18px;

    border: 1px solid #dbe3ea;
    border-radius: 10px;

    background: #ffffff;

    color: #475569;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.back-button:hover {
    background: #f8fafc;

    border-color: #cbd5e1;

    color: #0f766e;
}


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

@media (max-width: 768px) {

    .library-intro-card {
        align-items: flex-start;

        padding: 18px;
    }


    .library-intro-icon {
        width: 48px;
        height: 48px;

        font-size: 20px;
    }


    .library-intro-content h2 {
        font-size: 18px;
    }


    .library-intro-content p {
        font-size: 14px;
    }


    .library-chapter-button {
        padding: 15px;
    }


    .library-chapter-title {
        font-size: 15px;
    }


    .library-chapter-number {
        width: 34px;
        height: 34px;
    }


    .library-lessons {
        padding: 7px 9px 10px;
    }


    .library-lesson {
        padding: 11px;

        gap: 9px;
    }


    .library-lesson-text {
        display: block;
    }


    .library-lesson-number {
        display: inline;
        margin-right: 5px;
    }


    .library-lesson-title {
        font-size: 14px;
    }

}


.page-hero-inner {
	text-align:center;
}



/* =========================================================
   LESSON PAGE
========================================================= */

.lesson-page-section {
    padding: 45px 0 80px;
    background: var(--gray-50);
}

.lesson-container {
    width: min(var(--container), calc(100% - 40px));
    margin: 0 auto;
}

.lesson-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 25px;
    align-items: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.lesson-sidebar {
    position: sticky;
    top: 105px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.lesson-sidebar-header {
    padding: 20px;
    background: linear-gradient(
        135deg,
        var(--teal),
        var(--teal-dark)
    );
    color: white;
}

.lesson-sidebar-header h3 {
    margin: 0;
    font-size: 17px;
}

.lesson-sidebar-header h3 i {
    margin-right: 7px;
}

.lesson-sidebar-header span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    opacity: .8;
}

.lesson-nav {
    padding: 10px;
}

.lesson-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    margin-bottom: 3px;
    border-radius: 9px;
    color: var(--gray-700);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.lesson-nav a i {
    width: 18px;
    text-align: center;
    color: var(--teal);
}

.lesson-nav a:hover {
    background: var(--teal-light);
    color: var(--teal-dark);
    transform: translateX(2px);
}

.lesson-nav a:last-child {
    margin-bottom: 0;
}


/* =========================================================
   HELPER MATERIALS
========================================================= */

.lesson-helper {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--gray-200);
}

.lesson-helper-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}

.lesson-helper-title i {
    color: var(--orange);
}

.lesson-helper-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px 10px;
}

.lesson-helper-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--gray-500);
    font-size: 12px;
    text-decoration: none;
    transition: .2s ease;
}

.lesson-helper-links a:hover {
    background: var(--gray-50);
    color: var(--teal-dark);
}

.lesson-helper-links a i {
    width: 15px;
    color: var(--teal);
}


/* =========================================================
   MAIN
========================================================= */

.lesson-main {
    min-width: 0;
}


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

.lesson-header {
    padding: 30px 35px;
    margin-bottom: 20px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.lesson-class {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 6px 11px;
    border-radius: 20px;
    background: var(--teal-light);
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 700;
}

.lesson-header h1 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.3;
    letter-spacing: -.5px;
}


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

.lesson-content-card {
    padding: 35px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}


/* =========================================================
   LESSON TEXT
========================================================= */

.lesson-text {
    color: var(--gray-700);
    font-size: 15px;
    line-height: 1.85;
}

.lesson-text img {
    max-width: 100%;
    height: auto;
}

.lesson-text table {
    max-width: 100%;
}

.lesson-text h1,
.lesson-text h2,
.lesson-text h3,
.lesson-text h4 {
    color: var(--navy);
}

.lesson-text a {
    color: var(--teal-dark);
}

.lesson-text p {
    margin-top: 0;
    margin-bottom: 15px;
}


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

.lesson-section {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--gray-200);
}

.lesson-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.lesson-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--navy);
    font-size: 21px;
    line-height: 1.4;
}

.lesson-section-title i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--teal-light);
    color: var(--teal-dark);
    font-size: 17px;
}

.lesson-section-content {
    color: var(--gray-700);
    font-size: 15px;
    line-height: 1.85;
}


/* =========================================================
   PDF
========================================================= */

.lesson-pdf {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: var(--gray-50);
}

.lesson-pdf iframe {
    display: block;
    width: 100%;
    height: 800px;
    border: 0;
}


/* =========================================================
   ADDITIONAL MATERIAL
========================================================= */

.lesson-additional {
    margin-top: 25px;
    padding: 22px;
    border-radius: 14px;
    background: #fffaf2;
    border: 1px solid #f3dfbd;
}

.lesson-additional .lesson-section-title i {
    background: #fff1e4;
    color: var(--orange);
}


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

.lesson-back {
    margin-top: 25px;
}

.lesson-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 17px;
    border: 1px solid var(--gray-200);
    border-radius: 9px;
    background: var(--white);
    color: var(--gray-700);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: .2s ease;
}

.lesson-back a:hover {
    color: var(--teal-dark);
    border-color: var(--teal);
    background: var(--teal-light);
}


/* =========================================================
   TABLES FROM DATABASE CONTENT
========================================================= */

.lesson-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.lesson-text th,
.lesson-text td {
    padding: 9px 10px;
    border: 1px solid var(--gray-200);
}

.lesson-text th {
    background: var(--gray-50);
    color: var(--navy);
    font-weight: 700;
}


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

@media (max-width: 900px) {

    .lesson-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lesson-sidebar {
        position: static;
    }

    .lesson-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .lesson-helper {
        grid-column: 1 / -1;
    }
}


@media (max-width: 600px) {

    .lesson-page-section {
        padding: 30px 0 55px;
    }

    .lesson-container {
        width: calc(100% - 28px);
    }

    .lesson-sidebar {
        border-radius: 14px;
    }

    .lesson-sidebar-header {
        padding: 17px;
    }

    .lesson-nav {
        display: flex;
        flex-direction: column;
        padding: 8px;
    }

    .lesson-nav a {
        padding: 10px 11px;
        font-size: 13px;
    }

    .lesson-header {
        padding: 23px 20px;
        margin-bottom: 15px;
    }

    .lesson-header h1 {
        font-size: 24px;
    }

    .lesson-content-card {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .lesson-text,
    .lesson-section-content {
        font-size: 14px;
        line-height: 1.8;
    }

    .lesson-section-title {
        font-size: 18px;
    }

    .lesson-section-title i {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .lesson-pdf iframe {
        height: 600px;
    }

    .lesson-text table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.rimg {
	float:right
}

.limg {
	float:left
}

/* =========================================================
   EXAM PAGE
========================================================= */

.exam-page {
    padding: 70px 0 80px;
    background: #f7fafc;
    min-height: 600px;
}

.exam-page-heading {
    margin-bottom: 45px;
}

.exam-page-heading h1 {
    margin-bottom: 10px;
}


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

.exam-content {
    max-width: 1000px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr);

    gap: 28px;

    align-items: start;
}

.exam-content1 {
    width: 100%;
    display: block;
}



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

.exam-main-card {
    padding: 42px;

    background: #ffffff;

    border: 1px solid #e7eeee;

    border-radius: 18px;

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

    text-align: center;
}

.exam-main-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 20px;

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

    border-radius: 16px;

    background: #dff6f4;

    color: #159a9c;

    font-size: 28px;
}

.exam-main-card h2 {
    margin: 0 0 12px;

    color: #102a43;

    font-size: 27px;
}

.exam-description {
    max-width: 500px;

    margin: 0 auto 28px;

    color: #627d98;

    line-height: 1.7;
}


/* =========================================================
   FORM
========================================================= */

.exam-form {
    max-width: 500px;

    margin: 0 auto;

    text-align: left;
}

.exam-form label {
    display: block;

    margin-bottom: 8px;

    color: #102a43;

    font-size: 15px;

    font-weight: 600;
}

.exam-input {
    position: relative;
}

.exam-input i {
    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #159a9c;

    pointer-events: none;
}

.exam-input input {
    width: 100%;

    box-sizing: border-box;

    padding: 15px 16px 15px 45px;

    border: 1px solid #bcccdc;

    border-radius: 10px;

    background: #f8fafc;

    color: #102a43;

    font-family: inherit;

    font-size: 16px;

    outline: none;

    transition: .2s ease;
}

.exam-input input:focus {
    border-color: #159a9c;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(21, 154, 156, .12);
}

.exam-input input::placeholder {
    color: #9fb3c8;
}

.exam-button {
    width: 100%;

    margin-top: 18px;
}


/* =========================================================
   NOTE
========================================================= */

.exam-note {
    max-width: 500px;

    margin: 22px auto 0;

    padding: 13px 15px;

    display: flex;

    align-items: center;

    gap: 9px;

    border-radius: 10px;

    background: #f0f7f7;

    color: #627d98;

    font-size: 14px;

    line-height: 1.5;

    text-align: left;
}

.exam-note i {
    color: #159a9c;

    flex-shrink: 0;
}


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

.exam-side {
    display: flex;

    flex-direction: column;

    gap: 15px;
}

.exam-side-card {
    display: flex;

    gap: 15px;

    padding: 21px;

    background: #ffffff;

    border: 1px solid #e7eeee;

    border-radius: 14px;

    box-shadow:
        0 6px 20px rgba(16, 42, 67, .05);
}

.exam-side-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 11px;

    background: #dff6f4;

    color: #159a9c;

    font-size: 18px;
}

.exam-side-card h3 {
    margin: 1px 0 5px;

    color: #102a43;

    font-size: 16px;
}

.exam-side-card p {
    margin: 0;

    color: #627d98;

    font-size: 14px;

    line-height: 1.55;
}


/* =========================================================
   EXIT
========================================================= */

.exam-exit {
    max-width: 1000px;

    margin: 28px auto 0;

    text-align: center;
}

.exam-exit button {
    border: 0;

    background: transparent;

    color: #627d98;

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    transition: .2s ease;
}

.exam-exit button:hover {
    color: #159a9c;
}

.exam-exit i {
    margin-right: 7px;
}


/* =========================================================
   LOGIN
========================================================= */

.exam-main-card .exam-actions {
    margin-top: 25px;
    }

.exam-register {
    margin-top: 22px;

    color: #627d98;

    font-size: 14px;
}

.exam-register a {
    color: #159a9c;

    font-weight: 600;

    text-decoration: none;
}

.exam-register a:hover {
    text-decoration: underline;
}


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

@media (max-width: 800px) {

    .exam-page {
        padding: 45px 0 55px;
    }

    .exam-content {
        grid-template-columns: 1fr;
    }

    .exam-main-card {
        padding: 32px 24px;
    }

}


@media (max-width: 480px) {

    .exam-main-card {
        padding: 28px 18px;

        border-radius: 14px;
    }

    .exam-main-card h2 {
        font-size: 23px;
    }

    .exam-description {
        font-size: 15px;
    }

    .exam-side-card {
        padding: 18px;
    }

}

/* =========================================================
   EXAM INSTRUCTION PAGE
========================================================= */

.exam-instruction-card {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.exam-instruction-card1 {
    width: 100%;
    max-width: 900px;
    margin: 0 auto !important;
    box-sizing: border-box;}


/* =========================================================
   ALERTS
========================================================= */

.exam-alert {
    display: flex;
    gap: 16px;

    padding: 20px 22px;

    margin-top: 22px;

    border-radius: 12px;

    text-align: left;

    box-sizing: border-box;
}


.exam-alert-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border-radius: 10px;

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

    font-size: 19px;
}


.exam-alert-content {
    flex: 1;
}


.exam-alert-content strong {
    display: block;

    margin-bottom: 5px;

    font-size: 16px;
}


.exam-alert-content p {
    margin: 0;

    line-height: 1.7;

    font-size: 15px;
}


/* WARNING */

.exam-alert-warning {
    background: #fff8e6;

    border: 1px solid #f5df9a;

    color: #5f4b16;
}


.exam-alert-warning .exam-alert-icon {
    background: #fff0c2;

    color: #c58a00;
}


.exam-alert-warning strong {
    color: #8a6700;
}


/* INFORMATION */

.exam-alert-info {
    background: #f1f8fb;

    border: 1px solid #d7e8ef;

    color: #486581;
}


.exam-alert-info .exam-alert-icon {
    background: #e1f1f6;

    color: #087f81;
}


.exam-alert-info strong {
    color: #102a43;
}


/* =========================================================
   EXAM RULES
========================================================= */

.exam-rules {
    display: grid;

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

    gap: 14px;

    margin-top: 24px;
}


.exam-rule {
    display: flex;

    gap: 12px;

    padding: 17px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    text-align: left;

    box-sizing: border-box;
}


.exam-rule-icon {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 9px;

    background: #e8f7f6;

    color: #087f81;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;
}


.exam-rule h3 {
    margin: 1px 0 5px 0;

    color: #102a43;

    font-size: 15px;

    font-weight: 700;
}


.exam-rule p {
    margin: 0;

    color: #627d98;

    font-size: 13px;

    line-height: 1.55;
}


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

.exam-start-actions {
    margin-top: 30px;

    padding-top: 25px;

    border-top: 1px solid #e2e8f0;
}


.exam-start-form {
    margin: 0;
}


.exam-start-actions .exam-button {
    min-width: 210px;
}


.exam-exit-button {
    text-decoration: none;
}


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

@media (max-width: 700px) {

    .exam-instruction-card {
        padding-left: 20px;
        padding-right: 20px;
    }


    .exam-alert {
        padding: 17px;

        gap: 12px;
    }


    .exam-alert-icon {
        flex-basis: 36px;

        width: 36px;
        height: 36px;

        font-size: 16px;
    }


    .exam-alert-content p {
        font-size: 14px;

        line-height: 1.6;
    }


    .exam-rules {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .exam-rule {
        padding: 14px;
    }


    .exam-start-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .exam-start-form {
        width: 100%;
    }


    .exam-start-actions .exam-button,
    .exam-exit-button {
        width: 100%;

        min-width: 0;

        box-sizing: border-box;

        justify-content: center;
    }

}


/* =========================================================
   RUNNING EXAM
   ========================================================= */

.exam-running-page {
    padding-bottom: 50px;
}


/* =========================================================
   EXAM LAYOUT
   ========================================================= */

.exam-running-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 310px;

    gap: 25px;

    align-items: start;

    width: 100%;
}


.exam-questions-area {
    min-width: 0;
}


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

.exam-test-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 20px 24px;

    margin-bottom: 18px;

    box-shadow:
        0 6px 20px rgba(16, 42, 67, 0.06);
}


.exam-test-label {
    display: block;

    color: #087f81;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

    margin-bottom: 4px;
}


.exam-test-header h2 {
    margin: 0;

    color: #102a43;

    font-size: 22px;
}


.exam-question-count {
    display: flex;

    align-items: center;

    gap: 8px;

    background: #e8f7f6;

    color: #087f81;

    border-radius: 9px;

    padding: 9px 13px;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;
}


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

.exam-question-card {
    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 25px;

    margin-bottom: 18px;

    box-shadow:
        0 6px 20px rgba(16, 42, 67, 0.055);

    box-sizing: border-box;
}


.exam-question-number {
    display: inline-flex;

    align-items: center;

    background: #e8f7f6;

    color: #087f81;

    border-radius: 8px;

    padding: 7px 11px;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 15px;
}


.exam-question-text {
    color: #102a43;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 600;

    margin-bottom: 20px;
}


/* =========================================================
   ANSWERS
   ========================================================= */

.exam-answer-list {
    display: grid;

    gap: 9px;

    margin-bottom: 22px;
}


.exam-answer {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    padding: 12px 14px;

    color: #334e68;

    font-size: 15px;

    line-height: 1.55;
}


.exam-answer-number {
    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: #e8f7f6;

    color: #087f81;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   ANSWER INPUT
   ========================================================= */

.exam-answer-input {
    border-top: 1px solid #e2e8f0;

    padding-top: 18px;
}


.exam-answer-input label {
    display: block;

    color: #486581;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 8px;
}


.exam-answer-input label i {
    color: #087f81;

    margin-right: 5px;
}


.exam-answer-input input {
    width: 100%;

    max-width: 150px;

    height: 48px;

    border: 2px solid #d9e2ec;

    border-radius: 10px;

    background: #ffffff;

    color: #102a43;

    text-align: center;

    font-size: 20px;

    font-weight: 700;

    outline: none;

    box-sizing: border-box;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.exam-answer-input input:focus {
    border-color: #159a9c;

    box-shadow:
        0 0 0 3px rgba(21, 154, 156, .12);
}


/* =========================================================
   SUBMIT
   ========================================================= */

.exam-submit-area {
    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 20px;

    margin-top: 5px;

    box-shadow:
        0 6px 20px rgba(16, 42, 67, 0.055);

    text-align: center;
}


.exam-submit-warning {
    color: #627d98;

    font-size: 14px;

    line-height: 1.5;

    margin-bottom: 16px;
}


.exam-submit-warning i {
    color: #087f81;

    margin-right: 5px;
}


.exam-submit-button {
    min-width: 230px;
}


/* =========================================================
   TIMER
   ========================================================= */

.exam-running-sidebar {
    position: sticky;

    top: 20px;
}


.exam-timer-card {
    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 23px;

    text-align: center;

    box-shadow:
        0 7px 22px rgba(16, 42, 67, 0.07);

    margin-bottom: 18px;
}


.exam-timer-icon {
    width: 50px;
    height: 50px;

    margin: 0 auto 12px auto;

    border-radius: 13px;

    background: #e8f7f6;

    color: #087f81;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;
}


.exam-timer-label {
    display: block;

    color: #627d98;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 7px;
}


.exam-timer-value {
    color: #102a43;

    font-size: 29px;

    font-weight: 800;

    letter-spacing: 1px;

    font-variant-numeric: tabular-nums;

    margin-bottom: 10px;
}


.exam-timer-value.timer-warning {
    color: #c58a00;
}


.exam-timer-value.timer-expired {
    color: #c0392b;

    font-size: 19px;
}


.exam-end-time {
    border-top: 1px solid #e2e8f0;

    padding-top: 12px;

    color: #627d98;

    font-size: 13px;
}


.exam-end-time strong {
    color: #102a43;
}


.exam-timer-data {
    display: none;
}


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

.exam-help-card {
    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 20px;

    box-shadow:
        0 7px 22px rgba(16, 42, 67, 0.06);
}


.exam-help-header {
    display: flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 15px;

    margin-bottom: 10px;

    border-bottom: 1px solid #e2e8f0;
}


.exam-help-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 10px;

    background: #e8f7f6;

    color: #087f81;

    display: flex;

    align-items: center;

    justify-content: center;
}


.exam-help-header h3 {
    margin: 0;

    color: #102a43;

    font-size: 16px;
}


.exam-help-header p {
    margin: 3px 0 0 0;

    color: #829ab1;

    font-size: 12px;
}


.exam-help-links {
    display: grid;

    gap: 3px;
}


.exam-help-links a {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 9px 8px;

    border-radius: 8px;

    color: #486581;

    text-decoration: none;

    font-size: 13px;

    line-height: 1.4;

    transition:
        background .2s ease,
        color .2s ease;
}


.exam-help-links a:hover {
    background: #f1f8f8;

    color: #087f81;
}


.exam-help-links a i {
    width: 18px;

    text-align: center;

    color: #159a9c;
}


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

.exam-error-card {
    max-width: 700px;

    margin: 20px auto;

    text-align: center;
}


.exam-error-card .exam-main-icon {
    margin-bottom: 18px;
}


.exam-error-card p {
    max-width: 570px;

    margin-left: auto;

    margin-right: auto;

    line-height: 1.7;
}


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

@media (max-width: 900px) {

    .exam-running-layout {
        grid-template-columns: 1fr;
    }


    .exam-running-sidebar {
        position: static;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 15px;
    }


    .exam-timer-card,
    .exam-help-card {
        margin-bottom: 0;
    }

}


@media (max-width: 700px) {

    .exam-test-header {
        align-items: flex-start;

        flex-direction: column;

        padding: 18px;
    }


    .exam-question-count {
        align-self: flex-start;
    }


    .exam-question-card {
        padding: 19px;

        border-radius: 13px;
    }


    .exam-question-text {
        font-size: 16px;

        line-height: 1.65;
    }


    .exam-answer {
        font-size: 14px;

        padding: 11px;
    }


    .exam-answer-input input {
        max-width: 100%;

        height: 50px;
    }


    .exam-submit-button {
        width: 100%;

        min-width: 0;
    }


    .exam-running-sidebar {
        grid-template-columns: 1fr;
    }


    .exam-timer-card,
    .exam-help-card {
        width: 100%;

        box-sizing: border-box;
    }

}


/* =========================================================
   EXAM RESULTS
========================================================= */

.exam-results-page {
    padding-bottom: 60px;
}


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

.exam-result-header {

    display: flex;
    align-items: center;
    gap: 18px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 22px 26px;

    margin-bottom: 24px;

    box-shadow: 0 8px 24px rgba(16, 42, 67, 0.06);

}

.exam-result-header-icon {

    width: 54px;
    height: 54px;

    border-radius: 14px;

    background: #dff6f4;

    color: #087f81;

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

    font-size: 23px;

    flex-shrink: 0;

}

.exam-result-header span {

    display: block;

    font-size: 13px;

    color: #627d98;

    margin-bottom: 4px;

}

.exam-result-header strong {

    display: block;

    font-size: 21px;

    color: #102a43;

}


/* =========================================================
   RESULTS LAYOUT
========================================================= */

.exam-results-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 300px;

    gap: 24px;

    align-items: start;

}


/* =========================================================
   RESULTS TABLE CARD
========================================================= */

.exam-results-table-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 8px 24px rgba(16, 42, 67, 0.06);

}

.exam-results-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 24px 26px;

    border-bottom: 1px solid #e2e8f0;

}

.exam-results-card-header h2 {

    margin: 7px 0 0;

    color: #102a43;

    font-size: 21px;

}

.exam-results-count {

    background: #dff6f4;

    color: #087f81;

    padding: 8px 13px;

    border-radius: 20px;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

}


/* =========================================================
   TABLE
========================================================= */

.exam-results-table-wrapper {

    width: 100%;

    overflow-x: auto;

}

.exam-results-table {

    width: 100%;

    border-collapse: collapse;

}

.exam-results-table th {

    background: #f8fafc;

    color: #486581;

    font-size: 13px;

    font-weight: 700;

    text-align: left;

    padding: 15px 20px;

    border-bottom: 1px solid #e2e8f0;

}

.exam-results-table td {

    padding: 16px 20px;

    color: #243b53;

    font-size: 15px;

    border-bottom: 1px solid #edf2f7;

}

.exam-results-table tbody tr:last-child td {

    border-bottom: none;

}

.exam-results-table tbody tr:hover {

    background: #f8fbfc;

}


/* =========================================================
   QUESTION NUMBER
========================================================= */

.result-question-number {

    display: inline-flex;

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

    width: 34px;
    height: 34px;

    border-radius: 10px;

    background: #f0f4f8;

    color: #102a43;

    font-weight: 700;

}


/* =========================================================
   SCORE STATUS
========================================================= */

.result-score {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-weight: 700;

}

.result-score-good {

    color: #087f81;

}

.result-score-zero {

    color: #d64545;

}


/* =========================================================
   SUMMARY
========================================================= */

.exam-results-summary {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


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

.exam-score-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 20px;

    box-shadow: 0 8px 24px rgba(16, 42, 67, 0.06);

}

.exam-score-icon {

    width: 42px;
    height: 42px;

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

    border-radius: 11px;

    background: #f0f4f8;

    color: #102a43;

    margin-bottom: 12px;

}

.exam-score-card span {

    display: block;

    color: #627d98;

    font-size: 13px;

    line-height: 1.4;

}

.exam-score-card strong {

    display: block;

    margin-top: 5px;

    color: #102a43;

    font-size: 28px;

    line-height: 1.2;

}


/* =========================================================
   MAIN SCORE
========================================================= */

.exam-score-main {

    background: #dff6f4;

    border-color: #b9e9e6;

}

.exam-score-main .exam-score-icon {

    background: #ffffff;

    color: #087f81;

}

.exam-score-main strong {

    color: #087f81;

}


/* =========================================================
   PERCENT
========================================================= */

.exam-percent-card {

    background: #f8fafc;

}

.exam-percent-card strong {

    font-size: 30px;

}


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

.exam-result-image-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 14px;

    box-shadow: 0 8px 24px rgba(16, 42, 67, 0.06);

    text-align: center;

}

.exam-result-image-card img {

    display: block;

    width: 100%;

    height: auto;

    max-width: 280px;

    margin: 0 auto;

    border-radius: 10px;

}


/* =========================================================
   SAVE STATUS
========================================================= */

.exam-alert-success {

    margin-top: 24px;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 18px 20px;

    border-radius: 14px;

    background: #ecfdf5;

    border: 1px solid #a7f3d0;

    color: #065f46;

}

.exam-alert-success .exam-alert-icon {

    font-size: 22px;

    color: #059669;

    flex-shrink: 0;

}

.exam-alert-success strong {

    display: block;

    margin-bottom: 3px;

}

.exam-alert-success p {

    margin: 0;

    color: #047857;

}


/* =========================================================
   ALREADY SAVED
========================================================= */

.exam-alert-info {

    margin-top: 24px;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 18px 20px;

    border-radius: 14px;

    background: #eff6ff;

    border: 1px solid #bfdbfe;

    color: #1e40af;

}

.exam-alert-info .exam-alert-icon {

    font-size: 22px;

    color: #2563eb;

    flex-shrink: 0;

}

.exam-alert-info strong {

    display: block;

    margin-bottom: 3px;

}

.exam-alert-info p {

    margin: 0;

    color: #1d4ed8;

}


/* =========================================================
   WARNING / ERROR
========================================================= */

.exam-alert-warning {

    margin-top: 24px;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 18px 20px;

    border-radius: 14px;

    background: #fffbeb;

    border: 1px solid #fde68a;

    color: #92400e;

}

.exam-alert-warning .exam-alert-icon {

    font-size: 22px;

    color: #d97706;

    flex-shrink: 0;

}

.exam-alert-warning strong {

    display: block;

    margin-bottom: 3px;

}

.exam-alert-warning p {

    margin: 0;

    color: #a16207;

}


/* =========================================================
   RESULT ACTION
========================================================= */

.exam-result-actions {

    margin-top: 28px;

    display: flex;

    justify-content: center;

}


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

.exam-error-card {

    max-width: 700px;

    margin: 30px auto;

}


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

@media (max-width: 900px) {

    .exam-results-layout {

        grid-template-columns: 1fr;

    }

    .exam-results-summary {

        display: grid;

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

    }

    .exam-result-image-card {

        grid-column: 1 / -1;

    }

}


@media (max-width: 600px) {

    .exam-result-header {

        padding: 18px;

    }

    .exam-result-header-icon {

        width: 46px;
        height: 46px;

        font-size: 20px;

    }

    .exam-result-header strong {

        font-size: 18px;

    }

    .exam-results-card-header {

        padding: 20px;

        align-items: flex-start;

        flex-direction: column;

    }

    .exam-results-summary {

        grid-template-columns: 1fr;

    }

    .exam-result-image-card {

        grid-column: auto;

    }

    .exam-results-table th,
    .exam-results-table td {

        padding: 13px 14px;

    }

}


/* =========================================================
   EDUCATION / SCHOOL ROOMS
========================================================= */

.education-page {
    padding-bottom: 60px;
}


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

.education-header {
    display: flex;
    align-items: center;
    gap: 18px;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;

    padding: 24px 28px;
    margin-bottom: 24px;

    box-shadow: 0 8px 24px rgba(16, 42, 67, 0.06);
}

.education-header-icon {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

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

    border-radius: 15px;

    background: #dff6f4;
    color: #087f81;

    font-size: 25px;
}

.education-header-label {
    display: block;

    color: #627d98;
    font-size: 13px;

    margin-bottom: 4px;
}

.education-header h1 {
    margin: 0;

    color: #102a43;

    font-size: 26px;
    line-height: 1.25;
}

.education-header p {
    margin: 7px 0 0;

    color: #627d98;

    font-size: 15px;
}


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

.education-login-card {
    display: flex;
    align-items: center;
    gap: 22px;

    max-width: 760px;

    margin: 40px auto;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(16, 42, 67, 0.07);
}

.education-login-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

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

    border-radius: 16px;

    background: #fff7ed;
    color: #c2410c;

    font-size: 25px;
}

.education-login-content h2 {
    margin: 0 0 7px;

    color: #102a43;

    font-size: 21px;
}

.education-login-content p {
    margin: 0;

    color: #627d98;

    line-height: 1.6;
}

.education-login-actions {
    display: flex;
    gap: 10px;

    margin-top: 20px;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.education-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        290px;

    gap: 24px;

    align-items: start;
}


/* =========================================================
   ROOMS AREA
========================================================= */

.education-rooms {
    min-width: 0;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    padding: 26px;

    box-shadow: 0 8px 24px rgba(16, 42, 67, 0.06);
}


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

.education-section-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 17px;

    margin-bottom: 20px;

    border-bottom: 1px solid #e2e8f0;
}

.education-section-header span {
    display: block;

    color: #627d98;

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

    text-transform: uppercase;

    letter-spacing: .04em;
}

.education-section-header h2 {
    margin: 5px 0 0;

    color: #102a43;

    font-size: 21px;
}

.education-section-icon {
    width: 42px;
    height: 42px;

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

    border-radius: 11px;

    background: #f0f4f8;

    color: #102a43;

    font-size: 17px;
}

.education-section-header-secondary {
    margin-top: 38px;
}


/* =========================================================
   SCHOOL CORRIDOR
========================================================= */

/*
   მთავარი იდეა:
   ძველი "door" ელემენტები არ შეგვიცვლია.

   შესაბამისად dooranimation.css-ის არსებული
   3D ანიმაცია კვლავ მუშაობს.
*/

.school-corridor {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(110px, 1fr));

    gap: 24px;

    padding: 22px 16px 28px;

    border-radius: 14px;

    /*
       მსუბუქი დერეფნის ეფექტი
    */

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #eef3f7 100%
        );

    border: 1px solid #e2e8f0;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8);
}

.school-corridor-olympiad {
    display: grid;
    grid-template-columns: repeat(2, 180px);
    justify-content: center;
    align-items: start;
    gap: 30px;
    padding: 20px 10px 30px;
 }

.school-corridor-special {
 	display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    align-items: start;
    gap: 25px;
    padding: 20px 10px 30px;
 }



/* =========================================================
   HONOR STUDENTS
========================================================= */

.honor-board-list {
    padding: 7px 20px;
}

.honor-student {
    padding: 15px 0;

    border-bottom: 1px solid #edf2f7;

    color: #243b53;

    font-size: 14px;

    line-height: 1.45;
}

.honor-student:last-child {
    border-bottom: none;
}

.honor-class {
    display: block;

    margin-bottom: 3px;

    color: #829ab1;

    font-size: 12px;

    font-weight: 600;
}

.honor-empty {
    color: #bcccdc;
}


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

.honor-board-footer {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 14px 20px;

    background: #f8fafc;

    color: #627d98;

    font-size: 12px;

    line-height: 1.4;
}

.honor-board-footer i {
    color: #159a9c;
}


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

.education-info-card {
    display: flex;

    gap: 13px;

    padding: 18px;

    background: #dff6f4;

    border: 1px solid #b9e9e6;

    border-radius: 16px;
}

.education-info-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

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

    background: #ffffff;

    color: #087f81;

    border-radius: 10px;
}

.education-info-card h3 {
    margin: 1px 0 5px;

    color: #102a43;

    font-size: 15px;
}

.education-info-card p {
    margin: 0;

    color: #486581;

    font-size: 13px;

    line-height: 1.55;
}


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

@media (max-width: 1100px) {

    .education-layout {
        grid-template-columns: 1fr;
    }

    .education-sidebar {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .school-corridor {
        grid-template-columns:
            repeat(4, minmax(110px, 1fr));
    }

    .school-corridor-special {
        grid-template-columns:
            repeat(4, minmax(110px, 1fr));
    }
}


@media (max-width: 800px) {

    .school-corridor {
        grid-template-columns:
            repeat(3, minmax(100px, 1fr));

        gap: 18px;
    }

    .school-corridor-special {
        grid-template-columns:
            repeat(2, minmax(120px, 1fr));
    }

    .education-sidebar {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .education-header {
        padding: 20px;

        align-items: flex-start;
    }

    .education-header-icon {
        width: 48px;
        height: 48px;

        font-size: 20px;
    }

    .education-header h1 {
        font-size: 21px;
    }

    .education-header p {
        font-size: 14px;
    }

    .education-rooms {
        padding: 18px;
    }

    .school-corridor {
        grid-template-columns:
            repeat(2, minmax(100px, 1fr));

        gap: 14px;

        padding: 16px 10px 20px;
    }

    .school-corridor-olympiad {
        grid-template-columns:
            repeat(2, minmax(100px, 1fr));
    }

    .school-corridor-special {
        grid-template-columns:
            repeat(2, minmax(100px, 1fr));
    }

    .school-door-item {
        min-height: 165px;
    }

    .education-login-card {
        flex-direction: column;

        align-items: flex-start;

        padding: 24px;
    }

    .education-login-actions {
        flex-direction: column;

        width: 100%;
    }

    .education-login-actions a {
        width: 100%;

        justify-content: center;
    }
}


@media (max-width: 430px) {

    .school-corridor,
    .school-corridor-olympiad,
    .school-corridor-special {
        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }

    .school-door-item {
        min-height: 150px;
    }
}

/* =========================================================
   EDUCATION PAGE — COMPACT WIDTH
========================================================= */

.education-page .school-container {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}