body {
  overflow-x: hidden;
}
/* navbar styles  */
.navbar-brand{
    height: 60px;
    width: auto;
}
.navbar-nav li{
  padding: 10px 30px ;
}
.navbar-nav li a {
  /* color: #20A7E0; */
  color: black;
  font-size: 20px;
  text-decoration: none;
}

.navbar-nav li a.activeLink {
  color: #20A7E0;
  border-bottom: 5px solid #E62329;
}

nav{
background-color: white;
box-shadow: 2px 5px 20px grey; 
}
.custom-toggler {
  border-color: #707070;
}
.custom-toggler .navbar-toggler-icon {
  background-image: url(
"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(110, 110, 110, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.new-nav{
  display: flex;
  flex-direction: row;
}
/* end of navbar  */

#background-video {
  width: 100%;
  height: 75vh;
  object-fit: cover; 
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  position: absolute;
}

.home-video h1{
  color: #20A7E0;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  position: relative;
  z-index: 1; /* Ensure the text is above the overlay */
  margin: 0;
  top: 50%;
  transform: translateY(-50%); /* Center the text vertically */
}
.home-video {
  position: relative; /* Create a containing block for the video and overlay */
  width: 100%;
  height: 75vh;
  overflow: hidden;
}

.home-video::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3); /* Black overlay with 50% opacity */
  z-index: 0; /* Ensure the overlay is above the video */
}


.home-paragraph{
  font-size: 23px;
}



/*styles for  about us page  */
.heading {
  font-family: sans-serif;
  padding: 2em auto;
  color: #20A7E0;
  text-align: center;
  font-size: 30px;
  max-width: 600px;
  position: relative;
  margin: 0 auto;
}
.heading:before {
  content: "";
  display: block;
  width: 70px;
  height: 5px;
  background: #E62329;
  left: 20%;
  top: 70%;
  position: absolute;
  transform: translateY(-50%);
}
.heading:after {
  content: "";
  display: block;
  width: 70px;
  height: 5px;
  background: #E62329;
  right: 20%;
  top: 70%;
  position: absolute;
}
.about-section .heading{
  padding-top: 70px;
  padding-bottom: 25px;
}
.about-image{
  width: 100%;
  height:auto;
  border-radius: 25px;
}

.about-paragraph{
  justify-content: center;
  text-align: center;
  font-size:26px;
}

/* mission and vision styling  */
.mission-section {
  display: flex;
  text-align: center;
  width: 90%;
  justify-content: center; /* Center the cards horizontally */
  margin: 0 auto; /* Center the mission section */
}

.cards{
  margin-top: 4%;
}

.card-mission {
  margin-top: 0; /* Start from the top */
  font-size: 23px;
  background-color: #85D7FA;
  border-radius: 30px;
  height: 80%;
}

.card-vision {
  margin-top: 10%; /* Start 10% from the top */
  font-size: 23px;
  background-color: #20A7E0;
 border-radius: 30px;
 height: 80%;
 
}

/* TEAM SECTION STYLES */
.team-section{
  margin-top: 6rem;
  background-color: #EFEFEF;
  position: relative;
}
.team-section .heading{
  padding-top: 70px;
  padding-bottom: 25px;
}
.slides{
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;

}
.slide-container{ 
  width: 90%; 
  padding: 40px 0;

}
.slide-content{
  margin-bottom: 45px;
   
}

.staff-card{
  border-radius: 25px;
  background-color: #FFF;
 }

.image-content,
.card-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
}
.image-content{
  row-gap: 5px;
  position: relative;
}
.overlay , .overlays{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 25px 25px 0 25px;
}
.overlay{
  background-color:rgb(5, 5, 66) ;
}
.overlays{
  background-color:#20A7E0 ;
}
.card-image{
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background: #FFF;
 padding: 3px;
}

.card-image .card-img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* border: 4px solid #20A7E0; */
}
 


.swiper-button-prev ,
.swiper-button-next {
  position: absolute;
  top: 70%; 
  z-index: 10;  
}

.name{
  font-size: 18px;
  font-weight: 500;
  color: #333;
}
.description{
  font-size: 14px;
  color: #707070;
  text-align: center;
}
.comp-director{
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

/* FOOTER STYLES  */


.footer{
  overflow:hidden;
  position:relative;
  min-height: 18vh;
  background-color: #20A7E0;
  

  }
  .footer::before{ 
  content:'';
  font-family:'shape divider from ShapeDividers.com';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw; 
  background-size: 147% 159px;
  background-position: 50% 0%;  
  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" fill="%23efefef"/></svg>'); 
  }
  .footer-content{
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #20A7E0;
  }
  
  @media (min-width:2100px){
  .footer::before{
  background-size: 147% calc(2vw + 159px);
  }
  }
  

/* media queries  */
@media (max-width: 1024px) {
  .about-section .row {
    flex-direction: column;
  }
  .card-vision{
    height: auto;
    margin-top: 40%; /* Start 10% from the top */
  }
.swiper-button-prev ,
.swiper-button-next { 
  top: 75%; 
 }
 .swiper-button-prev {
padding-left: 5px;
 }
.swiper-button-next {
  padding-right: 7px;
}
}

@media (max-width: 767px) {
  .heading:before, .heading:after{
    width: 58px;
  }
  .about-section .row {
    flex-direction: column;
  }
  .about-image, .about-paragraph {
    text-align: center;
      }
  .mission-section {
      flex-direction: column;
  }
  .card-mission, .card-vision {
      margin-top: 0; /* Reset margin for mobile view */
  }
  .card-mission{
    margin-bottom: 3%;
  } 
  .swiper-button-prev ,
  .swiper-button-next { 
    top: 78%; 
  }
  .slide-container{ 
    width: 80%; 
  }

}

@media (max-width:550px) {
  .heading:before, .heading:after{
    width: 55px;
  }
  .heading:before{
    left: 15%;
  }
  .heading:after{
    right: 15%;
  }
  .footer{
    display: none;
  }
  /* .swiper-button-prev ,
  .swiper-button-next { 
    top: 78%; 
  }
  .slide-container{ 
    width: 80%; 
  } */
}

@media (max-width:462px) {
  .heading:before, .heading:after{
    width: 45px;
  }
  .heading:before{
    left: 10%;
  }
  .heading:after{
    right: 10%;
  }
  .swiper-button-prev ,
  .swiper-button-next { 
   top: 83%; 
   height: 10px;  
   width: 10px; 
 }
}

@media (max-width:365px) {
  .heading:before, .heading:after{
    width: 35px;
  }


}
@media (max-width:298px) {
  .heading:before, .heading:after{
    display:none;
  }

}