*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}


body{
  font-family: 'Nunito', sans-serif;
}

body p {
  font-size: 20px;
  color: black;
}

 /* Animation on Scroll Start*/

/* .reveal-2 {
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}
.reveal-2.active {
  transform: translateY(0);
  opacity: 1;
}  */


 /* Animation on Scroll End*/



.now-book{
  background-color: #3064a2;
  padding: 15px 0;
  text-align: center;
}

.now-book p{
  font-size: 15px;
  color: white;
}

.center-now{
  padding-right: 10px;
}

.navbar{

  height: 90px;
  
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  justify-items: center;

  box-shadow: 0 4px 15px rgb(0 0 0 / 50%);

  margin-bottom: 5px;


}

.navbar .logo img{
  cursor: pointer;
  width: 100%;
}


.nav-menu ul li{
  display: inline-block;
  list-style-type: none;
 /* margin-left: 30px; */
  /* margin-right: 30px; */
  font-size: 14px;
  
}


.nav-menu ul li a {
  text-decoration: none;
  color: black;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 10px 15px;
  
}

.nav-menu ul a:hover {
  background-color: #3064a2;
 
  color: white;
  border-radius: 5px;
  

  
}

.dropdown{
  z-index: 9999;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 170px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  
 
}

.dropdown-content a {
  color: black;
  padding: 12px 14px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover 
      {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

.dropbtn {
  display: inline-block;
  
  text-align: center;
  margin: 10px 0px;
  text-decoration: none;
}



/* Hamburger */


.hamburger{
  margin-right: 50px;
  justify-self: end;
  position: relative;
  cursor: pointer;
  
}
 .ham-menu{
 height: 0;
 width: 100%;
  overflow: hidden;
 /* position: absolute; */
}


#list li {
  padding-top: 5px;
  background-color: #f9f9f9;
  
  padding: 10px;
}


#list li a {
  text-decoration: none;
  color: black;
  border-bottom: 1px solid black;
  
}



.ham-menu-show{
 /* height: 250px; */
 height: auto;
 width: 100%;
 text-align: start;
 background-color:white ;
 /* position: absolute; */
}
.hamburger .ham-menu a{
  color: #fff;
  text-decoration: none;
}
.hamburger .ham-menu li:hover{
  background-color: #fff;
  color: #000;
}
.hamburger .ham-menu li:hover a{
  color: #000;
}
.trans{
  transition: all 300ms;
}
/* inner */
.dropdown-content{
  
  overflow: hidden;
  z-index: 9999;
}
.dropdown-content-show{
  height: 100px;
}


/* Navigation End */

/* ........................................................................................................ */

/* Slider Start */

/* .mySlides {
  display: none;
}

img {
  vertical-align: middle;
} */

/* Slideshow container */
/* .slideshow-container {
  max-width: 1500px;
  position: relative;
  margin: auto;
} */

/* Caption text


/* Number text (1/3 etc) */
/* .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
} */

/* The dots/bullets/indicators */
/* .dot {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
} */

/* .active {
  background-color: #717171;
} */

/* Fading animation */
/* .fade {
  animation-name: fade;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
} */

/* @keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
} */

/* On smaller screens, decrease text size */
/* @media only screen and (max-width: 300px) {
  .text {font-size: 11px}
} */


/* Swiper-Js Slider start */


.container-xyz{
  width: 100%;
  
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper{
  width: 100%;
  height: fit-content;
}

.swiper-slide img{
  width: 100%;
}

.swiper .swiper-button-prev, .swiper .swiper-button-next{
  color: white;
  display: none;
}


.swiper .swiper-pagination-bullet-active{
  background: white;
}


/* Swiper-Js Slider End */



.ceo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  background-color: #f8f9ff;
  margin-bottom: 50px;
  margin-top: 50px;
  
}

.ceo-message{
  padding-left: 200px;
  
}

.ceo-message h1{
padding-bottom: 20px;
}

.ceo-message p{
  font-size: 20px;
}

.ceo-button{
  padding: 15px 20px;
  background-color: green;
  border: none;
  margin-top: 30px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  border-radius: 10px;
  

}

.ceo-button a{
  color: white;
  text-decoration: none;
  

}

.ceo-button:hover{
  background-color: black;
}

.ceo-image img{
  width: 50%;
  border-radius: 50%;
  margin-top: 30px;
  margin-left: 100px;
  
}

.choose{
  text-align: center;
  margin-bottom: 50px;
}

.choose p{
  padding-top: 20px;
  margin-right: 5px;
  margin-left: 5px;
  font-size: 20px;
}



.card-online {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 80%;
  margin-bottom: 50px;
}

.card-online:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
}

.container1 {
 
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 5px;
  padding-left: 5px;
}

.container1 p{
  padding-top: 10px;
}

.online-course{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
}

.contactus{
  display: grid;
  grid-template-columns: 2fr 1fr;
  justify-items: center;
  align-items: center;
  background-color: #f8f9ff;
}

/* 

side animation
*/

.reveal-1 {
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}
.reveal-1.active {
  transform: translateY(0);
  opacity: 1;
}
.reveal-2 {
  position: relative;
  transform: translateX(-150px);
  opacity: 0;
  transition: 1s all ease;
}
.reveal-2.active {
  transform: translateX(0);
  opacity: 1;
}
/* .reveal-3 {
  position: relative;
  transform: translateX(150px);
  opacity: 0;
  transition: 1s all ease;
  display: none;
}
.reveal-3.active {
  transform: translateX(0);
  opacity: 1;
  display: block;
} */


.contact-img img{
  width: 70%;
  
}

.contact-information{
  display: grid;
  align-items: center;
  justify-items: center;
  
  background-color: #f8f9ff;
  margin-bottom: 50px;
}

.contact-information h1{
  padding-bottom: 10px;
  padding-top: 40px;
}

.contact-information p{
  padding: 8px 8px;
  font-size: 20px;
}

.contact-icon{
  color: green;
  font-size: 20px;
  padding-left: 20px;
  
}

.social-media{
  padding: 10px;
  margin-top: 20px;
  font-size: 30px;
  color: blue;
 
}

.social-media:hover{
  color: black;
 
}

.contact-icon:hover{
  color: black;
}

.resources h1{
  text-align: center;
  margin-bottom: 50px;
  margin-top: 60px;
}

.materials{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  text-align: center;

  margin-bottom: 50px;
}

.material-center{
  /* padding-top: 50px; */
  color: white;
  font-size: 50px;
  background-color: green;
  padding: 20px;
  border-radius: 50%;
  margin-top: 20px;
}

.material-center:hover{
  background-color: black;
}

.learning h3{
  padding-top: 20px;
  
}

.our-team h1{
  text-align: center;
  margin-bottom: 50px;
  margin-top: 80px;
  background-color: #f8f9ff;
  padding: 30px 0;
}



.team{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
}


.team-our {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 80%;
  margin-bottom: 50px;
  border-radius: 5%;
}

.team-our img{
  border-top-right-radius: 5%;
  border-top-left-radius: 5%;
  
}



.team-our:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
}




.our-instructors {
  text-align: center;
  margin-bottom: 50px;
  margin-top: 50px;
  background-color: #f8f9ff;
  padding: 30px 0;
}

.our-instructors p{
  text-align: center;
  padding: 20px 10px 20px 10px;
}



.instructors{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
}


.instructors-our {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 70%;
  margin-bottom: 50px;
  border-radius: 5%;
}

.instructors-our img{
  border-top-right-radius: 5%;
  border-top-left-radius: 5%;
  
}

.instructors-our:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
}

.container1 h3{
  
  word-spacing: 3px;

}

.container1 p{
  font-size: 16px;
}


.registered{
  text-align: center;
  margin-top: 30px;
  margin-bottom: 50px;
  
  padding: 90px 0;

  background-image: url("background-image1.png");
  /* Full height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  
}

.registered h1{
  padding-right: 5px;
  padding-left: 5px;
  color: white;
  font-size: 40px;
  
}

.registered p {
  padding-top: 20px;
  padding-right: 5px;
  padding-left: 5px;
  color: white;
  font-size: 20px;
 
}


.registered1{
  text-align: center;
  margin-top: 30px;
  margin-bottom: 50px;
  
  padding: 90px 0;

  background-image: url("background-image2.png");
  /* Full height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  
}

.registered1 h1{
  padding-right: 5px;
  padding-left: 5px;
  color: white;
  font-size: 40px;
  
  
}

.registered1 p {
  padding-top: 20px;
  padding-right: 5px;
  padding-left: 5px;
  color: white;
  font-size: 20px;
 
}




.footer{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  background-color: #f8f9ff;
  padding: 30px 50px;
  
}

.footer .footer-services ul li{
  list-style-type: none;
  padding-top: 10px;
  padding-left: 15px;
  
}

.footer-logo img{
  padding-top: 30px;
  cursor: pointer;
}

.footer-logo p{
  padding: 10px 30px;
  font-size: 20px;
}

.footer .footer-services ul li a{
  text-decoration: none;
  color: black;
  font-size: 20px;
}


.footer .footer-services ul li a:hover{
  border-bottom: 1px solid blue;
}



.footer .footer-services ul li:nth-child(1) {
 font-weight: bold;
 font-size: 20px;
 
}

/* .copyright{
  box-shadow: 0 4px 15px rgb(0 0 0 / 50%);
  
} */

.copyright p{
  text-align: center;
  background-color: #3064a2;
  color: white;
  padding: 20px 0;
  box-shadow: 0 4px 15px rgb(0 0 0 / 50%);
}