/* =========================================================
   SSMIET STUDENT DATA CENTER
   ONE COMMON STYLESHEET
========================================================= */


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

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


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background: #f5f7fb;

    color: #12395f;

    line-height: 1.6;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --primary: #0b477d;
    --primary-dark: #07365f;

    --orange: #ff6538;
    --orange-dark: #e85228;

    --green: #16845b;
    --blue: #2878c7;

    --text: #12395f;
    --muted: #66778a;

    --light: #f5f7fb;

    --white: #ffffff;

    --border: #dce5ef;

    --danger: #dc3545;

    --shadow:
        0 10px 30px
        rgba(9, 50, 90, 0.08);

    --radius: 14px;
}


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

a {
    color: inherit;
}


button,
input,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


.container {

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

    margin: 0 auto;
}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar {

    background:
        var(--primary-dark);

    color: #ffffff;

    min-height: 40px;

    font-size: 13px;
}


.top-bar-inner {

    min-height: 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.top-left,
.top-right {

    display: flex;

    align-items: center;

    gap: 10px;
}


.top-right {
    gap: 24px;
}


.top-left i,
.top-right i {

    color: var(--orange);
}


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

.main-header {

    background:
        #ffffff;

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


.header-inner {

    min-height: 110px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.brand {

    display: flex;

    align-items: center;

    gap: 16px;

    min-width: 0;
}


.brand-logo {

    width: 78px;
    height: 78px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;
}


.brand-logo img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


.brand-text h1 {

    color: var(--primary);

    font-size: 22px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.3px;
}


.brand-text p {

    color: var(--muted);

    margin-top: 4px;

    font-size: 14px;
}


/* =========================================================
   SYSTEM BADGE
========================================================= */

.system-badge {

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 290px;

    padding: 12px 18px;

    background: #f7f9fc;

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

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


.badge-icon {

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--orange);

    color:
        #ffffff;

    border-radius:
        11px;

    font-size: 20px;
}


.system-badge strong {

    display: block;

    color: var(--primary);

    font-size: 14px;
}


.system-badge span {

    display: block;

    color: var(--muted);

    font-size: 13px;

    margin-top: 2px;
}


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

.hero {

    position: relative;

    overflow: hidden;

    min-height: 500px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #fff9f6 0%,
            #ffffff 50%,
            #eef5fb 100%
        );
}


.hero-decoration {

    position: absolute;

    width: 480px;
    height: 480px;

    border-radius: 50%;

    background:
        rgba(
            255,
            101,
            56,
            0.07
        );

    top: -210px;
    left: -150px;
}


.hero-content {

    position: relative;

    z-index: 1;

    text-align: center;

    padding: 70px 0;
}


.database-icon {

    width: 82px;
    height: 82px;

    margin:
        0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--orange);

    color:
        #ffffff;

    border-radius: 18px;

    font-size: 38px;

    box-shadow:
        0 12px 25px
        rgba(255, 101, 56, 0.25);
}


.eyebrow {

    color:
        var(--orange);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 12px;
}


.hero h2 {

    color:
        var(--primary);

    font-size:
        clamp(42px, 6vw, 64px);

    line-height: 1.05;

    margin-bottom: 20px;

    font-weight: 800;
}


.hero h2 span {

    color:
        var(--primary);
}


.hero h2 strong {

    color:
        var(--orange);
}


.hero-description {

    max-width: 720px;

    margin:
        0 auto 32px;

    color:
        #536a82;

    font-size: 18px;
}


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

.hero-actions {

    display: flex;

    justify-content: center;

    gap: 14px;

    flex-wrap: wrap;
}


.btn {

    min-width: 190px;

    min-height: 52px;

    padding:
        13px 22px;

    border-radius: 9px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    text-decoration: none;

    font-weight: 700;

    transition:
        0.2s ease;
}


.btn:hover {

    transform:
        translateY(-2px);
}


.btn-primary {

    background:
        var(--orange);

    color:
        #ffffff;

    box-shadow:
        0 8px 18px
        rgba(255, 101, 56, 0.2);
}


.btn-primary:hover {

    background:
        var(--orange-dark);
}


.btn-secondary {

    background:
        #ffffff;

    color:
        var(--primary);

    border:
        2px solid var(--primary);
}


.btn-secondary:hover {

    background:
        var(--primary);

    color:
        #ffffff;
}


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

.features-section {

    background:
        #ffffff;

    padding:
        70px 0;
}


.section-heading {

    text-align:
        center;

    max-width:
        700px;

    margin:
        0 auto 40px;
}


.section-heading h3 {

    color:
        var(--primary);

    font-size:
        32px;

    margin-bottom:
        8px;
}


.section-heading > p:last-child {

    color:
        var(--muted);

    font-size:
        16px;
}


.feature-grid {

    display:
        grid;

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

    gap:
        22px;
}


.feature-card {

    background:
        #ffffff;

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

    border-radius:
        var(--radius);

    padding:
        28px 22px;

    text-align:
        center;

    box-shadow:
        var(--shadow);

    transition:
        0.2s ease;
}


.feature-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(9, 50, 90, 0.12);
}


.feature-icon {

    width: 58px;
    height: 58px;

    margin:
        0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        #fff0eb;

    color:
        var(--orange);

    border-radius:
        14px;

    font-size:
        24px;
}


.feature-card h4 {

    color:
        var(--primary);

    font-size:
        18px;

    margin-bottom:
        8px;
}


.feature-card p {

    color:
        var(--muted);

    font-size:
        14px;
}


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

.site-footer,
.main-footer {

    background:
        var(--primary-dark);

    color:
        #ffffff;

    padding:
        30px 0;
}


.footer-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.site-footer p {

    color:
        #cbd8e5;

    font-size:
        13px;
}


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

.login-page {

    min-height:
        100vh;

    padding:
        35px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #fff8f5,
            #eef5fb
        );
}


.login-container {

    width:
        min(1050px, 100%);

    min-height:
        620px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    overflow:
        hidden;

    background:
        #ffffff;

    border-radius:
        24px;

    box-shadow:
        0 20px 60px
        rgba(15, 55, 95, 0.15);
}


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

.login-brand {

    position:
        relative;

    overflow:
        hidden;

    padding:
        60px 50px;

    background:
        linear-gradient(
            135deg,
            #123f6d,
            #07375f
        );

    color:
        #ffffff;
}


.login-brand::before {

    content:
        "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    top:
        -190px;

    left:
        -120px;
}


.login-brand::after {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            0.05
        );

    bottom:
        -160px;

    right:
        -90px;
}


.login-brand-content {

    position:
        relative;

    z-index:
        2;
}


.login-logo {

    width:
        90px;

    height:
        90px;

    object-fit:
        contain;

    display:
        block;

    margin-bottom:
        22px;
}


.college-name {

    color:
        var(--orange);

    font-size:
        15px;

    font-weight:
        800;

    letter-spacing:
        1.7px;

    line-height:
        1.5;

    margin-bottom:
        18px;
}


.login-brand h1 {

    color:
        #ffffff;

    font-size:
        42px;

    line-height:
        1.1;

    margin-bottom:
        22px;
}


.login-brand h1 span {

    color:
        var(--orange);
}


.login-brand p {

    max-width:
        430px;

    color:
        #e7f0f8;

    font-size:
        15px;

    line-height:
        1.8;

    margin-bottom:
        30px;
}


.login-features {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;

    font-size:
        15px;
}


.login-features div {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}


.login-features i {

    width:
        28px;

    color:
        var(--orange);
}


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

.login-form-section {

    padding:
        60px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.form-header h2 {

    color:
        var(--primary);

    font-size:
        34px;

    margin-bottom:
        8px;
}


.form-header p {

    color:
        var(--muted);

    font-size:
        14px;

    margin-bottom:
        30px;
}


.form-group {

    margin-bottom:
        20px;
}


.form-group label {

    display:
        block;

    color:
        var(--primary);

    font-size:
        14px;

    font-weight:
        700;

    margin-bottom:
        8px;
}


.input-wrapper {

    position:
        relative;
}


.input-wrapper > i {

    position:
        absolute;

    left:
        16px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #8aa0b5;
}


.input-wrapper input {

    width:
        100%;

    height:
        52px;

    padding:
        0 45px;

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

    border-radius:
        10px;

    background:
        #f8fafc;

    outline:
        none;

    color:
        #1a202c;
}


.input-wrapper input:focus {

    border-color:
        var(--orange);

    background:
        #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(
            255,
            102,
            56,
            0.12
        );
}


.password-toggle {

    position:
        absolute;

    right:
        12px;

    top:
        50%;

    transform:
        translateY(-50%);

    border:
        none;

    background:
        transparent;

    color:
        #8aa0b5;
}


.login-options {

    display:
        flex;

    justify-content:
        space-between;

    margin:
        0 0 24px;

    color:
        var(--muted);

    font-size:
        13px;
}


.login-options label {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.login-button {

    width:
        100%;

    height:
        54px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--orange);

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        700;

    transition:
        0.2s ease;
}


.login-button:hover {

    background:
        var(--orange-dark);

    transform:
        translateY(-1px);
}


.login-button:disabled {

    opacity:
        0.7;

    cursor:
        not-allowed;
}


.back-link {

    display:
        block;

    text-align:
        center;

    margin-top:
        25px;

    color:
        var(--muted);

    text-decoration:
        none;

    font-size:
        14px;
}


.back-link:hover {

    color:
        var(--orange);
}


.security-note {

    margin-top:
        25px;

    padding:
        12px;

    text-align:
        center;

    border-radius:
        8px;

    background:
        #f5f8fb;

    color:
        var(--muted);

    font-size:
        12px;
}


.error-message {

    display:
        none;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        20px;

    padding:
        12px 14px;

    border:
        1px solid #ffc8bd;

    border-radius:
        8px;

    background:
        #fff3f0;

    color:
        #d9482b;

    font-size:
        13px;
}


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

.dashboard-main {

    min-height:
        calc(100vh - 150px);

    padding:
        40px 0 60px;

    background:
        #f5f7fb;
}


.dashboard-container {

    width:
        min(
            1200px,
            calc(100% - 40px)
        );
}


.dashboard-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        28px;
}


.section-label {

    display:
        inline-block;

    color:
        var(--orange);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    margin-bottom:
        6px;
}


.dashboard-heading h2 {

    color:
        var(--primary);

    font-size:
        34px;

    line-height:
        1.2;

    margin-bottom:
        6px;
}


.dashboard-heading p {

    color:
        var(--muted);

    font-size:
        15px;
}


.logout-button {

    border:
        none;

    border-radius:
        9px;

    padding:
        11px 18px;

    background:
        var(--primary);

    color:
        #ffffff;

    font-weight:
        700;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;
}


.logout-button:hover {

    background:
        var(--primary-dark);
}


/* =========================================================
   STATISTICS
========================================================= */

.stats-grid {

    display:
        grid;

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

    gap:
        20px;

    margin-bottom:
        24px;
}


.stat-card {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    background:
        #ffffff;

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

    border-radius:
        var(--radius);

    padding:
        22px;

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


.stat-icon {

    width:
        58px;

    height:
        58px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    font-size:
        22px;
}


.stat-icon.orange {

    background:
        #fff0eb;

    color:
        var(--orange);
}


.stat-icon.blue {

    background:
        #eaf3fc;

    color:
        var(--blue);
}


.stat-icon.green {

    background:
        #eaf8f2;

    color:
        var(--green);
}


.stat-card span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.8px;
}


.stat-card strong {

    display:
        block;

    color:
        var(--primary);

    font-size:
        30px;

    line-height:
        1.2;

    margin-top:
        3px;
}


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

.content-card {

    background:
        #ffffff;

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    margin-bottom:
        24px;

    overflow:
        hidden;
}


.card-header {

    padding:
        22px 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

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


.card-header h3 {

    color:
        var(--primary);

    font-size:
        22px;
}


.excel-button {

    border:
        none;

    border-radius:
        9px;

    padding:
        11px 16px;

    background:
        #16845b;

    color:
        #ffffff;

    font-weight:
        700;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;
}


.excel-button:hover {

    background:
        #116b49;
}


/* =========================================================
   FILTERS
========================================================= */

.filter-grid {

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1.4fr auto;

    gap:
        16px;

    padding:
        24px;
}


.form-control label {

    display:
        block;

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        700;

    margin-bottom:
        7px;
}


.search-box {

    position:
        relative;
}


.search-box i {

    position:
        absolute;

    left:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #8aa0b5;
}


.search-box input,
.form-control select {

    width:
        100%;

    height:
        48px;

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

    border-radius:
        9px;

    background:
        #f8fafc;

    outline:
        none;

    color:
        #26384a;
}


.search-box input {

    padding:
        0 15px 0 42px;
}


.form-control select {

    padding:
        0 12px;
}


.search-box input:focus,
.form-control select:focus {

    border-color:
        var(--orange);

    background:
        #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(
            255,
            101,
            56,
            0.1
        );
}


.filter-actions {

    display:
        flex;

    align-items:
        flex-end;

    gap:
        8px;
}


.search-button,
.reset-button {

    height:
        48px;

    padding:
        0 16px;

    border:
        none;

    border-radius:
        9px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    font-weight:
        700;
}


.search-button {

    background:
        var(--primary);

    color:
        #ffffff;
}


.reset-button {

    background:
        #edf2f7;

    color:
        var(--primary);
}


/* =========================================================
   RECORD COUNT
========================================================= */

.record-count {

    padding:
        6px 12px;

    border-radius:
        20px;

    background:
        #eef5fb;

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        700;
}


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

.table-container {

    width:
        100%;
}


.table-scroll {

    width:
        100%;

    overflow-x:
        auto;
}


.student-table {

    width:
        100%;

    border-collapse:
        collapse;

    min-width:
        900px;
}


.student-table th {

    padding:
        14px 16px;

    background:
        #f5f8fb;

    color:
        var(--primary);

    text-align:
        left;

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.4px;

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

    white-space:
        nowrap;
}


.student-table td {

    padding:
        14px 16px;

    color:
        #40576e;

    font-size:
        14px;

    border-bottom:
        1px solid #edf1f5;

    vertical-align:
        middle;
}


.student-table tbody tr:hover {

    background:
        #fbfcfe;
}


.department-badge {

    display:
        inline-block;

    padding:
        4px 9px;

    border-radius:
        20px;

    background:
        #eef5fb;

    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        700;
}


.delete-button {

    border:
        none;

    border-radius:
        7px;

    padding:
        7px 11px;

    background:
        #fff0f1;

    color:
        var(--danger);

    font-size:
        12px;

    font-weight:
        700;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;
}


.delete-button:hover {

    background:
        var(--danger);

    color:
        #ffffff;
}


/* =========================================================
   STATES
========================================================= */

.loading-state,
.empty-state {

    min-height:
        230px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        30px;

    color:
        var(--muted);
}


.loading-state i,
.empty-state > i {

    font-size:
        32px;

    color:
        var(--orange);

    margin-bottom:
        12px;
}


.empty-state h3 {

    color:
        var(--primary);

    margin-bottom:
        5px;
}


.error-state i {

    color:
        var(--danger);
}


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

@media (max-width: 1000px) {

    .filter-grid {

        grid-template-columns:
            1fr 1fr;
    }

    .filter-actions {

        align-items:
            center;
    }

    .feature-grid {

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

}


@media (max-width: 800px) {

    .top-right {

        display:
            none;
    }


    .header-inner {

        flex-direction:
            column;

        padding:
            20px 0;
    }


    .system-badge {

        width:
            100%;

        max-width:
            420px;
    }


    .login-page {

        padding:
            20px;
    }


    .login-container {

        grid-template-columns:
            1fr;

        max-width:
            550px;
    }


    .login-brand {

        padding:
            45px 35px;
    }


    .login-form-section {

        padding:
            45px 35px;
    }


    .stats-grid {

        grid-template-columns:
            1fr;
    }


    .dashboard-heading {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


@media (max-width: 600px) {

    .container,
    .dashboard-container {

        width:
            calc(100% - 24px);
    }


    .brand {

        width:
            100%;

        align-items:
            flex-start;
    }


    .brand-logo {

        width:
            62px;

        height:
            62px;
    }


    .brand-text h1 {

        font-size:
            17px;
    }


    .brand-text p {

        font-size:
            12px;
    }


    .hero {

        min-height:
            auto;
    }


    .hero-content {

        padding:
            55px 0;
    }


    .hero h2 {

        font-size:
            40px;
    }


    .hero-description {

        font-size:
            16px;
    }


    .hero-actions {

        flex-direction:
            column;
    }


    .btn {

        width:
            100%;

        max-width:
            300px;
    }


    .feature-grid {

        grid-template-columns:
            1fr;
    }


    .filter-grid {

        grid-template-columns:
            1fr;
    }


    .filter-actions {

        width:
            100%;
    }


    .search-button,
    .reset-button {

        flex:
            1;
    }


    .card-header {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .excel-button {

        width:
            100%;
    }


    .dashboard-heading h2 {

        font-size:
            28px;
    }


    .login-brand h1 {

        font-size:
            34px;
    }


    .login-form-section {

        padding:
            35px 25px;
    }

}


/* =========================================================
   STUDENT ENTRY HEADER
========================================================= */

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;

    padding: 0 18px;

    border-radius: 8px;

    text-decoration: none;

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

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

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

.home-btn {
    background: #0b3c6d;
    color: #ffffff;

    border: 1px solid #0b3c6d;

    box-shadow:
        0 4px 12px rgba(11, 60, 109, .15);
}

.home-btn:hover {
    background: #082d52;
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 6px 16px rgba(11, 60, 109, .22);
}

.home-btn i {
    font-size: 13px;
}


/* =========================================================
   STUDENT ENTRY HEADER
========================================================= */

.main-header {
    background: #ffffff;

    border-bottom:
        1px solid #e3e9f0;

    box-shadow:
        0 2px 12px rgba(11, 60, 109, .05);
}

.main-header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-header .header-inner {
    min-height: 96px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}

.main-header .brand {
    display: flex;

    align-items: center;

    gap: 15px;
}

.main-header .brand-logo {
    width: 68px;
    height: 68px;

    flex-shrink: 0;

    display: flex;

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

.main-header .ssm-header-logo {
    width: 68px;
    height: 68px;

    object-fit: contain;

    display: block;
}

.main-header .brand-text h1 {
    margin: 0;

    color: #0b3c6d;

    font-size: 21px;

    line-height: 1.25;

    font-weight: 700;
}

.main-header .brand-text p {
    margin: 4px 0 0;

    color: #6b7280;

    font-size: 13px;
}


/* =========================================================
   STUDENT ENTRY RESPONSIVE HEADER
========================================================= */

@media (max-width: 700px) {

    .main-header .header-inner {
        min-height: auto;

        padding-top: 14px;
        padding-bottom: 14px;

        flex-direction: column;

        align-items: flex-start;
    }

    .main-header .brand-text h1 {
        font-size: 17px;
    }

    .main-header .brand-text p {
        font-size: 11px;
    }

    .main-header .brand-logo,
    .main-header .ssm-header-logo {
        width: 58px;
        height: 58px;
    }

    .header-actions {
        width: 100%;
    }

    .header-btn {
        width: 100%;
    }

}