/* ============================================================
   TALEEM NATIONAL ACADEMY
   RESPONSIVE.CSS
   Final Responsive System

   IMPORTANT:
   - Hero/slider HEIGHT is controlled by inline styles in index.php.
   - This file does NOT override hero-section/hero-slider height.
   - Load this file AFTER home.css.
============================================================ */

/* ============================================================
   01. GLOBAL SAFETY
============================================================ */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

main,
section,
header,
footer {
    width: 100%;
    max-width: 100%;
}

a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span {
    overflow-wrap: break-word;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}

input,
select,
textarea {
    width: 100%;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   02. GRID / FLEX SAFETY
============================================================ */

.quick-grid,
.notice-container,
.about-grid,
.academic-grid,
.stats-grid,
.facilities-grid,
.achievement-grid,
.events-grid,
.gallery-grid,
.portal-grid,
.portal-features,
.contact-grid,
.form-row,
.footer-grid {
    min-width: 0;
    max-width: 100%;
}

.quick-grid > *,
.notice-container > *,
.about-grid > *,
.academic-grid > *,
.stats-grid > *,
.facilities-grid > *,
.achievement-grid > *,
.events-grid > *,
.gallery-grid > *,
.portal-grid > *,
.portal-features > *,
.contact-grid > *,
.form-row > *,
.footer-grid > * {
    min-width: 0;
    max-width: 100%;
}

/* ============================================================
   03. HERO RESPONSIVE DESIGN
   HEIGHT IS NOT TOUCHED HERE.
============================================================ */

.hero-section,
.hero-slider,
.hero-slide {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.hero-slide > img {
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.hero-content {
    width: 100% !important;
    max-width: 1200px !important;
}

/* ============================================================
   04. LARGE TABLET / SMALL DESKTOP — 1200px
============================================================ */

@media (max-width: 1200px) {

    .container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    .hero-content h1 {
        max-width: 620px !important;
        font-size: 28px !important;
    }

    .hero-content > p {
        max-width: 560px !important;
        font-size: 12px !important;
    }

    .about-grid,
    .portal-grid {
        gap: 50px;
    }

}

/* ============================================================
   05. TABLET — 991px AND BELOW
============================================================ */

@media (max-width: 991px) {

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* HERO */

    .hero-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .hero-content h1 {
        max-width: 600px !important;
        font-size: 25px !important;
        line-height: 1.08 !important;
    }

    .hero-content > p {
        max-width: 520px !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    .hero-badge {
        min-height: 32px !important;
        padding: 0 14px !important;
        font-size: 10px !important;
        margin-bottom: 10px !important;
    }

    .hero-buttons {
        gap: 8px !important;
        margin-top: 14px !important;
    }

    .hero-buttons .btn {
        min-height: 38px !important;
        padding: 0 16px !important;
        font-size: 10px !important;
    }

    .slider-arrow {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }

    .slider-prev {
        left: 12px !important;
    }

    .slider-next {
        right: 12px !important;
    }

    .slider-dots {
        bottom: 14px !important;
    }

    /* QUICK ACCESS */

    .quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    /* NOTICE */

    .notice-container {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .view-all {
        justify-content: flex-start !important;
    }

    /* LEADERSHIP */

    .leadership-section {
        padding: 65px 20px !important;
    }

    .leadership-slider {
        max-width: 760px !important;
    }

    /* ABOUT */

    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 42px !important;
    }

    .about-image,
    .about-content {
        width: 100%;
        max-width: 100%;
    }

    /* ACADEMIC */

    .academic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* FACILITIES */

    .facilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* ACHIEVEMENT */

    .achievement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* EVENTS */

    .events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* GALLERY */

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* PORTAL / PWA */

    .portal-grid {
        grid-template-columns: 1fr !important;
        gap: 42px !important;
    }

    .portal-image {
        width: 100% !important;
        justify-content: center !important;
    }

    .phone-mockup {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* CONTACT */

    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

}

/* ============================================================
   06. MOBILE — 767px AND BELOW
============================================================ */

@media (max-width: 767px) {

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* GENERAL SECTION SPACING */

    .section {
        overflow-x: hidden;
    }

    .section-heading,
    .leadership-heading {
        max-width: 100%;
    }

    .section-heading h2,
    .leadership-heading h2 {
        font-size: 27px !important;
        line-height: 1.2 !important;
    }

    .section-heading p,
    .leadership-heading p {
        font-size: 12px !important;
        line-height: 1.65 !important;
    }

    /* HERO - NO HEIGHT OVERRIDE */

    .hero-content {
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.76) 0%,
                rgba(0, 0, 0, 0.54) 62%,
                rgba(0, 0, 0, 0.18) 100%
            ) !important;
    }

    .hero-badge {
        min-height: 0 !important;
        padding: 5px 9px !important;
        margin-bottom: 6px !important;
        border-radius: 5px !important;
        font-size: 8px !important;
    }

    .hero-content h1 {
        width: 100% !important;
        max-width: 82% !important;
        margin: 0 0 6px !important;
        font-size: 20px !important;
        line-height: 1.06 !important;
        letter-spacing: -0.2px !important;
    }

    .hero-content > p {
        width: 100% !important;
        max-width: 82% !important;
        margin: 0 0 8px !important;
        font-size: 9px !important;
        line-height: 1.35 !important;
    }

    .hero-buttons {
        gap: 6px !important;
        margin-top: 4px !important;
    }

    .hero-buttons .btn {
        min-height: 29px !important;
        padding: 6px 9px !important;
        border-radius: 5px !important;
        font-size: 8px !important;
    }

    .slider-arrow {
        width: 29px !important;
        height: 29px !important;
        font-size: 9px !important;
    }

    .slider-prev {
        left: 7px !important;
    }

    .slider-next {
        right: 7px !important;
    }

    .slider-dots {
        bottom: 7px !important;
        gap: 4px !important;
    }

    .slider-dots .dot {
        width: 5px !important;
        height: 5px !important;
    }

    .slider-dots .dot.active {
        width: 14px !important;
    }

    /* QUICK ACCESS */

    .quick-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 11px !important;
        width: 100% !important;
        margin-top: 28px !important;
    }

    .quick-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 145px !important;
        padding: 18px 8px !important;
    }

    .quick-icon {
        width: 54px !important;
        height: 54px !important;
        border-radius: 15px !important;
        font-size: 21px !important;
    }

    .quick-card h3 {
        width: 100% !important;
        margin-top: 12px !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .quick-card p {
        width: 100% !important;
        font-size: 9.5px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* NOTICE */

    .notice-section {
        padding: 26px 0 !important;
    }

    .notice-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .notice-title {
        width: 100% !important;
    }

    .notice-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 18px !important;
    }

    .notice-item {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;
        gap: 9px !important;
        padding: 8px 9px !important;
    }

    .notice-date {
        width: 43px !important;
        min-height: 43px !important;
    }

    .notice-content {
        min-width: 0 !important;
    }

    .notice-content h3,
    .notice-content p {
        min-width: 0 !important;
    }

    .new-badge {
        padding: 3px 5px !important;
        font-size: 7px !important;
    }

    /* LEADERSHIP */

    .leadership-section {
        padding: 48px 14px !important;
    }

    .leadership-heading {
        margin-bottom: 28px !important;
    }

    .leadership-slider {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 15px !important;
    }

    .leadership-card {
        border-radius: 15px !important;
    }

    .leadership-card img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    .leadership-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 17px !important;
    }

    .leadership-prev {
        left: 7px !important;
    }

    .leadership-next {
        right: 7px !important;
    }

    /* ABOUT */

    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .about-image {
        width: 100% !important;
        max-width: 100% !important;
    }

    .image-frame img {
        height: 320px !important;
    }

    .experience-box {
        right: 8px !important;
        bottom: -18px !important;
        padding: 13px 16px !important;
    }

    .experience-box strong {
        font-size: 27px !important;
    }

    .experience-box span {
        font-size: 9px !important;
    }

    .about-content h2 {
        font-size: 29px !important;
    }

    .about-features {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px 12px !important;
    }

    .about-features div {
        min-width: 0 !important;
        font-size: 11px !important;
    }

    /* ACADEMIC */

    .academic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 11px !important;
        margin-top: 30px !important;
    }

    .academic-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 18px 11px !important;
        border-radius: 14px !important;
    }

    .academic-icon {
        width: 47px !important;
        height: 47px !important;
        border-radius: 13px !important;
        font-size: 18px !important;
    }

    .academic-card h3 {
        margin-top: 13px !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
    }

    .academic-card p {
        margin-top: 6px !important;
        font-size: 10px !important;
        line-height: 1.55 !important;
        overflow-wrap: anywhere !important;
    }

    /* STATS */

    .stats-section {
        padding: 34px 0 !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        row-gap: 22px !important;
    }

    .stat-box {
        padding: 9px !important;
        border-right: 0 !important;
    }

    .stat-box i {
        font-size: 20px !important;
    }

    .stat-box strong {
        font-size: 26px !important;
    }

    .stat-box span {
        font-size: 9px !important;
    }

    /* FACILITIES */

    .facilities-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 11px !important;
        width: 100% !important;
        margin-top: 28px !important;
    }

    .facility-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-radius: 14px !important;
    }

    .facility-card > img {
        display: block !important;
        width: 100% !important;
        height: 125px !important;
        object-fit: cover !important;
    }

    .facility-content {
        width: 100% !important;
        padding: 16px 9px 15px !important;
    }

    .facility-icon {
        width: 42px !important;
        height: 42px !important;
        margin-top: -36px !important;
        margin-bottom: 12px !important;
        border-width: 3px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
    }

    .facility-content h3 {
        width: 100% !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .facility-content p {
        width: 100% !important;
        margin-top: 5px !important;
        font-size: 9.5px !important;
        line-height: 1.5 !important;
        overflow-wrap: anywhere !important;
    }

    /* ACHIEVEMENT */

    .achievement-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-top: 28px !important;
    }

    .achievement-card {
        min-height: 0 !important;
        padding: 26px 18px 22px !important;
    }

    .achievement-number {
        font-size: 40px !important;
    }

    .achievement-icon {
        width: 54px !important;
        height: 54px !important;
        font-size: 21px !important;
    }

    /* EVENTS */

    .events-grid {
        grid-template-columns: 1fr !important;
        gap: 17px !important;
        margin-top: 28px !important;
    }

    .event-image img {
        height: 210px !important;
    }

    /* GALLERY */

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        margin-top: 28px !important;
    }

    .gallery-item {
        height: 155px !important;
        border-radius: 11px !important;
    }

    /* ADMISSION CTA */

    .admission-cta {
        min-height: 360px !important;
    }

    .cta-content h2 {
        font-size: 32px !important;
    }

    .cta-content p {
        font-size: 12px !important;
    }

    .cta-buttons {
        gap: 9px !important;
    }

    /* PORTAL / PWA */

    .portal-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
        width: 100% !important;
    }

    .portal-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .portal-content h2 {
        max-width: 100% !important;
        font-size: 29px !important;
        line-height: 1.2 !important;
    }

    .portal-content p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 11.5px !important;
        line-height: 1.7 !important;
    }

    .portal-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 12px !important;
        width: 100% !important;
    }

    .portal-features div {
        min-width: 0 !important;
        font-size: 10.5px !important;
    }

    .portal-image {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .phone-mockup {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 250px !important;
        max-width: calc(100vw - 36px) !important;
        margin: 0 auto !important;
        border-radius: 34px !important;
        padding: 8px !important;
    }

    .phone-screen {
        width: 100% !important;
        min-height: 470px !important;
        border-radius: 28px !important;
    }

    .phone-top {
        min-height: 95px !important;
        padding: 20px 16px 30px !important;
    }

    .student-profile {
        margin-left: 11px !important;
        margin-right: 11px !important;
        padding: 12px !important;
    }

    .phone-cards {
        gap: 9px !important;
        padding: 17px 11px !important;
    }

    .phone-cards div {
        min-height: 88px !important;
        padding: 15px 6px !important;
    }

    /* CONTACT */

    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin-top: 28px !important;
    }

    .contact-item {
        width: 100% !important;
        padding: 15px !important;
    }

    .contact-icon {
        width: 44px !important;
        height: 44px !important;
    }

    .contact-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* FOOTER */

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .footer-bottom {
        text-align: center !important;
    }

}

/* ============================================================
   07. SMALL MOBILE — 480px AND BELOW
============================================================ */

@media (max-width: 480px) {

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* HERO - HEIGHT STILL UNTOUCHED */

    .hero-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero-badge {
        padding: 4px 7px !important;
        font-size: 7px !important;
    }

    .hero-content h1 {
        max-width: 80% !important;
        font-size: 16px !important;
        line-height: 1.05 !important;
    }

    .hero-content > p {
        max-width: 80% !important;
        font-size: 8px !important;
        line-height: 1.3 !important;
    }

    .hero-buttons {
        gap: 4px !important;
    }

    .hero-buttons .btn {
        min-height: 24px !important;
        padding: 4px 6px !important;
        font-size: 6.5px !important;
    }

    .slider-arrow {
        width: 24px !important;
        height: 24px !important;
    }

    .slider-prev {
        left: 5px !important;
    }

    .slider-next {
        right: 5px !important;
    }

    /* TWO-COLUMN MOBILE GRIDS */

    .quick-grid,
    .academic-grid,
    .facilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .quick-card {
        min-height: 132px !important;
        padding: 16px 6px !important;
    }

    .quick-icon {
        width: 49px !important;
        height: 49px !important;
        font-size: 19px !important;
    }

    .quick-card h3 {
        font-size: 12px !important;
    }

    .quick-card p {
        font-size: 9px !important;
    }

    .academic-card {
        padding: 16px 9px !important;
    }

    .academic-icon {
        width: 43px !important;
        height: 43px !important;
        font-size: 17px !important;
    }

    .academic-card h3 {
        font-size: 13px !important;
    }

    .academic-card p {
        font-size: 9.5px !important;
    }

    .facility-card > img {
        height: 112px !important;
    }

    .facility-content {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .facility-content h3 {
        font-size: 12px !important;
    }

    .facility-content p {
        font-size: 9px !important;
    }

    .gallery-item {
        height: 135px !important;
    }

    .about-features,
    .portal-features {
        grid-template-columns: 1fr 1fr !important;
    }

    .portal-content h2 {
        font-size: 26px !important;
    }

    .phone-mockup {
        width: 235px !important;
        max-width: calc(100vw - 28px) !important;
    }

    .phone-screen {
        min-height: 445px !important;
    }

    .cta-content h2 {
        font-size: 28px !important;
    }

}

/* ============================================================
   08. VERY SMALL MOBILE — 380px AND BELOW
============================================================ */

@media (max-width: 380px) {

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .hero-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .hero-content h1 {
        max-width: 78% !important;
        font-size: 14px !important;
    }

    .hero-content > p {
        max-width: 78% !important;
        font-size: 7.5px !important;
    }

    .quick-grid,
    .academic-grid,
    .facilities-grid {
        gap: 7px !important;
    }

    .quick-card {
        min-height: 125px !important;
    }

    .quick-card h3,
    .facility-content h3,
    .academic-card h3 {
        font-size: 11.5px !important;
    }

    .achievement-grid,
    .events-grid {
        grid-template-columns: 1fr !important;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .gallery-item {
        height: 120px !important;
    }

    .phone-mockup {
        width: 220px !important;
        max-width: calc(100vw - 24px) !important;
    }

}

/* ============================================================
   09. LANDSCAPE MOBILE
   No hero-height override.
============================================================ */

@media (max-height: 500px) and (orientation: landscape) {

    .hero-content h1 {
        font-size: 18px !important;
    }

    .hero-content > p {
        font-size: 8.5px !important;
    }

    .hero-buttons .btn {
        min-height: 26px !important;
        font-size: 7px !important;
    }

}

/* ============================================================
   10. PRINT
============================================================ */

@media print {

    .slider-arrow,
    .slider-dots,
    .leadership-btn,
    .leadership-dots,
    .whatsapp-float,
    .back-to-top,
    .scroll-top,
    .scroll-to-top {
        display: none !important;
    }

}

/* ============================================================
   FINAL MOBILE HOME PAGE DESIGN FIX
   Quick Access + Notice + Academic Excellence
============================================================ */

@media (max-width: 767px) {

    /* ========================================================
       GLOBAL MOBILE SECTION
    ======================================================== */

    .section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .section-heading {
        margin-bottom: 0 !important;
    }

    .section-heading h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .section-heading p {
        font-size: 12px !important;
        line-height: 1.65 !important;
        max-width: 330px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* ========================================================
       QUICK ACCESS
    ======================================================== */

    .quick-access {
        overflow: hidden !important;
    }

    .quick-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-top: 28px !important;
    }

    .quick-card {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 145px !important;

        padding: 18px 8px !important;

        border-radius: 16px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
    }

    .quick-icon {
        width: 54px !important;
        height: 54px !important;

        border-radius: 15px !important;

        font-size: 21px !important;

        flex-shrink: 0 !important;
    }

    .quick-card h3 {
        width: 100% !important;

        margin-top: 12px !important;

        font-size: 13.5px !important;
        line-height: 1.3 !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .quick-card p {
        width: 100% !important;

        margin-top: 4px !important;

        font-size: 9.5px !important;
        line-height: 1.4 !important;

        text-align: center !important;

        white-space: normal !important;
    }


    /* ========================================================
       NOTICE BOARD
    ======================================================== */

    .notice-section {
        padding: 32px 0 !important;

        overflow: hidden !important;
    }

    .notice-container {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;

        gap: 18px !important;
    }

    .notice-title {
        display: flex !important;

        width: 100% !important;

        align-items: center !important;

        gap: 12px !important;
    }

    .notice-icon {
        width: 48px !important;
        height: 48px !important;

        border-radius: 13px !important;

        font-size: 18px !important;
    }

    .notice-title span {
        font-size: 8px !important;
    }

    .notice-title h2 {
        font-size: 20px !important;
    }

    .notice-list {
        width: 100% !important;

        gap: 10px !important;
    }

    .notice-item {
        display: grid !important;

        grid-template-columns: 48px minmax(0, 1fr) auto !important;

        align-items: center !important;

        width: 100% !important;
        min-width: 0 !important;

        min-height: 72px !important;

        padding: 10px !important;

        gap: 10px !important;

        border-radius: 12px !important;
    }

    .notice-date {
        width: 48px !important;
        min-width: 48px !important;

        min-height: 48px !important;
    }

    .notice-content {
        width: 100% !important;
        min-width: 0 !important;
    }

    .notice-content h3 {
        width: 100% !important;

        font-size: 11.5px !important;
        line-height: 1.35 !important;

        white-space: normal !important;

        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;

        overflow: hidden !important;
    }

    .notice-content p {
        display: none !important;
    }

    .new-badge {
        padding: 3px 5px !important;

        font-size: 6.5px !important;

        white-space: nowrap !important;
    }

    .notice-item > i {
        display: none !important;
    }

    .view-all {
        width: 100% !important;

        justify-content: center !important;

        padding-top: 4px !important;

        font-size: 11px !important;
    }


    /* ========================================================
       ACADEMIC EXCELLENCE
    ======================================================== */

    .academic-section {
        overflow: hidden !important;
    }

    .academic-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        width: 100% !important;

        gap: 14px !important;

        margin-top: 30px !important;
    }

    .academic-card {
        width: 100% !important;
        min-width: 0 !important;

        min-height: auto !important;

        padding: 20px !important;

        border-radius: 16px !important;
    }

    .academic-icon {
        width: 52px !important;
        height: 52px !important;

        border-radius: 14px !important;

        font-size: 20px !important;
    }

    .academic-card h3 {
        margin-top: 14px !important;

        font-size: 16px !important;
        line-height: 1.35 !important;

        white-space: normal !important;
    }

    .academic-card p {
        margin-top: 7px !important;

        font-size: 11.5px !important;
        line-height: 1.65 !important;

        white-space: normal !important;
    }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

    .quick-grid {
        gap: 9px !important;
    }

    .quick-card {
        min-height: 135px !important;

        padding: 16px 6px !important;
    }

    .quick-icon {
        width: 50px !important;
        height: 50px !important;

        font-size: 19px !important;
    }

    .quick-card h3 {
        font-size: 12.5px !important;
    }

    .quick-card p {
        font-size: 9px !important;
    }

    .notice-item {
        grid-template-columns: 45px minmax(0, 1fr) auto !important;

        gap: 8px !important;

        padding: 9px 8px !important;
    }

    .notice-date {
        width: 45px !important;
        min-width: 45px !important;
    }

    .academic-card {
        padding: 18px 16px !important;
    }

}