:root{
    --body-bg: #ffffff;
    --theme-color: #E8063C;
    --theme-color2: #FFD600;
    --title-color: #000000;
    --body-color: #444444;
    --vs-secondary-color: #18a166;
    --smoke-color: #F0F6FA;
    --light-color: #f8f9fa;
    --black-color: #000000;
    --white-color: #ffffff;
    --yellow-color: #fec624;
    --success-color: #28a745;
    --error-color: #dc3545;
    --border-color: #E0E0E0;
    --title-font: "Fredoka", sans-serif;
    --body-font: "Jost", sans-serif;
    --icon-font: "Font Awesome 5 Pro";
    --main-container: 1290px;
    --container-gutters: 30px;
    --section-space: 120px;
    --section-space-mobile: 80px;
    --section-title-space: 60px;
    --ripple-ani-duration: 5s;
}

body {
  font-family: 'Segoe UI', sans-serif;
    margin: 0px;
    padding: 0px;
}
html {
  scroll-behavior: smooth;
}

/* Preloader Styles */
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #fff; /* background color */
    display: flex;
    justify-content: center;
    align-items: center;
}


/*Navigation Bar*/
.navbar {
  padding: 1rem 0;
}
.navbar-brand img {
  height: 60px;
}
.nav-link {
  color: #002f6c !important;
  font-weight: 500;
  position: relative;
  margin: 0 12px;
  font-size: 16px;
}
.nav-link.active {
  color: #e30613 !important;
}
.nav-link::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: #002f6c;
  position: absolute;
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}
.btn-rounded {
  background-color: #002f6c;
  color: white;
  border-radius: 999px;
  padding: 5px 24px;
  font-weight: 500;
  font-size: 14px;
  border: none;
  transition: 0.3s;
}
.btn-rounded:hover {
  background-color: #001d45;
  color: white;
}
/* Slightly reduce nav link margins for smaller screens */
@media (max-width: 1200px) {
  .nav-link {
    padding: 4px 18px;
    font-size: 13px;
    border-radius: 25px;
    margin-right: 5px;
  }
}

/* Fix button sizing & spacing on tablets */
@media (max-width: 1024px) {
  .btn-rounded {
    padding: 4px 18px;
    font-size: 13px;
    border-radius: 25px;
    margin-right: 5px;
  }

  .d-flex a:last-child {
    margin-right: 0;
  }
}

.modal.fade .modal-dialog {
    transform: translateY(50px);
    transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
    transform: translateY(0);
}
#imageModal .modal-dialog {
    max-width: 33%; /* Default for larger screens */
    margin: auto;   /* Center horizontally */
}

/* Laptop L (≤1440px) */
@media (max-width: 1440px) {
    #imageModal .modal-dialog {
        max-width: 36%;
    }
}

/* Laptop (≤1024px) */
@media (max-width: 1024px) {
    #imageModal .modal-dialog {
        max-width: 52%;
    }
}

/* Tablet (≤768px) */
@media (max-width: 768px) {
    #imageModal .modal-dialog {
        max-width: 70%;
    }
}

/* Mobile (≤750px) */
@media (max-width: 750px) {
    #imageModal .modal-dialog {
        max-width: 100%;
    }
}


#imageModal .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}




.hero-img {
  margin-top: 115px;
  height: auto;
  width: 100%;
  /*max-height: 400px;*/
}


.facilities .card {
  border: none;
  text-align: center;
  padding: 30px 15px;
  min-height: 180px;
}

.asset-b-gallery{
  width: 110px;
  height: 115px;
  position: relative;
  left: 6px;
  top: 450px;
}

.asset-a-gallery{
  width: 110px;
  height: 115px;
  position: relative;
  left: 6px;
  top: 200px;
}
.asset-d-gallery{
  width: 110px;
  height: 115px;
  position: relative;
  left: 6px;
  top:960px;
}

.gallery-images {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.rules .card {
  background: red;
  color: white;
  text-align: center;
  padding: 40px 20px;
  border: none;
}

.activity-icon {
  width: 65px;
  margin-bottom: 10px;
}
.activity-title {
  color: #e30613;
  font-weight: 600;
}
/*.activity-card:nth-child(even) {*/
/*  background-color: #f8f9fa;*/
/*}*/

.activity-img{
  width: 500px;
  height: 350px;
}

.day-card {
  width: 110px;
  height: 150px;
  background-color: #d1d9ed;
  border-radius: 5px;
  text-align: center;
  padding-top: 10px;
}

.day-card.today {
  background-color: #ED1C24;
  color: white;
}

.day-name{
  color: rgba(0, 47, 108, 0.85);
  font-size: 33px;
}
.day-num{
  color: rgba(0, 47, 108, 0.85);
  font-size: 30px;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 47, 108, 0.85);
  border-radius: 50%;
  margin: 15px auto 0;
}


.hero-section-about-page{
  margin-top:100px;
}

.pagination .page-link {
    border-radius: 50% !important;
    margin: 0 5px;
    color: #0d6efd;
    font-weight: bold;
}

.pagination .active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.gallery-page{
    margin-top:100px;
}

.news-card img {
    height: 220px;
    object-fit: cover;
}

.news-card .card-body {
    padding: 1.5rem;
    min-height: 150px;
}

.news-card .date-ribbon {
    position: absolute;
    bottom: -40px;
    left: 11px;
    background-color: #003366;
    color: white;
    text-align: center;
    padding: 5px 10px;
    border-radius: 4px 4px 0 0;
    font-family: Arial, sans-serif;
}

.news-card .date-ribbon .day {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
}

.news-card .date-ribbon .month {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.news-card .date-ribbon .year {
    display: block;
    font-size: 0.7rem;
}

.footer-pensil-logo{
    position: absolute;
    right: 66px;
    bottom: 25px;
    height: 100%;
    max-height: 305px;
    pointer-events: none;
}
@media (max-width: 991.98px) and (min-width: 768px) {
    .footer-pensil-logo {
        right: 11px;
    }
}
@media (max-width: 760px)  {
    .footer-pensil-logo {
        display: none;
    }
}


.gallery-card {
    height: 250px; /* fixed height for uniformity */
}
.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* no stretching */
    transition: transform 0.3s ease;
}
.gallery-image:hover {
    transform: scale(1.05);
}


.search-box {
    max-width: 500px;
}
.category-btn {
    background-color: #dc3545;
    color: white;
    font-weight: bold;
}
.category-btn:hover {
    background-color: #c82333;
    color: white;
}
.session-title {
    color: #003366;
    font-weight: bold;
}
.read-more-btn {
    border: none;
    font-weight: bold;
}
.read-more-btn:hover {
    background-color: #c82333;
}
.pagination .page-item.active .page-link {
    background-color: #dc3545;
    border-color: #dc3545;
}
.contact-us-page {
    margin-top: 100px;
}

.info-style2 {
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 47, 108, 0.3); /* 0.3 = 30% opacity */
    /*box-shadow: 0 2px 8px rgba(0,0,0,0.05);*/
    transition: all 0.3s ease;
}

.info-style2:hover {
    transform: translateY(5px);
}

.info-style2::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    box-sizing: border-box;
    pointer-events: none;
}

.info-style2:hover::before {
    border-color: #002f6c;
    animation: border-run 1s linear forwards;
}

@keyframes border-run {
    0% { clip-path: inset(0 100% 100% 0); }
    25% { clip-path: inset(0 0 100% 0); }
    50% { clip-path: inset(0 0 0 100%); }
    75% { clip-path: inset(100% 0 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}


.info-style2 .info-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.info-style2:hover .info-icon img {
    transform: scale(1.1);
}


.info-style2 .info-icon {
    width: 120px;
    height: 120px;
    /*background-color: #FFB300; !* yellow *!*/
    border-radius: 50%;
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
    margin: 0 auto 27px;
}

.info-style2 .info-icon img {
    max-width: 60%; /* adjust size inside circle */
    max-height: 60%;
    object-fit: contain;
}

.info-style2 .info-title {
    font-size: 20px;
    margin-bottom: 4px;
    font-weight: 600;
    color: #000;
}

.info-style2 .info-text {
    font-size: 16px;
    margin: 0;
    color: #222;
}

.map-style1 {
    /*border-radius: 30px;*/
    overflow: hidden;
    line-height: 0;
}

.space-bottom {
    padding-bottom: var(--section-space);
}
*, :after, :before {
    box-sizing: border-box;
}

.btn-warning {
    background-color: #FFB300;
    border-color: #FFB300;
}
.btn-warning:hover {
    background-color: #e09e00;
    border-color: #e09e00;
}

.event-date{
    background-color: #dc3545;
    color: white;
    font-weight: bold;
    display: inline;
    padding: 13px 40px;
    position: relative;
    left: 30px;
    top: 28px;
    border-radius: 10px 10px 0 0; /* top-left, top-right, bottom-right, bottom-left */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.event-date i {
    font-size: 16px;
}

.admission-class {
    margin-top: 100px;
}

.img-box6 {
    margin: 27px 0 86px 0;
}

.img-box6 .img-2,
.img-box6 .img-1 {
    width: max-content;
    max-width: 100%;
    border-radius: 30px;
    overflow: hidden;
    border: 5px solid var(--white-color);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
}

.img-box6 .img-1 {
    margin-left: 114px;
    transform: rotate(-8.183deg);
}

.img-box6 .img-2 {
    margin: -52px 0 0 -36px;
    margin-left: 36px;
    transform: rotate(18.31deg);
}
@media (max-width: 1399px) {
    .img-box6 {
        margin-top: 0;
        margin-bottom: 30px;
    }

    .img-box6 .img-2,
    .img-box6 .img-1 {
        width: 100%;
        margin: 0;
        transform: none;
    }

    .img-box6 .img-2 img,
    .img-box6 .img-1 img {
        width: 100%;
    }

    .img-box6 .img-1 {
        margin-bottom: 30px;
    }
}

.mega-hover {
    position: relative;
    overflow: hidden;
}

.sec-title2, .sec-title {
    font-size: 60px;
    margin-top: -0.25em;
    margin-bottom: 10px;
    text-transform: capitalize;
}
.list-style1 ul {
    margin: 0 0 30px 0;
}

.list-style1 li {
    position: relative;
    display: flex;
    margin-bottom: 12px;
}

.list-style1 li:before {
    content: var(--icon, url("data:image/svg+xml,%3Csvg width='25' height='23' viewBox='0 0 25 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.6842 20.6753C9.59141 20.6753 9.50023 20.651 9.4197 20.6049C9.33917 20.5588 9.27209 20.4924 9.22512 20.4124C7.45633 17.399 2.74074 10.9826 2.69336 10.9182C2.61761 10.8152 2.58145 10.6884 2.59149 10.5609C2.60153 10.4335 2.65709 10.3139 2.74804 10.224L4.19806 8.79111C4.28662 8.7036 4.40305 8.6499 4.52711 8.63934C4.65116 8.62879 4.77499 8.66205 4.87706 8.73335L9.57343 12.0125C12.716 7.98275 15.6351 5.19864 17.5556 3.5558C19.7177 1.70658 21.0941 0.874056 21.1517 0.839774C21.2344 0.790135 21.3291 0.763914 21.4256 0.763916H23.7714C23.8794 0.763909 23.9847 0.796703 24.0736 0.85795C24.1624 0.919197 24.2306 1.006 24.269 1.10686C24.3074 1.20772 24.3142 1.31787 24.2886 1.4227C24.2629 1.52753 24.2061 1.62209 24.1254 1.69385C17.4636 7.62747 10.2191 20.2793 10.1467 20.4064C10.1005 20.4875 10.0338 20.5551 9.9532 20.6023C9.87262 20.6495 9.78104 20.6746 9.68766 20.6752L9.6842 20.6753Z' fill='%23E8063C'/%3E%3Cpath d='M9.58204 22.8931C4.2985 22.8931 0 18.5946 0 13.311C0 8.02746 4.2985 3.72901 9.58204 3.72901C10.6414 3.72784 11.6936 3.90269 12.6957 4.24644C12.8292 4.29232 12.9391 4.38938 13.0011 4.51624C13.063 4.64311 13.0721 4.7894 13.0262 4.92293C12.9803 5.05646 12.8833 5.1663 12.7564 5.22827C12.6295 5.29025 12.4832 5.29929 12.3497 5.25341C11.4588 4.9479 10.5234 4.79254 9.58156 4.79368C4.88503 4.79368 1.06419 8.61457 1.06419 13.311C1.06419 18.0075 4.88503 21.8284 9.58156 21.8284C14.2781 21.8284 18.0989 18.0075 18.0989 13.311C18.0991 12.7348 18.0412 12.1599 17.9261 11.5953C17.9121 11.5268 17.9118 11.4562 17.925 11.3875C17.9383 11.3189 17.965 11.2535 18.0035 11.1952C18.0421 11.1368 18.0917 11.0866 18.1497 11.0475C18.2076 11.0083 18.2727 10.981 18.3412 10.967C18.4097 10.953 18.4803 10.9526 18.549 10.9659C18.6176 10.9792 18.683 11.0059 18.7413 11.0444C18.7997 11.083 18.8498 11.1326 18.889 11.1905C18.9281 11.2485 18.9555 11.3136 18.9695 11.3821C19.0989 12.0169 19.164 12.6632 19.1639 13.311C19.1641 18.5946 14.8656 22.8931 9.58204 22.8931Z' fill='%23E8063C'/%3E%3C/svg%3E%0A"));
    margin-right: 10px;
    font-family: var(--icon-font);
}

.list-style2 ul {
    margin-bottom: 30px;
}

.list-style2 li {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.list-style2 li:before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--theme-color);
    display: inline-block;
    margin-right: 10px;
    border-radius: 50%;
}

.form-style3 {
    border: 3px solid #002f6c;
    padding: 30px 30px 3px 30px;
    margin-bottom: 30px;
    background-color: var(--white-color);
    border-radius: 30px;
}

.form-style3 .form-group {
    margin-bottom: 27px;
}

.form-style3 input {
    border: 1px solid rgba(153, 153, 153, 0.5);
    padding-right: 20px;
    padding-left: 20px;
    border-radius: 10px;
}
select, .form-control, .form-select, textarea, input {
    height: 55px;
    padding: 0 45px 0 30px;
    border: 1px solid var(--border-color);
    color: var(--body-color);
    background-color: var(--body-bg);
    border-radius: 16px;
    font-size: 16px;
    width: 100%;
}

.form-style3 input[type=checkbox] ~ label {
    font-weight: 500;
    margin: 0;
}

.form-style3 input[type=checkbox] ~ label:before {
    background-color: #D9D9D9;
    border: none;
}

.form-style3 input[type=checkbox]:checked ~ label:before {
    background-color: var(--theme-color);
}

.form-style3 label {
    font-weight: 400;
}

.form-style3 .required {
    font-size: 14px;
    color: var(--error-color);
}

.form-style3.layout2 {
    padding: 0;
    border: none;
}

.form-style3 .form-group {
    margin-bottom: 27px;
}

.vs-btn {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    border: none;
    outline: none;
    box-shadow: none;
    overflow: hidden;
    position: relative;
    font-family: var(--title-font);
    font-size: 16px;
    font-weight: 600;
    padding: 19px 40px 20px 40px;
    background-color: #002f6c;
    color: var(--white-color);
    text-transform: capitalize;
    border-radius: 9999px;
    line-height: 1;
    transition: all ease 0.4s;
    z-index: 2;
}

.bg-smoke {
    background-color: var(--smoke-color) !important;
}

.process-card-school {
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.process-card-school:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.icon-circle {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .img-box6 {
        flex-direction: column;
    }
}

.register-button-position{
    position: absolute;   /* Bootstrap sets it when used with top/start */
    top: 66%;             /* top-50 */
    left: 163px;              /* start-0 */
    transform: translateY(-50%); /* translate-middle-y */
    margin-left: 3rem;
}
.register-button-position-it{
    padding: 20px 45px;
    background-color: #002f6c;
    border-radius: 50px
}

.register-button-position-it:hover{
    padding: 20px 45px;
    background-color: #002f6c;
    border-radius: 50px
}


@media (min-width: 1700px) and (max-width: 1800px) {
    .register-button-position {
        top: 67%;
        left: 138px;
        margin-left: 3rem;
    }
}
@media (min-width: 1600px) and (max-width: 1700px) {
    .register-button-position {
        top: 67%;
        left: 133px;
        margin-left: 3rem;
    }
    .register-button-position-it{
        padding: 16px 39px;
        background-color: #002f6c;
        border-radius: 50px
    }
}
@media (min-width: 1500px) and (max-width: 1600px) {
    .register-button-position {
        top: 67%;
        left: 118px;
        margin-left: 3rem;
    }
    .register-button-position-it{
        padding: 13px 32px;
        background-color: #002f6c;
        border-radius: 50px
    }
}
@media (min-width: 1400px) and (max-width: 1500px) {
    .register-button-position {
        top: 67%;
        left: 100px;
        margin-left: 3rem;
    }
    .register-button-position-it{
        padding: 12px 29px;
        background-color: #002f6c;
        border-radius: 50px
    }
}
@media (min-width: 1300px) and (max-width: 1400px) {
    .register-button-position {
        top: 67.5%;
        left: 104px;
        margin-left: 3rem;
    }
    .register-button-position-it{
        padding: 12px 27px;
        background-color: #002f6c;
        border-radius: 50px
    }
}
@media (min-width: 1024px) and (max-width: 1300px) {
    .register-button-position {
        top: 68%;
        left: 63px;
        margin-left: 3rem;
    }
    .register-button-position-it{
        padding: 8px 14px;
        background-color: #002f6c;
        border-radius: 50px;
        font-size: 15px;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .register-button-position {
        top: 69%;
        left: 37px;
        margin-left: 3rem;
    }
    .register-button-position-it{
        padding: 8px 15px;
        background-color: #002f6c;
        border-radius: 50px;
        font-size: 10px;
    }
}
@media (min-width: 425px) and (max-width: 767px) {
    .register-button-position {
        top: 72%;
        left: 13px;
        margin-left: 3rem;
    }
    .register-button-position-it{
        padding: 8px 15px;
        background-color: #002f6c;
        border-radius: 50px;
        font-size: 8px;
    }
}
@media (min-width: 5px) and (max-width: 424px) {
    .register-button-position {
        display: none;
    }

}

@media (min-width: 1024px) {
    .mission-statement-class {
        padding-left: 300px;
        padding-right: 300px;
    }
}