:root {

    --blue: #06abd3;

    --white: #faf0e6;

  }



.mycircle{

    border-radius: 100%;

    

}

.numcircle{

    width: 50px;

    height: 50px;

   

    border-radius: 50%;

    padding-top: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

}

.kodeneodiv{

    background: #ecf0f3;

    box-shadow: 13px 13px 20px #cbced1,

       -13px -13px 20px #ffffff;

}





.thf{

    font-family: 'Alexandria', sans-serif;

}

.thf2{

    font-family: 'Lato', sans-serif;

}

.thbg{

    background-color:var(--blue) ;

}

.thc{

color: #2482fa;

}

/* 1nav */

.thheading{

    font-family: 'Almarai', sans-serif;

    font-size: 28px;

    /* font-weight: bold; */

}





.dropdown:hover .dropdown-menu{

    display: block;

}

.nav-item a{

    position: relative;

    text-decoration: none;

    font-family: 'Alexandria' , sans-serif;

    color: #fff;

    font-size: 15px;

    /* font-weight: bold; */

    letter-spacing: 0.5px;

    padding: 0 10px;

    margin: 0 5px;

    transition: 0.3s;

}

.nav-item .active{

    color: white;

   

}



.bgcolor.scrolled .nav-item a{

    color: gray;

}

.nav-item a:hover{

   

   

}



.nav-item a::after {

    content:"" ;

    position: absolute;

    background-color: #2482fa;

    height: 3px;

    width:0;

    left: 0;

    bottom  :-10px;

    transition: 0.3s;

}



.nav-item a:hover::after{

    width:100%;

}

.nav-item .active::after{

    content:"" ;

    position: absolute;

    background-color: #2482fa;

    height: 3px;

    width:100%;

    left: 0;

    bottom  :-5px;

    transition: 0.3s;

}

.line{

    height: 1px;

    background-color: #7A7A7A;

}

@media (max-width: 980px){

  

    .nav-item a{

        margin: 20px;

    }



 }



 /* 2header */

 .header{

    height: 80vh;

    width: 100%;

}

.parent{

    width: 100%;

    height: 80vh;

    overflow: hidden;

   

}

.child{

    width: 100%;

    height: 100%;

    background-size: cover;

    /* background-position: center;      */

}

.overlay{

    background-color: rgba(0, 0, 0, 0.6);

}



.bg-one{

   

    background-position: bottom;

    background-image: url(../slider/01.jfif);

}

.bg-two{

    

    /* background-position: center; */

    background-image:  url(../slider/05.jpg);

    

}

.bg-three{

    

    background-image: url(../slider/03.jpg);



}

.rectangle{

    width: 300px;

    /* background-color: rgb(37, 150, 190,0.4); */

    color: white;

    text-align: center;

    padding: 20px;

}

.rectangletxt{

    font-size: 16px;

    font-family: 'Alexandria' , sans-serif;



}

.myheadings{

    font-family: 'Cookie', cursive;

    font-size: 45px;

}

.aboutbg{

    background-color: #e8e9f0;

    color: #444444;

}

.specialixedpara{

    padding: 10px;

    font-weight: bold;

     

    line-height: 40px;

    

}

.spanhover{

    font-size: 20px;

    font-weight: bold;

    padding: 10px;

    transition: 1s ease;

    cursor: pointer;

   



}

.spanhover:hover{

    background-color: #2596be;

    color: white;

    margin: 20px;

}

.services{

   width: 250px;

   height: 250px;

   display: flex;

   justify-content: center;

   align-items:flex-end;

}

.services:hover{

    

}

.services p{

    font-size: 20px;

    color: white;

    transition: 0.5s ease;

    

}

.services:hover p{

    font-size: 25px;

margin-bottom: 80px;

}

.s1{

    width: 100%;

    background-size:cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.2) 100%),url(../s1.jpg);

    background-position: center;

}



.s1:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),url(../s1.jpg);

}

.s2{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.2) 100%),url(../s2.jpg);

    background-position: center;

}



.s2:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),url(../s2.jpg);

}

.s3{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.2) 100%),url(../s3.jpg);

    background-position: center;

}



.s3:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),url(../s3.jpg);

}

.s4{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.2) 100%),url(../s4.jpg);

    background-position: center;

}



.s4:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),url(../s4.jpg);

}

.s5{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.2) 100%),url(../s5.jpg);

    background-position: center;

}



.s5:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),url(../s5.jpg);

}

.s6{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.2) 100%),url(../s6.jpg);

    background-position: center;

}



.s6:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),url(../s6.jpg);

}

.s7{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.2) 100%),url(../s7.png);

    background-position: center;

}



.s7:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),url(../s7.png);

}

.s8{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.2) 100%),url(../s8.jpg);

    background-position: center;

}



.s8:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),url(../s8.jpg);

}





.a1{

    width: 100%;

    background-size:cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.4) 100%),url(../a1.png);

    background-position: center;

}



.a1:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%),url(../a1.png);

}

.a2{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.4) 100%),url(../a2.png);

    background-position: center;

}



.a2:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%),url(../a2.png);

}

.a3{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.4) 100%),url(../a3.png);

    background-position: center;

}



.a3:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%),url(../a3.png);

}

.a4{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.4) 100%),url(../a4.jpg);

    background-position: center;

}



.a4:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%),url(../a4.jpg);

}

.a5{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.4) 100%),url(../a5.png);

    background-position: center;

}



.a5:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%),url(../a5.png);

}

.a6{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.4) 100%),url(../a6.jfif);

    background-position: center;

}



.s6:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%),url(../a6.jfif);

}

.a7{

    width: 100%;

    background-size: cover;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.4) 100%),url(../a7.png);

    background-position: center;

}



.a7:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%),url(../a7.png);

}



.a8{

    width: 100%;

    background-size: contain;

    background-repeat: no-repeat;

    background-image: linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.4) 100%),url(../skimmer.png);

    background-position: center;

}



.a8:hover{

    background-image: linear-gradient(180deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%),url(../skimmer.png);

}





  /* carousel */

  .carouselbox{

    width: 400px;

    height: 500px;

  }

  .caruselimg{

    width: 400px;

    height: 500px;

  }

  .img1{

    background-color: white;

    background-image: url(../g1.jpeg);

    background-size:contain;

    background-position: center;

    background-repeat: no-repeat;

    

  }

  .img2{

    background-color: white;

    background-image: url(../g2.jpeg);

    background-size:contain;

    background-position: center;

    background-repeat: no-repeat;

  }

  .img3{

    background-color: white;

    background-image: url(../g3.jpeg);

    background-size:contain;

    background-position: center;

    background-repeat: no-repeat;

  }

  .img4{

    background-color:white;

    background-image: url(../g4.jpeg);

    background-size:contain;

    background-position: center;

    background-repeat: no-repeat;

  }

  .img5{

    background-color:white;

    background-image: url(../g5.jpeg);

    background-size:contain;

    background-position: center;

    background-repeat: no-repeat;

  }



  .img6{

    background-color:white;

    background-image: url(../g6.jpeg);

    background-size:contain;

    background-position: center;

    background-repeat: no-repeat;

  }

  .img7{

    background-color:white;

    background-image: url(../g7.jpeg);

    background-size:contain;

    background-position: center;

    background-repeat: no-repeat;

  }

  .img8{

    background-color:white;

    background-image: url(../g8.jpeg);

    background-size:contain;

    background-position: center;

    background-repeat: no-repeat;

  }

  .img9{

    background-color:white;

    background-image: url(../g9.jpeg);

    background-size:contain;

    background-position: center;

    background-repeat: no-repeat;

  }

  .img10{

    background-color:white;

    background-image: url(../g10.jpeg);

    background-size:contain;

    background-position: center;

    background-repeat: no-repeat;

  }

  .calltoaction{

    background-color: #06abd3;

    padding: 20px;

    padding-top: 40px;

    padding-bottom: 40px;

    color: white;

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

  .videopool{

    height: 400px;

  }

  .gradebg{

    background: rgb(9,107,122);

background: linear-gradient(90deg, rgba(9,107,122,1) 0%, rgba(0,220,255,1) 50%, rgba(9,107,122,1) 100%);

  }



  @media only screen and (max-width: 600px)  {

    .carouselbox{

        width: 380px;

        height: 450px;

      }

      .caruselimg{

        /* width: 380px; */
        width: 100%;

        height: 450px;

      }

      .calltoaction{

        flex-direction: column;

      }

      .videopool{

        /* height: 200px; */
        width: 90%;
        margin-left: auto;
        margin-right: auto;

      }

  }







@media (max-width: 680px){

  

 .header{

    height: 40vh;

 }

.parent{

    height: 40vh;

}

 .myrow{

    flex-direction: column;

 }

 .services{

    height: 350px;

 }

 }