/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
@font-face {
  font-family: Poppins-Bold;
  src: url(https://www.98thpercentile.com/hubfs/Website%20Images/Spell%20kahoot%206%202023/Spell%20kahoot%206.0%20fonts/Poppins-Bold.ttf);
}
@font-face {
  font-family: Poppins-Regular;
  src: url(https://www.98thpercentile.com/hubfs/Website%20Images/Spell%20kahoot%206%202023/Spell%20kahoot%206.0%20fonts/Poppins-Regular.ttf);
}
@font-face {
  font-family:Poppins-Light;
  src: url(https://www.98thpercentile.com/hubfs/MAP-LM/fonts/Poppins-Light.ttf);
}
@font-face {
  font-family:Poppins-Medium;
  src: url(https://www.98thpercentile.com/hubfs/math%20program%20revamp/Poppins-Medium.ttf);
}
@font-face {
  font-family:Poppins-SemiBold;
  src: url(https://www.98thpercentile.com/hubfs/Digital%20Events%20all/Poppins-SemiBold.ttf);
}
@font-face {
  font-family:Poppins-ExtraBold;
  src: url(https://www.98thpercentile.com/hubfs/ELA%20page%20revamp/Poppins-ExtraBold.ttf);
}
/* @font-face {
font-family:CherryBombOne-Regular;
src: url(https://www.98thpercentile.com/hubfs/MKST%2025/CherryBombOne-Regular.ttf);
} */
section{
  margin-top:50px;
}
.register{
  background-color:#FFD400;
  padding:5px;
  padding-left:70px;
  padding-right:70px;
  color:black;
  display:block;
  /*   margin:auto; */
  width:fit-content;
  font-size:25px;
  border:2px solid #FFD400;
  cursor:pointer;
  font-family:Poppins-SemiBold;
  border-radius:10px;
  text-align:center;
}
.register:hover{
  background-color:white;
  color:black;
}
h2{
  font-family: Poppins-Bold;
  font-size:34px;
}
.footer-new, .footer {
  margin-top:0px!important;
}
/* .section-1 */
.section-1{
  background-color:#23215B;
  position:relative;
  margin-top:0px!important;
}
.section-1 .mkst-logo{
  position:absolute;
  right:30px;
  top:30px;
}

.section-1 .top-text{
  color:white;
  font-family: Poppins-Regular;
  font-size:20px;
}

.section-1 .top-text-2{
  font-family: Poppins-Bold;
  color:white;
  font-size:43px;
}
.section-1 .title{
  font-family: Poppins-Bold;
  color:#FBD000;
  font-size:43px;
}
.section-1 .girl-img-mobile{
  display:none;
}
.section-1 .mobile-t-cards{
  display:none;
}
/* .section-2 */
.section-2 h2{
  color:black;
}
.col-borg{
  font-family: Poppins-Bold;
  font-size:34px;
  background: linear-gradient(to right, #0000ff, #800080, #d10063);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.section-2 .para{
  font-family: Poppins-Regular;
  font-size:20px;
  color:black;
}

.section-2 .thumbnail {
  margin: auto;
  background: #EBECEE;
  max-width: 800px;
  border:2px solid black;
  cursor:pointer;
}
.section-2 .videoDiv{
  margin: auto;
  max-width: 800px;
  cursor:pointer;
}

/* .section-3 */
.section-3 .row{
  background: linear-gradient(to right, #23215B, #800080, #FF0059);
  border-radius:50px;
  /*   height:100px; */
  border-left: 3px solid #FFD400;
  border-bottom: 3px solid #FFD400;
  position:relative;
}
.section-3 .mini-r-left{
  color:white;
  font-family:Poppins-SemiBold;
  font-size:20px;
  padding:20px;
}

.section-3 .girl-calci{
  height: 140px;
  position: absolute;
  right: 0px;
  bottom: 0px;
}
.section-3 .row-mobile{
  display:none;
}
.form .note-text{
  font-family:Poppins-SemiBold;
  font-size:20px;
  color: #E63946;
}
/* .section-4 */
.section-4{
  background-image:url(https://www.98thpercentile.com/hubfs/MKST%2025/sec-4-bg.webp);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.section-4 h2{
  color:white;
}
.section-4 .col-pink{
  color:#FF88E5;
  font-family: Poppins-Bold;
}
.section-4 .w-text{
  color:white;
  font-family:Poppins-Medium;
  font-size:24px;
}
.section-4 .benefits-section {
  padding: 60px 0;
}

.section-4 .card-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
  row-gap: 80px;
}

.section-4 .info-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  text-align: left;
  transition: transform 0.3s ease;
}

.section-4 .info-card img {
  /* height: 50px; */
  margin-bottom: 16px;
  width: 60px;
  margin-top: -64px;
}
.section-4 .info-card p {
  font-family:Poppins-Medium;
  font-size:16px;
  margin-bottom:0px;
}

.section-4 .info-card:hover {
  transform: translateY(-6px);
}
.section-4 .info-card h3{
  font-family:Poppins-SemiBold;
}
.section-4  .b-text{
  color:#1D4ED8;
  font-size:20px;
}
.section-4  .g-text{
  color:#15803D;
  font-size:20px;
}
.section-4  .o-text{
  color:#C2410C;
  font-size:20px;
}
.section-4  .p-text{
  color:#7E22CE;
  font-size:20px;
}
.section-4  .pi-text{
  color:#DB2777;
  font-size:20px;
}
.section-4  .y-text{
  color:#CAB738;
  font-size:20px;
}
/* Colored shadows or borders */
.section-4 .border-blue { box-shadow: 0 7px 0 #1D4ED8; }
.section-4 .border-green { box-shadow: 0 7px 0 #15803D; }
.section-4 .border-orange { box-shadow: 0 7px 0 #C2410C; }
.section-4 .border-purple { box-shadow: 0 7px 0 #7E22CE; }
.section-4 .border-pink { box-shadow: 0 7px 0 #DB2777; }
.section-4 .border-yellow { box-shadow: 0 7px 0 #CAB738; }


.Disclaimer-text {
  color: white;
  font-family: Poppins-Bold;
  font-size: 20px;
  background-color: #e63946; /* Highlight background */
  padding: 15px 20px;
  border-radius: 8px;
  border-left: 6px solid #fff; /* Left accent border */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Soft shadow */
  margin: 0 auto;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.Disclaimer-text {
  animation: pulse 2s infinite;
}


/* .fixed-section */
.fixed-section {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, #ff0059, purple, #23215b);
  z-index: 9999;
  padding: 10px 0;
}

.fixed-section .girl-calci {
  height: 100px;
  position: absolute;
  bottom: 0;
}

.fixed-section .register {
  padding: 10px 10px!important;
  border-radius: 6px!important;
  text-decoration: none;
  display: inline-block!important;
  font-size:18px;
}

.fixed-section .middle-text{
  font-family: Poppins-Bold;
  font-size:20px;
}

/* .section-5 */
.section-5{
  background-color:#FCF3FA;
  margin-top:0px!important;
  padding:30px;
}
.simple-text{
  font-family:Poppins-Medium;
  font-size:23px;
}
.section-5 .col-yd{
  background: linear-gradient(to right, #FFD400, #FF0059);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
  font-family: Poppins-Bold;
}
.section-5 .scroll-img-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.section-5 .scroll-img-wrapper img {
  display: block;
  margin: auto;
}
/* .section-6 */
.section-6 .col-bg{
  background: linear-gradient(to right, #000080, #00BC46);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
  font-family: Poppins-Bold;
}


.section-6 .row-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 30px 15px;
}

.section-6 .custom-card {
  width: 100%;
  max-width: 300px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*   min-height: 170px; */
}

/* Curved border */
.section-6 .custom-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  border-radius: 15px 0 0 15px;
}

.section-6 .custom-card.blue::before {
  background-color: #367aff;
}

.section-6 .custom-card.pink::before {
  background-color: #e6007e;
}

.section-6 .custom-card.green::before {
  background-color: #00a859;
}

.section-6 .custom-card.orange::before {
  background-color: #f57c00;
}

/* Heading colors */
.section-6 .custom-card.blue h5 {
  color: #367aff;
}

.section-6 .custom-card.pink h5 {
  color: #e6007e;
}

.section-6 .custom-card.green h5 {
  color: #00a859;
}

.section-6 .custom-card.orange h5 {
  color: #f57c00;
}

.section-6 .card-title { 
  margin-bottom: 5px;
  font-size: 18px;
  font-family:Poppins-SemiBold;
}

.section-6 .custom-image {
  max-width: 100%;
  height: auto;
}

.section-6 .mini-row-text {
  padding: 20px;
}

.section-6 .card-text{
  font-size:14px;
  font-family: Poppins-Regular;
  color:black;
}
.section-6 .benefits-list li {
  font-size:18px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  line-height: 1.4;
  font-family:Poppins-Medium;
  color:black;
}

.section-6 .check-icon {
  flex-shrink: 0;
}
.section-6 .benefits-box {
  position: relative;
  background: white;
  border-radius: 20px;
  padding: 20px 20px 20px 25px;
  max-width: 700px;
  margin: 40px auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  font-family: 'Arial', sans-serif;
  overflow: hidden; /* ensures the pseudo-element stays rounded */
}
.section-6 .benefits-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  border-radius: 20px 0 0 20px;
  background: linear-gradient(to bottom, #0000ff, #ff007f);
}
.section-6 .register{
  background: linear-gradient(90deg, #23215b, purple, #ff0059);
  color:white;
  font-family: Poppins-Bold;
  font-size:25px;
  border:unset;
  display:block;
  padding:6px;
  padding-left:100px;
  padding-right:100px;
}
/* .section-6-1 */
.section-6-1 .col-gp{
  background: linear-gradient(to right, #15803D, #15803D, #B746E6, #B746E6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
  font-family: Poppins-Bold;
}

.section-6-1 h3{
  display:block!important;
}
.section-6-1{
  background-image:url(https://www.98thpercentile.com/hubfs/MKST%2025/studens-bg.png);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}

/* --- Carousel Dots --- */
.carousel-indicators {
  margin-top: 30px;
  justify-content: center;
  gap: 10px;
}

.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d3d3d3; /* Inactive dot */
  opacity: 1;
  transition: background-color 0.3s;
  border: none;
}

.carousel-indicators .active {
  background-color: #004477; /* Active dot */
}

/* --- Carousel Arrows --- */
.carousel-control-prev,
.carousel-control-next {
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(0.5);
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.section-7 .mobile-testimonial{
  display:none;
}

/* .section-8 */
.section-8{
  background-image: url("https://www.98thpercentile.com/hubfs/MKST%2025/2150169418%202%20%281%29%20%281%29.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  padding:40px;
}
.section-8 .register{
  display:block;
  margin:auto;
  padding-left:70px;
  padding-right:70px;
  border:2px solid white;
}
.section-8 .right-card {
  border: 2px solid white; /* semi-transparent border */
  border-radius: 30px;
  background: #5D5D5D; /* translucent background */
  backdrop-filter: blur(10px); /* blur effect */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  height: fit-content;
  padding: 30px;
  color: white; /* ensure text is visible */
}

/* .section-9 */
.section-9 {
  background-image: url("https://www.98thpercentile.com/hubfs/MKST%2025/faq-bg%20%281%29%20%281%29%20%281%29.webp");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px;
  background-position: center bottom;
  margin-top:0px!important;
}
.rotate-arrow .bi-arrow-down-square {
  transform: rotate(180deg); /* Rotate the down arrow by 180 degrees when the button is clicked */
}
.section-9 .answer{
  font-size:18px;
  color: Black!Important;
  font-family:Poppins-Medium;
  text-align:left;
}
.section-9 .inner-text{
  position:relative;
}

.section-9 .quest{
  text-decoration: none;
  color: Black!Important;
  padding-left:unset;
  padding-bottom:0px;
  padding-top:0px;
  font-size:20px;
  font-family:Poppins-Medium;
  text-align:left;
}
.section-9 h4{
  margin-bottom:0rem!important;
}

.section-9 svg.bi.bi-arrow-down-square {
  position: absolute;
  right: 10px;
  transition: transform 0.3s; 
  bottom:2px;
}
.section-9 .row {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  width:80%;
  margin:auto;
}


@media(max-width:1024px){
  .section-1 .title, .section-1 .top-text-2 {
    font-size: 30px;
  }
  .section-1 .calender-des{
    width: 80%;
  }
  .register{
    font-size:20px!important;
  }
  h2 {
    font-size: 30px;
  }
  .col-borg{
    font-size: 30px;
  }
  .section-2 .para{
    font-size:18px;
  }
  .section-3 .mini-r-left{
    font-size:18px;
  }
  .section-6 .register{
    padding-left:50px;
    padding-right:50px;
  }
  .section-9 .quest{
    text-align:left;
    font-size:16px;
  }
  .section-9 .answer{
    text-align:left;
    font-size:16px;
  }
  .form-wrapper{
    padding:40px;
  }
}


@media(max-width:768px){
  .register{
    font-size:18px!important;
  }
  .section-1 .title, .section-1 .top-text-2 {
    font-size: 24px;
  }
  .section-1 .top-text{
    font-size: 18px;
  }
  .section-1 .calender-des {
    width: 95%;
  }
  .col-borg, h2 {
    font-size: 20px;
  }
  .section-2 .para{
    font-size: 16px;
  }
  .section-3 .row{
    margin-right:0px!important;
    margin-left:0px!important;
  }
  .section-3 .mini-r-left {
    font-size:14px;
  }
  .section-3 .girl-calci{
    width:150px;
  }
  .section-4 .w-text{
    font-size: 20px;
  }
  .section-4 .info-card{
    padding: 15px;
  }
  .section-4 .card-grid h3{
    font-size: 16px;
  }
  .section-4 .info-card img{
    width:50px;
  }
  .simple-text{
    font-size: 20px;
  }
  .section-6 .benefits-list li{
    margin-bottom:0!important;
    line-height:unset!important;
    font-size:14px;
  }
  .section-6 .register{
    padding-left:35px;
    padding-right:35px;
  }
  .section-8 .register{
    padding-right:20px;
    padding-left:20px;
    font-size:16px!important;
  }

}


@media(max-width:600px){
  .section-1 .girl-desc{
    display:none;
  }
  .section-1 .girl-img-mobile{
    display: block;
    float: right;
    width:100%;
  }
  .section-1 .mkst-logo{
    display:none;
  }
  .section-1 .mobile-t-cards{
    display:block;
  }
  .section-1 .des-t-cards{
    display:none;
  }
  .section-1 .top-col{
    margin-top:3px!important;
  }
  .section-2 .para{
    text-align: -webkit-center;
  }
  .section-3 .row-dec{
    display:none;
  }
  .section-3 .row-mobile{
    display:block;
  }
  .section-3 .girl-calci{
    width:55px;
    height:55px;
  }
  .section-3 .mini-r-left{
    padding:10px;
  }
  .section-4 .card-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .section-4 .info-card p{
    font-size:12px;
  }
  .section-6 .benefits-box{
    width:90%;
    line-height:1rem!important;
  }
  .fixed-section{
    display:none;
  }
  .section-4 .info-card {
    padding: 11px;
  }
  .section-5 .scroll-img-wrapper img {
    width: 100%;
    min-width: 600px; /* or whatever your image's native width is */
  }
  .section-6 .benefits-box{
    margin-top:20px;
  }
  .section-6 .benefits-list li{
    margin-bottom:1rem!important;
  }
  .section-6 .register {
    padding-left: 50px;
    padding-right: 50px;
    margin: auto;
    font-size:20px!important;
  }
  .section-6-1 .d-block{
    width:90%;
  }
  .section-7 h2,.section-7 h3{
    padding:10px;
  }
  .section-7 .rounded-4{
    width:80%;
    display:block;
    margin:auto;
  }
  .section-8{
    margin-top:0px!important;
  }
  .section-8 .right-card{
    padding:20px;
  }
  .section-8 .boys-3-img,.section-8 .event-details{
    width:100%;
  }
  .section-9{
    padding:20px;
  }
  .section-9 .row{
    width:95%;
  }
  .form .note-text{
    font-size:16px;
  }
  .Disclaimer-text{
    font-size:16px; 
  }
}

@media(max-width:767px){
  .section-7 .desktop-testimonial{
    display:none;
  }
  .section-7 .mobile-testimonial{
    display:block;
  }
}


.form-wrapper {
  font-family: Poppins-Regular;
  margin: auto;
  background-color: white;
  padding: 50px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
  border-radius: 10px;
}
.form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.form input,.form select,.form button {
  padding: 10px;
  font-size: 16px;
  width: 100%;
}

.form-row select {
  max-width: 150px;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

#payment-link {
  display: none;
  text-align: center;
  margin-top: 20px;
}

#payment-link a {
  padding: 10px 20px;
  background-color: #0a7cff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.form input,.form select,.form button{
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid black;
}
.error {
  color: red;
  font-size: 14px;
  margin-bottom: 10px;
}
#payment-link {
  display: none;
  margin-top: 20px;
}
#payment-link a {
  padding: 10px 20px;
  background-color: green;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}
.phone-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.phone-wrapper select,
.phone-wrapper input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
}

.phone-wrapper select {
  max-width: 150px;
}


#formSection {
  display: none;
}

.grades-section{
  display: flex;
  gap: 5px;
  justify-content: space-between;
  background-color: yellow;


}

.grades{
  display: flex;
  flex-direction: column;
}


.section-1 .twoboxes {
  display: inline-flex;
  gap: 5%;
  justify-content: center;
  margin-top: 5%;
  text-align: center;
  width: 100%;
}


.section-1 .yellowbox {
  background-color: purple;
  border-radius: 10px;
  padding: 2% 5%;
  width: fit-content;
}



.section-1 h4.round {
  border: 2px solid #000;
  border-radius: 10px;
  margin: 3% auto auto;
}
.section-1 .round, .section-1 h4.round {
  background-color: #c3c9bb;
  color: #000;
  padding: 1% 5%;
  width: fit-content;
}


.section-1 .twoboxes .yellowbox h5{
  font-size:14px!important;
  color:#fff!important;
  font-family:Poppins-Bold!important;
}

.section-1 .twoboxes .yellowbox h4{
  font-size:16px!important;
  color:#fff!important;
  font-family:Poppins-Bold!important;
}

h5.mobile {
  font-size: 12px;
}



.connect-container {
  background-color: #fcf3fa;
  text-align: center;
  margin-top:3%;
  padding:3% 0;
}

.connect-header {
  margin-bottom: 3%;
}

.connect-header h2 {
  color: #9B382F;
  font-weight: 700;
  font-family: PlusJakartaSans-Bold;
}

.connect-header p {
  color: #9B382F;
  font-size: 15px;
  font-family: PlusJakartaSans-Regular;
  margin: 0;
}

.social-bar {
  background-color: #8000800d;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px 20px;
}

.social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #9B382F;
  padding: 0 40px;
  border-right: 2px solid #9B382F;
}

.social-item:last-child {
  border-right: none;
}

.social-item svg {
  margin-bottom: 12px;
  color: #9B382F;
}

.social-item strong {
  font-size: 14px;
}

.social-item span {
  font-size: 12px;
  font-family: OpenSans-Regular;
  color: #9B382F;
}

@media (max-width: 768px) {
  .social-bar {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .social-item {
    padding: 20px;
    border-right: 2px solid #9b382f;
    width: 100%;
    box-sizing: border-box;
  }

  .social-item:last-child {
    border-bottom: none;
  }
  .section-1 .twoboxes .yellowbox h5 {
    color: #fff !important;
    font-family: Poppins-Bold !important;
    font-size: 12px !important;
  }
  .section-1 .twoboxes .yellowbox h4 {
    color: #fff !important;
    font-family: Poppins-Bold !important;
    font-size: 14px !important;
  }
  .fixed-section .middle-text {
    font-family: Poppins-Bold;
    font-size: 14px;
  }
}


@media(max-width:767px){
  .social-item {
    border-right: none;
  }
  .social-bar {
    background-color: #9b382f24;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  img.girl-img.girl-img-mobile.img-fluid{
    display :none;
  }
}




.section12 .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

.section12 .modal-overlay.visible {
  display: flex;
}

.section12 .modal-content-container {
  background-color: #ffffff;
  width: 100%;
  max-width: 800px;
  border-radius: 15px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* --- Dark Header Section --- */
.section12 .form-header-black {
  background-color: #FFD400;
  color: #fff;
  text-align: center;
  padding: 35px 20px;
  border-radius: 15px 15px 0 0;
}

.section12 .form-header-black h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.section12 .form-header-black p {
  font-size: 14px;
  color: #fff;
  margin-bottom: 15px;
}

.section12 .free-badge {
  background-color: #ffcc00;
  color: #000000;
  font-weight: 800;
  font-size: 14px;
  padding: 4px 24px;
  border-radius: 20px;
  display: inline-block;
}

/* --- Form Body & Sections --- */
.section12 .form-body-wrapper {
  padding: 30px;
}

.section12 .section-heading {
  font-size: 18px;
  font-weight: 700;
  color: #1A2535;
  margin-bottom: 15px;
  display: block;
}

.section12 .form-group-section {
  margin-bottom: 25px;
}

/* --- Input Fields & Selects --- */
.section12 .form-control, 
.section12 .form-select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 5px;
  background-color: #ffffff;
  color: #1f2937;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.section12 .form-control:focus, 
.section12 .form-select:focus {
  outline: none;
  border-color: #8c4448;
  box-shadow: 0 0 0 3px rgba(140, 68, 72, 0.1);
}

.section12 .error-message {
  color: #dc2626;
  font-size: 12px;
}

/* --- Student Card Style --- */
.section12 .student-card-box {
  /*   background-color: #fff5fb; /* Light blue tint from screenshot */ */
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 15px;
}

.section12 .student-label {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

/* --- Dashed "Add Student" Buttons --- */
.section12 .dashed-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 12px;
  border: 1.5px dashed #3b82f6;
  background: transparent;
  border-radius: 8px;
  color: #4A5568;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all 0.2s;
}

.section12 .dashed-add-btn:hover {
  background-color: #eff6ff;
  border-color: #E8ECF2;
}

/* --- Footer & Submit --- */
.section12 .btn-submit-full {
  width: 100%;
  background: #0D1F35;
  color: #ffffff;
  padding: 16px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  letter-spacing: 1px;
  margin:auto;
  display:block;
}

.section12 .btn-submit-full:hover {
  background-color: #222222;
}

.section12 .form-check-label {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

/* --- Custom Close Button --- */
.section12 .close-modal-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.section12 .close-modal-btn:hover {
  background: rgba(255,255,255,0.2);
}

/* Scrollbar Styling */
.section12 .modal-content-container::-webkit-scrollbar {
  width: 6px;
}
.section12 .modal-content-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}
.section12 .main-title{
  font-size:24px;
  color:#fff;
  text-transform:uppercase;
}



.section12 .form-promo-banner-container {
  margin-top:3%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section12 .promo-card {
  border-radius: 16px;
  padding: 20px;
  text-align: left;
  box-sizing: border-box;
  position: relative;
}

.section12 .promo-card.pink-style {
  background: linear-gradient(135deg, #FCF0F6 0%, #F6C6D9 100%);
  border: 1.5px solid #f43f5e;
  padding-top: 36px;
}

.section12 .promo-card.blue-style {
  background: #F3F7FE;
  border: 1.5px solid #CBD9FB;
}

.section12 .promo-badge-pill {
  position: absolute;
  top: 10px;
  left: 20px;
  background-color: #EE0B73;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.section12 .promo-title {
  font-size: 14px;
  font-weight: 800;
  color: #1A2535;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.section12 .promo-desc {
  font-size: 13px;
  color: #4A5568;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}


.section12 .s12-events-scroll-lane {
  max-height: 280px;
  overflow-y: auto;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section12 .s12-events-scroll-lane::-webkit-scrollbar {
  width: 6px;
}

.section12 .s12-events-scroll-lane::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}

.section12 .s12-event-selection-row {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  background-color: #ffffff;
  transition: border-color 0.2s;
}

.section12 .s12-event-selection-row:has(.s12-event-checkbox:checked) {
  border-color: #2563eb;
  background-color: #f8fafc;
}

.section12 .s12-event-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 6px 0;
}

.section12 .s12-event-meta-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.section12 .s12-meta-date {
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
}

.section12 .s12-meta-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.section12 .s12-meta-pill.competition-type { background-color: #fff1f2; color: #f43f5e; }
.section12 .s12-meta-pill.masterclass-type { background-color: #eff6ff; color: #2563eb; }
.section12 .s12-meta-pill.status-type { background-color: #fef3c7; color: #d97706; }

.section12 .s12-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.section12 .s12-event-checkbox {
  display: none;
}

.section12 .s12-custom-check {
  width: 18px;
  height: 18px;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  background-color: #ffffff;
  display: inline-block;
  position: relative;
  transition: all 0.2s;
}

.section12 .s12-event-checkbox:checked + .s12-custom-check {
  background-color: #2563eb;
  border-color: #2563eb;
}

.section12 .s12-event-checkbox:checked + .s12-custom-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.section12 .s12-label-text {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
}


.section12 .s12-nested-heading {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  margin: 16px 0 10px 0;
  text-align: left;
}

.section12 .s12-events-scroll-lane {
  max-height: 200px;
  overflow-y: auto;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section12 .s12-events-scroll-lane::-webkit-scrollbar {
  width: 5px;
}

.section12 .s12-events-scroll-lane::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}

.section12 .s12-event-selection-row {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background-color: #ffffff;
}

.section12 .s12-event-selection-row:has(.s12-event-checkbox:checked) {
  border-color: #2563eb;
  background-color: #f8fafc;
}

.section12 .s12-event-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.section12 .s12-event-meta-tags {
  display: flex;
  align-items: center;
  gap: 6px;
}

.section12 .s12-meta-date {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.section12 .s12-meta-pill {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}

.section12 .s12-meta-pill.competition-type { background-color: #fff1f2; color: #f43f5e; }
.section12 .s12-meta-pill.masterclass-type { background-color: #eff6ff; color: #2563eb; }
.section12 .s12-meta-pill.status-type { background-color: #fef3c7; color: #d97706; }

.section12 .s12-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.section12 .s12-event-checkbox {
  display: none;
}

.section12 .s12-custom-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  background-color: #ffffff;
  position: relative;
}

.section12 .s12-event-checkbox:checked + .s12-custom-check {
  background-color: #2563eb;
  border-color: #2563eb;
}

.section12 .s12-event-checkbox:checked + .s12-custom-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.section12 .s12-label-text {
  font-size: 12px;
  color: #475569;
  font-weight: 600;
}
.phone-prefix {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  font-size: 14px;
  color: #292929;
  white-space: nowrap;
}
.phone-group {
  display: flex;
  gap: 10px;
}