.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Your existing loader styles */

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1),
    inset 10px 10px 10px rgba(0, 0, 0, 0.1);
}
.wrapper::before {
  content: "";
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
    10px 10px 10px rgba(0, 0, 0, 0.1);
}

.loader-image {
  position: absolute;
  height: 80px; /* Adjust height as needed */
  width: 80px;  /* Adjust width as needed */
  border-radius: 50%;
  object-fit: cover;
}


.loader-span {
  height: 186px;
  width: 220px;
  position: absolute;
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.loader-span::before {
  content: "";
  position: absolute;
  height: 30px;
  border-radius: 50%;
  width: 30px;
  background: linear-gradient(45deg, #dafa0b, #5c89ff);
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}




* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;

}
html {
  scroll-behavior: smooth;
}




@font-face {
  font-family: "SF UI Display";
  src: url("fonts/sf-ui-display-cufonfonts.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "SF UI Display", sans-serif;
  line-height: 1.6;
  /* cursor: url("./image/school/logo.png"), auto; */
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10%;

}

.first{
  background-image: url("./image/school/bgheader.png");
  background-size: cover;
}



/* popup css start */

/* General Styles */

/* Popup Styles */
/* Popup Styling */
/* Popup Styling */
/* General Styles */

/* Popup Styles */

/* header section start */
/* Full-screen section styling */
.video-background {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: auto;
  overflow: hidden;
  display: flex;
  align-items: baseline;
  justify-content: center;
}



/* Content styling */
.video-background .content {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 100vw;
  padding: 1rem;
  color: #ffffff;
  z-index: 1;
  justify-content: space-between;
  font-family: Arial;
  margin-left: 9px;

    
}

.text-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Left side: text content */
.video-background .content h1 {
  font-size: 3.5rem;
  max-width: 70%;
  font-weight: 80;
  margin-bottom: 10px;
  font-weight: 550;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

.video-background .content p {
  font-size: 1.2rem;
  font-weight: 300;
  margin-bottom: 20px;
}
.line-break-text {
  width: 38ch; /* Adjust the width to fit 10 words approximately */
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: justify; /* Optional: To make it look cleaner */
  margin: 0 auto; /* Center align the text block */
  line-height: 1.2;
  margin-left: -1px; /* Add spacing between lines for readability */
}

.video-background .content button {
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
 

  border: none;
  cursor: pointer;
  border-radius: 2rem;
}

/* Flexbox layout: Left text, right image */
.video-background .content .image-right {
  flex: 1;
  max-width: 50%;
}

.video2-content{display: flex;
flex-direction: column;
gap: 1px;
padding-top: 33px;


}
.text-left-btn2{
  background-color: #7A4500;
}



.video2-content-h1 {font-size: 2rem; }

.video2-h3{font-size: 2rem; color: #FFECB4;}

/* Tablet and Mobile Styles */
@media screen and (max-width: 1024px) {
  .video-background {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .content {
    padding: 20px;
    margin-left: 0;
    max-width: 100%;
    color: rgb(243, 237, 237);
    flex-direction: column;
    align-items: center;
  }

  .text-left h1 {
    font-size: 36px;
    color: black; /* Set heading color to black */
  }

  .line-break-text {
    font-size: 16px;
    color: black; /* Set paragraph color to black */
  }

  .video-background .content h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
    max-width: 100%;
}
.text-left h1 {
  font-size: 36px;
  color: rgb(250, 247, 247); /* Set heading color to black */
}

.line-break-text {
  font-size: 16px;
  color: rgb(250, 246, 246); /* Set paragraph color to black */
}

/* .text-left-btn {
  justify-content: center;
  /* max-width: 100%; */
/* } */ 
}

/* Responsive styling */
/* General Styling for the Student Section */
.student-section {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  gap: 20px;  
  padding-top: 2rem;
  padding-bottom: 2rem;
  flex-wrap: wrap; 

}

.student-section-1 {
  width: 30%; /* Fixed width on larger screens */
  min-width: 280px; /* Minimum width for responsiveness */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #E5F8F0;
  padding: 10px;
  border-radius: 8px; /* Added border radius for rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Added shadow for better visuals */
}

.student-section-1 img {
  width: 100%;
  height: auto;
  max-width: 400px;
  border-radius: 8px; /* Rounded corners for the image */
}

.student-sec-h1 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 1rem;
}

.student-sec-h1 h1 {
  justify-content: center;
  align-items: center;
  text-align: center;
  border-bottom: 2px solid black;
  padding-bottom: 5px;
  font-size: 1.2rem; /* Adjusted font size for larger screens */
}

/* Media Queries for Responsiveness */

/* For Tablets and Large Phones (min-width: 768px and up) */
@media only screen and (max-width: 1024px) {
  .student-section {
    flex-direction: row;
    justify-content: space-between; /* More space between items */
    padding: 1rem; /* Reduce padding */
  }

  .student-section-1 {
    width: 45%; /* Make each item take up less space */
    height: auto; /* Allow height to adjust based on content */
  }

  .student-sec-h1 h1 {
    font-size: 1rem; /* Adjust font size for tablets */
  }
}

/* For Mobile (max-width: 768px) */
@media only screen and (max-width: 768px) {
  .student-section {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
  }

  .student-section-1 {
    width: 80%; /* Make items take up more space on smaller screens */
    height: auto; /* Allow height to adjust based on content */
    margin-bottom: 20px; /* Add space between items */
  }

  .student-sec-h1 h1 {
    font-size: 1rem; /* Smaller font size for mobile */
  }
  
  .about-us-right p {
    font-size: 0.9rem;
    text-align: center;
    max-width: 300px;
    padding-top: 15px;
}

.para{
  width: 338px;
}
}



/* Responsive adjustments for widths between 780px and 1000px */
@media (max-width: 1000px) and (min-width: 780px) {
  .video-background .content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .video-background .content h1 {
    font-size: 2.8rem; /* Adjust font size to fit screen */
  }
  .video-background .content p {
    font-size: 1.2rem;
    margin-bottom: 15px;
  }
  .video-background .content .text-left {
    max-width: 100%;
    padding: 0 1rem;
  }
   .text-left-btn1 ,.text-left-btn3 {
    padding: 8px 16px;
    font-size: 0.9rem;
    background-color: #F1D994;
    color: #7A4500;
  }
  .text-left-btn2 {
    padding: 8px 16px;
    font-size: 0.9rem;
    background-color: #7A4500;
    /* color: #fbefcd; */
  } 

  /* Optionally hide second button on smaller screens to save space */
  .text-left-btn1:nth-child(2) {
    display: none;
  }

    /* .text-left-btn1 {
        width: 54%;
        padding: 12px;
        font-size: 1.1rem;
    } */


}

/* Smaller screens below 780px */
@media (max-width: 780px) {


  .video-background .content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .video-background .content h1 {
    font-size: 2.5rem;
  }
  .video-background .content p {
    font-size: 1rem;
  }
  .video-background .content .text-left,
  .video-background .content .image-right {
    max-width: 100%;
  }
  

  
.video2-content-h1 {font-size: 1rem; color:#7A4500; font-weight: bold; }

.video2-h3{font-size: 1rem; color:#7A4500;}

}

@media (max-width:520px) {
  .video-background .content h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
  }
}

/* about us section */
/* Main container styling */
.about-us {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  BACKGROUND-COLOR:#FDF8EF;
 
  text-align: center;


}

.about-us h1 {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1.5 rem;
  padding-top: 17px;
    font-weight: bold;
}

/* Section styling */
.about-us-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 1200px;
  width: 100%;
}

.about-us-right{width: auto;
}
.about-us-right  p {
  font-size: 1rem;
  line-height: 1.5;
  max-width: 1300px;
  font-weight: 500;
font-style: normal;
text-transform: uppercase;
} 

.


/* Gradient text */


/* Tablet (768px and below) */
@media (max-width: 768px) {
  .about-us h1 {
    font-size: 1.8rem;
  }

  .about-us-section {
    flex-direction: column;
    text-align: center;
  }

  .about-us-left,
  .about-us-right {
    max-width: 100%;
  }

  .about-us-right {
    padding: 1rem;
  }

  .about-us-right p {
    font-size: 0.95rem;
    text-align: center;
  }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
  .about-us h1 {
    font-size: 1.6rem;
  }

  .about-us-section {
    gap: 1rem;
  }

  .about-us-left img {
    max-width: 100%;
  }

  .about-us-right p {
    font-size: 0.9rem;
    text-align: center;
    width: 360px;

  }
}

/* General Footer Container Styling */

/* section3 start  */

/* General Styling for Section3 */
.section3 {
  display: flex;
  flex-direction: row;  /* Default layout for large screens */
  justify-content: center;
  align-items: center;
   gap: 10px;
   background-color: #EDDCC6;
  padding: 2rem 0;
  flex-wrap: wrap;  /* Allow wrapping on smaller screens */
}

.section-a {
  width: 25%;  /* Set width to 33% for large screens */
  min-width: 280px;  /* Minimum width for better responsiveness */

  padding: 15px;
  text-align: center;

}

.section-a img {
  width: 100%;  /* Make images responsive */
  height: auto;
  max-width: 20%;
  border-radius: 8px;  /* Rounded corners for images */
}

.section-a h1 {
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
}

.section-a p {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* Media Queries for Responsiveness */

/* For Tablets and Large Phones (max-width: 1024px) */
@media only screen and (max-width: 1024px) {
  .section3 {
      flex-direction: row;
      justify-content: space-between;
      gap: 15px;
  }

  .section-a {
      width: 45%;  /* Adjust width to 45% on tablets */
  }
}

/* For Mobile (max-width: 768px) */
@media only screen and (max-width: 768px) {
  .section3 {
      flex-direction: column;  /* Stack items vertically on mobile */
      justify-content: center;
      align-items: center;
  }

  .section-a {
      width: 80%;  /* Take up more space on mobile screens */
      margin-bottom: 20px;  /* Add space between sections */
  }
}



/* contact start */

/* General Styles for the Contact Section */
.Contact {
  padding: 3rem 2rem;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}

.connect h1 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #2c3e50;
}

.connect-section {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px; /* Adjust gap to reduce space between sections */
}

.connect-left {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.connect-left img {
  max-width: 100%;
  height: auto; /* Ensure proper aspect ratio */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.connect-right {
  display: flex;
  width: 50%;
  margin-left: 40px;
  flex-direction: column;
  justify-items: flex-start;
  gap: 1.5rem; /* Reduced gap between elements */
  text-align: left;
}

.connect-right h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #34495e;
}

.connect-right h1 {
  font-size: 2.5rem;
  font-weight: bold;
  color: #2c3e50;
  margin-top: 0.5rem;
}

.connect-right p {
  font-size: 1rem;
  line-height: 1.6;
  color: #7f8c8d;
  margin-top: 1rem;
}

.text-left-btn1 ,.text-left-btn3 {
  background-color: #C7AE8E;
  color: #512E01;
  padding: 12px 20px;
  border-radius: 100px;
  width: fit-content;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.text-left-btn1 ,.text-left-btn3:hover {
  background-color: #ffd117;
}

/* Media Queries for Responsiveness */

/* For Tablets and Large Phones (max-width: 1024px) */
@media only screen and (max-width: 1024px) {
  .connect-section {
    flex-direction: column;
    gap: 10px; /* Reduced gap on medium screens */
    align-items: center;
  }

  .connect-left,
  .connect-right {
    flex: 1;
    max-width: 100%; /* Remove max-width on medium screens */
  }

  .connect-right h1 {
    font-size: 2rem;
    margin-bottom: 10px; /* Reduced bottom margin */
  }

  .connect-right p {
    font-size: 1rem;
  }

  .text-left-btn1 .text-left-btn3 {
    width: 40%;
    padding: 15px; /* Increase button padding */
    font-size: 1.1rem;
  }
   .text-left-btn3 {
    width: 40%;
    padding: 15px; /* Increase button padding */
    font-size: 1.1rem;
  }
}

/* For Mobile (max-width: 768px) */
@media only screen and (max-width: 768px) {
  .connect h1 {
    font-size: 2rem; /* Reduce heading size for mobile */
  }

  .connect-section {
    flex-direction: column;
    align-items: center;
    padding: 1rem;
  }

  .connect-left,
  .connect-right {
    flex: 1;
    width: 100%;
    margin-left: 0; /* Remove left margin on mobile */
  }

  .connect-left img {
    max-width: 80%; /* Limit image width on mobile */
    margin-bottom: 10px; /* Add some space below the image */
  }

  .connect-right {
    padding: 1rem;
  }

  .connect-right h1 {
    font-size: 1.8rem;
    margin-bottom: 15px; /* Reduced bottom margin */
  }

  .connect-right p {
    font-size: 0.9rem; /* Adjust text size for smaller screens */
  }

  .text-left-btn1 {
    width: 50%; /* Full width button on mobile */
    padding: 12px;
    font-size: 1.1rem;
  }
  .text-left-btn3{

    width: 100%; /* Full width button on mobile */
    padding: 12px;
    font-size: 1.1rem;
  }
}


/* contact end */
/* Footer container */
.footer {
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: 100vw;
  background-color: #D1EDE1;
  padding: 20px;
}

/* Footer heading */
.footer-a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  padding-bottom: 20px;
  width: 100%;
}

.footer-a h1 {
  font-size: 1.5rem;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 2px solid black;
  width: fit-content;
  text-align: center;
}

/* Footer links section */
.footer-b {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 20px;
  margin: 0 auto;
}

.footh1,.footh2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.footh2:after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background-color: #000;
  margin-top: 5px;
}
.footh1:after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background-color: #000;
  margin-top: 5px;
}

/* Quick Links and Address section */
.footer .address,
.footer .quick-links {
  flex: 1;
  margin-right: 20px;
}

.footer p {
  margin: 5px 0;
  line-height: 1.5;
}

/* Styling for the quick links section */
.quick-links-section {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
}

.footer .quick-links ul {
  list-style: none;
  padding: 0;
  flex: 1;
}

.footer .quick-links ul li {
  margin: 5px 0;
}

.footer .quick-links ul li a {
  text-decoration: none;
  color: #000;
  font-size: 1rem;
}

/* Footer copyright section */
.footer .copyright {
  text-align: left;
  margin-top: 20px;
  font-size: 14px;
  color: #333;
}

/* Responsive Design for Mobile and Tablet screens */
@media screen and (max-width: 768px) {
  /* Footer flex direction adjustment */
  .footer-b {
    flex-direction: column;
    align-items: center;
  }

  /* Center align footer links on smaller screens */
  .footer .address,
  .footer .quick-links {
    text-align: center;
    margin-bottom: 20px;
  }

  /* Stack the quick links vertically on smaller screens */
  .quick-links-section {
    flex-direction: column;
    gap: 10px;
  }

  .footer .quick-links ul {
    display: flex;
    flex-direction: column;
  }

  .footer .quick-links ul li {
    margin: 5px 0;
  }

  /* Center the copyright text */
  .footer .copyright {
    text-align: center;
    margin-top: 20px;
  }
  .footh1:after {
    content: "";
    display: block;
    width: 88px;
    height: 2px;
    background-color: #000;
    margin-top: 5px;
    margin-left: 103px;
}

  .footh2:after {
    content: "";
    display: block;
    width: 112px;
    height: 2px;
    background-color: #000;
    margin-top: 5px;
    margin-left: 2px;
}
}

/* Extra small screen styles (phones) */
@media screen and (max-width: 480px) {
  .footer-a h1 {
    font-size: 1.2rem; /* Make footer heading smaller on mobile */
  }

  .footer .address,
  .footer .quick-links {
    margin-right: 0;
    padding: 10px;
  }

  .footer p {
    font-size: 0.9rem;
  }

  .footer .quick-links ul li a {
    font-size: 0.9rem; /* Smaller font size for links on smaller screens */
  }
}