/* Custom Stylesheet hash:17399154201744671438 dated 17 Jun, 2025 04:36:53+Asia/Karachi */
/* ==========================================================================
   General Settings
========================================================================== */
.branding__logo {
  width: 200px !important;
  max-width: 400px !important;
  max-height: none !important;
}

.ace_scroller {
  color:white;
}
.ace_gutter-cell {
  color:white;
}

.hero-heading {
  color:white;
}

.search--home.sm-max-hide {
  background-image: url('https://i.imgur.com/KaPg9HX.png') !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* ==========================================================================
   Escalation CSS
========================================================================== */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Dark background */
    justify-content: center;
    align-items: center;
    z-index:1;
}
.modal-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    width: 400px;
    text-align: center;
}
.close-btn {
    background: #ff3b3b;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 5px;
}
.submit-btn {
    background: #3efa25;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 5px;
}

.submit-btn:disabled {
    background: #eeeeee;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 5px;
}

/* ==========================================================================
   Footer Styling
========================================================================== */
.footer {
    background-image: url('https://i.imgur.com/KaPg9HX.png') !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    font-size: 14px;
    line-height: 1.6;
    padding: 60px 15px 24px;
}

.footer a {
    color: #ffffff;
}

.footer a:hover {
    color: #cccccc;
    text-decoration: underline;
}

/* Footer Top Section */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

/* Footer Columns */
.footer-logo-column {
    flex: 2; /* Increase the width */
    min-width: 300px;
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack logo and slogan vertically */
    align-items: center; /* Center align logo and slogan */
    text-align: center; /* Center the text */
}

.footer-logo-column img {
    max-width: 200px;
    height: auto;
}

.footer-slogan {
    font-size: 14px;
    color: #ffffff;
    margin-top: 15px;
    text-align: center;
}

.footer-contact-column {
    flex: 1;
    min-width: 200px;
    text-align: left;
}

.footer-contact-column h4 {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 15px;
}

.footer-contact-column .school-details {
    margin-bottom: 15px;
}

.footer-contact-column .school-details b {
    font-size: 14px;
    color: #ffffff;
}

.footer-contact-column .school-details {
    font-size: 14px;
    color: #000000;
    line-height: 1.6;
}

/* Footer Bottom Section */
.copyright-area {
    border-top: 1px solid #444444;
    color: #000000;
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
}

/* ==========================================================================
   Responsive Design
========================================================================== */
.footer-top {
    display: grid; /* Switch to grid layout */
    grid-template-columns: 2fr 1fr 1fr 1fr; /* Define column sizes */
    gap: 20px;
}

@media (max-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr; /* Stack columns vertically on small screens */
        text-align: center;
    }

    .footer-contact-column, .footer-logo-column {
        text-align: center; /* Center text for smaller screens */
    }
}
.toggle-content { display: none; }
input[type="checkbox"]:checked + .toggle-content { display: block; }
a, a:hover, a:focus, a:active, .u-visuallink, .u-visuallink:hover,
.heading--blue,
.fr-toolbar .fr-command.fr-btn.fr-active,
.fr-popup .fr-command.fr-btn.fr-active,
.fr-desktop .fr-command.fr-active:hover,
.fr-desktop .fr-command.fr-active:focus,
.fr-desktop .fr-command.fr-active.fr-selected,
.fr-popup .fr-colors-tabs .fr-colors-tab:hover,
.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab,
.tab__notCurrent a:hover {
	color: #47c4e6;
}

.button--primary,
.button--primary:hover:enabled,
.button--primary:focus:enabled,
.button--primary:active:enabled,
.nav__menu a:hover, .nav__menu a:active, .dd__link:hover,
.fr-popup .fr-checkbox input:checked + span,
.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1="background"]::after,
.fr-image-resizer .fr-handler,
.fr-image-progress-bar-layer > div.fr-loader span,
.autocomplete--field__item:hover, .autocomplete--field__item.is-selected {
	background-color: #47c4e6;
}

.textfield:focus,
.search-wrapslim .inputaddon__field:focus,
.file-btn:focus, .file-btn.is-active, .dz-drag-hover {
	border-color: #47c4e6;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 4px -1px #47c4e6;
}

.button--primary:focus:enabled, .button--primary:active:enabled,
.select:focus, .drill-default:focus, .drill-default.drill-focus {
	box-shadow: 0 0 3px 0 #47c4e6;
}

.tab > li,
.textfield.picker__input--active,
.textfield--heading:focus,
.pager__selected,
.tab__notCurrent:hover,
.picker__select--month:focus, .picker__select--year:focus,
.picker__day--highlighted, .picker__day--selected:hover,
.picker--focused .picker__day--selected, .picker__button--clear:focus,
.picker__button--close:focus,
.fr-popup .fr-input-line input[type="text"]:focus,
.fr-popup .fr-input-line textarea:focus,
.fr-popup .fr-checkbox input:checked + span,
.fr-popup .fr-checkbox input:focus + span,
.fr-image-resizer, .fr-image-upload-layer.fr-drop,
table td.fr-selected-cell, table th.fr-selected-cell,
.fr-table-resizer div,
.fr-popup .fr-table-size .fr-select-table-size > span.hover > span {
	border-color: #47c4e6;
}

input[type="checkbox"].switch:focus + div {
	box-shadow: 0 0 .2em 1px #47c4e6, 0 1px 1px hsla(0,0%,100%,.6);
}

.picker__day--today:before,
.picker__button--today:before {
	border-top-color: #47c4e6;
}