@font-face {
   font-family: jose1;
   src: url('font/Jose1.ttf');
   src: url('font/Jose2.ttf');
}

@font-face {
   font-family:Exo-ExtraBold;
   src: url('font/Exo-ExtraBold.ttf');
}

html{
   scroll-behavior: smooth;
}
body{
    background-color: rgb(227, 239, 244);
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    user-select: none;
   }

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

a{
    text-decoration: none;
}

.top{
   height: 35px;
   width: 100%;
   background-color: rgb(6, 7, 8);
   position:sticky;
   top:0;
   left:0;
   right:0;
   z-index: 99999999;
   display: flex;
   justify-content: space-around;
   align-items: center;
   gap:500px; 
}


.top >.left{
   display: block;
   color:rgb(250, 246, 246);
   margin-top: 11px;
   margin-left: 0px;
   opacity: 0.6;
   font-size: 14px;
}

.top >.right{
   display: block;
   color:rgb(250, 246, 246);
   margin-top: 11px;
   margin-left: 0px;
   opacity: 0.6;
   font-size: 14px;  
}

.pho{
   display: none;
   width: 100%;
   height:50px;
   position: sticky;
   
}
.pho > a{
   text-decoration: none;
   text-align: center;
 }

/*-----------header*/

header{
    height: 60px;
    width: 100%;
   /* background-color:rgb(32, 47, 50);*/
   background-color: rgb(248, 242, 242);
    position:sticky;
    top:35px;
    left: 0;
    right:0;
    display:flex;
    justify-content:space-between;
    align-items: center;
    z-index: 999999999;
   box-shadow: 1px 1px 5px rgb(129, 127, 127);    
}


.logo{
    height:100%;
    width:300px;
    margin-left: 120px;
    position: relative;
   
   }

.logo > .com{
   position: absolute;
   top: 3px;
   width:165px;
   height:50px;
}

#nav {
   height: 100%;
   width: 700px;
   position: relative;
   top:0;
   margin-left: 20px;
   margin-right: 20px;
   
  }

  #close{
   width:40px;
   height: 40px;
   position: relative;
   display: block;
   cursor: pointer;
   top:10px;
   right:10px;
   visibility: hidden;
  }

  .fa-xmark{
   position: absolute;
   font-size: 19px;
   color: white;
 }

    #nav > ul {
      position: absolute;
      height: 100%;
      width: 100%;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      list-style-type: none;
      display: flex;
      align-items: center;
      justify-content:space-around;
      gap:5px; 
}


ul>li>a{
    color:black;
    font-size: 18px;
    font-family: jose1;
    text-align: center;
    transition: all 0.3s;
    position: relative;
   
}

ul>li>a::before{
   content: '';
   position: absolute;
   bottom: -7px;
   width: 0%;
   height: 3px;
   border-radius: 10px;
   background-color:rgb(201, 159, 32);
   transition: all 1s ease;
}

ul>li>a:hover{
   color:rgb(201, 159, 32);
}

ul>li>a:hover::before{
width:100%;
   
}
.drop{
   position: relative;
}

.fa-angle-down{
   font-size:15px;
   display: inline;
}
   
.dropdown{
   width: 500px;
   height: 200px;
   background-color:rgb(44, 50, 93);
   position: absolute;
   top:40px;
   left:-15px;
   padding-left: 15px;
   padding-top: 10px;
   line-height: 1.8;
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;
   border-top:3px solid rgb(201, 159, 32);
   visibility: hidden;
   display :flex;
   transform: translatex(150px);
   transition: all 0.5s ease;
  
}

.drop:hover .dropdown{
   visibility: visible;
   transform: translatex(0);
}

.dropdown > ul> li::marker{
  color:rgb(222, 188, 34);
  }


.dropdown > ul> li> a{
   color:white;
   font-size: 17px;
 
}

.dropdown > a:hover{
   color:orange;
}

#toggle{
   position: relative;
   width: 35px;
   height: 30px;
   border-radius:2px;
   border: 1px solid rgb(248, 245, 245);
   cursor: pointer;
   background: transparent;
   display: none;
   
}

.fa-bars{
   visibility: visible;
   position: absolute;
   top:50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-size: 25px;
   color: rgb(10, 9, 9);
}



.call{
   height: 100%;
   width:200px;
   margin-right: 70px;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
}

.call>a{
   color:black;
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
   letter-spacing: 1.5px;
}

.call>a:hover{
   color:rgb(201, 159, 32);
   
}


/*carousel-------------------*/

.slider{
    height: 600px;
    width: 100%;
    position: relative;
    top:0px;
    left: 0;
    background: linear-gradient(rgb(181, 230, 254), rgb(187, 208, 253), rgb(191, 186, 252), rgba(193, 163, 251,0.5), rgba(194, 139, 250,0.5));
    z-index: 999999;
}

#carouselExampleCaptions{
   position: absolute;
   top:0;
   left:0;
   height: 100%;
   width: 100%;
}

.head-text{
   position:absolute;
   top:100px;
   left:120px;
   
}

.head-text > h1{
   font-family:Exo-ExtraBold;
   font-size: 40px;
   font-weight:600;
   margin-bottom:  -10px;
}
.head-text > h2{
   font-family:Exo-ExtraBold;
   font-size: 30px;
   font-weight:300;

}
.head-text > p{
   width:600px;
   height: 200px;
   
}

.features{
   position:absolute;
   width: 400px;
   height: 200px;
   top:300px;
   left: 120px;
}
.features2{
   display: none;
   position:absolute;
   width: 400px;
   height: 200px;
   top:300px;
   left: 120px;
}

.explore{
   position: absolute;
   bottom: 70px;
   left: 120px;
   width: 200px;
   height:50px;
   background: linear-gradient(rgb(242, 167, 48), rgb(214, 134, 68), rgb(185, 101, 80), rgb(156, 68, 87), rgb(126, 33, 93));
   border-radius: 20px;
   border: none;
   border-right: 2px solid rgb(17, 4, 93);
   border-bottom: 2px solid rgb(17, 4, 93);

}

.explore >a{
   text-decoration: none;
   color:white;
   font-size: 20px;
}
.carousel-caption {
   position: absolute;
   top:410px;
   left:120px;
   transform: translate(-5%,-80%);
   width: 380px;
   height: 160px;
   background-color: rgb(33,38,72);
   border-top-left-radius: 60px;
   border-bottom-right-radius: 60px;
   opacity: 0.9;
}

.carousel-caption > h5{
   font-size: 35px;
   z-index: 999;
   transform: translateY(0);
   position: relative;
   margin-left: 0;
   width:380px;
   animation: text1 3s 1;
}

.carousel-caption > P{
   z-index: 999;
   font-size: 18px;
   color:orange;
   animation: text2 3s 1;
}

.d-block{
   width: 100%;
   height: 600px;
}

.bg1{
   position: absolute;
   width: 600px;
   height:450px;
   top:60px;
   right: 100px;
  
}


.carousel-control-prev,
.carousel-control-next{
   width: 25px;
   height: 25px;
   top:93%;
   cursor: pointer;
   border-radius: 50%;
   border:1px solid rgb(200, 22, 206);
}
.carousel-control-prev{
   left: 47%;
}
.carousel-control-next{
   right:47%;
}


.carousel-indicators >
   button{
         background-color: #d5b40e;
   }
   
     
@keyframes text1{
   from{
     margin-left: 100%;
     visibility: hidden;
   }
   to{
      
      margin-left: 0%;
   }
}

@keyframes text2{
   from{
      margin-top: 100%;
   }
   to {
      margin-top: 0%;
      color:orange;
   }
}







/*whatup ------*/
.whatup{
   position: fixed;
   right:20px;
   bottom: 70px;
   height: 45px;
   width: 45px;
   cursor: pointer;
   z-index: 9999999;

}

.to-top{
   position: fixed;
   bottom: 32px;
   right: 20px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 25px;
   color:rgb(239, 152, 13);
   cursor: pointer;
   z-index: 99999999;
   opacity: 1;
   transition: all .3s;
}

/* curese image */

.stud{
   width: 100%;
   height: 550px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap:nowrap;
   flex-direction: row;
   background-color: rgb(233, 249, 249);
    
}

.stu1{
   width: 50%;
   height: 550px;
   position: relative;
}

.stu2{
   width: 50%;
   height: 550px;
   position: relative;
}

.stu1 > .stu_work{
   position: absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
   color:rgb(20, 13, 13);
   width: 500px;
   height: 150px;
     }
 .career{
   color: #960f60;
 }    

.stu1 > .stu_work >h3{
   width: 500px;
   font-size: 40px;
   color:rgb(6, 35, 153);  
   }



.stu2 >img{
   position: absolute;
   width: 75%;
   height: 100%;
   margin-left: 12.5%;
}

 /*projects ---------------------------*/

 .student-project{
   height: 200px;
   width: 100%;
   background-color: white;
}
.headcourse{
   width: 100%;
   height: 120px;
   text-align: center;
}
.headcourse > h2{
   font-family: Exo-ExtraBold;
   color: darkblue;
   font-size: 30px;
}

.headcourse >p{
   color:black;
   font-size: 18px;
   font-family: jose1;
}

.pro-nav{
   height: 60px;
   width: 100%;
   background-color:rgb(33,38,72);
   margin:10px auto;
 }

.pro-nav>ul{
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   list-style-type: none;
   width:100%;
   height: 100%;
   font-size: 20px;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   color:white; 
   }


.pro-nav>ul>li{
   cursor: pointer;
   color:white;
   position: relative;
   padding-bottom: 5px;
}

.pro-nav>ul>li>a{
   color: white;
}
.pro-nav>ul>li::before{
   position: absolute;
   bottom: 0;
   content: '';
   width: 40%;
   height: 4px;
   border-radius: 10px;
   background-color: rgb(238, 244, 244);
   transition: all 0.5s ease-in;
}

.pro-nav>ul>li:hover{
   color:orange;
}

.pro-nav>ul>li:hover::before{
   width: 100%;
   
}


/*form popup download click"*/
.form-popup{
   position: fixed;
   top:0;
   left: 0;
   width: 100%;
   height: 100vh;
   background-color: rgba(9, 9, 7, 0.8);
   z-index: 9999999999;
   display: none;
   overflow-x: hidden;

}
.contact{
   position: absolute;
   top:50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 500px;
   height: 550px;
   background-color: aliceblue;
   border-radius: 10px;
   box-shadow: 0px 0px 5px white;
   padding: 20px;
   text-align: center;
}
.contact > P{
   font-size: 12px;
}

.fa-circle-xmark{
   position: absolute;
   top:5px;
   right: 10px;
   font-size: 25px;
   cursor: pointer;
}
/*closebtn{
   position: absolute;
   top:5px;
   right: 10px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-color: #344246;
   color: white;
 
}*/
input[type=text],input[type=email],input[type=tel]
{
margin: 10px;
padding: 10px;
border-radius: 10px;
width: 400px;
height: 50px;
border: none;
background-color: rgb(215, 222, 229);
font-size: 12px;
}
.select{
   margin: 10px;
   padding: 10px;
   border-radius: 10px;
   width: 400px;
   height: 50px;
   border: none;
   background-color: rgb(215, 222, 229);
   font-size: 16px;
   color:black;
   margin-bottom: 20px;
}

input[type=checkbox]{
   position: absolute;
   left: 60px;
   padding-top: 10px;
   }
form > p{
   margin-left: 60px;
   margin-top: -5px;
   width: 350px;
   font-size: 12px;
   text-align: justify;
}
.sub{
   margin-top: 20px;
   width: 350px;
   height: 40px;
   border-radius: 10px;
   background-color: #1d1611;
   color:white;
   cursor: pointer;
}
.sub:hover{
   background-color: #4e0fcd;
}

.active-form{
   display:block;
}

/*Curses------------------------*/
 
.courses{
    height: 6600px;
    width: 100%;
    background-color:white;
}

 .head{
    width: 100%;
    height: 110px;
    text-align: center;
    margin-bottom:20px;
 }

 h2{
    padding-top: 25px;
    padding-bottom:10px ;
    font-size: 35px;
    line-height: 10px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
 }

 h3{
    font-size: 20px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
 }


 .course_div{
    width: 95%;
    height: 6500px;
    margin: 0 auto;
    display:flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: 10px;
 }

 .cou{
    height: 400px;
    width: 1200px;
    background-color:rgb(237, 236, 246);
    color:white;
    position: relative;
    box-shadow: 5px 0 15px gray;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
 
 .cimg{
    width:25%;
    height: 400px;
    background-color: rgb(33,38,72);
    text-align: center;
    position: relative;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
 }

 .cimg>h5{
   font-size: 14px;
 }

 
 .cimg>img{
   margin-top: 40px;
   height:80px;
   width:80px;
 }

 .cimg> .ccc{
   height: 100px;
   width: 100px;
 }

 .course_duration{
   width:100%;
   height: 40px;
   position: relative;
}

.course_duration> .formopen{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-size: 14px;
   color:white;
   background-color: black;
   display: flex;
   justify-content: center;
   align-items: center;
   width:35%;
   height: 30px;
   text-align: center;
   padding:7px 0;
   box-shadow: 1px 2px 5px rgb(128, 126, 122);
   border-radius: 10px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   transition: all 1s;
}


.formopen:hover{
  color:orange;
  box-shadow: 1px 2px 5px orange;
}

.fa-download{
  margin-right: 10px;
}

.st_work{
  margin-left: 32.5%;
  margin-top: 10px;
   font-size: 14px;
   color:white;
   background-color: black;
   display: flex;
   justify-content: center;
   align-items: center;
   width:35%;
   height: 30px;
   text-align: center;
   padding:7px 0;
   box-shadow: 1px 2px 5px rgb(128, 126, 122);
   border-radius: 10px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   transition: all 1s;
}
.st_work > a{
   color:white;
}

.st_work:hover{
   box-shadow: 1px 2px 5px rgb(37, 40, 233);;
}



/*form*/



.tools, .skill{
   width: 28%;
   height: 350px;
   background-color:rgb(228, 226, 246);
   border-radius: 5px;
   position: relative;
   border-radius: 10px;
   color:black;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

.tool-head{
   position:absolute;
   display: flex;
   justify-content:space-around;
   align-items: center;
   width: 100%;
   height: 70px;
   background-color: rgb(169, 162, 241);
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

.tools > ul{
   margin-top: 80px;
   line-height: 1.5;
}

.tools > img{
   margin-left: 25px;
   width: 250px;
   height: 200px;
   
}

.tools > img >.gra{
   width:50px;
   height: 50px;
}

.skill > ul{
   margin-top: 80px;
   line-height: 1.5;
}

.skill{
   margin-right:40px;
   width: 32%;
   position: relative;
}

.skill > img{
   position: absolute;
   margin-top: 70px;
   width: 100%;
   height: 280px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
}

.t-icon{
   height: 50px;
   width: 50px;
   border-radius: 50%;
   background-color: rgb(71, 64, 130);
   position: relative;
   margin-left: -15px;
}

.t-icon>.fa-icon{
   position: absolute;
   top:50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-size: 20px;
   color:white;

  }

  .tool-head > h5{
   margin-right:50px;
  }



.t-icon > img{
   width:30px;
   height: 30px;
   position: absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
   
}


 .cimg> .mis_img{
   height: 120px;
   width: 200px;
 }

 

 .cimg>.tally{
   width:150px;
   height: 120px;
   
 }
 .cimg> .pbi{
   height: 90px;
   width: 140px;
   
 }
 .cimg>h3{
    
    font-size: 22px;
    text-align: center;
    color: white;
    }

 .mis{
      font-size: 13px;
      color:rgb(246, 231, 69);
    }


.tools > .pbi_img{
      width: 220px;
      height: 140px;
      margin-left: 50px;
    }

 .tools > .gra{
   width: 200px;
   height: 130px;
}

.cimg > .img_mis{
   width:210px;
   height: 130px;
}


.gra-pic{
   position: absolute;
   top:150px;
   left: 0;
  
}

.sub_list{
   line-height: 1.5;
}

.cimg > .dip-pic{

   width:180px;
   height: 130px;
}
.duration{
   margin: 20px auto;
   width: 50%;
   height: 40px;
   background-color:rgb(32, 4, 77);
   border-radius: 20px;
   color:white;
   font-size: 20px;
   text-align: center;
   padding-top: 3px;
   padding-bottom: 3px;
   box-shadow: 0 0 5px orange;

}




 /*-------Why Join----------------------*/
 .whyjoin{
    height: 680px;
    width: 100%;
    background: linear-gradient(rgb(190, 197, 243), rgb(159, 147, 202), rgb(186, 151, 229), rgb(164, 90, 214), rgb(162, 90, 191));   
 }
.whyhead{
   width: 100%;
   height:80px;
   padding: 10px;
}
 .whyhead > h2{
   color:rgb(61, 13, 120);
   text-align: center;
   padding-bottom: 10px;
   font-family: Exo-ExtraBold;
 }

 .whyhead > p{
   color:rgb(9, 8, 10);
   text-align: center;
 }

 .whyus{
   height: 600px;
   width: 100%;
   display: flex;
   justify-content:center;
   align-items: center;

   }

.whyimg {
   width: 30%;
   height: 550px;
  
  }

.whyimg > img{
   margin-top: 70px;
   width: 450px;
   height: 450px;
}

.whytext{
   width: 65%;
   height: 550px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap:15px;
   flex-wrap: wrap;
     
}


 .why1{
    width: 380px;
    height: 160px;
    background-color:rgb(225, 212, 249);
    box-shadow: 0px 0px 5px gray;
    border-radius: 15px;
    transform: scale(0.9);
    transition: all 0.5s;
    cursor: pointer;
   
 }

 .why1:hover{
   box-shadow: 0px 5px 5px rgb(110, 14, 89);
   transform: scale(1);
   
 }

 .icon-head{
   width:450px;
   height: 50px;
   display: flex;
   align-items: center; 
   justify-content:flex-start;
   gap:10px;
 }

 .icon{
   left: 10px;
   height: 40px;
   width: 40px;
   border-radius: 50%;
   background-color: burlywood;
   position: relative;
  
 }

 .icon>.fa-icon{
   position: absolute;
   top:50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-size: 20px;
   color:rgb(101, 70, 14);
   }

  .icon-head>h3{
   font-size: 18px;
   text-align: center;
   margin-left: 10px;
  }

  .why1>p{
   position: relative;
   padding-left: 20px;
   padding-right:20px;
   text-align: center;
   text-align: justify;
   font-size: 16px;
  }


/*review ------------------*/

.review-slider{
   width: 100%;
   height: 550px;
   background-color:#e3eaf2;
   position: relative;
}

.review-slider> h2{
   padding-top: 40px;
   margin-bottom: 10px;
   color:rgb(32, 47, 50);
   font-size: 35px;
   text-align: center;
   font-family:Exo-ExtraBold;
}
.review-slider> h3{
   margin: auto;
   color:white;
   text-align: center;
   font-size:  25px;
   padding: 10px 20px;
   width: 250px;
   height: 50px;
   border-radius: 10px;
 
}
.review-slider > h3 >a{
   color:white;
   font-weight: 300;
   background: linear-gradient(rgb(36, 9, 157), rgb(118, 15, 128), rgb(162, 34, 99), rgb(199, 54, 68), rgb(233, 76, 24));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-family: Exo-ExtraBold;

}


.review-slider > h3 >a:hover {
   color:rgba(230, 194, 12, 0.8);
}




/*----------map-----------------*/
 

  .map{
   height: 550px;
   width:100%;
   background: rgb(36, 47, 47);
   }

   .maphead > h2{
      padding:15px 0;
      margin-bottom: 45px;
      text-align:center;
      font-size:32px;
      font-weight:900;
      line-height:1.5;
      letter-spacing:.8px;
      word-spacing:1px;
      color:rgb(236, 241, 243);
      font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}
 

 .map>.add{
   width: 90%;
   height: 450px;
   position:relative;
   top:-50px;
   border-radius: 5px;
   margin-left: 5%;
 }

 .map>.add>iframe{
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
 }

.map_color{
   position: absolute;
   top:0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.4);
   height:100%;
   width:100%;
   z-index: 9999;
  
 }


  .add>a{
   position: absolute;
   top:10px;
   right: 10px;
   padding: 5px 15px;
   border-radius: 10px;
   background-color: black;
   color: white;
   z-index: 999999;
 }


/* foooter */
footer{
   position: relative;
	width:100%;
	height:350px;
	background-color:rgb(19, 23, 44);
}

.details{ 
   width:100%;
	height:250px;
	display:flex;
	justify-content:space-evenly;
  	flex-wrap:wrap;
   gap:30px;
   padding-top: 20px;
}


 .foot-links{
	width:30%;
	height:300px;
   margin-left: 30px ;
  
}

.logo1{
   height:90px;
   width:400px;
   margin-left: 20px;
   
  }

 .logo1 > img{
   width:150px;
   height:50px;
}


.lines > p {
   color:white;
   font-size: 15px;
   padding-left: 30px;
   padding-right: 30px;
   text-align: justify;

}

.fa-brands{
	font-size:25px;
	color:white;
	opacity:0.9;
	padding-right:2px;
	margin-top:2px;
	margin-left:15px;
}

.fa-brands:hover{
	color:#f47216;
}

 .menu-links{
	width:20%;
	height:300px;
  	opacity:0.9;
}

.menu-links > h3{
   color:white;
   font-size:20px;
   margin-top: 20px;
   margin-left: 25px;
  
}

.menu-links > ul{
   list-style-type: none;
   font-size: 18px;
   margin-top:25px;
   
}

.menu-links > ul > li> a{
   color: white;
}

.fa-angles-right{
   color:white;
   margin-right: 5px;
}

.address{
	width:35%;
	height:300px;
   margin-right: 30px ;
   opacity:0.9;
}

.address > h3{
   color:white;
   font-size:20px;
   margin-top: 20px;
   margin-left: 25px;
   opacity:0.8;  
}

.address > a{
   text-decoration: none;
   color: white;
}

.fa-phone{
   margin-left: 20px;
   margin-right: 15px;
   color:orange;  
}

.fa-location-dot{
   position: relative;
   top:-20px;
   margin-left: 20px;
   height: 20px;
   font-size: 18px;
   color:orange;
   }

   .fa-clock{
      margin-left: 20px;
      color:white;
      font-size: 18px;
      color:orange;
     }

   .add{
      display: inline-block;
      width:350px;
      height: 50px;
      margin-left: 15px;
      margin-top: 10px;
      color:white;
    }

.fa-envelope{
   margin-left: 20px;
   margin-right: 15px;
   font-size: 18px;
   color:orange;
  }

.end{
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 30px;
   background-color:rgb(6, 8, 15);
}

.end > p{
   text-align: center;
   color: white;
   font-size: 12px;
   opacity: 0.6;
   margin-top: 8px;
   letter-spacing: 2px;
}


/*preloader  ----------------------*/


#preloader{
   width: 100%;
   height: 100vh;
   background:white url(images/loader.gif) no-repeat center center;
   position: fixed;
   z-index: 999999999999999;
   top:0;
   left: 0;
}



/*responsive start ========================*/
@media (max-width:1430px){


   html,body{
      width: 100%;
      height: 100%;
      padding: 0;
      margin:0;
      overflow-x: hidden;
   }

   .bg1{
      position: absolute;
      width: 550px;
      height:420px;
      top:70px;
      right: 70px;
   }
   
   .cimg>h5{
      font-size: 14px;
    }
   .whyus{
      justify-content:space-evenly;
      align-items: center;
         }
   
   .whyimg {
      width: 28%;
      height: 500px;
      margin-left: 20px;
     }
   
   .whyimg > img{
      margin-top: 20px;
      width: 400px;
      height: 400px;
   }
   
   .whytext{
      width: 70%;
      height: 80%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap:20px;       
   }
  
   


.select > option{
   font-size: 12px;
   color:rgb(15, 14, 14);
   line-height: 0.9;
   height: 100px;
}

}


@media (max-width:1300px) {
   .bg1{
      width: 500px;
      height:420px;
      top:70px;
      right: 30px;
   }
   

   .head-text{
      position:absolute;
      top:100px;
      left:100px;
      
   }
   
   .head-text > h1{
      font-family:Exo-ExtraBold;
      font-size: 40px;
      font-weight:600;
   }
   .head-text > p{
      width:600px;
      height: 180px;
      
   }
   
   .features{
       width: 400px;
      height: 200px;
      top:300px;
      left: 100px;
   }
   
   .explore{
      bottom: 70px;
      left: 100px;
      width: 200px;
      height:50px;
   }
   
   
   .carousel-caption {
      position: absolute;
      top:410px;
      left:100px;
      transform: translate(-5%,-80%);
      width: 380px;
      height: 160px;
   }

   
}


@media (max-width:1280px) {

   .logo{
      height:100%;
      width:200px;
      margin-left: 100px;
     }
  
  .logo > img{
     width:185px;
     height:56px;
  }

  #nav {
   margin-left: 45px;
     }
   ul>li>a{
            font-size: 20px;
       }

       .drop1 > a{
            font-size: 18px;
      }
        
      .drop2 > a{
             font-size: 18px;
      }
   
      .call>a{
          font-size: 20px;
      }

      .slider{
         top: 0px;
         left: 0;
      }

     .d-block{
      height: 600px;
     }

     .courses{
      height: 8000px;
       }

       .course_div{
         width: 95%;
         height: 7900px;
            }
     
      .cou{
         height: 480px;
         width: 1200px;
          }
      
      .cimg{
         width:25%;
         height: 480px;    
      }

      .cimg > h3{
         font-size: 25px;
      }

      .cimg > h5{
         font-size: 20px;
      }

     .tools, .skill{
      width: 33%;
      height: 450px;
        }

      .tools > ul{
         line-height: 1.7;
         font-size: 20px;
      }

      .skill > ul{
         line-height: 1.6;
         font-size: 20px;
      }

      .tool-head > h5{
         font-size: 25px;
         margin-right:45px;
       }

       .points > h5{
         font-size: 25px;
       }

      .points > ul{
         font-size: 19px;
         line-height: 1.8;
         padding-right: 5px;
      }
        .duration{
         width: 85%;
         height: 55px;
         font-size: 23px; 
      }

      .whyjoin{
         height: 750px;
         width: 100%;
       }
       .why1{
         width: 350px;
         height: 170px;
         }
   
         .re-text{
            width:580px;
            height:270px;
            position:absolute;
            top:50px;
            left: 25%;
                  
         }
}



@media (max-width:1220px) {
   .top{
       gap:200px
   }
   
   .top > p{
       margin-left: 20px;
       } 
   
       .logo{
         height:100%;
         width:200px;
         margin-left: 100px;
        }
     
     .logo > img{
        width:185px;
        height:56px;
     }

   #nav {
         width: 700px;
         margin-left: 20px;
     }

     ul>li>a{
      font-size: 20px;
 }


 .head-text > p{
   width:520px;
   height: 250px;
   
}
     .carousel-caption {
      width: 500px;
      height: 200px;
      }
   
   .carousel-caption > h5{
      font-size: 40px;
      width:500px;
   }
   
   .carousel-caption > P{
          font-size: 18px;
        }

        .fa-chevron-circle-up{
          bottom: 5px;
         right: 30px;
         font-size: 25px;
         
      }
      /*whatup ------*/
      .whatup{
         right:20px;
         bottom: 50px;
         height: 45px;
         width: 45px;
      }
      
.to-top{
   bottom: 10px;
   right: 20px;
   width: 30px;
   height: 30px;
}


   
   .cou{
         height: 470px;
         width: 1200px;
      }

   .cimg{
      height: 470px;
   }
   .cimg>h3{
            font-size: 20px;
             }
   .cimg>h5{
            font-size: 14px;
            } 
            
   .tools{
         width: 33%;
         height: 450px;  
      }
.skill{
   width: 36%;
   height: 450px;
   margin-right: 15px;  
}
      .skill > img{
         height: 300px;
        
      }
.tools > ul >li{
   font-size:20px;
}
.skill > ul >li{
   font-size:20px;
} 
 
      points{
         width:80%;
         height: 300px;
      }
      .course_duration>a{
         font-size: 13px;
         width:55%;
         height: 30px;
      }     
      .duration{
         width: 85%;
         height: 40px;
         font-size: 20px;
         padding-top: 5px;
         padding-bottom: 3px;
         } 
         
         .st_work{
            margin-left: 27.5%;
            margin-top: 10px;
             font-size: 14px;
              width:45%;
             height: 30px;
                        
          }      

 /*footer------*/
 .details{ 
   gap:5px;
   }
   
.logo1{
   height:70px;
   width:400px;
   margin-left: 10px;
   
  }
   .logo1 > img{
      width:150px;
      height:50px;
   }

   .lines > p {
      font-size: 14px;
      padding-left: 15px;
      padding-right: 15px;
   }

   .menu-links > h3{
       font-size:15px;
   }
   
   .menu-links > ul{
         font-size: 14px;
         }
   .fa-brands{
         font-size:20px;
         color:white;
         margin-top:2px;
         margin-left:25px;
         }

    .address{
       margin-right: 10px;
       width:42%;
         }
         
      .address > h3{
            font-size:16px;
         }
                  
         .fa-location-dot{
            height: 20px;
            font-size: 15px;
            }
         
            .fa-clock{   
               font-size: 15px;
              }
         
            .add{
               width:350px;
               height: 50px;
            }

         .fa-envelope{
            font-size: 15px;
           }     
}


/*responsive =============================*/

@media (max-width:1170px){
      .tools > ul >li{
      font-size:18px;
   }
   .skill > ul >li{
      font-size:18px;
   } 
   .whyjoin{
      height: 670px;
      width: 100%;
     
   }
   
   .whyus{
         height: 570px;
         }
   
   .whyimg {
      width: 28%;
      height: 500px;
      margin-left: 20px;
     }
   
   .whyimg > img{
      margin-top: 20px;
      width: 400px;
      height: 420px;
   }
   
   .whytext{
      width: 75%;
      height: 80%;
      gap:10px;       
   }

   .icon>.fa-icon{
      font-size: 18px;
      }
   
      .why1{
         height: 150px;
      }
     .icon-head>h3{
      font-size: 18px;
     
     }
   
     .why1>p{
         font-size: 15px;
     }




  

}

@media (max-width:1150px){
   
   .logo1{
      height:50px;
      width:350px;
      margin-left: 10px;
      
     }
      .logo1 > img{
         width:140px;
         height:40px;
      }

      ul>li>a{
         font-size: 18px;
    }
    .call>a{
      color:black;
      font-size: 16px;
    }
   
.slider{
   height: 550px;
   width: 100%
}
 
   .head-text{
      position:absolute;
      top:50px;
      left:70px;
      
   }
   
   .head-text > h1{
      font-family:Exo-ExtraBold;
      font-size: 35px;
      font-weight:600;
   }
   .head-text > h2{
      font-family:Exo-ExtraBold;
      font-size: 26px;
      font-weight:300;
   
   }
   .head-text > p{
      width:520px;
      height: 200px;
   }
   
   .features{
      top:250px;
      left: 70px;
   }
   
   .explore{
      bottom: 100px;
      left: 70px;
      width: 200px;
      height:50px;
   }
   
   .explore >a{
      text-decoration: none;
      color:white;
      font-size: 20px;
   }
   .carousel-caption {
      position: absolute;
      top:350px;
      left:70px;
      transform: translate(-5%,-80%);
      width: 350px;
      height: 140px;
     
   }
   
   .carousel-caption > h5{
      font-size: 30px;
      width:350px;
     
   }
   
   .carousel-caption > P{
      z-index: 999;
      font-size: 17px;
   }
   
   .d-block{
      width: 100%;
      height: 550px;
   }
   
   .bg1{
      position: absolute;
      width: 420px;
      height:350px;
      top:70px;
      right: 50px;
   }
   



   /*why us ----------------*/
   .whyus{
      height: 600px;
      width: 100%;
      gap:60px;
   
    
   
      }
   
   .whyimg {
      width: 30%;
      height: 550px;
     
     }
   
   .whyimg > img{
      margin-top: 70px;
      width: 450px;
      height: 450px;
   }
   
   .whytext{
      width: 65%;
      height: 550px;
       gap:15px;  
        
   }
   
   
    .why1{
       width: 280px;
       height: 170px;
          
    }
   
    .why1:hover{
      box-shadow: 0px 5px 5px rgb(110, 14, 89);
      transform: scale(1);
      
    }
   
    .icon-head{
      width:450px;
      height: 50px;
    }
   
    .icon{
      left: 10px;
      height: 40px;
      width: 40px;
         
    }
   
    .icon>.fa-icon{
      font-size: 20px;
      color:rgb(101, 70, 14);
      }
   
     .icon-head>h3{
      font-size: 18px;
      text-align: center;
      margin-left: 10px;
     }
   
     .why1>p{
       padding-left: 20px;
      padding-right:20px;
         font-size: 16px;
     }
     .select >.s1{
      color:#3c1290;
    }
   .select > option{
      font-size: 12px;
      color:rgb(15, 14, 14);
      line-height: 0.9;
      height: 100px;
   }



}


@media (max-width:1050px){

.logo{
   margin-left: 50px;
}

.logo > .com{
   position: absolute;
   top: 3px;
   width:155px;
   height:45px;
}

   ul>li>a{
      font-size: 18px;
 }


 .cimg>h3{
       font-size: 20px;
   }

   .cimg>h5{
      font-size: 13px;
  }

  .cimg > .dip-pic{

   width:150px;
   height: 110px;
}
  
.call{
   margin-right: 12px;
}


.t-icon{
   height: 40px;
   width: 40px;
   margin-left:10px;
   position: relative;
}

.t-icon>.fa-icon{
    font-size: 18px;

  }


  .t-icon > img{
   width:25px;
   height: 25px;
  
}


/*why us ----------------*/

.whyus{
   margin-top: 10px ;
  height: 650px;
  width: 100%;
  display: flex;
  justify-content:center;
  align-items: center;
  
  }

.whyimg {
   position: relative;
   width: 30%;
   height: 500px;
 
 }

.whyimg > img{
  position: absolute;
  top:-100px;
  width: 350px;
  height: 350px;
}

.whytext{
  margin-top: -80px; 
  width: 70%;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:5px;
  flex-wrap: wrap;
    
}


.why1{
   width: 280px;
   height: 180px;
   background-color:rgb(225, 212, 249);
   box-shadow: 0px 0px 5px gray;
   border-radius: 15px;
   transform: scale(0.9);
   transition: all 0.5s;
   cursor: pointer;
  
}

.why1:hover{
  box-shadow: 0px 5px 5px rgb(110, 14, 89);
  transform: scale(1);
  
}

.icon-head{
  width:450px;
  height: 50px;
  display: flex;
  align-items: center; 
  justify-content:flex-start;
  gap:10px;
}

.icon{
  left: 10px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: burlywood;
  position: relative;
 
}

.icon>.fa-icon{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 20px;
  color:rgb(101, 70, 14);
  }

 .icon-head>h3{
  font-size: 18px;
  text-align: center;
  margin-left: 10px;
 }

 .why1>p{
  position: relative;
  padding-left: 20px;
  padding-right:20px;
  text-align: center;
  text-align: justify;
  font-size: 16px;
 }

 
}


@media (max-width:1025px)
{
   .slider{
      height: 550px;
      width: 100%
   }
    
      .head-text{
         position:absolute;
         top:50px;
         left:70px;
         
      }
      
      .head-text > h1{
         font-size: 25px;
         font-weight:500;
      }

      .head-text > h2{
         font-family:Exo-ExtraBold;
         font-size: 22px;
         font-weight:300;
      
      }
      .head-text > p{
         width:420px;
         height: 200px;
      }
      
      .features{
         top:250px;
         left: 70px;
      }
      
      .explore{
         bottom: 100px;
         left: 70px;
         width: 200px;
         height:50px;
      }
      
      .explore >a{
         text-decoration: none;
         color:white;
         font-size: 20px;
      }
      .carousel-caption {
         position: absolute;
         top:350px;
         left:70px;
         transform: translate(-5%,-80%);
         width: 350px;
         height: 140px;
        
      }
      
      .carousel-caption > h5{
         font-size: 30px;
         width:350px;
        
      }
      
      .carousel-caption > P{
         z-index: 999;
         font-size: 17px;
      }
      
      .d-block{
         width: 100%;
         height: 550px;
      }
      
      .bg1{
         position: absolute;
         width: 400px;
         height:320px;
         top:70px;
         right: 40px;
      }
       
         
   


}

@media (max-width:1000px) {


 #nav {
        width: 650px;
        margin-left: 5px;
    }

    ul>li>a{
     font-size: 16px;
}

.carousel-control-prev{
   left: 46%;
}
.carousel-control-next{
   right:46%;
}

     .cimg> .pbi{
      height: 120px;
      width: 150px;
      
    }

   .menu-links > ul > li > a{
      font-size: 14px;
      }
   
   .address{
      margin-right: 10px;
      width:42%;
     
         } 

   .address > a{
      font-size: 14px;
   }
   .address > a > p {
      font-size: 14px;
      width:270px;
   }

   .address > p{
      font-size: 14px;
      width:250px;
   }
}


@media (max-width:950px)
{
   .slider{
      height: 500px;
      width: 100%
   }
    
      .head-text{
         position:absolute;
         top:50px;
         left:50px;
         
      }
      
      .head-text > h1{
         font-size: 25px;
         font-weight:500;
      }
      .head-text > h2{
       
         font-size: 20px;
         font-weight:300;
      
      }
      .head-text > p{
         width:380px;
         height: 200px;
         font-size: 16px;
      }
      
      .features{
         top:250px;
         left: 70px;
      }
      
      .explore{
         bottom: 100px;
         left: 70px;
         width: 200px;
         height:50px;
      }
      
      .explore >a{
         text-decoration: none;
         color:white;
         font-size: 20px;
      }
      .carousel-caption {
         position: absolute;
         top:350px;
         left:70px;
         transform: translate(-5%,-80%);
         width: 350px;
         height: 140px;
        
      }
      
      .carousel-caption > h5{
         font-size: 30px;
         width:350px;
        
      }
      
      .carousel-caption > P{
         z-index: 999;
         font-size: 17px;
      }
      
      .d-block{
         width: 100%;
         height: 550px;
      }
      
      .bg1{
         position: absolute;
         width: 400px;
         height:320px;
         top:70px;
         right: 40px;
      }
    
      

   }

   @media (max-width:913px) {

     /*whatup ------*/
     .whatup{
        right:20px;
        bottom: 70px;
        height: 45px;
        width: 45px;
     }
      
   }





/*toggle button active ------------*/
@media (max-width:905px) {

   .top{
        gap:120px;
  }
  
  .top > p{
      margin-left: 30px;
      } 
     
   #toggle{
      margin-right: 50px;
      display: block;
      border: 1px solid black;
   }
  
   #nav {
      position: absolute;
      top:0px;
      left: -5px;
      height: 100vh;
      width: 50%;
      background-color:rgb(31, 35, 66);
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translateX(100%);
      transition: all 0.3s linear;
      opacity: 0%;
      visibility: hidden; 
   }

   .active#nav{
      transform: translateX(0%);
      opacity: 100%;
      visibility: visible;
   }

  .active.fa-xmark{
   visibility: visible;
  }
  
  .active.fa-bars{
      visibility: hidden;
  }

  #close{
   width:40px;
   height: 40px;
   position: absolute;
   display: block;
   cursor: pointer;
   top:10;
   right:0px;
  }

  .fa-xmark{
   visibility: visible;
   position: absolute;
   font-size: 25px;
   color: white;
 
}

  #nav > ul{
   position: relative;
   display: block;
   width: 100%;
   height: 90%;
   top:50%;
   left: 50%;
   transform: translate(-50%,-50%);
  
  }

#nav > ul > li{
   position: relative;
   width: 100%;
   height: 8%;
   padding: 20px 0px;
   border-bottom: 1px solid rgb(45, 44, 44);
}

   #nav > ul > li > a{
      width: 100%;
      color:white;
      font-size: 20px;
   }

  

   #nav > ul > li > .dropdown{
      position: relative;
      pointer-events: auto;
      top:30px;
      left:30px;
      width: 80%;
      height: 335px;
      background-color:rgb(44, 50, 93);
      visibility:visible;
      transform: translatey(0px);
      transition: all 0.5s ease;
      z-index: 9999;
      display: none;
     
   }

   .fa-angle-down{
      font-size:15px;
      display:none;
      visibility: hidden;
   }

 .cou_arr{
   position: absolute;
   display: flex;
   justify-content: space-around;
   gap:300px;
   left: 0;
}
      /*whatup ------*/
      .whatup{
         right:10px;
         bottom: 50px;
         height: 45px;
         width: 45px;
      }
      
.to-top{
   bottom: 10px;
   right: 10px;
   width: 30px;
   height: 30px;
}

/* courses -------*/
.courses{
   height: 5700px;
   width: 100%;
   background-color:white;
}


.course_div{
   width: 95%;
   height: 5600px;
   margin: 0 auto;
   display:flex;
   align-items: center;
   justify-content: space-evenly;
   flex-wrap: wrap;
   padding-top: 10px;
}
.cou{
   height: 370px;
   width: 850px;
   background-color:rgb(237, 236, 246);
   color:white;
   
}

.cimg{
   width:25%;
   height: 370px;
   background-color: rgb(33,38,72);
   text-align: center;
  
}

.cimg>img{
  margin-top: 40px;
  height:80px;
  width:80px;
}


.tools, .skill{
   width: 35%;
   height: 350px;
   background-color:rgb(228, 226, 246);
  
}
.tool-head{
   position:absolute;
   width: 100%;
   height: 50px;
   
}

.tools > ul{
   margin-top: 60px;
   line-height: 1.5;
   font-size: 15px;
}

.skill > ul{
   margin-top: 60px;
   line-height: 1.5;
   font-size: 15px;
}


.tools > ul > li{
   font-size: 15px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.skill > ul >li{
   font-size: 15px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

   .cimg> .img_mis{
      width: 180px;
      height: 110px;
   }


   .tools > img{
      margin-left: 25px;
      width: 200px;
      height: 180px;
   }

   .t-icon{
      height: 40px;
      width: 40px;
      margin-left:-7px;
      position: relative;
   }

   .t-icon > img{
      width:22px;
      height: 22px;
     
   }
   
   .t-icon>.fa-icon{
       font-size: 18px;
   
     }
   
     .tool-head > h5{
      margin-right:50px;
      font-size: 20px;
     }
   
   .course_duration> .formopen{
      font-size: 14px;
      width:45%;
      height: 30px;
   }

   .cimg> .img_mis{
      margin-top: 25px;
      height: 90px;
      width: 150px;
    }
    .st_work{
      margin-left: 22.5%;
      margin-top: 10px;
       font-size: 14px;
       color:white;
       width:55%;
       height: 30px;
      
    }
    .cimg> .pbi{
      height: 85px;
      width: 120px;
      margin-top: 25px;
      }

      /*why -------*/
      .whyus{
         margin-top: 10px ;
        height: 650px;
          
        }
      
      .whyimg {
         position: relative;
         width: 25%;
         height: 500px;
       
       }
      
      .whyimg > img{
        position: absolute;
        top:-100px;
        width: 270px;
        height: 270px;
      }
      
      .whytext{
        margin-top: -80px; 
        width: 70%;
        height: 550px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap:7px;
        flex-wrap: wrap;
          
      }
      
      
      .why1{
         width: 280px;
         height: 160px;
               
      }
      
         
      .icon-head{
        width:450px;
        height: 50px;
            }
      
      .icon{
        left: 10px;
        height: 35px;
        width: 35px;
           
      }
      
      .icon>.fa-icon{
         font-size: 18px;
       
        }
      
       .icon-head>h3{
        font-size: 17px;
         }
      
       .why1>p{
         font-size: 15px;
       }
      


}

@media (max-width:884px){

   .top{
      gap:150px;
  }
  
  .top > p{
      margin-left: 25px;
      font-size: 12px;
      } 

.logo{
   height:100%;
   width:200px;
   margin-left: 30px;
  }

.logo > img{
  width:120px;
  height:55px;
}

.call>a{
   font-size: 18px;
}


#nav>ul>li>a{
   font-size: 22px;
   text-transform: uppercase;
    
}
.carousel-control-prev,
.carousel-control-next{
   width: 20px;
   height: 20px;
   top:93%;
 }
.carousel-control-prev{
   left: 45%;
}
.carousel-control-next{
   right:45%;
}
.student-project{
   height: 300px;
}

.pro-nav{
   height: 150px;
   width: 100%;
   padding: 20px;
   
 }

.pro-nav>ul{
   flex-wrap: wrap;
   width:100%;
   height: 100%;
   font-size: 16px;
   gap:20px;
   justify-content:center;

   margin-left: 0;
   }

   .pro-nav>ul>li{

   width:200px;
   height: 40px;
   padding: 5px 5px;
   text-align: left;
   
   }

   .pro-nav>ul>li>a{
      font-size: 18px;
   }

   .pro-nav>ul>.off{
      width: 200px;
   }
  


   .courses{
      height: 9300px;
           
  }

   .course_div{
      width: 95%;
      height: 9200px;
      display:flex;
      align-items: center;
      justify-content: space-evenly;
      flex-wrap: wrap;
   }
  
   .cou{
      height: 610px;
      width: 1100px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: flex-start;
     
   }
   
   .cimg{
      width:100%;
      height: 250px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 0; 
   }
  
   .cimg>img{
     margin-top: 5px;
     height:70px;
     width:70px;
   }
  
   .cimg>h3{
      margin-top: -10px;
      font-size: 20px;
  }

  .cimg>h5{
     font-size: 13px;
 }

  .cimg> .ccc{
   height: 80px;
   width: 80px;
 }
   .cimg> .pbi{
   height: 60px;
   width: 85px;
   margin-top: 10px;

}


.st_work{
   margin-left:40%;
   margin-top: 0px;
    font-size: 16px;
    color:white;
    width:20%;
    height: 30px;
   
 }

 .course_duration> .formopen{
   font-size: 16px;
   width:15%;
   height: 30px;
   
}
  .course_duration>a{
     font-size: 20px;
     width:30%;
     height: 30px;
     padding:7px 0;
   
  }

    
  .tools{
     width: 320px;
     height: 330px;
  }

  .skill{
   width: 350px;
   height: 330px;
   margin-right: 2px;
  } 
  
  .tools > ul{
   line-height: 1.5;
   font-size: 20px;
}

.skill > ul{
   line-height: 1.4;
   font-size: 20px;
}

.tool-head > h5{
   font-size: 20px;
   margin-right:55px;
 }
   
      

  
  .tool-head{
   border-radius: 0;
   border-top-right-radius: 10px;
   border-top-left-radius: 10px;
  }


  .cou > .web{
   height: 260px;
  }

  .cimg> .img_mis{
      margin-top: 15px;
      width: 150px;
      height: 80px;
   }

   

   .mis_div{
      height: 260px;
   }

   .mis_div > h6{
      display: none;
   }

   .mis_div > h5{
      margin-top: -20px;
   }
  
   
      .sub_list{
         font-size: 15px;
      }
        
   .tools > .gra{
     width: 200px;
     height: 120px;
  }
 
  .cimg > h5{
   margin-top: -20px;
  }
 
.pbi{
   width: 90px;
   height: 90px;
}

.cimg > h6{
   display: none;
}
.cimg > .dip-pic{

   width:110px;
   height: 80px;
}

  .duration{
     width: 92%;
     height: 40px;
     font-size: 20px;
   
  }


footer{
 		height:650px;
	}

.details{ 
   height:590px;
	justify-content:space-between;
  	flex-wrap:wrap;
   gap:20px;
   
}

 .foot-links{
	width:50%;
	height:300px;

}

.lines > p {
  
   font-size: 16px;
   }

.fa-brands{
	font-size:25px;
	}

 .menu-links{
	width:40%;
	height:300px;
  	opacity:0.9;
}

.menu-links > h3{
    font-size:20px;
   }

.menu-links > ul{
     font-size: 16px;
   
}

.menu-links > ul> li> a{
   font-size: 17px;
}

.address{
	width:90%;
	height:300px;
   margin-left: 20px ;
 

}

.address > h3{
    font-size:20px;
}

.address > a{
   font-size: 17px;
}
.address > a> p{
   font-size: 17px;
   width: 550px;
}

.address > p{
   font-size: 17px;
   width: 550px;
}

.fa-phone{
   margin-left: 20px;
   margin-right: 15px;
   
}

.fa-location-dot{
   position: relative;
   top:-20px;
   margin-left: 20px;
   height: 20px;
   font-size: 18px;
   }

   .fa-clock{
      margin-left: 20px;
      color:orange;
      font-size: 18px;
     }

   .add{
      display: inline-block;
      width:550px;
      height: 50px;
      margin-left: 15px;
      margin-top: 10px;
      color:white;
    }

.fa-envelope{
   margin-left: 20px;
   margin-right: 15px;
   font-size: 18px;
  }


.end > p{
   font-size: 15px;
   margin-top: 8px;

}




}

@media (max-width:850px) {

   .slider{
      height: 420px;
      width: 100%
   }
    
      .head-text{
         position:absolute;
         top:30px;
         left:50px;
         
      }
      
      .head-text > h1{
         font-size: 23px;
         font-weight:500;
      }
      .head-text > p{
         width:370px;
         height: 200px;
         font-size: 15px;
      }
      
      .head-text > h2{
         font-size: 18px;
         font-weight:300;
      
      }
      .features{
         top:200px;
         left: 70px;
      }
  
      .carousel-caption {
         position: absolute;
         top:270px;
         left:50px;
         transform: translate(-5%,-80%);
         width: 280px;
         height: 110px;
        
      }
      
      .carousel-caption > h5{
         margin-top: 2px;
         font-size: 22px;
         width:280px;
        
      }
      
      .carousel-caption > P{
         z-index: 999;
         font-size: 14px;
         margin-left: -10px;
      }
      .explore{
         position: absolute;
         bottom: 40px;
         left: 50px;
         width: 150px;
         height:40px;
         
        
      
      }
      
      .explore >a{
         text-decoration: none;
         color:white;
         font-size: 16px;
      }
      
      .d-block{
         width: 100%;
         height: 420px;
      }
      
      .bg1{
         position: absolute;
         width: 320px;
         height:280px;
         top:40px;
         right:20px;
      }
    



/*why -----------*/

.whyhead > h2{
   font-size: 27px;
}
.whyhead > p{
   font-size: 14px;
}

.whyus{
   margin-top: 10px ;
  height: 650px;
    
  }

.whyimg {
   position: relative;
   width: 25%;
   height: 500px;
   display: none;
 
 }

 .whytext{
   margin-top: -80px; 
   width: 90%;
   height: 550px;
   gap:20px;

     
 }

  /*whatup ------*/
  .whatup{
     right:10px;
     bottom: 150px;
     height: 45px;
     width: 45px;
  }



}






@media (max-width:800px) {
    
   .top{
      gap:60px;
  }
  
    .pro-nav>ul{
      font-size: 22px;
      gap:5px;
      }
   
}

/* tablet ------------*/

@media (max-width:769px){

   .top > .right{
      font-size: 12px;
    }
    
    .top > .left{
    font-size: 12px;
    }
   
html,body{
   width: 100%;
   height: 100%;
   padding: 0;
   margin:0;
   overflow-x: hidden;
}


   .slider{
      height: 450px;
      width: 100%;
       }
  
 
  .head-text{
     position:absolute;
     top:20px;
     left:50px;
     
  }
  
  .head-text > h1{
     font-family:Exo-ExtraBold;
     font-size: 28px;
     font-weight:600;
  }

  .head-text > h2{
 
   font-size: 18px;
   font-weight:300;

}
  .head-text > p{
     width:350px;
     height: 200px;
     font-size: 14px;
     
  }
  
  .features{
     position:absolute;
     width: 400px;
     height: 200px;
     top:200px;
     left: 50px;
  }
  .features2{
      display: block;
      position:absolute;
      width: 400px;
      height: 200px;
      top:200px;
      left: 50px;
   }


   
  .explore{
     position: absolute;
     bottom: 70px;
     left: 50px;
     width: 150px;
     height:40px;
     
    }
  
  .explore >a{
     font-size: 16px;
  }
  .carousel-caption {
   display: none;
     }
  
   
  .d-block{
     width: 100%;
     height: 450px;
  }
  
  .bg1{
     position: absolute;
     width: 370px;
     height:250px;
     top:120px;
     right: 20px;
  }
  
  
 
  


  /*form -------------------*/
.contact{
   position: absolute;
   top:45%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 400px;
   height: 520px;
   background-color: aliceblue;
   border-radius: 10px;
   box-shadow: 0px 0px 5px white;
   padding: 20px;
   text-align: center;
}
.contact > P{
   font-size: 12px;
}

input[type=text],input[type=email],input[type=tel]
{
margin: 10px;
padding: 10px;
width: 340px;
height: 40px;

}
.select{
   margin: 10px;
   padding: 10px;
   width: 340px;
   height: 40px;
   font-size: 10px;
   line-height: 0.8;
  
}
 .select >.s1{
   color:#3c1290;
 }
.select > option{
   color:rgb(15, 14, 14);
   line-height: 0.9;
   height: 100px;
}

input[type=checkbox]{
   position: absolute;
   left: 30px;
   padding-top: 10px;
   }
form > p{
   margin-left: 30px;
   margin-top: -5px;
   width: 320px;
   font-size: 12px;
   text-align:left;
}
.sub{
   margin-top: 20px;
   width: 250px;
   height: 40px;
  }

}  
   
@media (max-width:740px){



   .bg1{
      position: absolute;
      width: 350px;
      height:250px;
      top:120px;
      right: 18px;
   }

   .pro-nav>ul>li{

      width:180px;
      height: 40px;
      padding: 5px 5px;
      text-align: left;
      
      }
   
      .pro-nav>ul>li>a{
         font-size: 18px;
      }
   
      .pro-nav>ul>.off{
         width: 180px;
      }
      .courses{
         height: 14600px;
              
     }
   
      .course_div{
         width: 90%;
         height: 14500px;
      }
     
      .cou{
         height: 1000px;
         width: 550px;
        }
   
        
        .st_view >a{
         font-size: 18px;
         width:40%;
         height: 30px;
         padding:7px 0;
      }
     
        .tools{
         width: 320px;
         height: 300px;
      }
    
      .skill{
       width: 320px;
       height: 300px;
       margin-right: 2px;
      } 
   
       .course_duration> .formopen{
      color:white;
      align-items: center;
      width:25%;
      height: 30px;
      margin-top: 5px;
      
   }
        
   
   .st_work{
     margin-left: 36%;
     margin-top: 5px;
      font-size: 14px;
      color:white;
      width:28%;
      height: 30px;
      
   }
  
    /*whatup ------*/
    .whatup{
       right:10px;
       bottom: 120px;
       height: 45px;
       width: 45px;
    }

}
   






@media (max-width:700px){

 
   
   .headcourse > h2{
      font-family: Exo-ExtraBold;
      color: darkblue;
      font-size: 25px;
   }
   
   .headcourse >p{
      color:black;
      font-size: 16px;
      font-family: jose1;
   }
   
   .pro-nav{
      height: 170px;
      width: 100%;
      padding: 20px;
    }
   
   .pro-nav>ul{
      font-size: 22px;
      gap:10px;
   }
   .pro-nav> ul > li{
      width:150px;
      font-size: 22px;
   }
   
   .pro-nav>ul>.off{
      width: 190px;
   }

   
   .pro-nav>ul>li>a{
      font-size: 20px;
   }

   .courses{
      height: 14600px;
           
  }

   .course_div{
      width: 90%;
      height: 14500px;
   }
  
   .cou{
      height: 1000px;
      width: 550px;
     }

     
     .st_view >a{
      font-size: 18px;
      width:40%;
      height: 30px;
      padding:7px 0;
   }
  
     .tools{
      width: 320px;
      height: 300px;
   }
 
   .skill{
    width: 320px;
    height: 300px;
    margin-right: 2px;
   } 

    .course_duration> .formopen{
   color:white;
   align-items: center;
   width:25%;
   height: 30px;
   margin-top: 5px;
   
}
     

.st_work{
  margin-left: 36%;
  margin-top: 5px;
   font-size: 14px;
   color:white;
   width:28%;
   height: 30px;
   
}
   
  
   .duration{
      width: 95%;
      height: 50px;
      font-size: 19px;
      padding-left: 5px;
      padding-right: 5px;
      background-color: rgb(15, 15, 87);
    
   }
 
      .whyhead > p{
         font-size: 13px;
      }
}

@media (max-width:674px){
  
   .top{
      gap:50px;
  }
  
  .top > p{
      margin-left: 25px;
      font-size: 8px;
      } 

.logo{
   height:100%;
   width:170px;
   margin-left: 30px;
  
  }

  .logo > .com{
   position: absolute;
   top: 3px;
   width:130px;
   height:40px;
}

.head-text > p{
   width:330px;
   height: 200px;
   font-size: 15px;
}

.bg1{
   position: absolute;
   width: 350px;
   height:250px;
   top:140px;
   right: 18px;
}

   footer{
 		height:720px;
	}



.details{ 
   height:700px;
	 gap:0px;
   
}

.logo1{
   height:90px;
   width:400px;
   margin-left: 30px;
   
  }

 .logo1 > img{
   width:120px;
   height:40px;
}


 .foot-links{
	width:50%;
	height:310px;
   margin-left: 5px;
  

}
.lines{
   margin-right: 0px;
   margin-left: 10px;
}
.lines > p {
     font-size: 15px;
   }

   .menu-links{
      width: 40%;
      margin-right: 10px;
      
   }
   .menu-links > h3{
      font-size:18px;
     }
  
  .menu-links > ul{
       font-size: 18px;
  }
  
  .menu-links > ul> li> a{
     font-size: 16px;
  }
  
  .address{
     width:100%;
     height:280px;
     margin-left: 25px ;
   
  }
   .address > h3{
      font-size:18px;
  }
  
  .address > a{
     font-size: 16px;

     
  }
  .address > a> p{
     font-size: 16px;
     width: 400px;
  }
  
  .address > p{
     font-size: 16px;
     width: 400px;
  }
  
  .add{
        display: inline-block;
        width:400px;
        height: 50px;
        margin-left: 15px;
        margin-top: 10px;
        color:white;
     }
  
  .fa-envelope{
     margin-left: 15px;
     margin-right: 15px;
     font-size: 18px;
    }
  
  .end > p{
     font-size: 12px;
     margin-top: 8px;
  }


}

@media (max-width:650px){

/* bg -----*/

.slider{
   height: 400px;
   width: 100%;
    }

.head-text{
  position:absolute;
  top:20px;
  left:30px;
  
}

.head-text > h1{
  font-family:Exo-ExtraBold;
  font-size: 27px;
  font-weight:600;
}
.head-text > h2{
 
   font-size: 18px;
   font-weight:300;

}
.head-text > p{
  width:320px;
  height: 200px;
  font-size: 14px;
}


.features{
  position:absolute;
  width: 400px;
  height: 200px;
  top:200px;
  left: 30px;
}
.features2{
   display: block;
   position:absolute;
   width: 400px;
   height: 200px;
   top:200px;
   left: 30px;
}

.explore{
  position: absolute;
  bottom: 50px;
  left: 30px;
  width: 150px;
  height:40px;
  
 }

.explore >a{
  font-size: 16px;
}
.carousel-caption {
display: none;
  }


.d-block{
  width: 100%;
  height: 400px;
}



.bg1{
   position: absolute;
   width: 310px;
   height:230px;
   top:120px;
   right: 20px;
}

   /*why ------*/

   .whyjoin{
      height: 950px;
      width: 100%;
   }
 
     .whyus{
      margin-top: 0px ;
     height: 900px;
    
       
     }
   
     
   .whytext{
     margin-top: -300px; 
     width: 70%;
     height: 550px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap:7px;
     flex-wrap: wrap;
       
   }
   
   
   .why1{
      width: 400px;
      height: 130px;
            
   }
 
    /*whatup ------*/
    .whatup{
       right:15px;
       bottom: 170px;
       height: 40px;
       width: 40px;
    }
  
}

@media (max-width:590px){
   #nav > ul > li > a{
      width: 100%;
      color:white;
      font-size: 16px;
   }

   .top{
      gap:30px
}

.top > .right{
  font-size: 11px;
}

.top > .left{
font-size: 11px;
}
.slider{
   height: 560px;
   }

.bg1{
   width: 370px;
   height:270px;
   top:5px;
   left:85px;
  }

.head-text{
   top:260px;
   left:30px;
   width: 400px;
   height: 180px;
}

.head-text > h1{
    font-size: 24px;

}

.head-text > p{
   width:500px;
 }

.features{
    top:400px;
   left: 30px;
 }

.features2{
   top:400px;
   left: 30px;
  
}


.explore{
   bottom:30px;
   left: 30px;
   width: 120px;
   height:35px;
   border-radius: 5px;
      
}
.d-block{
   width: 100%;
   height: 560px;
}
.carousel-control-prev,
.carousel-control-next{
   width: 20px;
   height: 20px;
   top:93%;
 }
.carousel-control-prev{
   left: 45%;
}
.carousel-control-next{
   right:45%;
}



.pro-nav{
   height: 170px;
   width: 100%;
   padding: 20px;
 }

.pro-nav>ul{
   font-size: 18px;
   gap:8px;
}
.pro-nav> ul > li{
   width:120px;
}

.pro-nav>ul>.off{
   width: 170px;
}


.pro-nav>ul>li>a{
   font-size: 16px;
}



   .duration{
      width: 92%;
      height: 70px;
      font-size: 19px;
      padding-left: 5px;
      padding-right: 5px;
   }

   .swiper {
      width: 90%;
      height: 460px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
    }
    
   footer{
      height:780px;
  }

.details{ 
  height:760px;
   gap:0px;
  
}
    .address{
      width:100%;
      height:320px;
      margin-left: 5px ;
      margin-top: 90px;
   }
   .whatup{
      right:15px;
      bottom: 80px;
      height: 35px;
      width: 35px;
   }
  
}


@media (max-width:550px){


  /* slider -----*/


  .head-text > p{
   width:450px;
 }

.features{
   top:415px;
   left: 30px;
 }

.features2{
   top:410px;
   left: 30px;
  
}
 




   /* arrow-----------*/


 

   .headcourse > h2{
      font-family: Exo-ExtraBold;
      color: darkblue;
      font-size: 20px;
   }
   
   .headcourse >p{
      color:black;
      font-size: 16px;
      font-family: jose1;
   }


.stud{
   position: relative;
   width: 100%;
   height: 600px;
}

.stu1{
   width: 100%;
   height: 350px;
  
}

.stu2{
   width:100%;
   height: 250px;
   }

.stu1 > .stu_work{
   width: 350px;
   top:70%;
   left:50%;
   transform: translate(-50%,-70%);
     
}

.stu1 > .stu_work >h3{
   width: 350px;
   font-size: 30px;
   }
   .stu1 > .stu_work >p{
      font-size: 14px;
   }


      }
   
   


@media (max-width:500px){

   .logo{
      height:100%;
      width:100px;
      margin-left: 15px;
     }
  
  #toggle{
   width: 28px;
   height: 30px;
   margin-right: 20px;
   }

.fa-bars{
    font-size: 16px;
 
}

.fa-xmark{
    font-size: 16px;
   
   }
  

.call{
   height: 100%;
   width:150px;
   margin-right: 5px;
  
}

.call>a{
    font-size: 17px;
  
}
#nav>ul>li>a{
   font-size: 18px;
   text-transform: uppercase;
}

.dropdown{
   width: 400px;
   height: 400px;
   background-color:rgb(32, 47, 50);
   position: absolute;
   left:-150px;
   top:30px;
   line-height: 1.5;
   transform: translatex(200px);
   transition: all 0.3s ease-in;
   flex-wrap: wrap;
   flex-direction: column;
   z-index: 999999999;

}
.head-text > p{
   width:420px;
 }

.features{
   top:415px;
   left: 30px;
 }

.features2{
   top:410px;
   left: 30px;
  
}
.carousel-control-prev,
.carousel-control-next{
   width: 20px;
   height: 20px;
   top:93%;
 }
.carousel-control-prev{
   left: 44%;
}
.carousel-control-next{
   right:44%;
}


   .pro-nav{
      height: 170px;
      width: 100%;
      padding: 20px;
    }
   
   .pro-nav>ul{
      font-size: 18px;
      gap:8px;
   }
   .pro-nav> ul > li{
      width:170px;   
   }
   
   .pro-nav>ul>.off{
      width: 170px;
   }
   
   .courses{
      height: 14100px;
           
  }

   .course_div{
      width: 90%;
      height: 14000px;
   }
 
  
   .cou{
      height: 950px;
      width: 380px;
     }
     .st_view >a{
      font-size: 18px;
      width:40%;
      height: 30px;
      padding:7px 0;
   }
  
     .tools{
      width: 300px;
      height: 300px;
   }
 
   .skill{
    width: 300px;
    height: 350px;
    margin-right: 2px;
   } 
 


   footer{
      height:920px;
  }

.details{ 
  height:900px;
   gap:0px;
  
}

.foot-links{
  width:100%;
  height:280px;
  margin-left: 5px;

}
.lines{
  margin-right: 20px;
  margin-left: 10px;
}
.lines > p {
    font-size: 16px;
  }

.menu-links{
  width:100%;
  height:260px;
  opacity:0.9;
}

.menu-links > h3{
   font-size:20px;
  }

.menu-links > ul{
    font-size: 16px;
}

.menu-links > ul> li> a{
  font-size: 16px;
}

.address{
  width:100%;
  height:280px;
  margin-left: 5px ;
  margin-top: 0;
}

.address > h3{
   font-size:18px;
}

.address > a{
  font-size: 16px;
  
}
.address > a> p{
  font-size: 16px;
  width: 300px;
}

.address > p{
  font-size: 16px;
  width: 300px;
}

.add{
     display: inline-block;
     width:300px;
     height: 50px;
     margin-left: 10px;
     margin-top: 10px;
     color:white;
  }

.fa-envelope{
  margin-left: 15px;
  margin-right:15px;
  font-size: 18px;
 }
 .fa-clock{
   margin-left: 14px;
   font-size: 16px;
  }

.end > p{
  font-size: 12px;
  margin-top: 8px;
}


   
}

/*mobile reposive ------------*/

@media (max-width:481px){


/*review ------------------*/

.slider{
   height: 560px;
   width: 100%;
}

.bg1{
   width: 330px;
   height:250px;
   }
   
   .head-text{
   top:250px;
   }

.head-text > h2{
   font-size: 18px;
   font-weight:200;
}
.head-text > p{
   width:400px;
 }

.features{
   top:400px;
}

.features2{
    top:400px;
  }


.explore{
   bottom:30px;
   left: 30px;
   border-radius: 5px;    
}

.d-block{
   width: 100%;
   height: 560px;
}

.carousel-control-prev,
.carousel-control-next{
   display: none;
 }



.review-slider{
   width: 100%;
   height: 500px;
   background-color:#e3eaf2;
   position: relative;
}

}

@media (max-width:450px){
   .top{
      height: 25px;
      width: 100%;}

 
     .top >.left{
      display: none;
   }
   
   .top >.right{
      color:rgb(236, 243, 112);
      margin-top: 12px;
      opacity: 0.8;
      font-size: 13px;
   }
  

   .pho{
      display: block;
      width: 100%;
      height:40px;
      position:sticky;
      top:20px;
      background-color: #b7bfc9;
      z-index: 99999999;
    }
    .pho > a{
      text-decoration: none;
      text-align: center;
      color:#1d1611;
      font-size: 18px;
      font-weight: 500;
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
   
.call{
   display: none;
}

header{
   position:sticky;
   top:60px;
   height: 50px;
   width: 100%;


}

.fa-bars{
   font-size: 20px;
   margin-right: 30px;
}

.logo{
   margin-left: 20px;
   }

.logo > .com{
  width:125px;
  height:37px;
}
   .fa-chevron-circle-up{
          font-size: 20px; 
 }
 .slider{
   height: 550px;
   width: 100%;
}
 .bg1{
   width: 360px;
   height:250px;
   top:5px;
   left:55px;
  }

 .head-text > p{
   width:380px;
 }
 .explore{
   bottom:17px;
   left: 30px;
   border-radius: 5px;    
}
 .d-block{
   width: 100%;
   height: 540px;
}
  
   .headcourse > h2{
      font-family: Exo-ExtraBold;
      color: darkblue;
      font-size: 18px;
   }
   
   .headcourse >p{
      color:black;
      font-size: 14px;
      font-family: jose1;
   }
 

}

   @media (max-width:431px){

      html,body{
         width: 100%;
         height: 100%;
         padding: 0;
         margin:0;
         overflow-x: hidden;
      }
   .top >.left{
      display: none;
   }
   
   .top >.right{
      color:rgb(236, 243, 112);
      margin-top: 12px;
      opacity: 0.7;
      font-size: 12px;
   }
  

.fa-bars{
   font-size: 25px;
   margin-right: 30px;
}

.logo{
   margin-left: 20px;
   }

.logo > .com{
  width:140px;
  height:42px;
}

.slider{
   height: 550px;
   width: 100%;
}
.bg1{
    left:50px;
  }
  .head-text > h2{
   font-size: 16px;
   font-weight:250;

}
.head-text > p{
   width:370px;
 }
 .explore{
   bottom:28px;
   left:30px;
    
}
 .d-block{
   width: 100%;
   height: 550px;
}
.headcourse > h2{
   font-family: Exo-ExtraBold;
   color: darkblue;
   font-size: 19px;
}



.headcourse >p{
   color:black;
   font-size: 14px;
   font-family: jose1;
}

.pro-nav{
   height: 170px;
   width: 100%;
   padding: 20px;
 }

.pro-nav>ul{
   font-size: 18px;
   gap:8px;
}
.pro-nav> ul > li{
   width:170px;   
}

.pro-nav>ul>.off{
   width: 170px;
}

.courses{
   height: 14100px;
        
}

.courses{
   height: 13700px;
        
}

.course_div{
   width: 90%;
   height: 13600px;
}

.duration{
   margin: 20px auto;
   width: 89%;
   height: 60px;
   background-color:rgb(23, 3, 81);
   border-radius: 20px;
   color:white;
   font-size: 14px;
   text-align: center;
   padding-top: 8px;
   padding-bottom: 3px;
}


 .course_duration> .formopen{
   font-size: 14px;
   width:25%;
   height: 28px;
   margin-top: 1px;
   
}
  .course_duration>a{
     font-size: 20px;
     width:30%;
     height: 28px;
     padding:7px 0;
   
  }

  
.st_work{
   margin-left:35%;
   margin-top: 3px;
    font-size: 12px;
    color:white;
    width:30%;
    height: 28px;
   
 }

/*form -------------------*/
.contact{
   position: absolute;
   top:45%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 300px;
   height: 520px;
   background-color: aliceblue;
   border-radius: 10px;
   box-shadow: 0px 0px 5px white;
   padding: 20px;
   text-align: center;
}
.contact > P{
   font-size: 12px;
}

input[type=text],input[type=email],input[type=tel]
{
margin: 10px;
padding: 10px;
width: 240px;
height: 40px;

}
.select{
   margin: 10px;
   padding: 10px;
   width: 240px;
   height: 40px;
   font-size: 10px;
   line-height: 0.8;
  
}
 .select >.s1{
   color:#3c1290;
 }
.select > option{
   color:rgb(15, 14, 14);
   line-height: 0.9;
   height: 100px;
}

input[type=checkbox]{
   position: absolute;
   left: 30px;
   padding-top: 10px;
   }
form > p{
   margin-left: 30px;
   margin-top: -5px;
   width: 220px;
   font-size: 12px;
   text-align:left;
}
.sub{
   margin-top: 20px;
   width: 150px;
   height: 40px;
  }




/* why --------------------*/
.whyjoin{
   height: 1100px;
   width: 100%;
  
}

.whyhead > h2{
   color:rgb(61, 13, 120);
   text-align: center;
   padding-bottom: 10px;
   font-family: Exo-ExtraBold;
   font-size: 20px;
 }

 .whyhead > p{
   color:rgb(9, 8, 10);
   text-align: center;
 }

  .whyus{
   margin-top: 15px ;
  height: 900px;
  }

  
.whytext{
  margin-top: -300px; 
  width: 70%;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:10px;
  flex-wrap: wrap;
   }

.why1{
   width: 300px;
   height: 150px;
         
}


/*swiper -----*/
.review-slider> h2{
   padding-top: 40px;
   margin-bottom: 10px;
   color:rgb(32, 47, 50);
   font-size: 20px;
   text-align: center;
   font-family:Exo-ExtraBold;
}

    .map{
         height: 400px;
                 
         }
         .maphead > h2{
            padding:5px 0;
            margin-bottom: 45px;
            font-size: 20px;
         }      
       .map>.add{
         width: 90%;
         height: 300px;
         position:relative;
         top:-60px;
         border-radius: 5px;
         margin-left: 5%;
       }



   
}

@media (max-width:421px){
   .slider{
      height: 550px;
      width: 100%;
   }

   .bg1{
      left:40px;
    }
   .explore{
      bottom:28px;
      left:30px;
      width: 110px;
      height:32px; 
   }
   
   .explore >a{
      font-size: 13px;
   }
   .d-block{
      width: 100%;
      height: 550px;
   }
   .headcourse > h2{
      font-family: Exo-ExtraBold;
      color: darkblue;
      font-size: 16px;
   }
   .pro-nav{
      height: 170px;
      width: 100%;
      padding: 20px;
    }
   
   .pro-nav>ul{
      font-size: 15px;
      gap:5px;
   }

   .pro-nav > ul > li > a{
      font-size: 15px;
   }
   .pro-nav> ul > li{
      width:155px;   
   }
   
   .pro-nav>ul>.off{
      width: 155px;
   }
   .re-text{
      width:280px;
      height:300px;
      position:absolute;
      top:20px;
      left: 15%;
   
   }


}

@media (max-width:415px){
   .slider{
      height: 550px;
      width: 100%;
   }

   .bg1{
      left:25px;
    }
    .headcourse > h2{
      font-size: 17px;
  }
  .head-text > h2{
     font-size: 15px;
     font-weight:200;
  }
   .head-text > p{
      width:350px;
    }
    .explore{
      position: absolute;
      bottom:30px;
      left:30px;
    }
    .d-block{
      width: 100%;
      height: 550px;
   }
   
}







@media (max-width:391px){
   .slider{
      height: 550px;
      width: 100%;
   }

   .bg1{
      left:20px;
    }
    .head-text{
      left:15px;
    }

   .head-text > p{
      left:20px;
      width:350px;
    }

    .features{
      top:400px;
      left: 20px;
   }
   .features2{
      top:390px;
      left: 20px;
    }
  
    .explore{
        left:20px;
    }
    .d-block{
      width: 100%;
      height: 550px;
   }
   
.headcourse > h2{
   font-family: Exo-ExtraBold;
   color: darkblue;
   font-size: 16px;
}



.pro-nav{
   height: 170px;
   width: 100%;
   padding: 5px;
 }

.pro-nav>ul{
   font-size: 16px;
   gap:0px;
}
.pro-nav> ul > li{
   width:140px; 
  
}

.pro-nav >ul> li> a{
   font-size: 15px;
  
}

.pro-nav>ul>.off{
   width: 150px;
}

.courses{
   height: 14100px;
        
}

.course_div{
   width: 85%;
   height: 14000px;
}


.cou{
   height: 950px;
   width: 300px;
  }

  .st_view >a{
   font-size: 18px;
   width:40%;
   height: 30px;
   padding:7px 0;
}

  .tools{
   width: 280px;
   height: 300px;
}

.skill{
 width: 280px;
 height: 350px;
 margin-right: 2px;
} 

.tool-head >h5{
   font-size: 16px;
}


.course_duration> .formopen{
   font-size: 14px;
   width:35%;
   height: 28px;
   margin-top: 1px;
   
}
     

.st_work{
  margin-left: 32%;
  margin-top: 5px;
   font-size: 13px;
   color:white;
   width:38%;
   height: 30px;
}

}


@media (max-width:385px){
   .slider{
      height: 550px;
      width: 100%;
   }
.bg1{
   width: 300px;
   height:220px;
   top:5px;
   left:40px;
  }

.head-text{
   top:220px;
   width: 380px;
  }

.head-text > p{
   width:340px;
}

.d-block{
   width: 100%;
   height: 550px;
}

}


@media (max-width:376px){

   #nav {
      left: -5px;
     height: 100vh;
     width: 75%;    
  }

 #nav>ul>li>a{
     font-size: 15px;
     text-transform: uppercase;
  }
  .slider{
   height: 550px;
   width: 100%;
}
  .head-text{
   top:220px;
   width: 320px;
  }
 
  .head-text > h1{
   font-size: 20px;
   font-weight:500;
 }
.head-text > h3{
  font-size: 15px;
  font-weight:150;
}
.head-text > p{
   width:330px;
 }

 .d-block{
   width: 100%;
   height: 550px;
}
 .headcourse > h2{
   font-size: 17px;
   
}
   .headcourse > h2{
      font-family: Exo-ExtraBold;
      color: darkblue;
      font-size: 16px;
   }
  
    .st_work{
      margin-left:32.5%;
      margin-top: 0px;
       font-size: 16px;
       color:white;
       width:35%;
       height: 30px;
    }
   
    .course_duration> .formopen{
      font-size: 14px;
      width:30%;
      height: 30px;
      
   }



     
footer{
   height:800px;
}

.details{ 
height:750px;
gap:0px;
padding-top: 10px;

}

.foot-links{
width:100%;
height:250px;
margin-left: 5px;

}
.logo1{
margin-bottom: 0;
height: 55px;
}
.lines{
margin-right: 20px;
margin-left: 10px;
line-height: 1.3;

}
.lines > p {
 font-size: 14px;
}

.address{
height: 240px;
line-height: 1.3;
}  

.address > h3{
 font-size:16px;
 height: 20px;
}

.address > a{
font-size: 14px;
margin-left: 5px;

}
.address > a> p{
font-size: 14px;
width: 250px;
}

.address > p{
font-size: 13px;
width: 250px;
}

.fa-location-dot{
top:-35px;
margin-left: 5px;
margin-right:5px;
height: 20px;
font-size: 14px;
}

.add{
   display: inline-block;
   width:250px;
   height: 50px;
   margin-left: 5px;
   margin-top: 10px;
   color:white;
}

.fa-envelope{
margin-left: 5px;
margin-right:5px;
font-size: 10px;
}

.fa-clock{
margin-left: 10px;
margin-right: 0px;
font-size: 12px;
}

.fa-phone{
margin-left: 5px;
margin-right: 5px;

}
.end > p{
font-size: 10px;
margin-top: 8px;
}
}


@media (max-width:360px){

   #toggle{
      position: relative;
      width: 25px;
      height:25px;
      border-radius:2px;
      border: 1px solid rgb(27, 21, 21);
      cursor: pointer;
      background: transparent;
   }

     .fa-bars{
      font-size: 16px;
      margin-right: 30px;
   }
   
   .logo{
      margin-left: 20px;
      }
   
   .logo > .com{
     width:100px;
     height:35px;
   }
 
   #nav {
       left: -5px;
      height: 100vh;
      width: 75%;    
   }

  #nav>ul>li>a{
      font-size: 15px;
      text-transform: uppercase;
   }

   .slider{
      height: 500px;
      width: 100%;
   }
.bg1{
      width: 290px;
      height:200px;
      top:5px;
      left:20px;
     }

.head-text{
      top:205px;
      left:15px;
      width: 320px;
      height: 200px;
   }

.head-text > h1{
      font-size: 20px;
   }
   
.head-text > p{
      width:300px;
      height: 180px;
      font-size: 14px;
   }
.features{
      top:370px;
      left: 20px;  
   }
   .features2{
      top:360px;
      left: 20px;
   }
   .explore{
      bottom:15px;
      left: 20px;
  }
.d-block{
   width: 100%;
   height: 500px;
}
.headcourse > h2{
   font-family: Exo-ExtraBold;
   color: darkblue;
   font-size: 14px;

}
.pro-nav{
   height: 300px;
   width: 100%;
   padding: 0px; 
 }

.pro-nav>ul{
   width:100%;
   height: 170px;
   font-size: 18px;
   gap:2px;   
}

.pro-nav> ul > li{
   width:150px;
   margin-left: -20px;
}

.pro-nav>ul>.off{
   width: 155px;
}

.pro-nav>ul>li>a{
   font-size: 15px;
}


.whyhead{
   width: 100%;
   height:80px;
   padding: 10px;
}
/*form -------------------*/
.contact{
   width: 280px;
   height: 520px;
   
}


input[type=text],input[type=email],input[type=tel]
{
width: 220px;
height: 40px;

}
.select{
   width: 220px;
   height: 40px; 
}

input[type=checkbox]{
   position: absolute;
   left: 30px;
   padding-top: 10px;
   }
form > p{
   margin-left: 30px;
   margin-top: -5px;
   width: 220px;
   font-size: 12px;
   text-align:left;
}
.whatup{
   right:15px;
   bottom: 80px;
   height: 30px;
   width: 30px;
}
}






@media (max-width:321px){

#nav>ul>li>a{
   font-size: 15px;
   text-transform: uppercase;
}

.dropdown{
   width: 300px;
   height: 350px;
   left:-70px;
   top:25px;
   line-height: 1.3;
   gap:0;
   }
   .slider{
      height: 450px;
   }

   .bg1{
      width: 250px;
      height:160px;
      top:5px;
      left:30px;
     }
   
   .head-text{
      top:150px;
      left:15px;
      width: 310px;
      height: 230px;
   }
   
   .head-text > p{
      width:310px;
      height: 210px;
   }

   .features{
      top:318px;
      left: 15px;
      font-size: 16px;

   }
   
   .features2{
      top:310px;
      left: 15px;
      font-size: 15px;
   }
   
   .explore{
      bottom:15px;
      left:15px;
      
   }
   
   .explore >a{
      font-size: 13px;
   }
 
   .d-block{
      width: 100%;
      height:450px;
   }

   .headcourse > h2{
      font-family: Exo-ExtraBold;
      color: darkblue;
      font-size: 14px;
   
   }
         /*whatup ------*/
         .whatup{
            right:20px;
            bottom: 50px;
            height: 45px;
            width: 45px;
         }
         
   .to-top{
      bottom: 10px;
      right: 5px;
      width: 30px;
      height: 30px;
   }

/****nav courese ---------------------*/
.pro-nav{
   height: 300px;
   width: 100%;
   padding: 0px;
  }

  .courses{
   height: 13800px;
}

.course_div{
   width: 100%;
   height: 13700px;
}

.cou{
   height: 950px;
   width: 280px;
  }

  .st_view >a{
   font-size: 18px;
   width:40%;
   height: 30px;
   padding:7px 0;
}

  .tools{
   width: 280px;
   height: 300px;
}

.skill{
 width: 280px;
 height: 350px;
 margin-right: 2px;
} 
.tool-head >h5{
   font-size: 16px;
}

.st_work{
   margin-left:32.5%;
   margin-top: 0px;
    font-size: 14px;
    color:white;
    width:35%;
    height: 30px;
   
 }



 .main_con {
       top:120px;
      width: 100%;
      height: 400px;
   }
  
  /*form -------------------*/
.contact{
   position: absolute;
   top:50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 300px;
   height: 520px;
   background-color: aliceblue;
   border-radius: 10px;
   box-shadow: 0px 0px 5px white;
   padding: 20px;
   text-align: center;
}
.contact > P{
   font-size: 12px;
}

input[type=text],input[type=email],input[type=tel]
{
margin: 10px;
padding: 10px;
width: 240px;
height: 40px;

}
.select{
   margin: 10px;
   padding: 10px;
   width: 240px;
   height: 40px;
   font-size: 10px;
   line-height: 0.8;
  
}
 .select >.s1{
   color:#3c1290;
 }
.select > option{
   color:rgb(15, 14, 14);
   line-height: 0.9;
   height: 100px;
}

input[type=checkbox]{
   position: absolute;
   left: 30px;
   padding-top: 10px;
   }
form > p{
   margin-left: 30px;
   margin-top: -5px;
   width: 220px;
   font-size: 12px;
   text-align:left;
}
.sub{
   margin-top: 20px;
   width: 150px;
   height: 40px;
  }
  .whatup{
   right:15px;
   bottom: 100px;
   height: 30px;
   width: 30px;
}
}