@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&display=swap');



:root{

  --color:#09c6f9;

}



*{

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

  margin:0; padding:0;

  box-sizing: border-box;

  transition: all .2s linear;

  text-decoration: none;

}



html{

  font-size: 62.5%;

}



body{

  overflow-x: hidden;

}



.heading{

  margin:2rem;

  padding-top: 6rem;

  display: inline-block;

  font-size: 4.5rem;

  color:#444;

  position: relative;

  letter-spacing: .2rem;

}



.heading::before, .heading::after{

  content: '';

  position: absolute;

  height: 2.5rem;

  width: 2.5rem;

  border-top:.4rem solid var(--color);

  border-left:.4rem solid var(--color);

}



.heading::before{

  top:5.8rem; left: -2rem;

}

.data {



  margin-top:50px;



  



  padding:4rem;



  font-size:1.4rem;



  min-height:62vh;



  



}



.heading::after{

  bottom:-.5rem; right: -2rem;

  transform: rotate(180deg);

}



.btn-1{

  outline: none;

  border: none;

  border-radius: 5rem;

  background: var(--color);

  color:#fff;

  cursor: pointer;

  height:3.5rem;

  width: 15rem;

  font-size: 1.7rem;

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

}



.btn:hover{

  letter-spacing: .1rem;

  opacity: .8;

}



































.home{

  min-height: 60vh;

  width: 100vw;

  background:url(images/header.jpg);

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-flow: column;

  text-align: center;

  padding:0 1rem;

  position: relative;

  overflow: hidden !important;

}



.home .banner{

  color:#fff;

  font-size: 7rem;

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

/* 

  background: rgb(6 6 6 / 20%); */

  padding:1rem 5rem;

  margin-bottom:1rem;

}



.home .slogan{

  color:#eee;

  font-size: 2.5rem;

  font-weight: 400;

}



.home button{

  height: 4rem;

  width: 18rem;

  background:#fff;

  color: #444;

  cursor: pointer;

  border:none;

  outline: none;

  margin-top: 1rem;

  font-size: 2rem;

  font-weight: 400;

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

}



.home button:hover{

  letter-spacing: .1rem;

}



.home .wave{

  position: absolute;

  bottom: -.5rem;

  left: 0;

  height:11rem;

  width: 100%;

  background: url(images/wave.png);

  background-size: 100rem 11rem;

  background-repeat: repeat-x;

  animation:waves 10s linear infinite;

}



.home .wave2{

  animation-direction: reverse;

  opacity: .2;

}



.home .wave3{

  animation-duration: 4s;

  opacity: .5;

}



@keyframes waves{

  0%{

    background-position-x: 0;

  }

  100%{

    background-position-x: 100rem;

  }

}



.home .fa-poll, .fa-bullhorn{

  position: absolute;

  font-size: 30rem;

  opacity: .15;

  color:#fff;

 

}



.home .one{

  top:10%; left: -15rem;

}



.home .two{

  bottom:23%; right: -5rem;

  

}

.about{

  min-height: 100vh;

  width: 100vw;

  text-align: center;

  position: relative;

  overflow:hidden;

}

.about .row{

  display: flex;

  align-items: center;

  justify-content: space-around;

  padding: 0 4rem;

}

.about .row .content{

  text-align: left;

}

.about .row .image img{

 width:50vw;

}

.about .row .content h3{

  font-size: 3rem;

  color:var(--color);

}

.about .row .content p{

  font-size:1.5rem;

  color:#333;

  padding:1rem 0;

}

.about::before, .about::after{

  content:'';

  position:absolute;

  z-index:-1;

  opacity:.3;

  border-radius:50%;

}

.about::before{

  height: 50rem;

  width:50rem;

  background: #ccc;

  bottom:-10rem;

  left:-10rem;



}



.about::after{

  height: 60rem;

  width:60rem;

  background: var(--color);

  top:-10rem;

  right:-10rem;



}

.btn{

  outline:none;

  border:none;

  border-radius:5rem;

  background: var(--color);

  color:#fff;

  cursor: pointer;

  height: 3.5rem;

  width: 15rem;

  font-size: 1.7rem;

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

}

.btn:hover{

  letter-spacing: .1rem;

  opacity:.8;

}



.service{

  padding: 2rem 7%;



  width:100%;

  text-align:center;



}

.service .row{

  /* margin:2rem 0; */

  /* padding:0 2rem;

  display:flex;

  align-items:center;

  justify-content: center; */

}

.service .row .image img{

  width:30vw;

  height:50vh;

}

.service .row .content {

  background-image: url(images/bg.png);

  background-repeat: no-repeat;

  background-position:right;

  text-align:left;

  padding:0 3rem;

}

.service .row .content h3{

  font-size:3rem;

  color:var(--color);

}

.service .row .content p{

  font-size:1.5rem;

  color:#333;

  padding:1rem 0;

}

.team{

  min-height: 100vh;

  width:100vw;

  text-align: center;

  background-color: #333;;

}



.team .heading{

  color:#fff;

}



.team .heading::before, .team .heading::after{

  border-color:#fff;

}



.team .row{

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

}

.team .row .card .image{

  /* margin:1rem 0; */

  padding:4rem;

}

.team .row .card .image img{

  height:15rem;

  width:15rem;

  border-radius:50%;

  border-radius:5rem solid #fff;

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

  object-fit:cover;

}



.team .row .card{

  height:35rem;

  width:25rem;

  background:#fff;

  text-align: center;

  margin:7rem 2rem;

  position: relative;

  overflow: hidden;

  border-radius:1rem;

}



.team .row .card .info h3{

  font-size:2rem;

  color:#333;

}

.team .row .card .info span{

  font-size:1.8rem;

  color:var(--color);

}



.team .row .card .info .icons a{

  margin-top:2rem;

  padding:0 1rem;

  font-size:2rem;

  color:#333;

}

.team .row .card .info .icons a:hover{

  color:var(--color);

}

.form-page{

 

  /* background:url(images/wave2.svg);

  background-position: bottom;

  background-repeat: no-repeat; */

}

.contact{

  min-height:100vh;

  width:100vw;

text-align:center;



}

.form-conatiner{

  padding: 5rem;

}



.contact .row{

display: flex;

justify-content: center;

align-items: center;

  padding: 2rem;

}

.contact .row .form-container{

  background: #fff;

  width:50%;

  text-align:left;

  padding:5rem 5rem; 

  box-shadow: 0 1rem 1rem gray;

}

.contact .row .form-container  .input input ,select,textarea{

  outline:none; 

  border:none;

  height:4rem;

  background:none;

  border-radius: .5rem;

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

  padding: 0 1rem;

  margin: 1rem 0;

  font-size:1.6rem;

  resize: none;

}

.contact .row .form-container  .input{

  margin:1rem 0;

}



.contact .row .form-container .inputbox{

  width:100%;

  display:flex;

  justify-content:space-between;

}

.contact .row .form-container .inputbox input[type="text"]{

  

  width:50%;

}

.contact .row .form-container textarea{

  width: 100%;

}

.contact .row .form-container  input[type="text"]{

  width:100%;

}

.contact .row .form-container  input[type="email"]{

  width:100%;

}

.contact .row .form-container  input[type="file"]{

  width:100%;

  color:#666;

  



 

}

.contact .row .form-container  select{

  width:100%;

  color:#666;

}

.contact .row .form-container  input[type="submit"]{

  background-color:var(--color);

  color:#fff;

  cursor:pointer;

  height:4rem;

  width:13rem;

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

  border:none;

  border-radius: .5rem;

  margin: 1rem 0;





}







.contact .row .form-container  input[type="submit"]:hover{

  opacity:.8;

  

}

.footer{

  background:#444;

  padding: 2rem 4rem;

  



}

.footer .box-container{

  display: flex;

  flex-wrap: wrap;



}

.footer .box-container .box{

  flex:1 1 20rem;

  margin:1.8rem;

  /* text-align: center; */

  

  

}



.footer .box-container .box img{

  width: 50%;

  border-radius: 1rem;

  box-shadow: 0 .2rem .2rem rgb(197, 196, 196);



}

.footer .box-container .box .company-details{

  text-align: left;

  margin:  0 7rem;

}

.footer .box-container .box h3{

  font-size: 2rem;

  color: #fff;

  padding: 1rem 0;

font-weight:700;

}

.footer .box-container .box p{

  font-size: 1.7rem;

  color: #eee;

  padding: .5rem 0;

}



.footer .box-container .box a{

  font-size: 1.7rem;

  color: #eee;

  padding: .5rem 0;

  display: block;

}

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

  color: var(--color);

}

.footer .box-container .box p i{

  padding-right: .9rem;

  

}





.footer .credit{

  font-size: 2rem;

  text-align: center;

  /* border-top: .2rem solid rgba(255,255,255,.7); */

  padding:2rem 1rem;

  font-weight: normal;

  letter-spacing: .1rem;

  color:#fff;

}



.footer .credit a{

  padding: 1rem;

  color:#333;

  

}

.footer .credit i{

  background-color: #525355;

  padding: 1.2rem;

  border-radius: 50%;

  color:#ddd;

  margin-bottom: 1.5rem;

  

}

.footer .credit i:hover{

  background-color: var(--color) ;

  

}

.footer .footer-bottom{

  padding-top: 2rem;

  font-size: 1.5rem;

  border-top: .2rem solid rgba(255,255,255,.7);



}





.ad-home

{

  min-height: 50vh;

  width: 100vw;

  background:linear-gradient(#045de9, var(--color));

  display: flex;

  /* align-items: center; */

  justify-content: center;

  flex-flow: column;

  text-align: center;

  padding:0 1rem;

  position: relative;

  overflow: hidden !important;

}

.ad-container{

  display: flex;

  align-items: center;

  justify-content: space-around;

}

.ad-container .card{

  margin-top: 1.5rem;

  padding: 1rem;

  height: 25vh;

  width:20%;

  border-radius: 1rem;

  background-color: #fff;

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

}

.ad-container .card li{

  list-style-type: none;

  padding:0.2rem;

}

.ad-container .card li a{

  font-size: 1.4rem;

  color:#333;

}

.ad-container .card li a:hover{

  color:var(--color);

}

.ad-container .card  h2{

  padding: 0.4rem;

}

.content-text{

 text-align: center;

 padding: 0 1rem;

}

.content-text p{

  text-align:justify;

  font-size: 1.5rem;

  padding:1rem  2rem;

}



/* media queries  */



@media (max-width:768px){



  html{

    font-size: 50%;

  }



  .header .fa-bars{

    display: block;

  }



  .header .navbar{

    position: fixed;

    top:-120%; left: 0;

    height: auto;

    width: 100%;

    background-color: #fff;

    z-index: 1000;

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

  }



  .header .navbar ul{

    height: 100%;

    width: 100%;

    flex-flow: column;

  }



  .header .navbar ul li{

    margin:1rem 0;

  }



  .header .navbar ul li a{

    color: #444;

    font-size: 2.4rem;

  }



  .header .fa-times{

    transform: rotate(180deg);

  }



  .header .nav-toggle{

    top:5.8rem;

  }



  .home .banner{

    font-size: 4rem;

  }



  .home .slogan{

    font-size: 1.7rem;

  }

.about .row{

  flex-flow: column-reverse;

  padding: 0 2rem;

}

.about .row .image img{

  width: 100vw;

}

.service {

  margin-bottom: 30px;

}

.service .row{

    flex-flow: column-reverse;

  }



  .service .row:nth-child(even){

    flex-flow: column;

  }



  .service .row .image img{

    width: 100vw;



  }



  .service .row .content{

    padding:0;

  }



  .contact .row .content{

    padding:0;

  }

  .contact .row{

    flex-flow:column;

  }

  .contact .row .image img{

    width:100vw;

  }

  .contact .row .form-conatiner{

    width:100%;

  }

  .contact .row .form-container{

    width:100%;

    padding:2rem;

  }

  .footer .box-container .box .company-details{

    margin:0;

  }

  

}



@media (max-width:550px){

  .footer{

    flex-flow: column;

    margin-top: 4rem;

  }

  .footer h1{

    text-align: center;

  }

  .footer .icons{

    padding:2rem 0;

  }

}

/* advertise css */

.header-1{

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding:1rem 2rem;

  top:0; left: 0;

 background: #1bcbfb;

 z-index:100;

}



.header-1 .logo{

  font-size: 2.5rem;

  color:#fff;

}



.header-1 .logo i{

  padding:0 1rem;

}



.header-1 .navbar ul{

  list-style-type: none;

  display: flex;

  align-items: center;

  justify-content: space-around;

}



.header-1 .navbar ul li{

  margin:0 1.5rem;

}



.header-1 .navbar ul li a{

  font-size: 2rem;

  color:#fff;

}



.header-1 .navbar ul li a:hover{

  color:#ccc;

}



.header-1 .fa-bars{

  color:#fff;

  cursor: pointer;

  font-size: 3rem;

  display: none;

}



.contact .row .form-container  input[type="text"]{

    width: 100%;

}

.content-top{

  margin-top: 100px;

  padding: 0 4rem;

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

}

.content-top ul{

  list-style-type: none;

}

.footer{

  margin-top: 0;

}

@media (max-width:768px){



html{

  font-size: 50%;

}



.header-1 .fa-bars{

  display: block;

}



.header-1 .navbar{

  position: fixed;

  top:-120%; left: 0;

  height: auto;

  width: 100%;

  background-color: #fff;

  z-index: 1000;

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

}



.header-1 .navbar ul{

  height: 100%;

  width: 100%;

  flex-flow: column;

}



.header-1 .navbar ul li{

  margin:1rem 0;

}



.header-1 .navbar ul li a{

  color: #444;

  font-size: 2.4rem;

}



.header-1 .fa-times{

  transform: rotate(180deg);

}



.header-1 .nav-toggle{

  top:5.8rem;

}

}

/* ad stats css */

table, th, td {

  font-size: 1.5rem;

  padding: 2rem 3rem !important;

   

 }

 .ad-stats{

     position: relative;

    /* top: 100px; */

    text-align: center;

    font-size: 1.5rem;

    margin: 2rem;

    

   

    

 }

 .ad-stats tr{

  margin-bottom:1rem;

 }

 .ad-stats h1{

     color: #1BCBFB;

     

 }

 

 table {

   text-align: left;

     padding: 4rem;

     background: #ccc;

     width: 50%;

  margin:auto;  

  border-radius: 10px;

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

 }

  .footer{

      margin-top: 140px;

  }



@media (max-width:768px){

img{

 width: 50vw;

}

table, th, td{

 padding: 1rem;

}



}

/* track Ad css */

.track{

  min-height:100vh;

  width:100vw;

text-align:center;



}

.form-conatiner{

  padding: 5rem;

}



.track .row{

display: flex;

justify-content: center;

align-items: center;

  padding: 2rem;

}

.track .row .form-container{

  background: #fff;

  width:50%;

  text-align:left;

  padding:5rem 5rem; 

  box-shadow: 0 1rem 1rem gray;

}

.track .row .form-container  .input input ,select,textarea{

  outline:none; 

  border:none;

  height:4rem;

  background:none;

  border-radius: .5rem;

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

  padding: 0 1rem;

  margin: 1rem 0;

  font-size:1.6rem;

  resize: none;

}

.track .row .form-container  .input{

  margin:1rem 0;

}



.track .row .form-container .inputbox{

  width:100%;

  display:flex;

  justify-content:space-between;

}

.track .row .form-container .inputbox input[type="text"]{

  

  width:100%;

}

.track .row .form-container textarea{

  width: 100%;

}

.track .row .form-container  input[type="password"]{

  width:100%;

}

.track .row .form-container  input[type="text"]{

  width:100%;

}

.track .row .form-container  input[type="email"]{

  width:100%;

}

.track .row .form-container  input[type="file"]{

  width:100%;

  color:#666;

  



 

}

.track .row .form-container  select{

  width:100%;

  color:#666;

}

.track .row .form-container  input[type="submit"]{

  background-color:var(--color);

  color:#fff;

  cursor:pointer;

  height:4rem;

  width:10rem;

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

  border:none;

  border-radius: .5rem;

  margin: 1rem 0;





}







.track .row .form-container  input[type="submit"]:hover{

  opacity:.8;

  

}

@media (max-width:768px){

  .track .row .content{

    padding:0;

  }

  .track .row{

    flex-flow:column;

  }

  .track .row .image img{

    width:100vw;

  }

  .track .row .form-conatiner{

    width:100%;

  }

  .track .row .form-container{

    width:100%;

    padding:2rem;

  }

}