.ff-primary {
    font-family: var(--school-head-font-family);
}

.fs-2 {
    font-size: 2rem;
}

.fs-25 {
    font-size: 2.5rem;
}

.fw-semibold {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}

.hidden {
    display: none;
}

.mb-1 {
    margin-bottom: 1rem;
}

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

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.text-center {
    text-align: center;
}

.text-default {
    color: var(--school-body-font-color);
}

.text-primary {
    color: var(--school-primary-color);
}

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-full {
    width: 100%;
}


/* ==========================================================================
   Responsive Utilities
   Mobile: < 768px | Tablet: 768px - 1024px | Desktop: > 1024px
   ========================================================================== */

/* Visibility classes */
.hide-on-mobile,
.hide-on-tablet,
.hide-on-desktop {
    /* Default: visible */
}

@media (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }
    .show-on-mobile-only {
        display: block !important;
    }
}

@media (min-width: 768px) {


    .show-on-mobile-only {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .hide-on-tablet {
        display: none !important;
    }
    .show-on-tablet-only {
        display: block !important;
    }
}

@media (max-width: 767px), (min-width: 1025px) {
    .show-on-tablet-only {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .hide-on-desktop {
        display: none !important;
    }
    .show-on-desktop-only {
        display: block !important;
    }
}

@media (max-width: 1024px) {
    .show-on-desktop-only {
        display: none !important;
    }
}