.grid-container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 30px;
   justify-content: space-evenly;
   align-items: center;
   justify-items: center;
 }

 .student-form h2 {
   text-align: left !important;
   color: #000 !important;
 }

 .student-form {
   border: 1px solid #8561A9;
   padding: 20px;
   border-radius: 25px;
 }

 /* For screens below 1200px — 4 columns */
 @media (max-width: 1300px) {
   .grid-container {
     grid-template-columns: repeat(4, 1fr) !important;
   }
 }

 @media screen and (max-width: 480px) {
   .march {
     margin-top: 50px !important;
   }
   .demon {
        flex-direction: column-reverse !important;
    }
 }

 @media screen and (min-width: 481px) and (max-width: 767px) {
      .demon {
        flex-direction: column-reverse !important;
    }
          
   .march {
     margin-top: 50px !important;
   }
 }

 @media screen and (min-width: 768px) and (max-width: 991px) {
   .march {
     margin-top: 50px !important;
   }
 }

 @media screen and (min-width: 992px) and (max-width: 1199px) {
   .march {
     margin-top: 50px !important;
   }
 }

 /* For screens below 992px — 3 columns */
 @media (max-width: 992px) {
   .grid-container {
     grid-template-columns: repeat(3, 1fr) !important;
   }
 }

 /* For screens below 768px — 2 columns */
 @media (max-width: 768px) {
   .grid-container {
     grid-template-columns: repeat(2, 1fr) !important;
   }
 }

 /* For screens below 576px — 1 column */
 @media (max-width: 576px) {
   .grid-container {
     grid-template-columns: 1fr !important;
   }
 }

 .round-skew {
   width: 230px;
   height: max-content;
   background-color: #F8E3F0;
   padding: 15px 30px;
   margin-left: 5%;
   text-align: left;
   margin-bottom: 25px;
   margin-top: 50px;
   transform: skew(-30deg);
 }

 @media screen and (min-width: 1200px) and (max-width: 1439px) {
   .why-choose-section {
     position: relative;
     background: url(../img/bg/bg8.svg) center / cover no-repeat;
     height: 500px !important;
     display: flex;
     padding: 50px 0px;
     align-items: center;
     justify-content: center;
     color: #fff;
     text-align: center;
     overflow: hidden;
   }
 }

 @media screen and (min-width: 1440px) and (max-width: 1919px) {
   .why-choose-section {
     position: relative;
     background: url(../img/bg/bg8.svg) center / cover no-repeat;
     height: 500px !important;
     display: flex;
     padding: 50px 0px;
     align-items: center;
     justify-content: center;
     color: #fff;
     text-align: center;
     overflow: hidden;
   }
 }

 @media screen and (min-width: 1920px) {
   .why-choose-section {
     position: relative;
     background: url(../img/bg/bg8.svg) center / cover no-repeat;
     height: 500px !important;
     display: flex;
     padding: 50px 0px;
     align-items: center;
     justify-content: center;
     color: #fff;
     text-align: center;
     overflow: hidden;
   }
   .map-overlay p  {
     margin-bottom: 12px !important;
     display: flex;
     font-size: 26px !important;
     color: #fff;
     font-family: "Itim", cursive;
     align-items: flex-start;
     gap: 8px;
   }
 }

 @media screen and (max-width: 1024px) {
   .contact-map {
     margin-top: 50px;
   }
 }

 @media screen and (min-width: 376px) and (max-width: 480px)   {
   .contact-container {
     background: #fff;
     border-radius: 25px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     max-width: 100% !important;
     width: 100%;
     padding: 15px !important;
   }

   .map-overlay p {
     margin-bottom: 12px !important;
     display: flex;
     font-size: 14px !important;
     color: #fff;
     font-family: "Itim", cursive;
     align-items: flex-start;
     gap: 8px;
   }

   .contact-section {
     padding: 0px !important;
     margin-top: 0px !important;
   }
 }
 @media screen and (min-width: 321px) and (max-width: 375px) {
  .contact-container {
     background: #fff;
     border-radius: 25px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     max-width: 100% !important;
     width: 100%;
     padding: 15px !important;
   }
p {
    font-weight: normal;
    line-height: 22px;
    color: #555555;
    margin-bottom: 15px;
}
   .map-overlay p {
     margin-bottom: 12px !important;
     display: flex;
     font-size: 12px !important;
     color: #fff;
     font-family: "Itim", cursive;
     align-items: flex-start;
     gap: 8px;
   }

   .contact-section {
     padding: 0px !important;
     margin-top: 0px !important;
   }
 }
@media screen and (max-width: 320px) { .contact-container {
     background: #fff;
     border-radius: 25px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     max-width: 100% !important;
     width: 100%;
     padding: 15px !important;
   }

   .map-overlay p {
     margin-bottom: 12px !important;
     display: flex;
     font-size: 11px !important;
     color: #fff;
     font-family: "Itim", cursive;
     align-items: flex-start;
     gap: 8px;
   }

   .contact-section {
     padding: 0px !important;
     margin-top: 0px !important;
   }}
 @media screen and (min-width: 481px) and (max-width: 767px) {
   .map-overlay p {
     margin-bottom: 12px !important;
     display: flex;
     font-size: 18px !important;
     color: #fff;
     font-family: "Itim", cursive;
     align-items: flex-start;
     gap: 8px;
   }

   .contact-container {
     background: #fff;
     border-radius: 25px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     max-width: 100% !important;
     width: 100%;
     padding: 15px !important;
   }

   .contact-section {
     padding: 0px !important;
     margin-top: 0px !important;
   }
 }

 .round-skew1 {
   width: 230px;
   height: max-content;
   background-color: #8561A9;
   padding: 15px 30px;
   margin-left: 5%;
   text-align: left;
   margin-bottom: 25px;
   margin-top: 50px;
   transform: skew(-30deg);
 }

 .why-choose-us {
   margin-top: 50px;
 }

 .why-choose-section {
   position: relative;
   background: url('../img/bg/bg8.svg') center/cover no-repeat;
   height: 350px;
   display: flex;
   padding: 50px 0px;
   align-items: center;
   justify-content: center;
   color: #fff;
   text-align: center;
   overflow: hidden;
 }

 /* Purple overlay */
 .why-choose-section::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(133, 97, 169, 0.7);
   z-index: 1;
 }

 .why-choose-content {
   position: relative;
   z-index: 2;
   color: #fff;
 }

 .random {
   color: #fff;
   font-size: 24px;
   font-family: "Roboto", sans-serif;
 }

 .why-choose-content h2 {
   text-transform: uppercase;
   font-size: 36px;
   letter-spacing: 1px;
   font-family: "Itim", cursive;
   color: #fff;
   margin-bottom: 0px;
 }

 .circle84 {
   width: 110px;
   height: 110px;
   border-radius: 50%;
   background: #fff;
   color: #673496;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 36px;
   font-weight: 700;
   margin: 0 auto 20px;
   border: 6px solid #c2a1e1;
   position: relative;
 }

 .circle84::before {
   content: "";
   position: absolute;
   top: -10px;
   left: -10px;
   right: -10px;
   bottom: -10px;
   border: 3px dashed #fff;
   border-radius: 50%;
 }

 .why-choose-content p {
   font-size: 18px;
   font-weight: 500;
 }

 .round-centent {
   height: 270px;
   width: 270px;
   margin: 50px 0px;
   border-radius: 50%;
   background: linear-gradient(to top, #E4E5E3 0%, #fff 100%);
   position: relative;
   text-align: center;
   padding: 20px;
   box-sizing: border-box;
 }

 .round-step {
   margin: 0px;
   color: #000;
   font-size: 13px;
   line-height: 16px;
   font-family: "Itim", cursive;
 }

 .round-img {
   position: absolute;
   margin-top: -70px;
 }

 .round-skew p {
   margin: 0px;
   color: #000;
   transform: skew(30deg);
   font-size: 12px;
   font-family: "Itim", cursive;
 }

 .round-skew1 p {
   margin: 0px;
   color: #fff;
   transform: skew(30deg);
   font-size: 12px;
   font-family: "Itim", cursive;
 }

 .round-centent::before {
   border-radius: 100%;
   content: '';
   background-image: linear-gradient(to bottom, #ccc 0%, #fff 100%);
   box-shadow: 0px 50px 50px #ccc;
   top: -5px;
   left: -5px;
   bottom: -5px;
   right: -5px;
   position: absolute;
   z-index: -1;
 }

 .contact-section {
   padding: 80px 20px;
   margin-top: -200px;
   position: relative;
   z-index: 9;
   display: flex;
   justify-content: center;
   align-items: center;
 }


 /* White card */
 .contact-container {
   background: #fff;
   border-radius: 25px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
   max-width: 80%;
   width: 100%;
   padding: 40px 30px;
 }

 .contact-container h2 {
   text-align: center;
   font-family: "Itim", cursive;
   color: #8561A9;
   font-size: 32px;
   margin-bottom: 30px;
 }

 /* Bootstrap-like row simulation (if you’re not using real Bootstrap) */

 /* Contact Form */
 .contact-form label {
   display: block;
   font-size: 15px;
   color: #000;
   font-family: "Roboto", sans-serif;
   margin-bottom: 6px;
 }

 .contact-form input {
   width: 100%;
   padding: 5px 14px;
   margin-bottom: 14px;
   border-radius: 12px;
   border: 1px solid #eee;
   background: #F8E3F0;
   font-size: 15px;
   height: 40px;
   color: #000;
   font-family: "Roboto", sans-serif;
 }

 .contact-form input:focus {
   outline: none;
   border-color: #8561A9;
 }

 .contact-form button {
   width: 100%;
   padding: 12px;
   border: none;
   border-radius: 8px;
   background: #8561A9;
   color: #fff;
   font-size: 15px;
   font-weight: 500;
   cursor: pointer;
   transition: 0.3s;
 }

 .contact-form button:hover {
   background: #8561A9;
 }

 /* Map */
 .contact-map {
   position: relative;
   height: 100%;
   background: rgba(133, 97, 169, 0.7);
   min-height: 520px;
   border-radius: 20px;
   overflow: hidden;
 }

 .contact-map iframe {
   width: 100%;
   height: 100%;
   background: rgba(133, 97, 169, 0.7);
   border: 0;
 }

 /* Purple Info Box */
 .map-overlay {
   position: absolute;
   bottom: 20px;
   z-index: 9;
   left: 20px;
   right: 20px;
   background-color: #8561A9;
   color: #fff;
   border-radius: 12px;
   padding: 20px;
   font-size: 14px;
   line-height: 1.5;
 }

 .map-overlay p {
   margin-bottom: 25px;
   display: flex;
   font-size: 20px;
   color: #fff;
   font-family: "Itim", cursive;
   align-items: flex-start;
   gap: 8px;
 }

 .contact-map::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(133, 97, 169, 0.7);
   pointer-events: none;
   /* keep map clickable */
 }

 .map-overlay i {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   background: #fff;
   color: #6a2c91;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   font-size: 12px;
 }

 /* Responsive layout */
 @media (max-width: 992px) {
.col-md-6,
   .col-md-5,
   .col-md-7 {
     max-width: 100%;
     flex: 0 0 100%;
   }

   .contact-map {
     min-height: 600px;
     margin-top: 20px;
   }
 }

 @media screen and (min-width: 768px) and (max-width: 991px) {
   .contact-form label {
     display: block;
     font-size: 24px;
     color: #000;
     font-family: "Roboto", sans-serif;
     margin-bottom: 6px;
   }

   .contact-form input {
     width: 100%;
     padding: 5px 14px;
     margin-bottom: 14px;
     border-radius: 12px;
     border: 1px solid #eee;
     background: #F8E3F0;
     font-size: 24px;
     height: 75px;
     color: #000;
     font-family: "Roboto", sans-serif;
   }

   .contact-form button {
     width: 100%;
     padding: 12px;
     border: none;
     border-radius: 8px;
     background: #8561A9;
     color: #fff;
     font-size: 24px;
     font-weight: 500;
     cursor: pointer;
     transition: 0.3s;
   }

   .contact-container h2 {
     text-align: center;
     font-family: "Itim", cursive;
     color: #8561A9;
     font-size: 34px;
     margin-bottom: 30px;
   }


   .map-overlay p {
     margin-bottom: 25px;
     display: flex;
     font-size: 23px;
     line-height: 34px;
     color: #fff;
     font-family: "Itim", cursive;
     align-items: flex-start;
     gap: 8px;
   }
 }

 @media screen and (min-width: 992px) and (max-width: 1199px) {
   .contact-form label {
     display: block;
     font-size: 20px;
     color: #000;
     font-family: "Roboto", sans-serif;
     margin-bottom: 6px;
   }

   .contact-form input {
     width: 100%;
     padding: 5px 14px;
     margin-bottom: 14px;
     border-radius: 12px;
     border: 1px solid #eee;
     background: #F8E3F0;
     font-size: 20px;
     height: 50px;
     color: #000;
     font-family: "Roboto", sans-serif;
   }

   .contact-form button {
     width: 100%;
     padding: 12px;
     border: none;
     border-radius: 8px;
     background: #8561A9;
     color: #fff;
     font-size: 20px;
     font-weight: 500;
     cursor: pointer;
     transition: 0.3s;
   }

   .contact-container h2 {
     text-align: center;
     font-family: "Itim", cursive;
     color: #8561A9;
     font-size: 30px;
     margin-bottom: 30px;
   }


   .map-overlay p {
     margin-bottom: 25px;
     display: flex;
     font-size: 22px;
     line-height: 34px;
     color: #fff;
     font-family: "Itim", cursive;
     align-items: flex-start;
     gap: 8px;
   }
 }

 @media screen and (min-width: 1200px) and (max-width: 1439px) {
   .contact-form label {
     display: block;
     font-size: 20px;
     color: #000;
     font-family: "Roboto", sans-serif;
     margin-bottom: 6px;
   }

   .contact-form input {
     width: 100%;
     padding: 5px 14px;
     margin-bottom: 14px;
     border-radius: 12px;
     border: 1px solid #eee;
     background: #F8E3F0;
     font-size: 20px;
     height: 50px;
     color: #000;
     font-family: "Roboto", sans-serif;
   }

   .contact-form button {
     width: 100%;
     padding: 12px;
     border: none;
     border-radius: 8px;
     background: #8561A9;
     color: #fff;
     font-size: 20px;
     font-weight: 500;
     cursor: pointer;
     transition: 0.3s;
   }

   .contact-container h2 {
     text-align: center;
     font-family: "Itim", cursive;
     color: #8561A9;
     font-size: 30px;
     margin-bottom: 30px;
   }


   .map-overlay p {
     margin-bottom: 25px;
     display: flex;
     font-size: 20px !important;
     line-height: 30px;
     color: #fff;
     font-family: "Itim", cursive;
     align-items: flex-start;
     gap: 8px;
   }
 }

 @media screen and (min-width: 1440px) and (max-width: 1919px) {
   .contact-form label {
     display: block;
     font-size: 24px;
     color: #000;
     font-family: "Roboto", sans-serif;
     margin-bottom: 6px;
   }

   .contact-form input {
     width: 100%;
     padding: 5px 14px;
     margin-bottom: 14px;
     border-radius: 12px;
     border: 1px solid #eee;
     background: #F8E3F0;
     font-size: 24px;
     height: 75px;
     color: #000;
     font-family: "Roboto", sans-serif;
   }

   .contact-form button {
     width: 100%;
     padding: 12px;
     border: none;
     border-radius: 8px;
     background: #8561A9;
     color: #fff;
     font-size: 24px;
     font-weight: 500;
     cursor: pointer;
     transition: 0.3s;
   }

   .contact-container h2 {
     text-align: center;
     font-family: "Itim", cursive;
     color: #8561A9;
     font-size: 34px;
     margin-bottom: 30px;
   }


   .map-overlay p {
     margin-bottom: 25px;
     display: flex;
     font-size: 18px !important;
     line-height: 34px;
     color: #fff;
     font-family: "Itim", cursive;
     align-items: flex-start;
     gap: 8px;
   }
 }

 @media screen and (min-width: 1920px) {
   .contact-form label {
     display: block;
     font-size: 28px;
     color: #000;
     font-family: "Roboto", sans-serif;
     margin-bottom: 6px;
   }

   .contact-form input {
     width: 100%;
     padding: 5px 14px;
     margin-bottom: 14px;
     border-radius: 12px;
     border: 1px solid #eee;
     background: #F8E3F0;
     font-size: 28px;
     height: 85px;
     color: #000;
     font-family: "Roboto", sans-serif;
   }

   .contact-form button {
     width: 100%;
     padding: 12px;
     border: none;
     border-radius: 8px;
     background: #8561A9;
     color: #fff;
     font-size: 28px;
     font-weight: 500;
     cursor: pointer;
     transition: 0.3s;
   }

   .contact-container h2 {
     text-align: center;
     font-family: "Itim", cursive;
     color: #8561A9;
     font-size: 38px;
     margin-bottom: 30px;
   }


   .map-overlay p {
     margin-bottom: 25px;
     display: flex;
     font-size: 28px;
     line-height: 38px;
     color: #fff;
     font-family: "Itim", cursive;
     align-items: flex-start;
     gap: 8px;
   }
 }