* {
margin: 0;
border: 0;
padding: 0;
outline: 0;
text-decoration: none;
list-style: none;
}

#logo__header{
  width:270px;
  height:80px;
  object-fit: fill;
 z-index: 11111;
 transform: translateZ(50%);
 transform: scale(1.2);
}

:root{
  --fds-blue-05: #ECF3FF;
  --fds-blue-30: #AAC9FF;
  --fds-blue-40: #77A7FF;
  --fds-blue-60: #1877F2;
  --fds-blue-70: #2851A3;
  --fds-blue-80: #1D3C78;
}

body{
   font-family: "Montserrat", sans-serif;
   line-height: 1.7;
   color: black;
   background-color:whitesmoke;
  
}

.container{
  width: 80%;
  margin: 0 auto;

}

section{
  padding:  6rem 0;
}
section h2{
  text-align: center;
  margin-bottom: 4rem;
}
h1,h2,h3,h4,h5{
  line-height: 1.2;
}
h1{font-size: 2.4rem;}
h2{font-size: 2rem;}
h3{font-size: 1.6rem;}
h4{font-size: 1.3rem;}


img{
  width: 100%;
  display: block;
  object-fit: cover;
}
.btn{
  display: inline-block;
  color: #a3abc2;
  background-color:#0d3055;
  padding: 1rem 2rem;
  border: 1px solid transparent;
  font-weight: 500;
  transition: all 400ms ease;
}
.btn:hover{
  background:#23246d;
  color: #fcfcfc;
  border-color:#7d94be;
}
.btn-primary{
  color:white;
  background-color:#3a3b95;

}
/*===========================NAVIGATION BAR====================================*/
nav{
  background:transparent;
  width: 100vw;
  height: 6rem;
  position: fixed;
  top: 0;
  z-index: 11;
  box-shadow: 0 1px 0 rgb(0 0 0 / 10%);
}

/* scroll using js*/
.window-scroll{
  background-color:whitesmoke;
  box-shadow: 0 1rem 2rem rgb(0, 0, 0, 0.2);

}
.nav__container{
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav button{
  display: none;
}
.nav__menu{
  display: flex;
  align-items: center;
  gap: 5rem;

} 
.nav__menu a{
  font-size: 1rem;
  transition: all 400ms ease;
  color: black;
}
.nav__menu a:hover{
  color: #1D3C78;
}
/*===========================HEADER===============================*/
    header{
      width: 100%;
  position: relative;
  top: 6rem;
  overflow: hidden;
  height: 100vh;
  margin-bottom: 0rem;
}
.swiper{
  width: 100%;
  height: fit-content;
  overflow: hidden;
}
 
.header__container{
 
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.swiper .swiper-button-prev, .swiper-button-next{
  color: #77A7FF;
}

.swiper .swiper-pagination-bullet-active{
  background: #77A7FF;
}

.text-wrapper{
  display: flex;
  flex-wrap: wrap;
  margin-top: -9rem;
  }
  
  .No1-text{
    
    padding-left: 8rem;
    font-size: 2.5rem;
    color:#626267;
    letter-spacing: 10px;
    white-space: nowrap;
    overflow: hidden;
    animation: 
             typing 8s steps(31,end),
             cursor .4s step-end infinite alternate;
  }
  
  /*---cursor blinking---*/
  @keyframes cursor{
    50%{ border-color: transparent;}
  }
  /*---typing efffect---*/
    @keyframes typing{
      from { width:0}
      to{width: 100%;}
    }

/*===========================ABOUT US===============================*/
.aboutUs{
  margin-top: -10rem;
  background-color: whitesmoke;

}

.aboutUs h1{
  line-height: 1.5;
  margin-bottom: 2rem;

}
.aboutUS__container{
  display:grid;
  grid-template-columns: 50% 50%;
  gap: 4rem;
  
}

.aboutUs__left label.switch {
  display: block;
  margin-bottom: 10px;
}


.aboutUs p{
  text-align: justify;
}

.aboutUs a {
  margin-top: 3rem;
}

.aboutUS__right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutUS__right img{
  width: 600px;
}

/*===========================WHY===============================*/
.why__technity{
 background-color:whitesmoke;
 border: none;
}

.why__technity h2{
  color:#3a3b95;
}

.uil-check{
  color: green;
}


.why__container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 2rem;
  box-shadow: 0.5rem 0.5rem 1.5rem #c0bcbf;
}
.why__bulletin{
  line-height: 2;
  font-size: 1.2rem;
  color: #232526;
  font-weight: bold;
}

/*=========================== SIDEBAR ===============================*/

.sidebar {
  position: fixed;
  top: 70%;
  transform: translateY(-50%);
  right: 0;
  z-index: 999;
}

.call-btn,
.instagram-btn,
.facebook-btn,
.google-btn,
.whatsapp-btn {
  display: block;
  margin-bottom: 10px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  line-height: 35px;
  color: #fff;
  font-size: 15px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26)!important;
  transition: all 0.3s ease-in-out !important;
}

.call-btn:hover,
.instagram-btn:hover,
.facebook-btn:hover,
.google-btn:hover,
.whatsapp-btn:hover{
  transform: scale(1.1) !important;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3) !important;
}

.call-btn {
  background-color: #007bff;
}

.instagram-btn {
  background-color: #e1306c;
}

.facebook-btn {
  background-color: #3b5998;
}

.google-btn {
  background-color: #ea4335;
}

.whatsapp-btn {
  background-color: #25d366;
}

@media (max-width: 768px) {
  .call-btn,
  .instagram-btn,
  .facebook-btn,
  .google-btn,
  .whatsapp-btn{
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 15px;
    line-height: 30px;
  }
} 

/*=========================== LANGUAGE SWITCH ===============================*/


.switch {
  margin-top: 25px;
  position: relative;
  display: inline-block;
  width: 140px;
  height: 44px;
}




.switch .text-off {
  right: 10px;
  font-size: 14px;
}




/*===========================COURSES===============================*/

.courses{
  margin-top: 7rem;
}

.courses__container{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem ;
  
}
.course{
  background-color: #ECF3FF;
  text-align: center;
  border: 1px solid transparent;
  transition: all 400ms ease;
}
.course:hover{
  background-color:  #ECF3FF;
  border-color: #ECF3FF;
}

.course__info1, .course__info2, .course__info3, .course__info4 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
   height: 45%;
}

.course__info1{
  padding: 2rem;
  text-align: left;
  
}

.course__info2{
  padding: 2rem;
  text-align: left;
  
}


.course__info3{
  padding: 2rem;
  text-align: left;
  padding-bottom: auto;
}

.course__info4{
  padding: 2rem;
  text-align: left;
}


.course__image{
  transform: all 400ms ease;
}
.course__image:hover{
width: 240px;
height: 180px;
}


/*===========================MACHINERY===============================*/






/*===========================CERTIFIED===============================*/

.container__certified{
display: block;
align-items: center;
justify-content: center;
margin-top: -10rem;
}

.container__certified h5{
  color: #626267;
  text-decoration:underline;
}


.cert-imgs{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cert__img{
  width: 150px;
  
}





/*===========================FOOTER===============================*/

footer{
  background-color: #133559;
  color: #a3abc2;
  padding-top: 5rem;
  font-size: 0.9rem;
}

.footer__container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}

.footer__2 h4 {
  margin-bottom: 1.2rem;
}

.footer__2 a{
  color: #a3abc2;
}

.footer__3 h4 {
  margin-bottom: 1.2rem;
}

.logo-footer{
  width: 200px;
  height: 100px;
  margin-top: -18px;
  
}

footer ul li{
  margin-bottom: 0.7rem;
  color: #a3abc2;
}

footer ul li:hover{
  text-decoration: underline;
}

.footer__socials{
  display: flex;
  gap: 1rem;
  font-size: 1.2rem;
  margin-top: 2rem;
 }

 .footer__socials a{
  color: #a3abc2;
 }

 .footer__copy{
  text-align: center;
  margin-top: 4rem;
  padding: 1.2rem 0;
  z-index: 11;
  border-top: 1px solid #455b8e;
 }

 /*===========================MEDIA QUERIES(TABLETS)===============================*/
 @media screen and (max-width:1024px){
  .container{
    width: 90%;
   }
 
 h1{
  font-size:2.2rem ;
 }
 h2{
  font-size:1.7rem ;
 }
 h3{
  font-size: 1.4rem;
 }
 h4{
  font-size: 1.2rem;
 }

 /*===========================NAVIGATION BAR====================================*/
 nav button{
  display: inline-block;
  background: transparent;
  font-size: 1.8rem;
  color: #455b8e;
  cursor: pointer;
 }
 nav button#close-menu-btn{
  display: none;
 }
.nav__menu{
  position: fixed;
  top: 5rem;
  right: 5%;
  height:fit-content;
  width: 18rem; 
  flex-direction: column;
  gap: 0;
  display: none;
}
.nav__menu li{
  width: 100%;
  height: auto;
  height: 4.8rem;
  animation: animateNavItems 400ms linear forwards ;
  transform-origin: top right;
  opacity: 0;
  
}

.nav__menu li:nth-child(2){
  animation-delay: 200ms;
}
.nav__menu li:nth-child(3){
  animation-delay: 400ms;
}
.nav__menu li:nth-child(4){
  animation-delay: 600ms;
}
.nav__menu li:nth-child(5){
  animation-delay: 800ms;
}

@keyframes animateNavItems{
  0%{ 
    transform: rotateZ(-90deg) rotateX(90deg) scale(0.1); }
  100%{
    transform: rotateZ(0)  rotateX(0) scale(1) ;
       opacity: 1;}
}

.nav__menu li a{
  background: whitesmoke;
  box-shadow: -4rem 6rem 10rem rgb(0, 0, 0, 0.6);
  width: auto;
  height: 100%;
  display: grid;
  place-items:center;
  font-size: 0.8rem;
}
.nav__menu li a:hover{
  background-color: #AAC9FF;
}

/*===========================HEADER====================================*/
header{
  height:  40vh;
  width: 100%;
}

#logo__header{
  width: 200px;
  height: 60px;
  
}
.aboutUs{
  margin-top: -10rem;
  width: auto;
  height: auto;
}

.text-wrapper{
  
  width: 100%;
  height: auto;
  flex-basis: 100%;
  margin-top: -3rem;
  margin-bottom: 5rem;
}

#typewriter-text{
 
 font-size: 20px;
 letter-spacing: 3px;
 padding-left: 3rem;


}

.aboutUS__container{
  display: grid;
  grid-template-columns: 1fr;
  
 } 

 .aboutUS__right img{
  width: 100%;
  height: auto;
  margin-top: -5rem;
}

.aboutUs h1{
  font-size: 1.5rem;
}


.switch {
  margin-top: 20px;
  width: 130px;
  height: 34px;
}

.slider {
  border-radius: 34px;
}

.slider:before {

  height: 26px;
  width: 26px;
 
}

.switch .text-off {
  right: 10px;
  font-size: 12px;
}


.why__technity{
  height:fit-content;
  width: max-content;
  margin: auto;
  margin-top: -9rem;

}
.why__container{
  display: block;

}

.beneficial__container{
  grid-template-columns: 1fr;
}


.courses{
  margin-top: -9rem;
}

.courses__container{
  grid-template-columns: 1fr 1fr;
}

.container__machinery{
  margin-top: -5rem;
}

.container__certified img{
  width: 90px;
  height: auto;
  
}

.container__certified{
  gap: 20px;
}

.course__image:hover{
 width: fit-content;
 height: fit-content;
}


.course__info1, .course__info2, .course__info3, .course__info4 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: 30%;
   text-align: center;
}

.btn-primary{
  margin-top: 1rem;
  margin-bottom: 1rem;
    width: 120px;
    font-size: 1rem;
    align-self: center;
  }

.footer__container{
grid-template-columns: 1fr 1fr;
  text-align: left;
  padding: 2rem;

  
}
}

 /*===========================MEDIA QUERIES(PHONES)===============================*/
 @media screen and (max-width:550px){
  .container{
    width: 90%;
   }
 
 h1{
  font-size:1.5rem ;
 }
 h2{
  font-size:1.3rem ;
 }
 h3{
  font-size: 1.1rem;
 }
 h4{
  font-size: 0.9rem;
 }
 p{
  font-size: 0.8rem;
 }
 ul{
  font-size: 0.8rem;
 }

header{
  height:20vh;
}


.container{
 width: 94%;
}

.nav__menu{
  right: 3%;
}

.content{
  font-size: 0.8rem;
}


.text-wrapper{
display: inline;
height: 20%;

}

#typewriter-text{
 font-size: 15px;
 padding-left: 20px;
 letter-spacing: 1px;
 }

 .aboutUs{
  margin-top: 0rem;
  width: auto;
  height: auto;
}

.aboutUS__container{
  display:grid;
  grid-template-columns: 1fr;
  margin-top: -8rem;
 } 


.aboutUS__left h1{
 font-size: smaller;
}

.aboutUS__left p{
  font-size:0.8rem;
 }


.aboutUS__right img{
  width: 100%;
  height: auto;
}
#logo__header1{
  width: 150px;
  height: 50px;
}


.switch {
  margin-top: 20px;
  width: 110px;
  height: 24px;
}

.slider {
  border-radius: 34px;
}

.slider:before {

  height: 16px;
  width: 16px;
 
}

.switch .text-off {
  right: 10px;
  font-size: 9px;
}



.why__technity{
  height:auto;
  width: auto;


}
.why__container{
  width: auto;
}

.why__bulletin{
  font-size: 0.7rem;
}

.beneficial__container{
  grid-template-columns: 1fr;
}

.courses__container{
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
}

.course__info1, .course__info2, .course__info3, .course__info4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
   height:auto;
   text-align: center;
}

.btn-primary{
margin-top: 1rem;
margin-bottom: 1rem;
  width: 80px;
  font-size: 0.8rem;
 
}

.container__certified{
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
}

.cert-imgs{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -2rem;
}

.cert__img{
  max-width: 60px;
  height: auto;
}

.container__machinery{
  width: 100%;
  height: auto;
  padding-top: -2rem;
}

.container__machinery img{
 margin-top: -2rem;
}



.footer__container{
  width: auto;
  height: auto;
  grid-template-columns: 1fr;
  align-items: center;
}

.footer__1{
  align-items:first baseline;
}

.logo-footer{

 min-width:auto;
 min-height: auto;

  
}
 }


 @media screen and (max-height: 1024px) {

  .No1{
    margin-top: 5rem;
  }

 }