*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior:smooth;
}
html{
  font-family: "Winky Sans", sans-serif;
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  font-optical-sizing: auto;
  background-color: white;
}
.Main_container{
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}
#mobile-nav-text{
  display: none;
}
/* button hover effect ----------------------------------------*/
#nav-button1{
  font-size: 0.7rem;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  font: bold;
  padding: 0.7em 2em;
  border: 3px solid goldenrod;
  border-radius: 1rem;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16) 0 3px 6px rgba(0, 0, 0, 0.1);
  color: black;
  transition: 0.3s ease-in-out;
  z-index: 1;
}
#nav-button1::before{
  transition: 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: green;
  z-index: -1;
  border-radius: 1.5rem;
}
#nav-button1:hover, #nav-button1:focus {
  color: white;
}
#nav-button1:hover::before, #nav-button1:focus::before{
  transition: 0.3s ease-in-out;
  left: 0;
  right: 0;
  opacity: 1;
}
#nav-button1:active{
  transform: scale(0.9);
}
#nav-button2{
  font-size: 0.7rem;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  font: bold;
  padding: 0.7em 2em;
  border: 3px solid goldenrod;
  border-radius: 1rem;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16) 0 3px 6px rgba(0, 0, 0, 0.1);
  color: black;
  transition: 0.3s ease-in-out;
  z-index: 1;
}
#nav-button2::before{
  transition: 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color:#fff;
  z-index: -1;
  border-radius: 1.5rem;
  border: 3px solid #9a4e9e;
}
#nav-button2:hover, #nav-button2:focus {
  color: black;
}
#nav-button2:hover::before, #nav-button2:focus::before{
  transition: 0.3s ease-in-out;
  left: 0;
  right: 0;
  opacity: 1;
}
#nav-button2:active{
  transform: scale(0.9);
}

.get_in_touch {
  display: flex;
  gap: 2rem;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 2rem;
  min-height: 40rem;
  width: 100%;
  max-width: 100%;
  background-image: url("./Media_files/Pimg4.png");
  background-repeat: no-repeat;
  background-size: cover;
  backdrop-filter: blur(10px);
  border-radius: 0.125rem;
  flex-shrink: 1;
  overflow-x: hidden;
  box-sizing: border-box;
}

.get_in_touch .map-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  margin-top: 2rem;
  max-width: 100%;
}

.get_in_touch .map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.disPart_img img{
  height: 23rem;
  width: 15rem;
  max-width: 100%;
  margin-top: 3rem;
  margin-left: auto;
  margin-right: auto;
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

/* main{
  padding:(5em,7%);
} */
main p{
  margin-top: .35em;
}

#open-sidebar-button{
  display: none;
}
#close-sidebar-button{
  display: none;
}
nav{
background-color: azure;
border-bottom: 1px solid azure;
transition: ease-in-out 0.4s;
}

nav ul{
  list-style: none;
  display: flex;
}
nav a{
  display: flex;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  color: #1D1B24;
  padding: 1rem 2rem;
  transition: background-color 150ms ease;
}
.nav-logo img{
  height: 60px;
  width: auto;
  padding: 3px;
  margin-left: 10%;
}
.mobile-screen-logo img{
  height: 4.2rem;
  padding-left: 2%;
  width: auto;
  display: none;
}
.nav-logo a{
  padding: 0;
  opacity: 1;
}
nav li{
  display: flex;
}
#overlay{
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  inset: 0;
  z-index: 9;
  display: none;
  width: 100%;
  height: 100%;
}
.nav-buttons{
  margin-left: 16rem;
  float: right;
  display: flex;
 flex-direction: row-reverse;
}
#nav-button2{
  cursor: pointer;
 padding: 0.5rem 1.5rem;
 text-decoration: none;
 margin: 0.31rem;
 border: none;
 border-radius: 1.5rem;
 background-color: #9a4e9e;
 font-size: 0.93rem;
 font-weight: bolder;
 color: #fff;
}
#nav-button1{
  cursor: pointer;
  padding: .5rem 1.5rem;
  text-decoration: none;
  margin: 0.31rem;
  border: none;
  border-radius: 1.5rem;
  background-color:coral;
  font-size: 0.93rem;
  font-weight: bolder;
  color: #fff;
}
#nav-button2{
  background-color: #9a4e9e;
}



#about-btn ul {
  display: none;
  position: absolute;
  background-color: azure;
  padding: 10px; 
  margin-top: 3rem;
  list-style: none; 
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
}

#about-btn:hover ul {
  display: block;
  z-index: 20;
}

#about-btn ul li {
  padding: 5px 10px;
  justify-content: center;
  cursor: pointer;
}
#about-btn ul li a{
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0;
  text-align: center;
}


#prog-btn ul{
  display: none;
  position: absolute;
  background-color: azure;
  padding: 10px; 
  margin-top: 3rem;
  margin-left: 1.6rem;
  list-style: none; 
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
}
#prog-btn:hover ul {
  display: block;
  z-index: 20;
}
#prog-btn ul li {
  padding: 5px 10px;
  justify-content: center;
  cursor: pointer;
}

#prog-btn ul li a{
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0;
  text-align: center;
}
#media-btn ul{
  display: none;
  position: absolute;
  background-color: azure;
  padding: 10px; 
  margin-top: 3rem;
  margin-left: 1rem;
  list-style: none; 
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
}

#media-btn:hover ul {
  display: block;
  z-index: 20;
}
#media-btn ul li {
  padding: 5px 10px;
  cursor: pointer;
  justify-content: center;
}


#media-btn ul li a{
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0;
  text-align: center;
}

.hero_content .text{
  padding: 3px 5px;
  text-align: center;
  height: auto;
  width: 160px;
  font-weight: 300;
  font-style: normal;
  background-color: brown;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  position: relative;
  top: -4.6rem;
}
.hero {
  margin: 0 auto;
  color: black;
  padding: auto;
  width: 100%;
  max-width: 100%;
  min-height: 42rem;
  object-fit: cover;
  border-radius: 0.3125rem;
  background-size: 100% 100%;
  background-position: center;
  animation: slider 12s infinite linear;
  transition: background-image 1.5s linear;
} 

.hero .hero_content{
  position: relative;
  padding: 0 1rem;
}
.hero-main{
display: flex;
justify-content: space-between;
margin-top: 3rem;
}
.hero1 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hero1 .animate-element{
  height: 120px;
  width: 140px;
  background-color: wheat;
  border-radius: 1rem;
}
.hero-main h1{
  color: #fff;
text-align: center;
border-top-right-radius: 1rem;
border-top-left-radius: 1rem;
background-color: blueviolet;
}
.hero-main img{
  padding-left:1.5rem;
  height: 80px;
  width: auto;
}
.animate-element {
  position: relative;
  /* Add your other styling for animate-element here */
  
  /* Apply different tilts to each element */
  transform: rotate(0deg); /* Default no rotation */
}

/* Apply different rotation to each element using nth-child */
.animate-element:nth-child(1) {
  transform: rotate(-3deg); 
  background-color: #fff;
}

.animate-element:nth-child(2) {
  transform: rotate(2deg); 
}

.animate-element:nth-child(3) {
  transform: rotate(-1.5deg); 
  background-color: palevioletred;
}



/* Base styling for animate-element */
.animate-element {
  position: relative;
  /* Add your other styling for animate-element here */
}

/* Create the push pin effect using ::before pseudo-element */
.animate-element::before {
  content: "";
  position: absolute;
  top: -8px; /* Position it above the element */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Perfect centering */
  
  /* Pin head styling */
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #e60000; /* Red color for the pin */
  
  /* Add shadow for depth */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  
  /* Optional pin shine effect */
  background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 60%);
  
  /* Make sure it appears above the element */
  z-index: 1;
}

/* Optional: Create pin stem using ::after */
.animate-element::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 5px;
  background-color: #cc0000; /* Slightly darker red for the stem */
  z-index: 0;
}

@keyframes slider{
  0%{
    background-image: url(./Media_files/Asset-media4.jpg); 
  }
 
  20%{
    background-image: url(./Media_files/Asset-media4.jpg);
  }
 
40%{
  background-image: url(./Media_files/Asset-image.jpg);
}
50%{
  background-image: url(./Media_files/Asset-image.jpg);
}
60%{
  background-image: url(./Media_files/slider7.jpg);
}
80%{
  background-image: url(./Media_files/slider7.jpg);
}
100%{
  background-image: url(./Media_files/Asset-media4.jpg);
}
}


@keyframes appear {
  from{
    opacity: 0;
    scale: 0.5;
  }
  to{
    opacity: 1;
    scale: 1;
  }
  
}




.hero .buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.hero .buttons a {
    background-color: #011F5B;
    color: white;
    padding: 10px 1.25rem;
    margin: 0.3125rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: 0.4rem;
    font-weight: 400;
}

.hero .buttons a:hover{
box-shadow:  0.1px 1px 2px 2px grey;
transition: ease-in 0.4s;
transition: cubic-bezier(0.075, 0.82, 0.165, 1.5s);
background-color: black;
color: white;
}


.about {
    min-height:35rem;
    max-width:100%;
    background-color: #fff;
    display: flex;
    gap: 10px;             /* Space between divs */
    margin: 0;
    box-sizing: border-box;
}
.about-body{
flex: 1;
}
.about-body h2{
  text-align: center;
padding-top: 1rem;
color:#6F00FF;
font-weight: 700;
}

#about-bg{
  background-image:linear-gradient(#1877F2, rgba(0.3, 0, 0, 0)), url(./Media_files/About-bg.jpg);
  opacity: 0.9;
  background-position: center;
  background-size: cover;
  border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#about-bg h1,p{
  color: white;
  position: relative;
  margin: 0,auto;
  text-align: center;
}
#about-bg h1+p{
color: whitesmoke;
}
#about-bg-text{
  text-wrap: wrap;
  line-height: 2;
}
#about-bg-text h1:hover{
  transition: ease-in-out;
  animation-duration: 1s;
  text-decoration: underline;
}
.about p{
  padding: 5px;
  font-size: larger;
  animation: appear linear;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
}

/* ----Program Section -------- */
.eventsDiscription{
  padding: 2rem;
}
.eventsDiscription h1{
text-align: center;
}
.eventsDiscription p{
font-weight: 500;
}
.prog {
  background-image: url("./Media_files/Asset-bg3.png");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 40rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 2rem 0;
  box-sizing: border-box;
  text-align: center;
  overflow-x: hidden;
}
.prog h1{
  font-weight: 800;
  text-align: center;
  margin-top: 2rem;
  /* margin-inline: auto; */
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 1px solid;
  animation: typing 5s steps(22) infinite, blink 1s step-end infinite;
}
@keyframes typing {
  0% {
    width: 0;
  }
  40% {
    width: 22ch;
  }
  60% {
    width: 22ch;
  }
  100% {
    width: 0;
  }
}
  
@keyframes blink {
  50%{
    border-color:transparent;
  }
}
.prog p{
  padding: 2rem;
  text-align: center;
  letter-spacing: 3px;
  font-weight: 600;
}
.prog button{
  border-radius: 3rem;
  padding: 10px;
  border: none;
  background-color:#478778;
  color: #fff;
  opacity: 1.5;
  margin-top: 1.5rem;
  font-weight: bold;
  cursor: pointer;
}

.prog button a{
  text-decoration: none;
  color: #fff;
}
#prog-btn ul li a{
padding: 0;
margin: 0;
}
.prog-img {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.prog-img img {
  max-width: 100%;
  height: auto;
  width: auto;
  max-height: 400px;
  object-fit: contain;
  margin: 0 auto;
}


/* ----More about Section -------- */

.more-about{
  display: flex;
  height: 33rem;
  width: 100%;
  max-width: 100%;
  background-color: transparent;
  overflow-x: hidden;
}
.more-about .ma-p1{
  width: 50%;
  height: 100%;
  background-image: url("./Media_files/image-assets2.jpg.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
}

.more-about .ma-p2{
  width: 50%;
  height: 100%;
  background-color: #9a4e9e;
  opacity: 1;
  padding: 2rem;
  font-size: larger;
}
.ma-p2 h2{
  color: #fff;
  text-align: start;
  font-weight: 600;
  font-style: italic;
  font-size: 2.5rem;
}

.ma-p2 h4{
  color: #fff;
  text-align: start;
  margin-top: 1rem;
  padding: 2rem 0rem 0rem 4rem;
  font-weight: 600;
  font-size: large;
}
.ma-p2 p{
  color: #fff;
  text-align: start;
  font-weight: 400;
  line-height: 1.5;
text-align: justify;
}

.ma-p2 button{
  border-radius: 2.5rem;
  padding: 10px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background-color: #fff;
  opacity: 1.5;
  transition: ease-in-out 0.4s;
  margin-left: 4rem;
  margin-top: 10px;
}
.ma-p2 button:hover{
  background-color: transparent;
  color: #000000;
  border: 1px solid #fff;
  opacity: 2;
}
.numbers {
    text-align: center;
    padding: 3.125rem;
}

.numbers ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block
}
  

  footer{
    /* justify-content: center; */
    text-align: center;
    color: black;
    position: sticky;
  }
  .footer-links ul li a{
list-style: none;
text-decoration: none;
  }

  #find-us{
    display: none;
  }
  .get_in_touch{
    display: flex;
    gap: 2rem;
    flex-direction: column;
    justify-content: space-evenly;
    justify-items: center;
   padding: 2rem;
    min-height: 40rem;
    width: 100%;
    max-width: 100%;
    background-image: url("./Media_files/Pimg4.png");
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: blur(10px);
   border-radius: 0.125rem;
   flex-shrink: 1;
   overflow-x: hidden;
   box-sizing: border-box;
  }

  .get_in_touch .part{
    text-decoration: none;
    color: black;
    padding: .5rem;
    width: 50dvw;
    height: 100%;
    padding: 1rem;
    display: flex;
    gap: 2rem;
  }
 
.location{
  background-color: #fff;
  width: fit-content;
  height: fit-content;
  border-radius: 1rem;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-evenly;
  margin-top: 2rem;
  margin-left: auto;
  margin-right:auto;
}
  .gt-bar{
    display: none;
    height: 20rem;
    width: 28rem;
    background-color: #fff;
    border-radius: 1rem;
    padding: 1rem;
    margin: 4rem 5rem 0rem 0rem;
    transition: ease-in-out 0.5s;
  }
  .gt-bar:hover{
    transform: scale(1.05);
   
  }
  .gt-bar h2{
    color: black;
    text-align: start;
    padding: 0rem 0rem 0rem 2rem;
    font-family: "Kanit", sans-serif;
    font-weight: 550;
    font-size: 2.5rem;
  }
  .gt-bar h4{
    color: #9a4e9e;
    text-align: start;
    padding: 0rem 0rem 0rem 4rem;
    font-family: "Kanit", sans-serif;
    font-size: smaller;
    font-weight: 600;
  }
  .gt-bar P{
    color: black;
    text-align: start;
    padding: 0rem 0rem 0rem 2rem;
    font-family: "Kanit", sans-serif;
    font-size: medium;
    font-style: italic;
  }
  .gt-bar a{
    text-align: start;
    padding: 0rem 0rem 0rem 3rem;
   font-size: 1rem;
   font-weight: 800;
  }
  .gt-bar a button span{
font-size: 1.3rem;
margin-top: auto;
  }
  .gt-bar a button{
    border-radius: 2rem;
    padding: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    background-color:#9a4e9e;
    opacity: 1.5;
    transition:cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.3s;
  }
  .gt-bar a button:hover{
    background-color: transparent;
    color: #000000;
    border: 2px solid #9a4e9e;
    opacity: 2;
  }
  .get_in_touch .map-container{
    height: 30%;
    max-width: 100%;
    margin-top: 2rem;
  }
  .get_in_touch .part .follow-us{
    width: 200px;
    color: #141448;
    font-size: 1.25rem;
    position: relative;
  }

  .get_in_touch .part .follow-us i{
    opacity: 0.8;
  }
  .get_in_touch .part .follow-us i:hover{
    opacity: 1;
    font-size: 1.28rem;
    cursor: pointer;
  }
  

  .sig_part{
    height: clamp(35rem 20vh 50rem);
    width: 100%;
    max-width: 100%;
    padding: 1rem 0.5rem 0rem 3rem;
    display: flex;
    flex-direction: row;
    background-image: url("./Media_files/Asset-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .disPart_img img{
    height: 23rem;
    width: 15rem;
    max-width: 100%;
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  
  .sig_part p{
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
  }
  .sig_part h1{
    font-weight: 800;
    font-size: 2.50rem;
    font-family: Arial, Helvetica, sans-serif;
  }

  /* .sig-text{
   
  } */
.discription_sigPart{
  height: 25rem;
  width: auto;
  padding: 1rem 0rem 0rem 4rem;
  margin-top: 6rem;
}
.iconbox {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: space-evenly;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}

.iconbox .iconbox1,
.iconbox .iconbox2,
.iconbox .iconbox3 {
  flex: 1;
  min-width: 120px;
  background-color: transparent;
  font-size: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@keyframes bouncing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px); /* bounce up */
  }
}

.iconbox .iconbox1 p,
.iconbox .iconbox2 p,
.iconbox .iconbox3 p {
  font-weight: 600;
  font-size: medium;
  text-align: center;
  padding: 0.5rem 0;
}

.services_part{
  height: auto;
  width: 100%;
  background-color: #fff;
  position: relative;
  margin-top: 0;
  padding: 2rem 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.services_part h1{
  animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}
.services_part img{
  animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}
.services_part1{
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
}
.services_part1 h1{
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  padding-bottom: 1rem;
}
.services_part1 .S_parts{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.services_part1 .S_part1,.S_part2,.S_part3{
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 150px;
}

.img_part img{
height: 15rem;
width: auto;
position: relative;
left: 5rem;
top: 3rem;
}

 


.facilities h1{
  font-size: 2.5rem;
  font-weight: 800;
  padding-block: 1rem;
}

.facilities .F_Parts ul li{
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 2;
}
/* ---optional color code #4055962B */
#story-section{
  background-color: #fff;
  margin-top: 4.7rem;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
#story-section h1{
  text-align: left;
  font-weight: 600;
}
.story-container{
  display: flex;
  flex-direction: row;
}
.story-content{
width: 70%;
 font-size: 1rem;
 font-weight: 600;
 padding: 3rem;
}
.story-content h1{
  padding: 2rem;
  padding-top: 0%;
  text-align: left;
}
.img-story{
  width: 30%;
  padding: 1.5rem;
}
.img-story img{
  width: 400px;
  margin-top: 8rem;
}


.vission-mission{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  text-align: left;
  width: 80%;
}
.mission{
  font-weight: 550;
}
.mission p{
  text-align: left;
}
.mission h2{
  font-weight: 500;
}
/* .mission:hover{
  box-shadow: #7272a5 0px 0px 10px 0px;
} */

.vission{
  padding: 2px 10px;
  font-weight: 550;

}
.vission p{
  text-align: left;
}
.vission h2{
  font-weight: 500;
}
/* .vission:hover{
  box-shadow: #7272a5 0px 0px 10px 0px;
} */


.footer-links{
  display: flex;
  gap: 3rem;
  justify-content: center;
  line-height: 3;
 height: 20rem;
  width: 100%;
  background-color: white;
  padding-top: 3rem;
}

.footer-links ul li a{
  color: black;
 
}
.footer-links ul li{
  list-style: none;
}

.footer-links ul li a:hover{
  text-decoration: underline;
}
.footer_images img{
  height: auto;
  width: 12rem;
}
.pic-section{
  display: flex;
  max-width: 700px;
  max-height: 650px;
 justify-content: center;
 margin-left: 10vw;
 margin-right: 10vw;
}
.pic-section h5,p{
  color: #000000;
}
.follow-us{
 padding: 1.5rem 1rem 1rem 0rem;
}
.follow-us a img{
  height: 2.18rem;
  width: auto;
  padding: 3px;
}


.follow-us h3{
  font-size: 1.2rem;
  font-weight: 800;
  text-align: left;
  padding-left: 1rem;
}

/* FAQ --- Part */
.container {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  padding: 30px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.container h1 {
  text-align: center;
  color: #333;
  padding: 1rem;
  margin-bottom: 1rem;
}
.faq {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}
.faq:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.question {
  font-weight: bold;
  color: #444;
  margin-bottom: 8px;
}
.answer {
  color: #666;
  margin-left: 20px;
  line-height: 1.6;
}
/* ul {
  margin: 5px 0 0 20px;
  padding: 0;
} */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pHead-section{
  margin-top: 3rem;
 
}
.pHead-section h1{
  text-align: center;
  font-weight: bolder;
}
.pHead-section p{
  padding: 3rem;
  padding-bottom: 0;
  font-weight: 500;
  letter-spacing: 2px;
}
.P-sec{
  display: flex;
  gap: 2rem;
  padding: 3.75rem;
  padding-bottom: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.P-sec2{
  display: flex;
  flex-direction: row-reverse;
  gap: 2rem;
  padding: 3.75rem;
  padding-top: 0%;
  padding-bottom: 10px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
.P-sec3{
  display: flex;
  gap: 2rem;
  padding: 3.75rem;
  padding-top: 0%;
  padding-bottom: 10px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
.P-sec4{
  display: flex;
  flex-direction: row-reverse;
  gap: 2rem;
  padding: 3.75rem;
  padding-top: 0%;
  padding-bottom: 10px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
.dis-sec p{
text-align: left;
}
.dis-sec button{
  background-color: #4CAF50; /* Green background */
  color: white; /* White text */
  border: none; /* Remove border */
  padding: 10px 20px; /* Add some padding */
  text-align: center; /* Center the text */
  text-decoration: none; /* Remove underline */
  display: inline-block; /* Make the button inline-block */
  font-size: 20px; /* Increase font size */
  margin: 1rem 1rem; /* Add some margin */
  cursor: pointer; /* Add a pointer cursor on hover */
  border-radius: 5px;
  min-height: 20px;
  min-width: 100px;
}
.dis-sec button:hover{
  background-color: #45a049;
}
.dis-sec a{
  text-decoration: none;
  color: #fff;
}
.img-sec{
  width: 50%;
  
}
.img-sec img{
  height: 380px;
  width: auto;
  object-fit: cover;
    object-position: center center;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    transition: .5s ease-in-out;
}
.img-sec img:hover{
  border-radius: 1rem;
  transform: scale(1.03);
}
.dis-sec{
  width: 50%;
  background-color: #E8630A20;
  padding: 3.75rem;
  transition: .5s ease-in-out;
  border-radius: 6px;
}
.dis-sec button{
  border-radius: 1.5rem;
  font-size: 14px;
  padding: 10px 13px;
  line-height: 2;
}
.dis-sec:hover{
  border-radius: 1rem;
  transform: scale(1.03);
}

/* media centre ----- styling */

.card-grid {
  margin-top: 0.5rem;
   width: 100%;
   display:grid;
   grid-template-columns: repeat(auto-fill, minmax(350px,1fr));
   grid-gap: 1rem;
   justify-content: space-between;
   padding: 2rem;

}
.card-container {
   background:#ddd;
   border-radius: 15px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   max-width: 400px;
   transition: transform 0.3s ease;
   margin: 5px;
}

.card-container:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.card-image {
   width: 100%;
   height: 200px;
   object-fit: cover;
   border-top-right-radius:15px;
   border-top-left-radius: 15px;
}

.card-content {
   padding: 1.5rem;
}

.card-title {
   font-size: 1.5rem;
   margin-bottom: 0.75rem;
   color: #1a1a1a;
}

.card-description {
   color: #4a4a4a;
   line-height: 1.6;
   margin-bottom: 1.5rem;
   font-size: 0.9rem;
}

.card-button {
   display: inline-block;
   padding: 0.75rem 1.5rem;
   background-color: #007bff;
   color: white;
   text-decoration: none;
   border-radius: 25px;
   font-weight: 500;
   transition: background-color 0.3s ease;
}

.card-button:hover {
   background-color: #0056b3;
   color: black;
}
#about-bg h1, p{
  text-align: left;
  padding: 20px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
  font-size: 1rem;
}
/* Story page Style */
.story-container {
  padding: 1rem;
  overflow-x: hidden;
  margin-top: 1rem;
}

.story-content {
  padding: 1rem;
}

.story-content p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

.vission-mission {
  margin-top: 2rem;
}


/* --------------// Media Query Section \\---------------- */
@media(max-width:2560px){
 
}
  @media(max-width:1440px){
    html{
      font-size: 100%;
    }
    
    nav a{
      padding: 1rem 0.6rem;
      font-size: 0.9rem;
    }
   
  }
  /* @media(max-width:1279px){
    #nav-button1{
      display: none;
    }
    nav a{
      padding: 1rem 1rem;
      /* font-size: 0.9rem; */
    /* }
    nav ul a{
      font-size: medium;
    }
    .story-container {
      display: flex;
      flex-direction: column;
      padding: 1rem;
  /* Add space for fixed nav header */
    /* }
    .img-story img{
      margin: 0;
    } */
  
  /* non‑Retina 13″ MBP (1280×800 physical & CSS px) */
@media (max-width: 1280px) {
  /* styles for 13″ MBP and larger, all densities */
  #nav-button1{
    display: none;
  }
  nav a{
    padding: 1rem 1rem;
    /* font-size: 0.9rem; */
  }
  nav ul a{
    font-size: medium;
  }
  .story-container {
    display: flex;
    flex-direction: column;
    padding: 1rem;
/* Add space for fixed nav header */
  }
  .img-story img{
    margin: 0;
  }
}

/* Retina 13″ MBP at actual device pixels (2560×1600) */
@media 
  only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1280px),
  only screen and (max-resolution: 2dppx)       and (max-width: 1280px) {
  /* high‑res assets, overrides, etc. */
  #nav-button1{
    display: none;
  }
  nav a{
    padding: 1rem 1rem;
    /* font-size: 0.9rem; */
  }
  nav ul a{
    font-size: medium;
  }
  .story-container {
    display: flex;
    flex-direction: column;
    padding: 1rem;
/* Add space for fixed nav header */
  }
  .img-story img{
    margin: 0;
  }
}
@media(max-width:1099px){
  nav a{
    padding: 0.8rem 0.8rem;
    font-size: 0.9rem;
   }
}
  @media(max-width:1024px){
    
   nav a{
    padding: 0.8rem 0.5rem;
   }
    nav ul a{
      font-size: smaller;
    }
    .about img{
      padding: 5rem 0rem 0rem 1rem;
    }
    #nav-button1{
      display: none;
    }
    /* .hero{
      max-height: fit-content;
      max-width: fit-content;
    } */
 
   
    .about img{
      height: 200px;
      width: auto;
      position: relative;
     
    }
    .get_in_touch > *{
      font-size: 1.3rem;
    }
    .get_in_touch{
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 }
    .get_in_touch .part{
      padding: 0;
      margin: 0;
      display: flex;
      gap: 5px;
      flex-direction: column;
    }
    .get_in_touch h1{
      font-weight: 700;
  font-size: 1.8rem;
  text-wrap: nowrap;
    }
    .get_in_touch .location{
      position: relative;
      top: auto;
    }
    .gt-bar{
      display: none;
    }
    .get_in_touch .map-container{
      justify-content: center;
      align-items: center;
    }
    .get_in_touch .part .follow-us{
      position: relative;
     right: 22rem;
      top: auto;
      font-size: 1.5rem;
      height: fit-content;
      width: auto;
    }
    .sig_part{
      min-height: 42rem;
      
    }
 
    .sig_part .disPart_img img{
      margin: 0;
      animation: appear linear;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .iconbox{
      display: flex;
      justify-content: space-evenly;
      gap: 2rem;
     
    }
    .services_part{
      min-height: 49rem;
      max-width: 100%;
      animation: appear linear;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .services_part1{
      position: relative;
      left: 0;
      display: grid;
      justify-items: center;
      gap: 1rem;
     
    }
    .services_part1 .S_part1,.S_part2,.S_part3{
      padding: 0rem 1rem;
      text-align: center;
    }
  
    .S_parts{
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      
    }
    .S_parts img{
      height: 5rem;
      width: auto;
    }
    .footer-links{
      display: flex;
      flex-direction: row-reverse;
      gap: 3rem;
      justify-content: center;
      line-height: 3;
      height: 20rem;
      width: 100%;
      background-color: white;
      padding: 0.2rem;
      margin: 5px;
    }
    .follow-us{
     padding: 0;
    }
    footer{
      padding: 1rem;
    }
    #find-us{
      display: block;
    }
    .prog button{
      margin-bottom: 1rem;
    }
    .footer_images img{
      height: 150px;
      width: 150px;
    }
    .story-container {
      display: flex;
      flex-direction: column;
      padding: 1rem;
     
    }
    .img-story img{
      margin: 0;
    }
  } 
  @media(max-width:960px){
    nav a{
      padding: 1rem 0.4rem;
    }
  }
  
  @media (hover: none) and (pointer: coarse) {
    #about-btn:hover ul {
      display: block;
      z-index: 20;
    }
    
    #prog-btn:hover ul {
      display: block;
      z-index: 20;
    }
    
    #media-btn:hover ul {
      display: block;
      z-index: 20;
    }
  }
   
  @media (max-width:768px){
    html{
      font-size: 80%;
      font-family: "Winky Sans", sans-serif;
    }
    
    /* Mobile navigation styling for better display */
    .mobile-screen-logo img {
      display: block;
      height: 3.8rem;

    }
    #mobile-nav-text{
      display: inline-block;
      margin-left: auto;
      padding: 1rem 0;
      letter-spacing: 2px;
    }
    /* Position the navbar completely off-screen */
    nav {
      position: fixed;
      top: 0;
      right: -100%;
      height: 100vh;
      width: 100%;
      max-width: 100%;
      z-index: 999;
      transition: transform 0.3s ease-in-out;
      overflow-y: auto;
      overflow-x: hidden;
      background-color: azure;
      box-shadow: -2px 0 5px rgba(0,0,0,0.2);
      transform: translateX(0);
      visibility: hidden;
    }
    
    nav.show {
      right: 0;
      transform: none;
      visibility: visible;
    }
    .hero-main{
      display: none;
    }
    /* Fix issues with dropdown menus on mobile */
    nav ul a{
      font-size: medium;
    }
    #about-btn ul, 
    #prog-btn ul,
    #media-btn ul {
      position:relative;
      top: 100%;
      left: 0;
      right: 0;
      margin: 0;
      width: 100%;
      box-shadow: none;
      text-align: center;
      padding: 0;
    }
    
    #about-btn ul li, 
    #prog-btn ul li,
    #media-btn ul li {
      display: block;
      width: 100%;
      margin: 0;
      z-index: auto;
    }
    
    #about-btn ul li a, 
    #prog-btn ul li a,
    #media-btn ul li a {
      display: block;
      width: 100%;
      font-size: medium;
      padding: 5px 0;
      margin: 0 auto;
      text-align: center;
    }
    
    /* #about-btn ul li:hover,
    #prog-btn ul li:hover,
    #media-btn ul li:hover {
      background-color: rgba(0,0,0,0.1);
    } */
    
    /* Rest of existing mobile styles */
    .nav-logo {
      display: flex;
      justify-content: center;
      margin: 1rem auto;
    }
    
    .nav-buttons {
      margin: 1rem auto;
      display: flex;
      justify-content: center;
    }
    
    /* Fixed disPart_img position */
    .disPart_img {
      display: flex;
      justify-content: center;
    }
    
    .disPart_img img{
      margin-left: 0;
      max-width: 100%;
      height: auto;
      width: auto;
      max-height: 23rem;
    }
    
    /* Fix for any remaining horizontal scrolling issues */
    .sig_part {
      flex-direction: column;
      padding: 1rem;
    }
    
    .discription_sigPart {
      width: 100%;
      padding: 1rem;
      margin: 0;
    }
    
    .iconbox {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 2rem;
      width: 100%;
      height: auto;
      justify-content: center;
      margin-top: 2rem;
      padding: 0 1rem;
    }
    
    .iconbox .iconbox1,
    .iconbox .iconbox2,
    .iconbox .iconbox3 {
      width: 120px;
      text-align: center;
      margin-bottom: 1.5rem;
    }
    
    /* Other existing media query rules continue below */
    .mobile-screen-logo{
      min-height: 40px;
      display: flex;
      justify-content: space-between;
      padding: 5px;
    }
    .mobile-screen-logo img{
      display: block;
      position: relative;
      
    }
    nav {
      position: absolute;
      top: 0;
      left: 100%;
      height: 100%;
      width: 100%;
      max-width: 100%;
      z-index: 999;
      transition: transform 0.3s ease-in-out;
      overflow-y: auto;
      overflow-x: hidden;
      transform: translateX(0);
      visibility: hidden;
    }
    nav.show {
      transform: translateX(-100%);
      visibility: visible;
    }
    nav.show ~ #overlay{
      display: block;
    }
    nav ul{
      width: 100%;
      flex-direction: column;
      align-items: center;
    }
    nav ul li {
      position: relative;
      width: 100%;
      text-align: center;
    }
    nav a {
      width: 100%;
      font-size: large;
      justify-content: center;
      text-align: center;
    }
    #open-sidebar-button{
      cursor: pointer;
      margin-left: auto;
      margin-right: 2%;
      padding: auto;
      font-size: 25px;
      height: 3.5rem;
      width: 3.5rem;
      background-color: transparent;
      border-color: transparent;
      display: block;
    }
    #close-sidebar-button{
      cursor: pointer;
      font-size: 30px;
      height: 3rem;
      width: 3rem;
      background-color: transparent;
      border-color: transparent;
      display: block;
      padding: 10px;
    }
    .nav-buttons{
      margin: 0;
      display: flex;
      justify-content: center;
    }
    #nav-button1{
      display: none;
    }
    #nav-button2{
   margin-left: 0;
  font-size: large;
  justify-content: flex-end;
     border-radius: 1rem;
     font-weight: bold;
    }
    .nav-logo{
      margin: auto;
      padding: 2px;
    }
   .about-btn ul li a{
      opacity: 1;
      font-weight: 500;
    }
    .hero{
      margin: 0 auto;
      color: black;
      padding: auto;
      width: 100%;
      max-width: 100%;
      min-height: 42rem;
      object-fit: cover;
      border-radius: 0.3125rem;
      background-size: 100% 100%;
      background-position: center;
      animation: slider 12s infinite linear;
      transition: background-image 1.5s linear;
      /* background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)), url(./Media_files/sliderimg5.webp);; */
    }
    .hero .buttons{
      position: relative;
      bottom: 1rem;
    }
 .hero h3{
  font-family: "Winky Sans", sans-serif;
  margin-bottom: 10px ;
 }
 .hero h4{
  margin-bottom: 10px;
 }
 .hero .hero_content{
  position: relative;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
 }
 .hero .buttons{
  margin-top: 15rem;
 }
 .hero_content .text{
 display: none;
 }
  #about-bg{
    margin:0%;
    padding: 0%;
  min-height: 300px;
  width: 100%;
    background-image:linear-gradient(rgba(52, 86, 180, 0.721), rgba(0, 0, 0, 0.3)), url(./Media_files/An2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .about p{
    font-weight: 400;
    text-wrap: wrap;
   text-align: justify;
  padding: 2rem;
  }
  .about-body h2{
    text-align: center;
  }
  
  .get_in_touch{
   min-height: 50rem;
   min-width: fit-content;
}
  .get_in_touch .part{
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
    flex-direction: column;
    
  }
  .get_in_touch h1{
font-weight: 700;
font-size: 1.8rem;
text-wrap: nowrap;
  }
  .get_in_touch .location{
    /* padding-left: 2rem;
    margin-bottom: 15rem; */
    margin-top:10px ;
    position: relative;
    top: auto;
  }
  .gt-bar a button{
    margin-top: 10px;
  }
  
  .get_in_touch .part .follow-us{
    position: relative;
   right: 22rem;
    top: auto;
    font-size: 1.5rem;
    height: fit-content;
    width: auto;
  }
  
  /* Keep updated sig_part and services_part for mobile */
  .sig_part{
    min-height: 30rem;
    flex-direction: column;
    padding: 1rem;
  }
  .services_part{
    min-height: 49rem;
    max-width: 100%;
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  .services_part1{
    position: relative;
    left: 0;
    display: grid;
    justify-items: center;
    gap: 1rem;
  }
  
  .img_part {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .img_part img{
    position: static;
    margin: 2rem auto;
    display: block;
    max-width: 80%;
  }
  /* Improve story page layout for tablets */
  .story-container {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    margin-top: 4rem; /* Add space for fixed nav header */
  }
  .story-container p{
    animation: none;
    font-size: large;
    font-weight: 450;
  }
  .img-story {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-bottom: 1rem;
  }
  
  .img-story img {
    max-width: 80%;
    height: auto;
    margin: 1rem auto;
  }
  
  .story-content {
    width: 100%;
    padding: 1rem;
  }

  .story-content h1{
    text-align: center;
  }
  .iconbox p{
    animation: none;
  }
  .eventsDiscription{
    padding: 2rem;
  }
  .eventsDiscription h1{
    text-align: center;
  }
  

}

@media(max-width:426px){
  html{
    font-size: 60%;
  }

 
  .hero{
    width: 100%;
  max-width: 100%;
  min-height: 42rem;
  object-fit: cover;
  border-radius: 0.3125rem;
  background-size: 100% 100%;
  background-position: center;
  }
  .hero .buttons a{
    padding: 0.6rem;
    font-family: inherit;
  }
  .about{
    max-height: fit-content;
    max-width: fit-content;
    display: block;
    flex-wrap: wrap;
   
  }
  .about p{
    font-weight: 500;
    font-size: small;
    text-wrap: wrap;
   position: relative;
   margin: 0.5rem;
  padding: 1.5rem;
  width: auto;
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  }
  .about span h2{
  text-align: center;
  padding-top: 10px;
  font-size: large;
  }
  .about img{
    height: 200px;
    width: auto;
    position: relative;
    left: 10rem;
   
  }
  .dis-sec{
    padding: 1rem;
  }
  .dis-sec h2{
    text-align: center;
  }
  /* .img-sec img{

  } */
  .get_in_touch > *{
    font-size: 1.3rem;
  }
  .get_in_touch{
   min-height: 60rem;
   min-width: auto;
   width: 100%;
}
  .get_in_touch .part{
    padding: 0;
    margin: 0;
    display: flex;
    gap: 5px;
    flex-direction: column;
    
  }
  .get_in_touch h1{
    font-weight: 700;
font-size: 1.8rem;
text-wrap: nowrap;
  }
  .get_in_touch .location{
    /* padding-left: 2rem;
    margin-bottom: 15rem; */
    margin-top:10px ;
    position: relative;
    top: auto;
  }
  /* .get_in_touch .map-container{

    
  } */
  .get_in_touch .part .follow-us{
    position: relative;
   right: 22rem;
    top: auto;
    font-size: 1.5rem;
    height: fit-content;
    width: auto;
  }
  .sig_part{
    min-height: 50rem;
    
  }
  .sig_part .custom-shape-divider-top-1719800947{
    display: none;
  }
  .sig_part .disPart_img img{
    margin: 0;
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
    padding-top: 7rem;
  }
  .iconbox{
    flex-direction: column;
    align-items: center;
  }

  .iconbox .iconbox1,
  .iconbox .iconbox2,
  .iconbox .iconbox3 {
    width: 80%;
    max-width: 200px;
  }
  .iconbox .iconbox1 p,
  .iconbox .iconbox2 p,
  .iconbox .iconbox3 p {
    font-weight: 600;
    font-size: medium;
    text-align: center;
    padding: 0.5rem 0;
  }
  .services_part{
    min-height: 55rem;
    max-width: 100%;
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  .services_part1{
    position: relative;
    left: 0;
    display: grid;
    justify-items: center;
   
  }
  .img_part img{
    top: 10px;
   left: 2rem;
    z-index: 10;
  }

  .S_parts{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    
  }
  .S_parts img{
    height: 5rem;
    width: auto;
  }


  @keyframes appear {
    from{
      opacity: 0;
      scale: 0.5;
    }
    to{
      opacity: 1;
      scale: 1;
    }
    
  }
  #nav_btn{
    display: none;
  }
  .footer-links{
    text-align: center;
    line-height: 1.5;
  }
  .footer_images img{
  height: auto;
  width: 12rem;
  margin:auto,0;
  }
  .follow-us{
    text-align: center;
    padding-top: 0rem ;
  }
  .follow-us h3{
    text-align: center;
  }
  .dis-sec button{
    transform: scale(0.5);
    padding: 1rem;
  }
  .get_in_touch{
    min-height: fit-content ;
    background-color: #D4E2D4;
  }
  .gt-bar{
    height: inherit;
    width: 100%;
  }
  #A-head{
    font-size: small;
    text-align: center;
  }
  .ma-p1{
    display: none;
  }

  .more-about .ma-p2{
    width: 100%;
    height: auto;
  }
  /* .ma-p2 button{
 
  } */
  .services_part1 .S_parts{
    display: flex;
    flex-direction: column;
  }
  .img_part img{
    position: relative;
    margin-top: 10rem;
  }
  .services_part1 h1{
    margin-top: 1rem;
    margin-right: 1rem;
    text-align: center;
  }
  .footer-links{
    min-height: fit-content;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    line-height: 1.5;
  } 
  .follow-us{
    padding: 5px;
  }
  .gt-bar h4{
    font-size: medium;
  }
  .gt-bar p{
    font-weight: bold;
  }
  .card-grid{
    padding: 0.3rem;
    }
    .card-description{
      font-size: 1.4rem;
    }
    .story-container {
      padding: 0.5rem;
      margin-top: 4rem;
    }
  
    .story-content {
      width: 100%;
      padding: 0;
    }
    
    .story-content h1{
      margin-bottom: 1rem;
      text-wrap: balance;
      padding: 0;
      font-size: 1.8rem;
      text-align: center;
    }
    
    .story-content p{
      padding: 4rem;
      margin-bottom: 1rem;
      text-align: justify;
      font-size: small;
      font-weight: 400;
    }
  
    .vission-mission {
      margin-top: 1rem;
    }
  
    .vission, .mission {
      padding: 0.5rem 0;
    }
  
    .vission h2, .mission h2 {
      font-size: 1.4rem;
      margin-bottom: 0.5rem;
      margin-left: 3rem;
    }
    .P-sec, .P-sec2, .P-sec3, .P-sec4{
      flex-direction: row;
    }
}

@media(max-width:376px){

  .iconbox{
    margin: 0;
    padding: 0;
    column-gap: 0;
  }
  .more-about .ma-p2{
   padding: 5px;
  }
  .ma-p2 h2{
    margin: 5px;
  }
  .card-grid{
    padding: 0.3rem;
    }
    .card-description{
      font-size: 1.4rem;
    }
    .ma-p2 p{
      line-height: 1;
    }
}

@media (max-width:320px){
  .iconbox{
    padding: 0;
    font-size: small;
    box-sizing: border-box;
  }
  .iconbox .iconbox1{
    font-size: 1.5rem;
    height: 130px;
    width: 120px;
  }
  .iconbox .iconbox2{
    font-size: 1.5rem;
  }
  .iconbox .iconbox3{
    font-size: 1.5rem;
  }
  .iconbox .iconbox1 p{
    font-size: small;
  }
  .iconbox .iconbox2 p{
    font-size: small;
  }
  .iconbox .iconbox3 p{
    font-size: small;
  }
  .sig_part{
    min-height: 40rem;
  }
  .sig_part P{
    line-height: 1;
  }
  .sig_part .disPart_img img{
    width: 12rem;
    position: relative;
 
  }
  .sig_part h1{
    font-size: large;
  }
  .more-about .ma-p2 p{
    font-size: small;
    padding: 5px;
  }
  .dis-sec{
    padding: 0.2rem;
    margin: 0;
  }
  .dis-sec h2{
    text-align: center;
  }
  /* .img-sec img{

  } */
  .pHead-section h1{
    margin: auto;
  }
  .pHead-section p{
    padding: 5px;
  }
  .P-sec{
    padding: 5px;
  }
  .P-sec2{
  padding: 5px;
    }
  .P-sec3{
    padding: 5px;
    }
    .P-sec4{
        padding: 5px;
      }
    .card-grid{
      padding: 0.3rem;
      }
      .card-description{
        font-size: 1.4rem;
      }
      .story-content h1 {
        font-size: 1.5rem;
      }
      
      .story-content p {
        font-size: 0.85rem;
      }
}

@media (max-width: 768px) {
  .more-about {
    flex-direction: column;
    height: auto;
  }
  
  .more-about .ma-p1 {
    display: none;
  }
  
  .more-about .ma-p2 {
    width: 100%;
    height: auto;
    padding: 2rem;
  }
  
  .sig_part .disPart_img img {
    display: none;
    /* margin: 1rem auto;
    height: auto;
    width: auto;
    max-width: 90%;
    max-height: 300px; */
  }
  
  /* Fix services part layout */
  .services_part {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .img_part {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .img_part img {
    position: static;
    margin: 2rem auto;
    display: block;
    max-width: 80%;
    height: auto;
  }
  
  /* Improve button positioning */
  .ma-p2 button {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .ma-p2 a{
    text-decoration: none;
  }
  
  /* Fix hero section for mobile */
  .hero {
    min-height: auto;
    padding: 5rem 1rem;
    background-size: cover;
    background-position: center;
  }
  
  .hero .hero_content {
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
  }
  
  .hero h4 {
    font-size: 1.2rem;
    margin-bottom: 2rem;
  }
  
  
  .about {
    flex-direction: column;
  }
  
  /* Make the discription_sigPart section more responsive */
  .discription_sigPart {
    height: auto;
    width: 100%;
    padding: 1rem;
    margin-top: 0;
    text-align: center;
  }
  
  .sig_part {
    height: auto;
    padding: 2rem 1rem;
    flex-direction: column;
  }
  
  .disPart_img {
    order: 2;
  }
  
  .discription_sigPart {
    order: 1;
  }
}

@media (max-width: 426px) {
  /* Adjust font sizes for better readability */
  body {
    font-size: 14px;
  }
  
  h1 {
    font-size: 1.8rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .iconbox {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  
  .iconbox .iconbox1,
  .iconbox .iconbox2,
  .iconbox .iconbox3 {
    width: 100%;
    max-width: 250px;
    margin-bottom: 1rem;
  }
  
  /* Fix layout for sections */
  .P-sec, .P-sec2, .P-sec3, .P-sec4 {
    padding: 1rem;
    flex-direction: row;
    gap: 1rem;
  }
  
  .dis-sec, .img-sec {
    width: 100%;
    padding: 1rem;
  }
  
  /* Improve prog section */
  .prog {
    height: auto;
    padding-bottom: 2rem;
  }
  
  .prog h1 {
    font-size: 1.5rem;
  }
  
  .prog p {
    padding: 1rem;
  }
  
  .eventsDiscription p{
    text-align: justify;
    padding: 1rem;
    font-size: small;
    font-weight: 400;
  }
  .card-description p{
    font-weight: 400;
  }
  /* Improve footer for mobile */
  .footer-links {
    flex-direction: column;
    height: auto;
    padding: 1rem;
    gap: 1rem;
  }
  
  .follow-us {
    width: 100%;
    text-align: center;
    padding: 1rem 0;
  }
  
  .follow-us h3 {
    text-align: center;
 
}
}
@media (max-width: 320px) {
  html {
    font-size: 55%;
  }
  
  .hero h4 {
    font-size: 1.2rem;
  }
  
  .hero .buttons {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .hero .buttons a {
    margin: 0 auto;
    text-align: center;
  }
  
  .iconbox .iconbox1,
  .iconbox .iconbox2,
  .iconbox .iconbox3 {
    font-size: 1.5rem;
  }
  
  .sig_part h1 {
    font-size: 1.5rem;
  }
  
  /* Fix navigation buttons */
  #nav-button2 {
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
  }
}

/* Fallback styles to ensure images are always visible */
.disPart_img {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.img_part {
  opacity: 1 !important;
  transform: none !important;
}

.disPart_img img, .img_part img {
  display: block ;
  width: auto;
  height: 20rem;
  animation: bouncing;
  animation-duration: 2.5s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}