/* =========================================================
   STUDENT AFFAIRS INTRO
========================================================= */

.student-affairs-intro-section {
    padding: 90px 0;
    background: #ffffff;
}
.student-service-intro {
    padding: 20px 0 !important;
    background: #ffffff;
}

/* =========================================================
   GALLERY
========================================================= */

.student-affairs-gallery {
    position: relative;
    max-width: 560px;
}


.student-affairs-main-image {
    height: 390px;
    overflow: hidden;
    border-radius: 23px;
    background: #073b4c;
    box-shadow: 0 20px 45px rgba(5,45,55,.10);
}


    .student-affairs-main-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .6s ease;
    }


.student-affairs-gallery:hover
.student-affairs-main-image img {
    transform: scale(1.035);
}


/* =========================================================
   SMALL IMAGES
========================================================= */

.student-affairs-small-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-top: 9px;
}


    .student-affairs-small-images div {
        height: 100px;
        overflow: hidden;
        border-radius: 11px;
        background: #073b4c;
    }


    .student-affairs-small-images img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s ease;
    }


    .student-affairs-small-images div:hover img {
        transform: scale(1.07);
    }


/* =========================================================
   GALLERY BADGE
========================================================= */

.student-affairs-gallery-badge {
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(7,59,76,.90);
    border: 1px solid rgba(255,255,255,.12);
    color: #ffffff;
    backdrop-filter: blur(8px);
}


    .student-affairs-gallery-badge i {
        width: 31px;
        height: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(88,197,202,.12);
        color: #58c5ca;
        font-size: 10px;
    }


    .student-affairs-gallery-badge span {
        color: #58c5ca;
        font-size: 6px;
        font-weight: 850;
        letter-spacing: 1.3px;
    }


    .student-affairs-gallery-badge strong {
        display: block;
        margin-top: 2px;
        color: #ffffff;
        font-size: 9px;
        letter-spacing: 0;
    }


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

.student-affairs-intro-content {
    max-width: 650px;
}


    .student-affairs-intro-content .section-eyebrow {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 11px;
        color: #0b858d;
        font-size: 10px;
        font-weight: 850;
        letter-spacing: 2px;
    }


        .student-affairs-intro-content .section-eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            border-radius: 5px;
            background: #e5b83d;
        }


    .student-affairs-intro-content h2 {
        margin: 0 0 20px;
        color: #073b4c;
        font-size: clamp(36px, 4vw, 50px);
        font-weight: 850;
        line-height: 1.05;
        letter-spacing: -.9px;
    }


        .student-affairs-intro-content h2 span {
            color: #0b858d;
        }


    .student-affairs-intro-content > p {
        margin: 0 0 13px;
        color: #71818a;
        font-size: 12px;
        line-height: 1.8;
    }


/* =========================================================
   IMPORTANT LINKS
========================================================= */

.student-affairs-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 22px;
}


.student-affairs-link-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: 12px;
    background: #f7f9fa;
    border: 1px solid #e1eaec;
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}


    .student-affairs-link-card:hover {
        transform: translateX(4px);
        border-color: rgba(11,133,141,.22);
        box-shadow: 0 8px 22px rgba(5,45,55,.06);
    }


.student-affairs-link-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eef8f8;
    color: #0b858d;
    font-size: 11px;
}


.student-affairs-link-card div:nth-child(2) {
    flex: 1;
}


.student-affairs-link-card span {
    display: block;
    margin-bottom: 2px;
    color: #0b858d;
    font-size: 6px;
    font-weight: 850;
    letter-spacing: 1.3px;
}


.student-affairs-link-card strong {
    display: block;
    color: #073b4c;
    font-size: 10px;
    font-weight: 800;
}


.student-affairs-link-card small {
    display: block;
    margin-top: 2px;
    color: #89969b;
    font-size: 7px;
}


.student-affairs-link-card > i {
    color: #a9b5b9;
    font-size: 8px;
    transition: color .2s ease, transform .2s ease;
}


.student-affairs-link-card:hover > i {
    color: #0b858d;
    transform: translate(2px,-2px);
}


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

@media (max-width: 767px) {

    .student-affairs-intro-section {
        padding: 60px 0;
    }


    .student-affairs-main-image {
        height: 300px;
        border-radius: 19px;
    }


    .student-affairs-small-images div {
        height: 75px;
    }
}
/* =========================================================
   STUDENT SERVICES
========================================================= */

.student-services-section {
    padding: 90px 0;
    background: #f7f9fa;
}


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

.student-services-heading {
    max-width: 720px;
    margin-bottom: 35px;
}


    .student-services-heading .section-eyebrow {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 10px;
        color: #0b858d;
        font-size: 10px;
        font-weight: 850;
        letter-spacing: 2px;
    }


        .student-services-heading .section-eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            border-radius: 5px;
            background: #e5b83d;
        }


    .student-services-heading h2 {
        margin: 0 0 12px;
        color: #073b4c;
        font-size: clamp(35px, 4vw, 49px);
        font-weight: 850;
        line-height: 1.05;
        letter-spacing: -.8px;
    }


        .student-services-heading h2 span {
            color: #0b858d;
        }


    .student-services-heading p {
        margin: 0;
        color: #71818a;
        font-size: 13px;
        line-height: 1.75;
    }


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

.student-service-card {
    height: 100%;
    padding: 22px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e1e9eb;
    box-shadow: 0 7px 25px rgba(5,45,55,.035);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}


    .student-service-card:hover {
        transform: translateY(-4px);
        border-color: rgba(11,133,141,.20);
        box-shadow: 0 18px 35px rgba(5,45,55,.075);
    }


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

.student-service-card-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf1f2;
}


.student-service-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eef8f8;
    color: #0b858d;
    font-size: 15px;
    transition: background .25s ease, color .25s ease;
}


.student-service-card:hover .student-service-icon {
    background: #0b858d;
    color: #ffffff;
}


.student-service-card-header span {
    display: block;
    margin-bottom: 3px;
    color: #0b858d;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 1.5px;
}


.student-service-card-header h3 {
    margin: 0;
    color: #073b4c;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}


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

.student-service-intro {
    margin: 16px 0;
    color: #71818a;
    font-size: 11px;
    line-height: 1.75;
}


/* =========================================================
   SERVICE LIST
========================================================= */

.student-service-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.student-service-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 9px;
    border-radius: 8px;
    background: #f8fafb;
}


    .student-service-item i {
        flex: 0 0 14px;
        margin-top: 3px;
        color: #0b858d;
        font-size: 9px;
    }


    .student-service-item span {
        color: #687a82;
        font-size: 9px;
        line-height: 1.6;
    }


/* =========================================================
   SUBHEADING
========================================================= */

.student-service-subheading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    margin-bottom: 9px;
    padding-top: 15px;
    border-top: 1px solid #edf1f2;
    color: #073b4c;
    font-size: 10px;
    font-weight: 800;
}


    .student-service-subheading i {
        color: #e5b83d;
        font-size: 10px;
    }


/* =========================================================
   TAGS
========================================================= */

.student-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}


    .student-service-tags span {
        padding: 5px 7px;
        border-radius: 5px;
        background: #eef8f8;
        color: #0b858d;
        font-size: 7px;
        font-weight: 700;
    }


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

@media (max-width: 767px) {

    .student-services-section {
        padding: 60px 0;
    }


    .student-service-card {
        padding: 18px;
    }


    .student-service-card-header h3 {
        font-size: 14px;
    }
}