body{
	margin: 0;
	padding: 0;
}

.s-ba{
   width: 98%;
   margin: auto;
   display: none;
}

header{
	width: 100%;
	background: repeating-linear-gradient(240deg, green 0px, orangered 450px, hsl(170, 83%, 18%) 150px, hsl(170, 83%, 18%));
    position: fixed;
    box-shadow: 0 10px 10px #034;
}

/*.header{
   width: 100%;
   background: repeating-linear-gradient(120deg, white 0px, whitesmoke 450px, hsl(170, 83%, 18%) 150px, hsl(170, 83%, 18%));
    box-shadow: 0 10px 10px #034;
}*/

.jam-bar-01{
   width: 90%;
   margin: auto;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
  /* border: #999 solid 1px;*/
}

.jam-nxt-icon{
   width: 4%;
   box-sizing: border-box;
   margin: 6px;
/*   border: #999 solid 1px;*/
}

.jam-nxt-icon{
   display: none;
}


.jam-nxt-lef{
   width: 18%;
   box-sizing: border-box;
/*   border: #999 solid 1px;*/
}

.jam-nxt-lef a{
  text-decoration: none;
  font-size: 30px;
  color: #F00; /*#F0FFF0*/
}

.jam-nxt-lef span{
   text-align: center;
   color: cyan;
   font-size: 25px;
}

.jam-nxt-mid{
  width: 2%;
  box-sizing: border-box;
/*  border: #999 solid 1px;*/
}

.jam-nxt-mid span{
   color: #F0FFF0;
   font-weight: bold;
   font-size: 19px;
   color: cyan;
}

.jam-nxt-rit{
   width: 75%;
   box-sizing: border-box;
  /* border: #000 solid 1px;*/
}

/*create centralize horizontal list and stop ul from padding*/

.jam-nxt-rit ul{
   display: flex;
   justify-content: center;
   max-width: 1600px;
   margin: 0 auto;
   padding: 0;
}

/*stop ul from styling and add box sizing and border right*/

.jam-nxt-rit ul li{
   list-style-type: none;
   position: relative;
   padding: 10px 0px;
   transition: 0.5s;
   box-sizing: border-box;
}

/*hover top level*/

.jam-nxt-rit ul li:hover{
   background-color: #34E089;
   border-radius: 29px;
}


/*stop top link decoration and space btw links*/

.jam-nxt-rit ul li a{
   text-decoration: none;
   padding: 0 20px;
   font-size: 19px;
   color: #FFF;  /*#104421*/
}

/*now add and style the dropdown link*/

.jam-nxt-rit ul li ul{
   margin-top: 12px;
   left: 0;
   background-color: #999999;
   position: absolute;
   display: block;
   width: 300px;
   font-size: 25px;
   transition: 0.5s;
   opacity: 0;
   visibility: hidden;
}

/*display the dropdown*/

.jam-nxt-rit ul li:hover ul{
   opacity: 1;
   visibility: visible;
   border-radius: 15px 15px 15px 15px;
   transition: 1s all;
   animation: drop 1s ease;
}

@keyframes drop{
   0%{
      transform: scale(2,2) rotate(90deg);
   }

   100%{
      transform: scale(1,1) rotate(0deg);
   }
}

.jam-nxt-rit ul li ul a{
   text-align: justify;
}

.jam-nxt-rit ul li ul a:hover{
  letter-spacing: 1px;
   transition: 1s;
}

.jam-nxt-rit ul .home{
   background: linear-gradient(45deg, red, orange);
   border-radius: 25px;
}

.jam-nxt-rit ul .home:hover{
   background-color: #34E089;
   border-radius: 25px;
}

.log:hover{
   color: #FFFFFF;
}

/* style side bar navigation  */

.side-nav{
  height: 100%;
  width: 0px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0px;
  background-color: #173F5F; /* #ADFF2F Green Yellow*/
  opacity: 0.9;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s; 
}

.side-nav a{
  padding: 10px 10px 10px 30px;
  text-decoration: none;
  font-size: 22px;
  color: #ccc;
  display: block;
  transition: 0.3s;
}

.side-nav a:hover{
  color: #f90;
}

.side-nav span{
   margin-left: 10px;
   color: whitesmoke;
}


 /* style the x- button */

 .side-nav .btn-close{
  position: absolute;
  top: 0;
  right: 22px;
  font-size: 36px;
  margin-left: 50px;
 }

 .kca-top{
    width: 100%;
    background-image: url("en_images/programmer.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-color: rgb(221, 221, 255);
 }

 .kca-top .kc-info{
    padding: 10% 20% 10% 30%;
    border: #F00 dotted 2px;
    border: none;
 }

 .kca-top .kc-info h2{
    color: #FFFFFF;
    font-size: 38px;
    text-align: center;
    animation: kca 1s 2;
 }

 @keyframes kca{
   0%{
      transform: scale(0);
   }
   100%{
      transform: scale(1);
   }
 }

 #info-mq{
  font-weight: bold;
  margin: auto;
  text-transform: capitalize;
  color: #FFF;
  border: #fff solid 1px;
  width: 20%;
  border-radius: 20px;
  padding: 10px;
  text-align: center;
  background-color: darkblue;
}

#info-mq a{
  color: #FFF;
  text-decoration: none;
}


.containers{
   width: 90%;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-wrap: wrap;
}

.containers .btn{
   position: relative;
   width: 200px;
   height: 50px;
   background: #350048;
   margin: 5px;
   margin-top: -15px;
   border-radius: 30px;
}

.containers .btn a{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 30px;
   font-style: italic;
   color: #FFF;
   z-index: 1;
   font-weight: 400;
   letter-spacing: 1px;
   text-decoration: none;
   overflow: hidden;
   transition: 0.5s;
   backdrop-filter: blur(15px);
}

.containers .btn:hover a{
   letter-spacing: 3px;
}

.containers .btn a::before{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 50%;
   height: 100%;
   background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
   transform: skewX(45deg) translateX(0);
   transition: 0.5s;
}

.containers .btn:hover a::before{
   transform: skewX(45deg) translateX(200%);
}

.containers .btn::before{
   content: '';
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: -5px;
   width: 30px;
   height: 10px;
   background-color: #F00;
   border-radius: 10px;
   transition-delay: 0s;
}

.containers .btn:hover::before{
   bottom: 0;
   height: 50%;
   width: 80%;
   border-radius: 30px;
   transition-delay: 0.5s;
}

.containers .btn::after{
   content: '';
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: -5px;
   width: 30px;
   height: 10px;
   background-color: #F00;
   border-radius: 10px;
   transition-delay: 0s;
}

.containers .btn:hover::after{
   top: 0;
   height: 50%;
   width: 80%;
   border-radius: 30px;
   transition-delay: 0.5s;
}


/**/

.containers .btnn{
   position: relative;
   width: 600px;
   height: 50px;
   background: #350048;
   margin: 5px;
   margin-top: -15px;
   border-radius: 30px;
}

.containers .btnn a{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 30px;
   font-style: italic;
   color: #FFF;
   z-index: 1;
   font-weight: 400;
   letter-spacing: 1px;
   text-decoration: none;
   overflow: hidden;
   transition: 0.5s;
   backdrop-filter: blur(15px);
}

.containers .btnn:hover a{
   letter-spacing: 3px;
}

.containers .btnn a::before{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 50%;
   height: 100%;
   background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
   transform: skewX(45deg) translateX(0);
   transition: 0.5s;
}

.containers .btnn:hover a::before{
   transform: skewX(45deg) translateX(200%);
}

.containers .btnn::before{
   content: '';
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: -5px;
   width: 30px;
   height: 10px;
   background-color: #F00;
   border-radius: 10px;
   transition-delay: 0s;
}

.containers .btnn:hover::before{
   bottom: 0;
   height: 50%;
   width: 80%;
   border-radius: 30px;
   transition-delay: 0.5s;
}

.containers .btnn::after{
   content: '';
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: -5px;
   width: 30px;
   height: 10px;
   background-color: #F00;
   border-radius: 10px;
   transition-delay: 0s;
}

.containers .btnn:hover::after{
   top: 0;
   height: 50%;
   width: 80%;
   border-radius: 30px;
   transition-delay: 0.5s;
}
/**/

.containers .btn:nth-child(1)::before,
.containers .btn:nth-child(1)::after{
   background: #ff1f71;
   box-shadow: 0 0 5px #ff1f71,
               0 0 15x #ff1f71,
               0 0 30px #ff1f71,
               0 0 60px #ff1f71;
}

.containers .btn:nth-child(2)::before,
.containers .btn:nth-child(2)::after{
   background: #2bd2ff;
   box-shadow: 0 0 5px #2bd2ff,
               0 0 15x #2bd2ff,
               0 0 30px #2bd2ff,
               0 0 60px #2bd2ff;
}

.containers .btn:nth-child(3)::before,
.containers .btn:nth-child(3)::after{
   background: #1eff45;
   box-shadow: 0 0 5px #1eff45,
               0 0 15x #1eff45,
               0 0 30px #1eff45,
               0 0 60px #1eff45;
}

.jo-b-dis{
   width: 90%;
   margin: 20px auto;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
/*   border: #456 solid 1px;*/
}

.p-o-c{
   width: 70%;
   margin: 20px auto;
   margin-bottom: 2%;
}

.p-o-c h2{
    font-size: 40px;
    background: linear-gradient(43deg, violet, blueviolet, peru);
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
}

.p-o-c p{
   text-align: center;
}

.tr-as{
   width: 90%;
   margin: auto;
   border: #234 solid 1px;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
   margin-bottom: 2%;
   border: none;
}

.tr1{
   width: 60%;
   box-sizing: border-box;
   border: dashed 2px;
   border: none;
}

.tr1 h2{
   font-size: 40px;
}

.tr2{
   width: 30%;
   box-sizing: border-box;
   border: #456 dashed 2px;
   background-image: url("en_images/enht01.jpg");
   background-size: cover;
   background-position: center;
   background-color: rgba(255, 255, 255, .6);
   border: none;
}

.tr2-txt{
   width: 100%;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
   margin: 10px auto;
   border: #123 solid 1px;
   border: 0;
}

.tr2-tt{
   width: 14%;
   box-sizing: border-box;
   border: #123 solid 1px;
   margin-bottom: 4%;
   border: 0;
}

.tr2-tt-r{
   width: 80%;
   box-sizing: border-box;
   border: #123 solid 1px;
   margin-bottom: 4%;
   border: 0;
}


.align-4-cnt{
   width: 100%;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
}

.align-4-1{
   width: 45%;
   box-sizing: border-box;
   border: #12d solid 1px;
   margin-bottom: 2%;
   border: none;
   box-shadow: 0px 10px 10px 5px #234;
}


.sp-txt p{
   margin-left: 30px;
}





.bl-con-1{
   width: 32%;
   box-sizing: border-box;
   border: #456 dotted 1px;
   transition: 1s;
   margin-bottom: 2%;
   border: none;
}

.bl-con-1:hover{
   transform: scale(0.9);
   box-shadow: 0px 10px 10px 5px #234;
}

.bl-con-1 h4{
   color: goldenrod;
   text-decoration: none;
}

.bl-con-1 a{
   text-decoration: none;
}

.dis-row{
   width: 100%;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
   border: #f00 solid 1px;
   border: none;
}

.txt-col{
   width: 100%;
   border: #f00 solid 1px;
   border: none;
}

.txt-col h2{
   text-align: center;
   background: linear-gradient(45deg, red, indigo, violet, blue);
   -webkit-background-clip: text;
   color: transparent;
}

.txt-col p{
   margin: 10px;
   color: #000000;
   font-size: 18px;
}

.info-txt{
   width: 50%;
   box-sizing: border-box;
   border: #999 dotted 1px;
   border: none;
}

.info-txt h3 span{
   color: orangered;
}

.info-txt h3{
   font-size: 15px;
   line-height: 10px;
}

.img-info{
   width: 46%;
   box-sizing: border-box;
   border: #999 dotted 1px;
   border: none;
}

.img-info img{
   width: 100%;
   border-radius: 20px;
}

.me-d-i-a{
   background-color: goldenrod;
}

.me-d-i-a h2{
   padding: 0 10% 10% 0;
   margin: 10px;
   color: #FFF;
   text-align: center;
   font-size: 28px;
}


       /*styling verification page */


.i-vfom-log{
   width: 80%;
   margin: auto;
}


.ad-vfom{
   width: 60%;
   margin: auto;
   padding-top: 60px;
}

.ad-vfom input{
   padding: 10px;
   box-shadow: 0 10px 10px 0px rgba(0, 2, 0, .1);
   margin: 8px;
   border-radius: 15px;
   width: 90%;
   background-color: #f4f4f4;
   border: none;
}

.ad-vfom .search-btn{
   font-size: 23px;
   padding: 10px;
   margin: 6px;
   border-radius: 20px;
   background: linear-gradient(43deg, red, orange, yellow);
   border: none;
   transition: 1s;
}

.ad-vfom .search-btn:hover{
   transform: scale(1.2);
}

.i-vfom-log fieldset{
   width: 90%;
   margin: auto;
}

.i-vfom-log fieldset legend{
   color: orangered;
}


 .sty-link{
   border: #fff solid 1px; 
   width: 150px; 
   margin: auto; 
   background-color: #014421;
   padding: 10px;
   border-radius: 15px;
   transition: 1s;
 }

 .sty-link:hover{
    transform: scale(1.3);
 }


/* about page styling */


.hom-bar-spac{
   width: 100%;
   margin-bottom: 4.1%;
   border: #E67 solid 1px;
}

  .container{
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 68vh;
   /* border: #F00 solid 1px;*/
 }

 .container .slider{
   position: absolute;
   top: 0;
   left: 0;
   width: 500%;
   height: 100%;
   float: left;
   animation: animate 17s linear infinite;
 }

 .container .slider .slide{
   width: 20%;
   height: 100%;
   float: left;
   position: relative;
 }

 .container .slider .slide .caption{
   position: absolute;
   bottom: 80px;
   left: 300px;
   right: 300px;
   padding: 30px;
   background-color: rgba(5, 5, 5, .2);
   box-sizing: border-box;
 }

 .container .slider .slide .caption h2{
   margin: 0 0 20px;
   padding: 0;
   color: #fff;
   font-size: 48px;
   text-align: center;
 }

 .container .slider .slide .caption h3{
  text-align: center;
  color: #fff;
 }


 .container .slider .slide .caption a{
   text-decoration: none;
 }


  .container .slider .slide .caption p{
   margin: 0;
   padding: 0;
   color: #f90;
   font-size: 20px;
   text-align: center;
   margin-bottom: 2%;
   font-style: italic;
 }

 .container .slider .slide.slide1{
   background-image: url("en_images/front-end.png");
   background-size: cover;
   background-position: center;
 }

 .container .slider .slide.slide2{
   background-image: url("en_images/data-analysis-python.jpg");
   background-size: cover;
   background-position: center;
 }

 .container .slider .slide.slide3{
   background-image: url("en_images/cyber-hack.jpg");
   background-size: cover;
   background-position: center;
 }


 @keyframes animate{
   0%{
     left: 0;
   }
   28%{
     left: 0;
   }
   33%{
     left: -100%;
   }
   61%{
     left: -100%;
   }
   66%{
    left: -200%;
   }
   94%{
     left: -200%;
   }
   100%{
     left: -300%;
   }
 }


 .en-ab{
   width: 99%;
   margin: 80px auto;
   background: linear-gradient(120deg, violet, indigo, peru);
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
 }

 .en-ab-txt{
    width: 40%;
    box-sizing: border-box;
    border: #fff solid 1px;
    border: none;
 }

 .en-ab-txt h2{
    font-size: 32px;
    color: #FFFFFF;
 }

 .en-ab-txt p{
    font-size: 19px;
    color: #FFFFFF;
 }

 .miss-acm{
   margin-top: 40px;
 }

 .en-ab-txt2{
    width: 40%;
    box-sizing: border-box;
    border: #fff solid 1px;
    padding: 3% 3% 3% 13%;
    border: none;
    background-image: url("en_images/trainees.jpg");
    background-size: cover;
    background-position: center;
 }

 .en-ab-txt2 h2{
    background: linear-gradient(45deg, indigo, whitesmoke);
    -webkit-background-clip: text;
    color: transparent;
 }

 .m-v-s{
   width: 100%;
   margin: 20px auto;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
   background: linear-gradient(45deg, lightgreen, peru, palegreen);
 }

 .m-v-1{
   width: 45%;
   box-sizing: border-box;
   border: #123 dotted 1px;
   border: 0;
 }

 .m-v-1 h1{
   font-size: 50px;
 }

 .m-v-1 p{
   font-size: 20px;
   font-weight: bold;
   color: #234;
 }

  .m-v-1 h2{
   font-size: 35px;
 }

 .sp-flex{
   width: 100%;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
   margin-bottom: 2%;
 }

 .sp-flex span{
   width: 30%;
   box-sizing: border-box;
   border: #123 solid 1px;
   box-shadow: 0px 10px 10px 5px #234;
   border: 0;
   margin-bottom: 2%;
 }

 .sp-flex span:hover{
    background: linear-gradient(45deg, orangered, greenyellow);
 }

 .sp-flex .sp-m{
    background: linear-gradient(45deg, orangered, greenyellow);
 }

 .sp-flex span h4{
   text-align: center;
   color: whitesmoke;
 }

 .sp-flex span p{
   text-align: center;
   color: floralwhite;
   font-size: 17px;
 }

 hr{
   width: 60%;
   background-color: red;
   height: 5px;
   border: 0;
 }

 hr:after{
   content: '';
   display: block;
   border-bottom: 5px solid green;
   max-width: 50%;
 }

  .m-v-2{
   width: 45%;
   box-sizing: border-box;
   border: #123 dotted 1px;
   text-align: center;
   border: 0;
 }

 .m-v-2 p{
   text-align: left;
   font-size: 18px;
   color: floralwhite;
 }


  .sp-flex2{
   width: 100%;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
   margin-bottom: 2%;
 }

 .sp-flex2 span{
   width: 30%;
   box-sizing: border-box;
   border: #123 solid 1px;
   box-shadow: 0px 10px 10px 5px #234;
   border: 0;
   margin-bottom: 2%;
   border-radius: 10px;
 }

 .sp-flex2 span p{
   margin: 10px;
 }


 .va-u-bar{
    width: 95%;
    margin: 30px auto;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-flow: wrap;
 }

 .va-va h2{
    font-size: 40px;
    background: linear-gradient(25deg, orangered, green);
    -webkit-background-clip: text;
    color: transparent;
 }

 .va-u-1{
   width: 30%;
   box-sizing: border-box;
   margin-bottom: 3%;
   text-align: center;
   transition: 0.5s;
 }

 .va-u-1:hover{
    box-shadow: 0px 10px 10px 5px #234;
    border-radius: 10px;
 }

 .va-u-1 h3{
   font-size: 20px;
   background: linear-gradient(25deg, blue, purple);
   -webkit-background-clip: text;
   color: transparent;
 }

 .va-u-1 p{
   text-align: left;
   font-size: 19px;
   color: #888;
   font-family: sans-serif;
   margin: 10px;
 }

 .va-va{
    width: 25%;
    margin: 60px auto;
    text-align: center;
 }



/* FAQs page */

.faq-pds{
   width: 100%;
   margin: auto;
   height: 500px;
   background: #008000;
   display: flex;
}

.faq-pds-r{
   width: calc( 50% - 40px);
   height: 100%;
   background: #008000;
}

.faq-pds-rr{
   width: calc( 50% + 40px);
   height: 100%;
   background: #F3F3F3;
   border-left: 50px solid #008000;
   border-bottom: 400px solid transparent;
   box-sizing: border-box;
}

.faq-pds-rr h1{
   text-align: center;
}

.ent{
   background: linear-gradient(25deg, green, orangered);
   -webkit-background-clip: text;
   color: transparent;
   font-weight: bold;
}


.da-cyb{
   background: linear-gradient(25deg, orangered, yellow);
   width: 40%;
   padding: 5px;
   border-radius: 0px 18px 18px 0px;
}


.faq-pds-rr p{
   margin: 20px;
   font-size: 20px;
}

.pull-faq{
   padding: 5%;
   width: 99%;
}

.pull-faq h1{
   text-align: center;
   font-size: 45px;
   background: linear-gradient(25deg, yellow, violet, yellow);
   -webkit-background-clip: text;
   color: transparent;
}

.pull-faq p{
   text-align: center;
   color: #FFFFFF;
   font-size: 22px;
}

.pull-faq h2{
   background: linear-gradient(25deg, orangered, yellow);
   width: 40%;
   padding: 5px;
   border-radius: 0px 18px 18px 0px;
}

.dd-faq{
   width: 100%;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
}

.dd-faq span{
   width: 42%;
   box-sizing: border-box;
}

.dd-faq span ul li{
   color: #FFFFFF;
   font-size: 20px;
   line-height: 26px;
   list-style-type: square;
}

.dd-faq span ul li::marker{
   color: goldenrod;
   font-size: 28px;
}


.faq-b{
   width: 86%;
   margin: 60px auto;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
}

.faq-b-1{
   width: 47%;
   box-sizing: border-box;
   border: #f00 solid 1px;
   margin-bottom: 2%;
   border: none;
}

.accordion{
   width: 95%;
   box-sizing: border-box;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   overflow: hidden;
   font-family: 'Quicksand', sans-serif;
/*   background-color: #888888;*/

}

.accordion__label,
.accordion__content{
   padding: 14px 20px;
}

.accordion__label{
   display: block;
   font-weight: 500;
   cursor: pointer;
   position: relative;
   transition: background 0.1s;
   background-color: rgba(0, 0, 0, 0.1);
   margin-bottom: 2%;
}

.accordion__label:hover{
   background-color: rgba(2, 2, 2, 0.2);
   color: orangered;
   text-decoration: underline;
}

.accordion__label::after{
   content: "+";
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 20px;
   width: 12px;
   height: 6px;
   background-size: contain;
   transition: transform 0.4s;
}

.accordion__content{
   background-color: #ffffff;
   line-height: 1.6;
   font-size: 0.95em;
   display: none;
}

.accordion__input{
   display: none;
}

.accordion__input:checked ~ .accordion__content{
   display: block;
}

.accordion__input:checked ~ .accordion__label::after{
   transform: translateY(-50%) rotate(0.5turn);
}

.onlin{
   width: 80%;
   margin: auto;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
}

.onlin span{
   width: 30%;
   box-sizing: border-box;
   text-align: center;
   box-shadow: 0px 10px 10px 5px #234;
}

.onlin span img{
   width: 100%;
}

.onlin span a{
   text-decoration: none;
}





/* upload_subjects page */

.ent-bl-g{
   width: 90%;
   margin: 20px auto;
   border: #456 dotted 1px;
}

.subject-fom{
   width: 100%;
}

.subject-fom label{
   margin: 10px;
}

.subject-fom input{
   display: block;
   padding: 10px;
   border-radius: 20px;
   margin: 10px;
   width: 90%;
}


.subject-fom button{
   margin: 10px;
   font-size: 23px;
   padding: 10px;
   border-radius: 25px;
   background: linear-gradient(74deg, violet, darkgoldenrod, green, greenyellow, peru);
   border: none;
   color: #FFFFFF;
   transition: 1s;
}

.subject-fom button:hover{
   transform: scale(1.2);
}


/* Cyberhack page */

.cyber-web{
   width: 99%;
   margin: auto;
   border: #f00 solid 2px;
}


/* details_job page */

.kca-display-detail{
   width: 85%;
   margin: 20px auto;
   display: flex;
   flex-direction: row;
   flex-flow: wrap;
   justify-content: space-around;
   border: #890 solid 1px;
   border: none;
}


.disp-detail{
   width: 38%;
   box-sizing: border-box;
   margin-bottom: 2%;
   border: #890 solid 1px;
   border: none;
}


.disp-detail-2{
   width: 60%;
   box-sizing: border-box;
   margin-bottom: 2%;
   border: #890 solid 1px;
   border: none;
}

.detail-2{
   width: 100%;
   /*border: #cd4 solid 1px;*/
}

.detail-2 h1{
   background: linear-gradient(45deg, greenyellow, red, blue);
   -webkit-background-clip: text;
   color: transparent;
   text-transform: uppercase;
}


.single_product-04{
   width: 95%;
   margin: auto;
   /*border: #098 solid 1px;*/
}

.single_product-04 p{
   font-size: 20px;
   line-height: 25px;
}

.single_product-04 h2{
   background: linear-gradient(45deg, red, indigo, blue, purple);
   -webkit-background-clip: text;
   color: transparent;
}

.single_product-04 h3{
   color: #800080;
}


/* jam_job page */

.jam-bl-g{
   width: 90%;
   margin: 20px auto;
   border: #456 dotted 1px;
}

.jam-fom{
   width: 100%;
}

.jam-fom label{
   margin: 10px;
}

.jam-fom input{
   display: block;
   padding: 10px;
   border-radius: 20px;
   margin: 10px;
   width: 90%;
}

.jam-fom textarea{
   display: block;
   border-radius: 25px;
   margin: 10px;
   resize: none;
   width: 92%;
}

.info1, .info2{
    margin-left: 10px;
}

.jam-fom button{
   margin: 10px;
   font-size: 23px;
   padding: 10px;
   border-radius: 25px;
   background: linear-gradient(74deg, violet, darkgoldenrod, green, greenyellow, peru);
   border: none;
   color: #FFFFFF;
   transition: 1s;
}

.jam-fom button:hover{
   transform: scale(1.2);
}

/* enht_iback_office.php page */

.i-bak-t{
   width: 100%;
   margin: 20px auto;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
   border: #f00 solid 1px;
   border: none;
}

.i-bak-l{
   width: 20%;
   box-sizing: border-box;
   background: repeating-linear-gradient(120deg, indigo 0px, greenyellow 450px, hsl(0, 100%, 50%) 250px, hsl(283, 46%, 42%));
   border: #a12 solid 1px;
   border: none;
   height: 100vh;
}

.i-bak-r{
   width: 70%;
   box-sizing: border-box;
   border: #a12 solid 1px;
   border: none;
}

.i-bak-l h2{
   color: #FF0FF0;
   margin: 6px;
}

.i-bak-l a{
   display: block;
   color: #FFF;
   margin: 10px;
   text-decoration: none;
}


/* create_admin and i_back_login page  */

.ad-fom{
   width: 60%;
   margin: auto;
   padding-top: 60px;
}

.ad-fom input{
   padding: 10px;
   box-shadow: 0 10px 10px 0px rgba(0, 2, 0, .1);
   margin: 8px;
   border-radius: 15px;
   width: 90%;
   background-color: #f4f4f4;
   border: none;
}

.ad-fom button{
   font-size: 23px;
   padding: 10px;
   margin: 6px;
   border-radius: 20px;
   background: linear-gradient(43deg, red, orange, yellow);
   border: none;
   transition: 1s;
}

.ad-fom button:hover{
   transform: scale(1.2);
}

fieldset{
   width: 90%;
   margin: auto;
}

fieldset legend{
   color: orangered;
}

.ad-fom a{
   display: block;
   margin: 10px;
}

.i-bak-log{
   width: 80%;
   margin: 60px auto;
}


 /* details page */


.ent-display-detail{
   width: 85%;
   margin: 20px auto;
   display: flex;
   flex-direction: row;
   flex-flow: wrap;
   justify-content: space-around;
   border: #890 solid 1px;
   border: none;
}


.disp-detail{
   width: 38%;
   box-sizing: border-box;
   margin-bottom: 2%;
   border: #890 solid 1px;
   border: none;
}


.disp-detail-2{
   width: 60%;
   box-sizing: border-box;
   margin-bottom: 2%;
   border: #890 solid 1px;
   border: none;
}

.detail-2{
   width: 100%;
   /*border: #cd4 solid 1px;*/
}

.detail-2 h1{
   background: linear-gradient(45deg, greenyellow, red, blue);
   -webkit-background-clip: text;
   color: transparent;
}


.single_product-04{
   width: 95%;
   margin: auto;
}

.single_product-04 p{
   font-size: 20px;
   line-height: 25px;
}

.single_product-04 a{
   background-color: orangered;
   padding: 15px;
   color: #FFF;
   text-decoration: none;
   font-size: 23px;
   animation: reg 1s infinite;
}

@keyframes reg{
   20%{color: #FFF;}
   50%{color: #014421;}
}

.single_product-05{
   text-align: right;
}

.single_product-05 img{
   border-radius: 50%;
}


/* softech page */

.cod-img-1{
   width: 100%;
   background-image: url("en_images/home.webp");
   background-size: cover;
   background-attachment: fixed;
   /*border: #F00 solid 1px;*/
}

.cod-img-pad{
   padding: 21% 21% 21% 21%;
}

.digit{
   width: 43%;
   margin: 15px auto;
   position: relative;
   height: 40px;
   text-align: center;
  -webkit-box-reflect: below -12px linear gradient(transparent, rgba(255,255,255,0.2));
  border-radius: 15px;
}

.digit span{
  position: relative;
  display: inline-block;
  font-size: 20px;
  text-transform: uppercase;
  animation: animat 1s ease-in-out infinite;
  animation-delay: calc(0.1s * var(--i));

}

@keyframes animat{
  0%{
    transform: translateY(0px);
  }

  20%{
    transform: translateY(-20px);
  }

  40%,100%{
    transform: translateY(0px);
  }
}

.train-back-hub{
   width: 100%;
   background-color: rgba(2,2,2,.7);
}

.train-hub{
   width: 90%;
   margin: 20px auto;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
   
   /*border: #ffffff dotted 1px;*/
}

.hub-01{
   width: 30%;
    box-sizing: border-box;
    text-align: center;
    border-radius: 15px;
    /*border: #c67 solid 1px;*/
}


.hub-02{
   width: 67%;
    box-sizing: border-box;
    /*border: #c67 solid 1px;*/
}



 .top-left-title span{
        text-transform: uppercase;
        display: block;
     }

     .text1{
      color: #fff;
      font-size: 30px;
      font-weight: 400;
      letter-spacing: 8px;
      margin-bottom: 20px;
      background-color: black;
      border-radius: 15px;
      position: relative;
      animation: text 3s 1;
     }

     .text2{
       font-size: 25px;
       color: #F80;
     }

     @keyframes text{
      0%{
         color: black;
         margin-bottom: -40px;
      }

         30%{
         letter-spacing: 25px;
         margin-bottom: -40px;
      }

         85%{
         letter-spacing: 8px;
         margin-bottom: -40px;
      }
     }


.t-display-hub{
   width: 100%;
}


#abt-view{
   
   text-align: left;
   padding: 10px;
}


#abt-view li{
   list-style-type: none;
    
}

#abt-view a {
   color: #FFF;
   font-size: 18px;
   text-decoration: none;
   margin: 5px;
   padding: 8px;
}


#abt-view a:hover{
   color: #F93;
   text-decoration: underline;
   font-weight: bold;
}


/* Adv_fullstack page and all other courses */

.web-pr{
   width: 80%;
   margin: auto;
   text-align: center;
   background-color: blue;
   margin-bottom: 3%;
   border-radius: 15px;
}

  .web-pr h3{
    color: #fff;
    padding: 6px;
  }

   .over{
   width: 95%;
   margin: auto; 
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
   margin-bottom: 2%;
/* border: #000 solid 1px;   */    
    
  }

   .left-push{
     width: 66%;
 /*    border: #f00 solid 1px; */
     box-sizing: border-box;
     margin-bottom: 3%;
     margin: 2px 0px;
  }

  .left-push p{
   color: #FFFFFF;
   margin-bottom: 2%;
  }

   .left-push span ul{
            margin-bottom: 2%;
         }

         .left-push span ul li{
            color: #ffffff;
         }

         .left-push h2{
            margin-bottom: 2%;
            color: #F90;
         }

   .clarif{
    width: 100%;
    background-color: gold;
  }

  .clarif h3{
     padding: 7px;
  }


   .train-bulet li{
       color: #FFF;
  }


   .right-push{
    width: 30%;
  /*   border: #f00 solid 1px; */
     box-sizing: border-box;
     margin-bottom: 3%;
     margin: 2px 0px;
  }

  .right-push h2{
   color: #fff;
  }

  .add-right-push{
   width: 98%;
   margin: 5px auto
   border: #999 groove 1px; 
   background-color: #c98;
   text-align: center;
  }

  .add-right-push img{
     margin-bottom: 2%;
  }

  .add-right-push h2{
    background-color: #ccc; 
    color: #F80;
    width: 90%; 
    text-align: center; 
    margin: 20px auto;
  }



/* emp page styling */

.em-pl{
   width: 90%;
   margin: 100px auto;
   border: #123 solid 1px;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
}

.em-1{
   width: 48%;
   box-sizing: border-box;
   border: #123 dotted 1px;
}

.em-1 form{
   width: 100%;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-flow: wrap;
}

.e-em{
   width: 46%;
   box-sizing: border-box;
   border: #234 solid 1px;
   margin-bottom: 3%;
}

.e-em input{
   padding: 12px;
   width: 90%;
   border: none;
   box-shadow: 10px 10px 10px 10px #fffffd;
}

.em-1 button{
   padding: 13px;
   border: none;
   border-radius: 20px;
   background-color: #104421;
   color: #fff;
   transition: 0.5s;
}

.em-1 button:hover{
   transform: scale(0.9);
}





/* Footer */

   footer{
     width: 100%;
     background: repeating-linear-gradient(120deg, hsl(170, 83%, 18%) 150px, hsl(170, 83%, 18%));
   }

   .foot-ba{
      width: 85%;
      margin: auto;
      display: flex;
      flex-flow: wrap;
      flex-direction: row;
      justify-content: space-around;
      border: #fff;
   }

   .f-foot{
      width: 30%;
      box-sizing: border-box;
      /*border: #456 solid 1px;*/
   }

   .f-foot h2{
     color: #FFFF;
   }

   .f-foot p{
      color: darkgoldenrod;
   }

   .f-foot a{
      color: darkcyan;
   }

    .f-foot-2{
      width: 16%;
      box-sizing: border-box;
      /*border: #456 solid 1px;*/
   }


   .so-me-ia{
      width: 100%;
      display: flex;
      flex-flow: wrap;
      flex-direction: row;
      justify-content: space-around;
   }

   .f-b-c{
     width: 20%;
     box-sizing: border-box;
     /*border: #789 solid 1px;*/
   }

   .f-b-c img{
      width: 50%;
   }

   .m-b-a{
     width: 90%;
     margin: auto;
     display: flex;
     flex-direction: row;
     flex-flow: wrap;
     justify-content: space-around;
   }

   .an-dr-io{
     width: 40%;
     box-sizing: border-box;
     /*border: #789 solid 1px;*/
   }

   .an-dr-io img{
    width: 100%;
   }


   .f-foot-2 a{
     display: block;
     line-height: 25px;
     font-family: cursive;
     text-decoration: none;
     color: #FFFF;
     transition: 1s;
   }

   .f-foot-2 a:hover{
      color: #f90;
      text-decoration: underline;
      letter-spacing: 5px;
      font-style: italic;
   }

   .co-de-en{
      width: 85%;
      margin: auto;
      display: flex;
      justify-content: space-around;
      flex-flow: wrap;
      flex-direction: row;
      border-radius: 25px;
      background-color: #F00;
      box-shadow: 10px 10px 30px rgba(4, 4, 4, .3);
   }

   #co-rt{
      width: 48%;
      box-sizing: border-box;
   }

   .dev-push{
      display: flex;
      justify-content: right;
      font-style: italic;
   }

   .dev-push a{
      text-decoration: none;
   }

   .giv{
      color: #FFF;
   }





/* media Query */

@media screen and (max-width: 678px) and (min-width: 320px){
   header{
      position: unset;
   }

	 .s-ba{
          display: block;
          position: fixed;
      }

      .jam-nxt-rit{
         display: none;
      }

      .jam-nxt-lef{
         width: 60%;
      }

      .kca-top, .jam-nxt-lef img, .web-pr, .train-back-hub, .over, .left-push, .clarif, .right-push, .add-right-push{
    width: 100%;
   
 }


 .containers, .foot-ba, .co-de-en, .train-hub, .tr2{
 	width: 98%;
 }

 .containers .btn, .containers .btnn, .ad-fom button, .eqp1 input{
 	width: 95%;
 	margin-bottom: 8%;
 }

 .f-foot, .f-foot-2, .hub-01, .hub-02, .digit{
 	width: 95%;
 	text-align: center;
 }

 .digit span{
   font-size: 16px;
 }

 .i-bak-l, .i-bak-r, fieldset, #info-mq, .bl-con-1, .disp-detail, 
   .disp-detail-2, .detail-2, .faq-b-1, .va-va, .left-push table{
   width: 80%;
 }

 .kca-top .kc-info{
    padding: 15% 20% 15% 25%;
    padding: unset;
    width: 75%;
    margin: auto;
 }

 .kca-top .kc-info h2{
    color: #FFFFFF;
    font-size: 40px;
    text-align: center;
 }
 

 .p-o-c, .tr1, .align-4-1, .tr2-txt, .en-ab-txt, .m-v-1, .m-v-2, .sp-flex span, .sp-flex2 span, .va-u-1, .faq-pds-r, .faq-pds-rr, 
 .pull-faq h2{
   width: 75%;
 }

 .faq-pds, .faq-pds-r, .faq-pds-rr{
   height: unset;
 }
 
 .faq-pds-r{
     width: 85%;
 }
 
 .faq-pds-rr{
     display: none;
 }

 .en-ab-txt2{
   width: 75%;
   padding: 15%;
 }

}