@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600;700&display=swap');

* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;

}



html {


  font-size: 62.5%;


  overflow-x: hidden;


  scroll-behavior: smooth;


  scroll-padding-top: 7rem;


}








section {


  padding: 5rem 9%;


}


.data {


    margin-top:40px;


    text-align:center


    ;


    padding:4rem;


    font-size:1.4rem;


    min-height:50vh;


    


}





.heading {


  text-align: center;


  margin-bottom: 3rem;


}





.heading span {


  font-size: 2.5rem;


}





.heading h1 {


  font-size: 4rem;


  padding-top: .5rem;


}





.btn-1 {

  /* border: 0.2rem solid #334; */
  display: inline-block;
  margin-top: 1rem;
  padding: 1.5rem 3rem;
  cursor: pointer;
  background: linear-gradient(255deg, rgb(248, 111, 100) 0%, rgb(252, 83, 146) 100%);
  border-radius: 1rem;
  margin-right: 1rem;
  font-size: 1.7rem;
  text-transform: capitalize;
  color: #fff;


}
.btn-2{
    display: inline-block;
    margin-top: 1rem;
    padding: 1.5rem 3rem;
    cursor: pointer;
    background:#fff;
    border-radius: 1rem;
    font-size: 1.7rem;
    text-transform: capitalize;
    color: #444;
}

.btn:hover {
  background: #2597f4;
  border-color: #2597f4;
  color: #fff;
}












@-webkit-keyframes fadeUp {


  0% {


    opacity: 0;


    -webkit-transform: translateY(4rem);


            transform: translateY(4rem);


  }


}





@keyframes fadeUp {


  0% {


    opacity: 0;


    -webkit-transform: translateY(4rem);


            transform: translateY(4rem);


  }


}


.login{


  display: none;


}





.main-header {


  position: -webkit-sticky;


  position: sticky;


  top: 0;


  left: 0;


  right: 0;


  z-index: 3000;


  display: -webkit-box;


  display: -ms-flexbox;


  display: flex;


  -webkit-box-align: center;


      -ms-flex-align: center;


          align-items: center;


  -webkit-box-pack: justify;


      -ms-flex-pack: justify;


          justify-content: space-between;


          box-shadow: 0 10px 10px rgb(107 107 107 / 20%);


  /* -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);


          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); */


  padding: 1rem 9%;
  background: #fff;


  /* background: #152062; */


}





.main-header .logo {


  font-size: 2.5rem;


  color: #444;
  font-weight: 800;


}





.main-header .main-navbar a {


  margin: 0 1rem;


  font-size: 2rem;


  color: #444;


  font-weight: 500;


}





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


  color: #FF5765;


  text-decoration:none;


}





.main-header .btn {


  margin-top: 0;


}





#menu-btn {


  cursor: pointer;


  font-size: 3rem;


  display: none;


  color: #444;


}





@-webkit-keyframes floating {


  0%, 100% {


    -webkit-transform: translateY(0rem);


            transform: translateY(0rem);


  }


  50% {


    -webkit-transform: translateY(-4rem);


            transform: translateY(-4rem);


  }


}





@keyframes floating {


  0%, 100% {


    -webkit-transform: translateY(0rem);


            transform: translateY(0rem);


  }


  50% {


    -webkit-transform: translateY(-4rem);


            transform: translateY(-4rem);


  }


}




.background {
  background: url(../images/background.png) no-repeat;
  background-position: bottom;
  background-size: cover;
  position: relative;
}



.home {
  padding-top: 0;
  
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 3rem;
  min-height: 100vh;

  
  /* margin-top: -10rem; */
  /* padding-right: 0; */
}

.home .image {
    /* margin-top: 8rem; */
  -webkit-box-flex: 1;
      -ms-flex: 1 1 55rem;
          flex: 1 1 55rem;

}

.home .image img {
  width: 100%;
 

}
.background::before{
  content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    top: 200px;
    background: #6751ff59;
    animation: bounce 20s linear Infinite;

}


@keyframes float {
  0%, 100% {
    transform: translateY(0rem);
  }
  50% {
    transform: translateY(-3.5rem);
  }
 
}
@keyframes bounce {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.3, 1.3);
  }
  100% {
    transform: scale(1, 1);
  }
}


.home .content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 42rem;
          flex: 1 1 42rem;
}

.home .content h3 {
  font-size: 9rem;
  font-weight: 700;
  text-transform: capitalize;
  color: #fff;
  animation: 3s infinite alternate slidein;
}
.home .content h3 span{
  color: #fff;
}

.home .content p {
  font-size: 1.5rem;
  line-height: 2;
  color: #f5f5f5;
  padding: 1rem 0;
}





.services{
  background: aliceblue;
}

.services .heading h1{


  padding-top: 1.5rem;


}


.services .heading span{


  background: #ffc11a;


  padding: 0.5rem 2rem;


  color: #fff;





}





.services .box-container {


  display: -ms-grid;


  display: grid;


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


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


  gap: 4rem;



}





.services .box-container .box {


  background: #fff;


  /* background: linear-gradient( 


45deg, #8e7aec, #4c35f3); */


  padding: 3rem 2rem;

  border: 1px solid #c0e2ff;
  text-align: center;


  border-radius: .5rem;


}





.services .box-container .box img {


  height: 8rem;


  margin-bottom: .7rem;


}





.services .box-container .box h3 {


  color: #444;


  font-size: 2.2rem;


  padding: 1.5rem 0;


  font-weight:600;


}





.services .box-container .box p {


  line-height: 1.6;


  font-size: 1.6rem;


  color:#666;


   font-weight:500;


}





.about {


  min-height: 85vh;


  display: -webkit-box;


  display: -ms-flexbox;


  display: flex;


  -webkit-box-align: center;


      -ms-flex-align: center;


          align-items: center;


  -ms-flex-wrap: wrap;


      flex-wrap: wrap;


  gap: 2rem;


}





.about .image {


  -webkit-box-flex: 1;


      -ms-flex: 1 1 42rem;


          flex: 1 1 42rem;


}





.about .image img {


  width: 100%;


}





.about .content {


  -webkit-box-flex: 1;


      -ms-flex: 1 1 42rem;


          flex: 1 1 42rem;


}





.about .content h3 {


  font-size: 4rem;


  line-height: 1.5;


}





.about .content p {


  font-size: 1.7rem;


  line-height: 2;


  padding: 1rem 0;


  


}





.steps {


  background: radial-gradient(#532bd8, #8d79ff);


}


.steps .heading h1, span{


  color:#fff;


}





.steps .box-container {


  display: -ms-grid;


  display: grid;


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


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


  gap: 1.5rem;


}





.steps .box-container .box {


  text-align: center;


  padding: 3rem 2rem;


}





.steps .box-container .box img {


  height: 20rem;


}





.steps .box-container .box h3 {


  font-size: 2.2rem;


  padding: 2rem 0;


  color:#fff;


  font-weight:600;


}





.steps .box-container .box p {


  font-size: 1.7rem;


  line-height: 1.6;


  padding-bottom: 1rem;


  min-height: 150px;


  color:#f5f5f5;


  font-weight:500;


}





.feature .box-container .box {


  display: -webkit-box;


  display: -ms-flexbox;


  display: flex;


  -ms-flex-wrap: wrap;


      flex-wrap: wrap;


  gap: 2rem;


  -webkit-box-align: center;


      -ms-flex-align: center;


          align-items: center;


  min-height: 60vh;


  margin-bottom: 3rem;


}





.feature .box-container .box:last-child {


  margin-bottom: 0;


}





.feature .box-container .box:nth-child(even) {


  -webkit-box-orient: horizontal;


  -webkit-box-direction: reverse;


      -ms-flex-flow: row-reverse wrap;


          flex-flow: row-reverse wrap;


}





.feature .box-container .box .image {


  -webkit-box-flex: 1;


      -ms-flex: 1 1 42rem;


          flex: 1 1 42rem;


}





.feature .box-container .box .image img {


  width: 100%;


}





.feature .box-container .box .content {


  -webkit-box-flex: 1;


      -ms-flex: 1 1 42rem;


          flex: 1 1 42rem;


}





.feature .box-container .box .content h3 {


  font-size: 3rem;


  line-height: 1.5;


  background: linear-gradient(


45deg, #f8923b, #ffc244);


    padding: 1rem 2rem;


    color: #fff;


    font-weight: 600;





}





.feature .box-container .box .content p {


  padding: 1.5rem 0;


  line-height: 2;


  font-size: 1.7rem;


   font-weight:500;


}


.features {


  background: #faf5ef;



}


.features h1{


  background: linear-gradient(


    45deg, #278de9, #009fff);


    padding: 2rem;


    color: #fff;


    margin-bottom: 4rem;


}


.features .box-container {


  display: -ms-grid;


  display: grid;


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


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


  gap: 1.5rem;


  gap: 0;


}





.features .box-container .box {


  background: #fff;


}





.features .box-container .box.second {


  display: -webkit-box;


  display: -ms-flexbox;


  display: flex;


  -webkit-box-orient: vertical;


  -webkit-box-direction: reverse;


      -ms-flex-flow: column-reverse;


          flex-flow: column-reverse;


}





.features .box-container .box:hover .image img {


  -webkit-transform: scale(1.1);


          transform: scale(1.1);


}





.features .box-container .box .image {


  height: 30rem;


  width: 100%;


  overflow: hidden;


}





.features .box-container .box .image img {


  height: 100%;


  width: 100%;


  -o-object-fit: cover;


     object-fit: cover;


}





.features .box-container .box .content {


  padding: 2rem;


  text-align: center;


}





.features .box-container .box .content img {


  height: 9rem;


  margin-bottom: 1rem;


  -webkit-filter: invert(1);


          filter: invert(1);


}











.features .box-container .box .content p {


  line-height: 2;


  font-size: 1.7rem;


  color: #444;


  padding: 1rem 0;


      font-weight: 500


}


/* signup page */


   .signup-wrapper{


      


    padding: 4rem; 


    height: 100%;


    display: flex;


    justify-content: center;


    align-items: center;





   }


   .signup-form{


        margin-top:40px;


    position: relative;


    width: 100%;


    max-width: 600px;


    padding: 60px 40px 40px;


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


    border:2px solid #154fce;


    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: #152ec5;


    font-weight: 700;


  }


  .signup-form .input-group {


    position: relative;


    width:100%;


  }


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


    width: 100%;


    padding: 10px 0;


    font-size: 1.4rem;


    color:#333;


    outline:none;


    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: #ff4275;


     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 {


     position: relative;


     width: 100%;


     max-width: 380px;


     padding: 80px 40px 40px;


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


     border:2px solid #154fce;


     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:  #154fce;


     font-weight:800;


   }


   .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{


   


   


    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;


 /*margin-top:55px;*/


  


  


}


.dash-nav{


  position: absolute;


  top: 0;


  width :250px;


  height: 100%;


 background: linear-gradient(


45deg, #fb4072, #ff1e5b);


  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: #fc3c6f;;





}


/*.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-top:1rem;


   


  position: relative;


  display: block;


  width: 100%;


  /*display: flex;*/


  text-decoration: none;


  color:#fff;


  font-size: 12px;


 border-bottom: 1px solid rgb(255 85 130);





  





}


.dash-nav ul li a{


    color:#fff;


    text-decoration:none;


    text-align:left;
    font-size: 1.4rem;


}


/*.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 .fas{


  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;
  padding:1rem;


}


.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;


  font-weight: 600;


  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;


}


























.footer{


  background: linear-gradient( 


45deg, #171183, #010122);


}


.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: #ababab;

  text-transform: capitalize;

}



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

  padding-right: .5rem;

  color: #1FABB3;

}



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

  color: #1FABB3;

}



.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: #999;

}



.footer .box-container .box p span {

  color: #1FABB3;

}







.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: linear-gradient(45deg, #1fb0b7, #194689);

  color: #fff;

  border-radius: 50%;

  margin-right: 0.3rem;

  text-align: center;

}



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

  background: linear-gradient(45deg, #14969d, #0d2c5b);

}



.footer .credit {

  font-size: 2rem;

  text-transform: capitalize;

  color: rgb(149 149 149);

  margin-top: 3rem;

  padding-top: 3rem;

  border-top: 0.2rem solid rgb(180, 180, 180);

  text-align: center;



}



.footer .credit span {

  color: #1FABB3

}

.comments {

  color:#8f8f8f;

  font-weight: 700;

 

  cursor: pointer

}







@media (max-width: 1200px) {


  .main-header {


    padding: 2rem;


  }


  section {


    padding: 3rem 2rem;


  }


  .home .content h3 {


    font-size: 4rem;


  }


}





@media (max-width: 991px) {


  html {


    font-size: 55%;


  }


}





@media (max-width: 768px) {


  .login{


    display: block;


  }


  #menu-btn {


    display: inline-block;


    -webkit-transition: .2s linear;


    transition: .2s linear;


  }


  #menu-btn.fa-times {


    -webkit-transform: rotate(180deg);


            transform: rotate(180deg);


  }


  .main-header .btn-1 {


    display: none;


  }


  .main-header .main-navbar {


    position: absolute;


    top: 99%;


    left: 0;


    right: 0;


    border-top: 0.2rem solid #000;


    background: #fff;


    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);


            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);


    -webkit-transition: .2s linear;


    transition: .2s linear;


  }


  .main-header .main-navbar.active {


    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);


            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);


  }


  .main-header .main-navbar a {


    display: block;


    margin: 0;


    padding: 1.5rem 2rem;


    color:#444;


  }


  .features .box-container .box.second {


    -webkit-box-orient: vertical;


    -webkit-box-direction: normal;


        -ms-flex-flow: column;


            flex-flow: column;


  }


  .footer .box-container {


 


 flex-direction:column;


}


.signup-wrapper{


    padding: 2rem;


}


.login-wrapper{


    padding: 8rem 2rem;


}


.toggle{


    z-index:1000;


       





}





.top-ban img{


    


    width:100%;


}


.pull-right{


padding:5rem;


}


.search{


    width:100%;


}


}


@media (max-width:992px){


  .dash-nav{


      left:-300px;


  }


  .dash-nav.active{


      left:0;


  }


 


  .main-container{


      width:100%;


      left:0px;   





  }


  .cardBox{


      grid-template-columns: repeat(1,1fr);


  }


}





@media(max-width:480px){


  .carBox{


      grid-template-columns: repeat(1,1fr);


  }


  .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:275px;


     





  }


  .toggle.active::before{


      color:#fff;


  }


  .topbar h4{


      display:none;


  }


  


        .dash-container{


            width:100%;


        }


        .ban{


            top:64px;


        }


        .ban img{


            width:100%;


  


}


.ban-bottom img{


    width:100%;


}


}





@media (max-width: 450px) {


  html {


    font-size: 50%;


  }


  .heading h1 {


    font-size: 3rem;


  }


}