:root{



  --orange:#0A8ED0;







}







*{



    margin:0; padding:0;



    box-sizing: border-box;



    text-decoration: none;



    outline: none; border:none;



    font-size: 15px;

    transition: all .2s linear;



    /* transition: all .3s cubic-bezier(.38,1.15,.7,1.12); */



    font-weight: normal;



    /* font-family: cursive; */



}













html{



    font-size: 62.5%;



    overflow-x: hidden;



}



.data {



    margin-top:50px;



    



    padding:4rem;



    font-size:1.4rem;



    min-height:62vh;



    



}











section{



   

    padding:0 7%;



    padding-top: 7.5rem;



}







.btn-1{



  display: inline-block;

  /* border: .2rem solid var(--yellow); */

  font-size: 1.7rem;

  color: #fff;

  background: #254cfe;;

  margin-top: 1rem;

  padding: 1rem 3rem;

  border-radius: 1rem;



}







.btn-1:hover{



    /* background:var(--yellow); */



    color:#fff;



   

}







.heading{



    font-size: 3.5rem;



    color:#444;



    font-weight: 700;



    letter-spacing: 2px;



    text-align: center;



    text-transform: uppercase;



    padding:1rem;



}







.main-header{



    position: sticky;



    top:0; left: 0;



    z-index: 1000;



    width:100%;



    background: #fff;



    display: flex;



    align-items: center;



    justify-content: space-between;



    padding:1rem 7%;

    border-bottom:1px solid rgba(0,0,0,0.2);



    /* box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); */



}







.main-header .logo{



    font-size: 2.5rem;



    color:#444;



}











.main-header .main-navbar a{



    font-size: 1.7rem;



    margin-left: 2rem;



    color:#444;



}







.main-header .main-navbar a:hover{



    color:var(--yellow);



    text-decoration:none;



}







#menu{



    font-size: 2.5rem;



    color:#444;



    border-radius: .5rem;



    padding:1rem 1.5rem;



    cursor: pointer;



    display: none;



}







.home{



    min-height: 45vh;



    display: flex;



    align-items: center;



    justify-content: center;



    background: url(../images/banner.png) no-repeat;



    background-size: cover;



    background-position: center;



}







.home .content{



    width:80rem;



    /* padding:4rem 0; */



    /* padding-bottom: 15rem; */



    text-align: center;



}







.home .content h3{



  color: #111;

  font-size: 7.5rem;

  font-weight: 700;



  



}







.home .content p{



    color: #666;



    font-size: 1.6rem;



    padding: 1rem 0;



}







.icons-container{



    display: flex;



    align-items: center;



    justify-content: center;



    flex-wrap: wrap;



    margin-top: -10rem;



}







.icons-container .icons{



    width:30rem;



    margin:1rem;



    padding:2rem 1rem;



    border-radius: .5rem;



    border:.1rem solid rgba(0,0,0,.1);



    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);



    text-align: center;



    background:#fff;



}







.icons-container .icons:hover{



    transform:translateY(-1rem);



}







.icons-container .icons img{



    height:6rem;



    width:6rem;



    margin:1rem 0;



}







.icons-container .icons h3{



    font-size: 2.5rem;



    color:#e75601;



}







.icons-container .icons p{



    font-size: 1.3rem;



    color:#999;



    padding:1rem 0;



}











.section-1{



    padding-bottom: 7rem;



    min-height: auto;



   







}







  



  



  .section-1 .row{



    display: flex;



    align-items: center;



    justify-content: center;



    flex-wrap: wrap;



    margin: 0;



  }



  



  .section-1 .row .image{



    flex:1 1 40rem;



  }



  



  .section-1 .row .image img{



    width:90%;



  }



  



  .section-1 .row .content{



    flex:1 1 60rem;



    padding: 2rem;



   



  }



  



  .section-1 .row .content h3{



    color:var(--orange);



    font-size: 3.5rem;



    letter-spacing: 2px;



  }



  



  .section-1 .row .content p{



    color:#666;



    font-size: 1.7rem;



    padding:1rem 0;



  }



  



  .section-1 .row .content .buttons{



    display: flex;



    flex-wrap: wrap;



  }



  



  .section-1 .row .content .buttons a:hover{



    opacity: .7;



  }



  



  .section-1 .row .content .buttons a:last-child{



    margin-left: 2rem;



  }



  .project{



      min-height: auto;



      padding-bottom: 7rem;



  }



  .project .box-container{



    -webkit-columns: 3 25rem;

    columns: 4 25rem;

    -webkit-column-gap: 1.5rem;

    column-gap: 1.5rem;

  

    gap: 1.5rem;

}







.project .box-container .box{



    overflow: hidden;



    border-radius: .5rem;



    /* width:33rem; */



    height:25rem;



    box-shadow: 0 .5rem 1rem rgba(0,0,0,.3);



    position: relative;

    margin-bottom: 1.5rem;



    /* margin:1rem; */



}







.project .box-container .box img{



    height: 100%;



    width:100%;



    object-fit: cover;



}

.project .box-container .box img:hover{

transform: scale(1.3);



}







.faq{

  background: #f8faff;;

}

.faq .accordion{

  width: 80%;

  margin: auto;

}

.faq .card-header{

  background: #fff;

  border: 1px solid rgb(163 158 158 / 20%);

}

.faq .card{

  margin-bottom: 1rem;

}

    /* Custom styles */

    .accordion .card-header{

      position: relative;

  }

  .accordion .card-header .btn:after {

      font-family: "Font Awesome 5 Free";

  content: "\f077 ";

  float: right;

  color: #63a4dd;

  font-weight: bold;

  position: absolute;

  right: 20px;

}

.accordion .btn-link{

  font-size: 1.8rem;

  color: #444;

  text-decoration: none;

}

.faq .card-body{

  color:#666;

  padding: 1rem;

}

  



  .accordion .card-header .btn.collapsed:after {

    content: "\f078"; /* Opened arrow */

  }

.project .box-container .box .title{



    position: absolute;



    bottom:0; left:0;



    width:100%;



    font-size: 2rem;



    color:#fff;



    text-align: center;



    background:linear-gradient(transparent, rgba(0,0,0,.9));



    padding:2rem;



    margin: 0;



}







.project .box-container .box:hover .title{



    top: -100%;



}







.project .box-container .box .info{



    /* background:#fff; */



    text-align: center;



    border-radius: .5rem;



    padding:1.5rem;



    position: absolute;



    bottom:-100%; left:50%;



    transform:translateX(-50%);



    width:90%;



}

.project .box-container .box .info .btn-1{

  color:#fff;

}







.project .box-container .box:hover .info{



    bottom:2rem;



    transition-delay: .3s;



}







.project .box-container .box .info h3{



    color:var(--orange);



    font-size: 2rem;



}







.project .box-container .box .info p{



    color:#999;



    font-size: 1.3rem;



    padding:1rem 0



}







.project .box-container .box .info a{



    color:#666;



    font-size: 1.4rem;



}







.project .box-container .box .info a:hover{



    color:var(--green);



}















  

















.footer {

  background: #1b2026;

  padding-bottom: 1rem;

 }

 

 .footer .box-container {

   display: -ms-grid;

   display: grid;

   -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];

       grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

   gap: 2rem;

 }

 

 .footer .box-container .box h3 {

   font-size: 2.2rem;

   text-transform: capitalize;

   color: #fff;

   padding: 1rem 0;

 }

 

 .footer .box-container .box .link {

   display: block;

   padding: .5rem 0;

   font-size: 1.5rem;

   line-height: 2;

   color: #f5f5f5;

 }

 

 .footer .box-container .box .link i {

   padding-right: .5rem;

   color: #0D6EFD;

 }

 

 .footer .box-container .box .link:hover {

   color: #0D6EFD;

 }

 

 .footer .box-container .box .link:hover i {

   padding-right: 2rem;

 }

 

 .footer .box-container .box p {

   padding: .5rem 0;

   font-size: 1.5rem;

   line-height: 2;

   color: #777;

 }

 

 .footer .box-container .box p span {

   color: #0D6EFD;

 }

 

 

 

 .footer .box-container .box .share {

   margin-top: 2rem;

 }

 

 .footer .box-container .box .share a {

   height: 4.5rem;

   width: 4.5rem;

   line-height: 4.5rem;

   font-size: 1.7rem;

   background: #0D6EFD;

   color: #fff;

   border-radius: 50%;

   margin-right: 0.3rem;

   text-align: center;

 }

 

 .footer .box-container .box .share a:hover {

   background: #0D6EFD;

 }

 

 .footer .credit {

   font-size: 1rem;

     text-transform: capitalize;

     color: #999;

     margin-top: 3rem;

     padding-top: 1rem;

     border-top: 0.2rem solid #334;

     text-align: center;

 }

 

 .footer .credit span {

   color: #2597f4;

 }

 

/* signup page */

.signup-wrapper{

  padding: 4rem; 

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;



 }

 .signup-form{

      margin-top:60px;

  position: relative;

  width: 100%;

  max-width: 600px;

  padding: 60px 40px 40px;

  /* background: rgba(0,0,0,0.7); */

  border:2px solid#e75601;

  border-radius: 10px;

  color: #fff;

  box-shadow: 0 15px 25px rgba(0,0,0,0.5);

 }



.signup-form h2 {

  text-align: center;

  letter-spacing: 4px;

  margin-bottom: 2rem;

  font-size: 2.4rem;

  color:#e75601;

}

.signup-form .input-group {

  position: relative;

  width:100%;

}

.signup-form .input-group input,textarea,select {

  width: 100%;

  padding: 10px 0;

  font-size: 1.4rem;

  color:#333;

  letter-spacing: 1px;

  margin-bottom: 30px;

  border: none;

  border-bottom: 1px solid rgba(0,0,0,0.2);

  outline: none;

  background-color: transparent;

  resize: none;

}

.signup-form .input-group label{

    color: #444;

    font-size: 1.4rem;

}

.submit-btn {

   display: block;

   margin-left: auto;

   border: none;

   outline: none;

   background:#e75601;

   font-size: 1.4rem;

   text-transform: uppercase;

   letter-spacing: 1px;

   padding: 10px 20px;

   border-radius: 5px;

   color: #fff;

   cursor: pointer;

   margin-bottom: 1.2rem;

 }

  /* login-form */

.login-wrapper {

    padding:7rem ;

  

   display: flex;

   justify-content: center;

   align-items: center;

 }

 .form {

     margin-top:40px;

   position: relative;

   width: 100%;

   max-width: 380px;

   padding: 80px 40px 40px;

   /* background: rgba(0,0,0,0.7); */

   border:2px solid#e75601;

   border-radius: 10px;

   color: #fff;

   box-shadow: 0 15px 25px rgba(0,0,0,0.5);

 }

 

 .form img {

   position: absolute;

   top: -50px;

   left: calc(50% - 50px);

   width: 100px;

   background: rgba(255,255,255, 0.8);

   border-radius: 50%;

 }

 .form h2 {

   text-align: center;

   letter-spacing: 4px;

   margin-bottom: 2rem;

   font-size: 2.4rem;

   color:#e75601;

 }

 .form .input-group {

   position: relative;

 }

 .form .input-group input {

   width: 100%;

   padding: 10px 0;

   font-size: 1.4rem;

   color:#111;

   letter-spacing: 1px;

   margin-bottom: 30px;

   border: none;

   border-bottom: 1px solid #777;

   outline: none;

   background-color: transparent;

 }

 .form .input-group label{

     color: #333;

     font-size: 1.4rem;

 }

  /* advertise page */

.content-top{

 margin-top:80px;



  text-align: center;

  list-style-type: none;

 

}

.content-top h2{

  color: #272F38;

  padding: 1rem;

  

  font-size: 2.1rem;

}

.content-top li{

  padding:.5rem;

  color: #384350;

  font-size: 1.4rem;

}

.content-top ul{

  list-style-type: none;

}

/*dashboard*/

.dash-container{

position: relative;

width:  100%;

display:flex;

margin: 0rem auto;

min-height: 100vh;







}

.dash{

  padding:1rem;

}

.dash-nav{

position: absolute;

top: 0;

width :250px;

height: 100%;

background:#174272;

transition: 0.5s;

/*overflow: hidden;*/

}

.dash-nav.active{

width: 10px;



}

.dash-nav ul{

position: absolute;

top:0;

left:0;

width:100%

}

.dash-nav ul li{

position: relative;

width:100%;

list-style: none;

}

.dash-nav ul li:hover{

background:#113660;

cursor:pointer;



}

/*.dash-nav ul li:nth-child(1){*/

/*  margin-bottom:20px ;*/

/*}*/



.dash-nav ul li:nth-child(1):hover{

background: transparent;

}

.dash-nav ul li a h2{

font-size: 15px;





}

.dash-nav .link .dash-title h2{

  margin-top:0px;

  margin-bottom:10px;

}







.dash-nav ul li .link{

 

 padding:.5rem;

position: relative;

display: block;

width: 100%;

/*display: flex;*/

text-decoration: none;

color:#fff;

font-size: 12px;

border-bottom:1px solid rgba(0,0,0,0.2);





}

.dash-nav ul li a{

  color:#fff;

  text-decoration:none;

  text-align:left;

  font-size:1.6rem;

}

/*.dash-nav ul li a .icon{*/

/*  position: relative;*/

/*  display: block;*/

/*  min-width: 60px;*/

/*  height: 60px;*/

/*  line-height: 60px;*/

/*  text-align: center;*/



/*}*/

.dash-nav ul li a .icon .fab{

color: #fff;

font-size: 15px;

}

.dash-nav ul li  .dash-title{

position: relative;



display: block;

padding: 0 30px;

/*height: 60px;*/

line-height: 25px;

white-space: nowrap;

}

.dash-nav ul li a .brand{

text-transform: uppercase;

font-size: 15px;

}

.main-container{

position: relative;

width: calc(100% - 250px);



left:250px;

/* min-height: 100vh; */

/*background: #f5f5f5;*/

transition: 0.5s;

}

.main-container.active{

width: calc(100% - 10px);

left:10px;

}





.main-container .topbar{

width: 100%;

background: rgb(181 179 179 / 30%);

height: 60px;

padding-left: 0 10px;

display: flex;

justify-content: space-between;

align-items: center;

}

.toggle h4{

position: absolute;

  top: 13px;

  left: 49px;

}

.toggle{

position: relative;

width: 60px;

height: 60px;



cursor: pointer;

}

.toggle::before{

content: '\f007';

font-family: "Font Awesome 5 Free";

position: absolute;

width: 100%;

height: 100%;

line-height: 60px;

font-size: 24px;

text-align: center;

color: #111;

}













/* media queries  */







@media (max-width:991px){







    html{



        font-size: 55%;



    }







}







@media (max-width:768px){







    #menu{



        display: block;



    }



    .accordion .btn-link {

      font-size: 1.8rem;

      color: #444;

      text-decoration: none;

      text-wrap: wrap;

      text-align: left;

  }





    .main-header .main-navbar{



        position: absolute;



        top:100%; left: 0;



        width:100%;



        background:#fff;



        border-top: .1rem solid rgba(0,0,0,.1);



        padding:2rem;



        transform-origin: top;



        transform:scaleY(0);



        opacity: 0;



    }







    .main-header .main-navbar.nav-toggle{



        transform:scaleY(1);



        opacity: 1;



    }







    .main-header .main-navbar a{



        display: block;



        margin: 2rem 0;



        padding:0 1rem;



        font-size: 2rem;



       color: #444;



    }







    .home{

      background: url(../images/banner.png) no-repeat;

      background: url(../images/banner.png) no-repeat;

        min-height: 20vh;



    }







    .home .content{



        text-align: center;



        width:auto;



    }







    .home .content h3{



        font-size: 4rem;



    }

    .home .content p{



      color:#333



  }







    section{



        padding:0 3%;



        padding-top: 8rem;



    }



    .section-1 .row .content{



        text-align: center;



        padding-bottom: 4rem;



    }



    



    .features{



        flex-flow: column;



      }



       .signup-wrapper, .login-wrapper{



        padding:1rem 2rem;



    }







}







@media (max-width:400px){







    html{



        font-size: 50%;



    }







    .project .box-container .box{



        width: 100%;



    }



    .features{



        flex-flow: column;



      }



    



      .features .stick{



        display: none;



      }



    



    







    







}



@media (max-width:992px){



  .dash-nav{



      left:-300px;



  }



  .dash-nav.active{



      left:0;



  }



 



  .main-container{



      width:100%;



      left:0px;   







  }



 



}







@media(max-width:480px){



  



  .dash-nav{



      width: 100%;



      left: -100%;



      z-index: 1000;



  }



  .dash-nav.active{



      width: 100%;



      left:0;



  }







  .toggle.active{



      /* position: fixed; */



      z-index: 10000;



      right: 0;



      left:269px;



     







  }



  .toggle.active::before{



      color:#fff;



  }



  



  .dash-ban{



            left:0;



        }



        .dash-bottom{



            left:0;



            



        }



        .dash-container{



            width:100%;



            /* margin-top: 62px; */



        }



        



        



            .topbar h4{



                display:block;



            }



            .toggle.active h4{



                display:none;



                



            }



            



            



  



}