*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

html,body{
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
}



  
  
#welcome{
  color: rgb(14, 39, 121);
  font-size: 2vw;
  position: relative;
  top:0vw;
  animation-name: wel;
  animation-duration: 2s;
  
}



@keyframes wel{
  from{
    color:#DE0051;
    font-size: 4vw;
    right:0vw;
  }
to{
  color:#DE0051;
    font-size: 2vw;
  
}
}
#click{
  display: inline;
}



.main{
  
  height: auto;
  width: auto;
  position: relative;
  
}


#logo{
  height:75px;
  width: 85px;
  background-image: url(logo.png);
  background-size:cover;
}

.nav{
  position: fixed;
  top: 0px;
  height: 75px;
  width: 100%;
   background-color: #182858; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3vw;
  border-bottom: 2px solid black;
  z-index: 2;
  
 
}
a{
  text-decoration:none;
}

.nav2{
 
  
  height: 30px;
  display: flex;
  align-items: center;
  /* background-color: blue; */
  gap: 2vw;
  align-items: center;
  color:white;
  
  
}

/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */

@media (max-width:600px) {

  .nav2 h4{
    font-size: 1.3vw;
    cursor: pointer;
    position: relative;
    
  
  }


  .nav2 h4:hover {
    font-size: 1.3vw;
    cursor: pointer;
    position: relative;
    
    
  
  }


  #line{
    color: rgb(255, 255, 255);
    font-size: 1.8vw;
    

  }



  #logo{
    height:6vw;
    width: 11.2vw;
    background-image: url(logo.png);
    background-size:contain
  }

  
}



/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */
/* media for menu bar *//* media for menu bar *//* media for menu bar *//* media for menu bar */

.nav h2{
  font-size: 2vw;
  font-weight: 700;


}

.nav2 h4{
  font-size: 1.3vw;
  cursor: pointer;
  position: relative;
  

}

.nav2 h4::after{
  content: "";
  position: absolute;
  height: 4px;
  width: 0%;
  bottom: 0;
  background-color: rgb(255, 255, 255);
  left:0;
  
}


.nav2 h4:hover::after{
  animation-name: downline;
  animation-duration: 0.5s;
  

}

@keyframes downline {
  0%{
    left:0;
    width: 0;
      }
      50%{
        left:0;
        width: 100%;
      }
      100%{
        width: 0;
        left:100%;
      }
  
}


.nav i{
  font-size: 1.6vw;
  flex-wrap: 800;
  display: none;
}

.content{
      margin-top:75px;
  height: calc(100% - 100px);
  width: 100%;
   /*background-color: burlywood; */
  display: flex;
}

.left{
  
  height: 100%;
  
  width: 55%;
  /* background-color: crimson; */
  padding: 7vw 4vw;
}


.left p{
  font-size: 1.2vw;
  font-weight: 600;
  color: rgb(112, 96, 71,);
  width: 80%;
  margin-top: 3vw;
  margin-bottom: 4vw;
  
}


.right{
  margin-top: 4%;
  height: 90%;
  width: 70%;
  
  /* background-color: royalblue; */
}

.btn{
  font-size: 1.5vw;
  padding: 1.3vw 2.3vw;
  background-color: green;
  color:wheat;
  border:none;
  border-radius: 5px;
  font-weight: 700;


}



.right img{
   height: 100%;
   width: 100%;

}


.signbtn{
  font-size: 1vw;
  padding: 1vw 2vw;
  background-color: #d72f2f;
  color:rgb(255, 255, 255);
  border:none;
  border-radius: 5px;
  font-weight: 700;


}

.signbtn:hover{
  background-color: rgb(255, 0, 0);
}


/* h4::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: red;
  z-index: -1;
  top:0;
  left: 0;
} */



h4:hover{
  
  font-size: ;
  color: red;
  
}


#main-flex h1{
  
  

}

marquee:hover{

}





#course-main h2{
  color: rgb(217, 255, 0);
  text-align:center;
  font-family:cursive;
  
  
  
}



#course-box{
  background-color: #06A3DA;
  border: 3px solid #06A3DA;
  height: ;
  width: 19vw;

}

#main-flex{
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
  gap:1vw;
  
    



}







/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//* contact css *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */






#contacts{
  height: 17vw;
  width: ;
  background-color: #06A3DA;
  display: flex;
  
 
  justify-content: center;
  align-items: center;
}

#contacts h1{
  font-size: 4vw;
  color: white;
  font-family: "Libre Baskerville", serif;
  font-weight: 900;
  font-style: normal;
  position: relative;
  top:30px;
  font-style:

}




/* contact main css for laptop and desktop display */
/* contact main css for laptop and desktop display */
/* contact main css for laptop and desktop display */
/* contact main css for laptop and desktop display */
/* contact main css for laptop and desktop display */
/* contact main css for laptop and desktop display */
/* contact main css for laptop and desktop display */
/* contact main css for laptop and desktop display */
/* contact main css for laptop and desktop display */






#contact2 H2{ 
  display: flex;
  justify-content: center;
  color: #11b3ee;
  position: relative;
  top: 4vw;
  font-family: "Anton", sans-serif;
  font-weight: 900;
  font-style: normal;

}


#contact2 p{
  font-weight: 700;
  font-size: 1.5vw;
  position: relative;
 
  top: 80px;
  left: 0vw;
}


#contact2 p::after{
  content: "";
  position: absolute;
  
  
  
  
  height: 4px;
  width: ;
  bottom: 0;
  background-color: #06A3DA;
  margin-left: 570px;
  margin-bottom: -9px;


  animation-name: contactanime;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  
}





@keyframes contactanime {
  0%{
    left:0;
    width: 0;
      }
      50%{
        left:0;
        width: 10%;
      }
      100%{
        width: 0;
        left:26%;
      }
  
}


#contact3{

}


#contact3{
  
  height: auto;
  position: relative;
  top: 100px;
  background-color: #ffffff;
  
 top:150px;
  display: flex;
  justify-content: center;
  gap: 20px;
  
}

#contact3 i{

  font-weight: 400;
  font-size: 30px;
  
  
  padding: 20px 20px;
  margin-left: 60px;
 
}



/* media for mobile device for contacts */
/* media for mobile device for contacts */
/* media for mobile device for contacts */
/* media for mobile device for contacts */
/* media for mobile device for contacts */
/* media for mobile device for contacts */




@media (max-width:600px) {

  #contacts{
    height: 50vw;
    width: ;
    background-color: #06A3DA;
    display: ;
    
   
    justify-content: center;
    align-items: center;
  }



  #contact2 p{
    font-weight: 700;
    font-size: 2vw;
    position: relative;
    color:red;
   
    top: 20px;
    left: 0vw;
  }
  
  

  #contact2 p::after{
    content: "";
    position: absolute;
    
    
    
    
    height: 4px;
    width: ;
    bottom: 0;
    background-color: #06202962;
    margin-left: 120px;
    margin-bottom: -9px;
  
  
    animation-name: contactanime;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    
  }
  




  @keyframes contactanime {
    0%{
      left:0;
      width: 0;
        }
        50%{
          left:0;
          width: 10%;
        }
        100%{
          width: 0;
          left:40%;
        }
    
  }
  



  #contact3{
  
   
    background-color: #ffffff;
    
  display: inline;
  
  
  
  font-size: 10px;
 



  }


#contact3 i{
  
  font-size: 20px;
  padding: 10px 10px;
  position: initial;
  bottom:40px;
   
}


#contact3 h2{
  color: rgb(0, 0, 0);
  margin-left: 120px;
  position: relative;
  bottom:30px;

}








}


/* end of media query for contacts set */
/* end of media query for contacts set */
/* end of media query for contacts set */
/* end of media query for contacts set */
/* end of media query for contacts set */








#footer{
  margin-top: 150px;
  height: 40%;
  width: 100%;
  background-color: #182858;
  display: flex;
}


#get{
  color: rgb(255, 255, 255);
  cursor: ;
  font-size: 1.7vw;
  
  padding: 4vh;
  padding-left: 6vw;
  margin-right: 3vw;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#footer u{
  text-decoration-color: red;

}


#footer u:hover{
  text-decoration-color: rgb(255, 255, 255);

}


#footer i{
  color: white;
  position: relative;
  right:2vw;
  font-size: 1.4vw;
  line-height: 0;
}




#get .ri-arrow-right-line:hover{
  color: red;

  /* one other element like contact us and verify certificate java script is used to make hover effect */
}



#bottom-design{
  height: 8vh;
  width: 100%;
  background-color: rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}















/*  */ /*  *//* media queries *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//* media queries *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//* media queries *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */

@media (max-width:600px) {
  
  
  
*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

html,body{
  width: 100%;
  height: 100%;
}
  
  
  
  

.nav{
  height: 60px;
  width:100%;
  background-color: #182858;
  color: red;
  }

.nav h2{
  font-size: 6vw;
  
}    

.nav h4{
  display: ;
  font-size: 2vw;
}

.nav2 i{
  display: none;
  font-size: 6vw;
}

.signbtn{
  display: none;

}
.content{
  height: calc(100% - 60px);
  flex-direction: column;
  
}
.left{
  
  width: 100%;
  height: 60%;
  }

 
  
  



.right{
  margin-bottom: 300px;
  width: 80%;
  margin-left: 30px;
  height: 100%;
}



#course-main h2{
  color: rgb(0, 255, 64);
  text-align:center;
  font-size: 2.5vw;
  
  
  
}



#course-box{
  margin-top: -200px;
  background-color: ;
}

#logo{
height: 10vw;
background-size: cover;
}


#contacts h1{

font-size: 9vw;
}




#footer{
  height: 20%;


}





/* 


#footer{
  font-size: 7vw;
  flex-wrap: wrap;


}


#get span{
    font-size: 5vw;


}








 */



/* 

#contacts{
  height: 50vw;
  
  background-color: #dd4a4a;
 
  
 
  
}





#contact3{
  
  height: auto;
  position: relative;
  
  background-color: #ffffff;
  
 top: 150px;
  gap: 2px;
  display: flex;

  
}






#contact3 h2{

  font-weight: 400;
  font-size: 2px;
  

 
}




 */













}

/*  */ /*  *//* media queries *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//* media queries *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */
/*  */ /*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  *//*  */