/* =========================================================
   GENERAL
========================================================= */

body {
    background-color: #f4f7fb;
    color: #243447;
    font-family: Arial, Helvetica, sans-serif;
}

h1,
h2,
h3 {
    font-weight: 700;
}

section {
    scroll-margin-top: 130px;
}


/* =========================================================
   NAVBAR / TITLE
========================================================= */

.navbar {
    border-bottom: 4px solid #0d6efd;
}

#application_title {
    color: #123a63;
    font-size: 2rem;
}

#header small {
    color: #667788;
}


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

.home-hero {
    background: linear-gradient(
        135deg,
        #0d6efd,
        #4f46e5,
        #7c3aed
    );

    color: white;

    padding: 5rem 2rem;

    border-radius: 0 0 35px 35px;

    margin-bottom: 3rem;

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

.home-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.home-hero .lead {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.25rem;
}

.home-hero .btn {
    min-width: 190px;
    margin: 0.4rem;
}


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

.card {
    border: none;
    border-radius: 18px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

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

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.12) !important;
}

.card-body {
    padding: 1.8rem;
}


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

.subject-card {
    color: white;
}

.subject-math {
    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );
}

.subject-science {
    background: linear-gradient(
        135deg,
        #059669,
        #047857
    );
}

.subject-physics {
    background: linear-gradient(
        135deg,
        #7c3aed,
        #5b21b6
    );
}

.subject-biology {
    background: linear-gradient(
        135deg,
        #16a34a,
        #15803d
    );
}

.subject-english {
    background: linear-gradient(
        135deg,
        #ea580c,
        #c2410c
    );
}

.subject-social {
    background: linear-gradient(
        135deg,
        #db2777,
        #be185d
    );
}

.subject-card ul {
    padding-left: 1.2rem;
}


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

.feature-card {
    border-top: 5px solid #0d6efd;
}

.feature-card h3 {
    color: #123a63;
}


/* =========================================================
   REGISTRATION STEPS
========================================================= */

.registration-step {
    position: relative;
    padding-top: 2rem;
}

.step-number {
    width: 55px;
    height: 55px;

    border-radius: 50%;

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

    margin: 0 auto 1rem auto;

    background-color: #0d6efd;
    color: white;

    font-size: 1.4rem;
    font-weight: bold;
}


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

.teacher-section {
    background: linear-gradient(
        135deg,
        #172554,
        #1e3a8a
    );

    color: white;

    border-radius: 25px;

    padding: 3rem;
}


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

.btn {
    border-radius: 10px;
    font-weight: 600;
}

.btn-primary {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}


/* =========================================================
   DASHBOARD PANELS
========================================================= */

.dashboard-card {
    border-left: 6px solid #0d6efd;
}

.dashboard-card.teacher {
    border-left-color: #7c3aed;
}

.dashboard-card.student {
    border-left-color: #059669;
}


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

footer {
    margin-top: 4rem;
    padding: 2rem 0;

    background-color: #172033;
    color: white;
}


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

@media (max-width: 768px) {

    .home-hero {
        padding: 3.5rem 1.2rem;
    }

    .home-hero h1 {
        font-size: 2.2rem;
    }

    #application_title {
        font-size: 1.4rem;
    }
}

/* =========================================================
   UPCOMING ASSESSMENTS SIDE PANEL
========================================================= */

.assessment-panel {
    border-top: 6px solid #dc3545;
}

.assessment-panel .list-group-item {
    background-color: transparent;
}

.assessment-panel h3 {
    font-weight: 600;
}

@media (min-width: 992px) {

    .assessment-panel {
        position: sticky;
        top: 140px;
    }

}