html {
  scroll-behavior: smooth;
}

body {
  color: rgb(32, 32, 32);
  background: rgb(255, 255, 255);
  font-family: Outfit, Arial, sans-serif;
}

a {
  color: inherit;
}

header {
  min-width: 0px;
}

html {
  text-size-adjust: 100%;
}

body {
  min-width: 280px;
}

a {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1200px) {
  header {
    padding: 16px clamp(24px, calc(4 * var(--layout-vw)), 40px);
  }
}

@media (max-width: 992px) {
  header {
    padding: 16px 32px;
  }
}

@media (max-width: 767px) {
  .logo img {
    max-width: 170px;
  }

  header {
    flex-wrap: nowrap;
    gap: 14px;
    padding: 14px 18px;
  }

  .logo {
    flex: 1 1 auto;
  }

  .logo img {
    width: min(170px, calc(34 * var(--layout-vw)));
  }
}

@media (max-width: 640px) {
  header {
    text-align: center;
    padding: 16px 20px;
  }

  .logo {
    order: 1;
  }

  header {
    flex-wrap: wrap;
  }

  .logo {
    flex: 0 0 auto;
  }

  .logo img {
    width: min(185px, calc(52 * var(--layout-vw)));
  }

  header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  header .logo {
    flex: 0 0 auto;
  }
}

@media (max-width: 480px) {
  header {
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
  }

  .logo img {
    width: min(150px, calc(45 * var(--layout-vw)));
  }
}

@media (max-width: 380px) {
  .logo img {
    max-width: 135px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

a:focus-visible {
  outline: rgb(8, 175, 216) solid 2px;
  outline-offset: 4px;
}

.motion-tilt:hover {
  z-index: 5;
}

.rules-page .rules-banner {
  zoom: 1;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1921 / 818;
  overflow: hidden;
}

.rules-banner::before {
  content: "";
  position: absolute;
  inset: 0px;
  pointer-events: none;
  clip-path: inset(33% 32% 57%);
  transform: translateY(11.6137%);
}

.rules-banner h1 {
  position: relative;
  z-index: 1;
  max-width: 76%;
  margin: 0px;
  text-align: center;
  color: rgb(239, 56, 39);
  font-size: clamp(20px, 4.37vw, 84px);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  animation: 0.85s ease-out 0s 1 normal both running rulesTitleEnter, 4s ease-in-out 0.85s infinite normal none running rulesTitleFloat;
}

@media (prefers-reduced-motion: reduce) {
  .rules-banner h1 {
    animation: auto ease 0s 1 normal none running none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.registration-card > img {
  width: clamp(65px, 5.4vw, 104px);
  height: clamp(75px, 6.5vw, 124px);
  object-fit: contain;
}

@media (max-width: 600px) {
  .register-banner h1 {
    font-size: clamp(26px, 6vw, 36px);
  }
}

.registration-card > img, .registration-card .card-arrow, .card-arrow svg {
  transition: transform 0.3s;
}

.register-reveal {
  transition: opacity 0.65s, translate 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.register-reveal.is-pending {
  opacity: 0;
  translate: 0px 36px;
}

.register-reveal.is-visible {
  opacity: 1;
  translate: 0px;
}

@media (hover: hover) and (pointer: fine) {
  .registration-card:hover > img {
    transform: translateY(-4px) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .register-banner h1 {
    animation: auto ease 0s 1 normal none running none;
  }

  .register-reveal, .registration-card, .registration-card > img, .registration-card .card-arrow, .card-arrow svg {
    transition: none;
  }

  .register-reveal.is-pending {
    opacity: 1;
    translate: none;
  }

  .registration-card:hover, .registration-card:active, .registration-card:hover > img, .registration-card:hover .card-arrow, .registration-card:hover .card-arrow svg {
    transform: none;
  }
}


/**********************/
#registerasstudentModal .modal-dialog {
    max-width: 600px;
    margin: 25px auto;
}
.custom-modal {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;

    align-items: center;
    justify-content: center;

    padding: 20px;
    box-sizing: border-box;
}

/* Jab modal open ho */
.custom-modal.active {
    display: flex;
}

/* Modal Box */
.custom-modal-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;

    background: #fff;
    border-radius: 10px;
    padding: 20px;

    box-sizing: border-box;
    border: 8px solid rgba(255, 255, 255, 0.74);
    overflow-x: hidden;
    overflow-y: auto;

    animation: modalOpen 0.25s ease;
}

/* Close Button */
.custom-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background-color: #e93a29;
    color: #fff;
    padding: 0;
    margin: 0;
    border: 4px solid #fff;
    box-shadow: 1px 1px 1px 1px #868686;
    opacity: 0.9;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.custom-modal-close:hover {
    color: #e00;
}

/* Modal Content */
.custom-modal-body {
    padding-top: 10px;
}

.custom-modal-body > .modal-content {
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.custom-modal-body .modal-header {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 48px;
}

.custom-modal-body .modal-header h1 {
    margin: 20px 0 10px;
}

.custom-modal-body .modal-body {
    padding: 15px 15px 0;
}

.custom-modal-body fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.custom-modal-body .col-md-6,
.custom-modal-body .col-md-12 {
    float: none;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 8px;
}

.custom-modal-body .col-md-12 {
    grid-column: 1 / -1;
}

.custom-modal-body .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin-bottom: 1rem;
}

.custom-modal-body .input-group-prepend {
    display: flex;
    flex: 0 0 auto;
}

.custom-modal-body .input-group-text {
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 2px 10px;
    border: 1px solid #ced4da;
    border-right: 0;
    background: transparent;
}

.custom-modal-body .input-group-text img {
    display: block;
    max-width: 26px;
    max-height: 26px;
    object-fit: contain;
}

.custom-modal-body .form-control {
    display: block;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    height: 38px;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 2px solid #a2a8cc;
    border-left: 0;
    border-radius: 0;
    background: #fff;
    color: #202020;
    font: inherit;
    font-size: 15px;
}

.custom-modal-body select.form-control {
    appearance: auto;
}

.custom-modal-body p {
    grid-column: 1 / -1;
    text-align: center;
    color: #e93a29;
    font-weight: 700;
    font-size: 18px;
}

.custom-modal-body h2 {
    margin-top: 0;
}
.custom-modal .modal-header {
    display: inline-block;
    text-align: center;
    padding: 8px 0px;
}

.custom-modal .modal-header h1 {
    background: #e93a29;
    border-radius: 7px;
    padding: 5px 15px;
    text-align: center;
    display: inline-block;
    margin: 20px 0px 10px 0px;
    color: #fff;
    font-size: 26px;
    font-weight: normal;
    letter-spacing: 0.5px;
    animation: blink 1s linear infinite;
}
.custom-modal .modal-header {
    display: inline-block;
    text-align: center;
    padding: 8px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes blink {
  0%{background-color: #e93a29;}
  50%{background-color: #00a8d7;}
  100%{background-color: #e93a29;}
}
/* Animation */
@keyframes modalOpen {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Mobile */
@media (max-width: 600px) {

    .custom-modal-content {
        padding: 20px 12px;
    }

    .custom-modal-body fieldset {
        grid-template-columns: minmax(0, 1fr);
    }

    .custom-modal-body .col-md-12 {
        grid-column: auto;
    }

}

/* Match the original Bootstrap registration modal without loading Bootstrap. */
#registerasstudentModal .custom-modal-content {
    width: 100%;
    max-width: 540px;
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 8px solid rgba(255, 255, 255, 0.74);
    border-radius: 4px;
    background-clip: padding-box;
}

#registerasstudentModal .custom-modal-body {padding-top: 0;}
#registerasstudentModal .custom-modal-body .modal-body {padding: 15px 15px 0;}
#registerasstudentModal .custom-modal-body .modal-header h1 {
    margin: 20px 0 10px;
    background: #e93a29;letter-spacing: 0.5px;
    
    animation: none;
}
#registerasstudentModal .custom-modal-close {top: -18px;right: -18px;width: 38px;height: 38px;border-radius: 50%;color: #fff;}
#registerasstudentModal .custom-modal-close:hover {color: #fff;background: #e93a29;}
#registerasstudentModal .custom-modal-body p {margin: 16px 0;text-align: center;font-size: 16px;line-height: 1.3;letter-spacing: 0.6px;}
#registerasstudentModal .input-group {margin-bottom: 14px;}
#registerasstudentModal .input-group-text {min-width: 38px;padding: 2px 8px;}
#registerasstudentModal .form-control {height: 35px;border: 1px solid #ced4da;border-left: 0;font-size: 14px;}
#registerasstudentModal .register-check {display: flex;align-items: flex-start;justify-content: center;gap: 8px;margin-top:15px;}
#registerasstudentModal .register-check ul {flex: 0 0 auto;display: block;margin: 0;padding: 0;list-style: none;}
#registerasstudentModal .register-check ul li {display: block;margin: 0;padding: 0;}
#registerasstudentModal .register-check ul li input {display: block;margin: 3px 0 0;}
#registerasstudentModal .register-check label {display: block;flex: 0 1 auto;float: none;min-width: 0;max-width: none;margin: 0;font-size: 14px;line-height: 1.4;white-space: normal;text-align: left;}
#registerasstudentModal .register-check label a {color: #000;font-weight: 700;}
#registerasstudentModal .stlisting {display: flex;justify-content: center;width: 100%;text-align: center;}
#registerasstudentModal .stlisting ul {display: flex;justify-content: center;align-items: center;margin: 0;padding: 0;list-style: none;}
#registerasstudentModal .stlisting ul a {display: block;margin: 0 10px;padding: 0;border-radius: 4px;background: #00a8d7;color: #fff;text-decoration: none;    cursor: pointer;}
#registerasstudentModal .stlisting ul li {display: block;margin: 0;padding: 12px 20px;border-radius: 4px;color: #fff;line-height: 20px;list-style: none;    cursor: pointer;}
#registerasstudentModal .stlisting ul li input[type="radio"] {display: none;}
#registerasstudentModal .stlisting ul li label {display: block;margin: 0;color: #fff;font-size: 14px;line-height: 20px;    cursor: pointer;}
#registerasstudentModal .stlisting ul a:hover,#registerasstudentModal .stlisting ul li:hover {background: #e93a29;}
#registerasstudentModal .modal-footer {grid-column: 1 / -1;width: 100%;margin: 15px 0;padding: 5px 0;border: 0;text-align: center;}
#registerasstudentModal .modal-footer .col-md-12 {width: 100%;float: none;text-align: center;}
#registerasstudentModal .modal-footer .signup {width: auto;min-width: 72px;margin: 0;padding: 8px 12px;border: 1px solid #e93a29;border-radius: 4px;background: #e93a29;color: #fff;font-size: 14px;line-height: 1.2;cursor: pointer;}

@media (max-width: 600px) {
    #registerasstudentModal.custom-modal {align-items: flex-start;overflow-y: auto;padding: 16px 10px;}
    #registerasstudentModal .custom-modal-content {margin: auto;}
    #registerasstudentModal .register-check label {white-space: normal;}
}

/* School form layout and Bootstrap component styling, without Bootstrap. */
@font-face {font-family: FontAwesome;src: url("../fonts/fontawesome-webfont.woff2") format("woff2");font-weight: normal;font-style: normal;font-display: block;}
#schoolModal .custom-modal-content {
    width: 100%;
    max-width: 540px;
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 8px solid rgba(255, 255, 255, 0.74);
    border-radius: 4px;
    background-clip: padding-box;
}

#schoolModal .custom-modal-close {top: -18px;right: -18px;width: 38px;height: 38px;border-radius: 50%;color: #fff;}
#schoolModal .custom-modal-close:hover {color: #fff;background: #e93a29;}
#schoolModal .modal-content {border: 0;border-radius: 0;background: #fff;box-shadow: none;}
#schoolModal .modal-header {display: flex;justify-content: center;box-sizing: border-box;width: 100%;padding: 8px 48px 16px;border-bottom: 1px solid #dee2e6;text-align: center;}
#schoolModal .modal-header h1 {display: inline-block;margin: 20px 0 10px;padding: 5px 15px;border-radius: 7px;background: #438fa8;color: #fff;font-size: 26px;font-weight: 400;line-height: 1.25;letter-spacing: 0;animation: none;letter-spacing: 0.5px;}
#registerasstudentModal .custom-modal-body .modal-header {border-bottom: 1px solid #dee2e6;}
#schoolModal .modal-body {padding: 15px 15px 0;}
#schoolModal fieldset {display: grid;grid-template-columns: repeat(2,minmax(0,1fr));min-width: 0;margin: 0;padding: 0;border: 0;}
#schoolModal .col-md-6,#schoolModal .col-md-12 {float: none;width: auto;min-width: 0;box-sizing: border-box;padding: 0 12px;}
#schoolModal .col-md-12 {grid-column: 1 / -1;}
#schoolModal .form-group {margin: 0 0 10px;}
#schoolModal .control-label {display: block;width: 100%;margin: 0 0 8px;color: #212529;font-size: 14px;font-weight: 400;line-height: 1.3;}
#schoolModal .inputGroupContainer {float: none;width: 100%;padding: 0;}
#schoolModal .input-group {display: flex;align-items: stretch;width: 100%;}
#schoolModal .input-group-addon {flex: 0 0 46px;display: flex;align-items: center;justify-content: center;box-sizing: border-box;padding: 6px 10px;border: 1px solid #ced4da;border-right: 0;border-radius: 4px 0 0 4px;background: #fff;color: #212529;}
#schoolModal .input-group-addon i {font-family: FontAwesome;font-style: normal;font-weight: normal;font-size: 14px;line-height: 1;}
#schoolModal .fa-home::before {content: "\f015";}
#schoolModal .fa-user::before {content: "\f007";}
#schoolModal .fa-globe::before {content: "\f0ac";}
#schoolModal .fa-briefcase::before {content: "\f0b1";}
#schoolModal .fa-map-marker::before {content: "\f041";}
#schoolModal .fa-phone::before {content: "\f095";}
#schoolModal .fa-envelope::before {content: "\f0e0";}
#schoolModal .fa-edit::before {content: "\f044";}
#schoolModal .form-control {display: block;flex: 1 1 auto;width: 1%;min-width: 0;height: 35px;box-sizing: border-box;padding: 6px 10px;border: 1px solid #ced4da;border-radius: 0 4px 4px 0;background: #fff;color: #495057;font-size: 14px;line-height: 1.5;}
#schoolModal textarea.form-control {height: 78px;resize: vertical;}
#schoolModal .modal-footer {grid-column: 1 / -1;width: 100%;margin: 10px 0 15px;padding: 5px 0;border: 0;text-align: center;}
#schoolModal .modal-footer .col-md-12 {width: 100%;float: none;text-align: center;}
#schoolModal .modal-footer .signup {width: auto;min-width: 68px;margin: 0;padding: 8px 12px;border: 1px solid #e93a29;border-radius: 4px;background: #e93a29;color: #fff;font-size: 14px;line-height: 1.2;cursor: pointer;}

@media (max-width: 600px) {
    #schoolModal.custom-modal {align-items: flex-start;overflow-y: auto;padding: 16px 10px;}
    #schoolModal .custom-modal-content {margin: auto;}
    #schoolModal fieldset {grid-template-columns: minmax(0,1fr);}
    #schoolModal .col-md-12 {grid-column: auto;}
	.custom-modal .modal-header h1, #schoolModal .modal-header h1{font-size:20px;}
}
select:not(:-internal-list-box) option{text-transform:capitalize !important;}