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

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

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

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

@media (max-width: 767px) {
    h1,
    h2,
    h3,
    h4,
    p,
    a,
    button,
    label,
    td,
    th {
        overflow-wrap: anywhere;
    }

    .text-display {
        font-size: 3rem !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
    }

    .text-h1,
    .text-5xl {
        font-size: 2.25rem !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
    }

    .text-h2,
    .text-4xl {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    .text-h3 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
    }

    .p-xl {
        padding: 1rem !important;
    }

    .p-lg {
        padding: 1.25rem !important;
    }

    .px-xl,
    .px-12 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-xl {
        padding-top: 2.75rem !important;
        padding-bottom: 2.75rem !important;
    }

    .py-lg {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .gap-gutter {
        gap: 1rem !important;
    }

    .gap-lg,
    .gap-xl {
        gap: 1.5rem !important;
    }

    .mt-xl {
        margin-top: 2.5rem !important;
    }

    .mb-xl {
        margin-bottom: 2.5rem !important;
    }

    .mt-lg {
        margin-top: 1.5rem !important;
    }

    .mb-lg {
        margin-bottom: 1.5rem !important;
    }

    header > div.h-20 {
        height: 4.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    header > div.h-20 img[src="logo.png"] {
        max-width: 13rem;
        height: auto !important;
        max-height: 2.5rem;
    }

    header a[href="login.html"].bg-primary {
        max-width: 9.5rem;
        padding: 0.65rem 0.8rem !important;
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
        text-align: center;
    }

    main.pt-20 {
        padding-top: 4.5rem !important;
    }

    .hero-grid-surface {
        padding-top: 2.75rem !important;
        padding-bottom: 3.5rem !important;
    }

    .hero-grid-surface .hero-layer {
        align-items: stretch !important;
        gap: 2rem !important;
    }

    .hero-grid-surface .hero-reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-media-card {
        animation: none !important;
    }

    .hero-price-chip {
        left: 0.75rem !important;
        bottom: 0.75rem !important;
        padding: 1rem !important;
    }

    .hero-price-chip p:first-child {
        font-size: 2rem !important;
        line-height: 1 !important;
    }

    .bento-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .bento-grid > * {
        grid-column: 1 / -1 !important;
    }

    .bento-grid ul.grid-cols-2,
    footer .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    #curriculum .sticky {
        position: static !important;
    }

    .contact-grid-surface a[href^="mailto:"],
    .contact-grid-surface a[href^="tel:"] {
        align-items: flex-start !important;
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }

    .contact-grid-surface a[href^="mailto:"] span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .login-grid-surface,
    .register-grid-surface {
        padding: 5.25rem 1rem 2rem !important;
    }

    .login-grid-surface .min-h-\[620px\],
    .register-grid-surface .min-h-\[700px\] {
        min-height: auto !important;
    }

    .auth-media,
    .register-media {
        max-height: 260px !important;
    }

    .auth-media img,
    .register-media img {
        height: 260px !important;
    }

    .register-media img {
        object-fit: contain !important;
    }

    .auth-media .absolute.bottom-8,
    .register-media .absolute.bottom-8 {
        left: 1rem !important;
        right: 1rem !important;
        bottom: 1rem !important;
    }

    .auth-media .absolute.bottom-8 p,
    .register-media .absolute.bottom-8 p {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    aside.fixed {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 4.75rem !important;
        padding: 0 !important;
        border-right: 0 !important;
        border-top: 1px solid #e5e5e5 !important;
        background: rgba(255, 255, 255, 0.96) !important;
        display: flex !important;
        z-index: 70 !important;
    }

    aside.fixed > div {
        display: none !important;
    }

    aside.fixed nav {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        flex: 1 1 auto !important;
        height: 100%;
        margin: 0 !important;
    }

    aside.fixed nav a {
        min-width: 0;
        height: 100%;
        padding: 0.45rem 0.2rem !important;
        border-right: 0 !important;
        border-top: 3px solid transparent !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.15rem !important;
        transform: none !important;
    }

    aside.fixed nav a[class*="border-r-2"] {
        border-top-color: #D8F032 !important;
        background: #f9f9f9 !important;
        color: #000 !important;
    }

    aside.fixed nav a span:not(.material-symbols-outlined) {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    aside.fixed nav a .material-symbols-outlined {
        font-size: 22px !important;
        line-height: 1 !important;
    }

    body > nav.md\:hidden.fixed.bottom-0 {
        display: none !important;
    }

    main[class*="ml-64"] {
        margin-left: 0 !important;
        width: 100% !important;
        padding-bottom: 6rem !important;
    }

    main[class*="ml-64"].pt-16 {
        padding-top: 4.5rem !important;
    }

    main[class*="ml-64"].pt-24 {
        padding-top: 5rem !important;
    }

    main[class*="ml-64"].mt-16 {
        margin-top: 4rem !important;
    }

    body > header.fixed {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    body > header.fixed > div {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    body > header.fixed .relative.w-full.max-w-md,
    body > header.fixed .relative.w-full.max-w-xs,
    body > header.fixed input[placeholder^="Search"] {
        display: none !important;
    }

    body > header.fixed .gap-6 {
        gap: 0.75rem !important;
    }

    body > header.fixed #topbarUserName,
    body > header.fixed .h-8.w-px,
    body > header.fixed .h-8.w-\[1px\] {
        display: none !important;
    }

    main[class*="ml-64"] .flex.justify-between.items-end {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    main[class*="ml-64"] .flex.justify-between.items-start,
    main[class*="ml-64"] .flex.justify-end {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    main[class*="ml-64"] .text-right {
        text-align: left !important;
    }

    main[class*="ml-64"] table {
        min-width: 640px;
    }

    main[class*="ml-64"] .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    #attendanceCalendarGrid {
        gap: 4px !important;
    }

    #attendanceCalendarGrid > div {
        min-height: 68px !important;
        padding: 4px !important;
    }

    #attendanceCalendarGrid .text-\[10px\],
    #attendanceCalendarGrid .text-xs {
        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    section.w-full.max-w-lg {
        padding: 1.25rem !important;
    }
}

@media (max-width: 380px) {
    .text-display {
        font-size: 2.6rem !important;
    }

    .text-h1,
    .text-5xl {
        font-size: 2rem !important;
    }

    header > div.h-20 img[src="logo.png"] {
        max-width: 10.75rem;
    }

    header a[href="login.html"].bg-primary {
        max-width: 7.8rem;
        padding: 0.55rem 0.65rem !important;
    }

    aside.fixed nav a span:not(.material-symbols-outlined) {
        display: none;
    }
}