@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');

 /*
 blue:#84CDF2;
 yellow:#f4b144;
 brown:#B6AAA6;
 */
 
 
*, h1, h2, h3, h4, h5, h6, p, ul, ol {
    margin: 0;
    padding: 0;
}

html {
    font-size: 15px;
}

body {
    font-size: 100%;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    color: #222;
    letter-spacing: .5px;
    overflow-x:hidden;
}


a:hover,a:focus{
    text-decoration:none;
}

p{
    font-size:110%;
}

section {
    padding: 70px 0;
}

.p-0 {
    padding: 0;
}

.pb-0 {
    padding-bottom: 0;
}

.pt-0 {
    padding-top: 0;
}

.pb-20{
    padding-bottom:20px;
}

.pt-20{
    padding-top:20px;
}

.big{
    text-transform:uppercase;
}

.text-white{
    color:#fff;
}

hr{
   margin-top:30px; 
}

.blue-hr{ 
    border-top: 2px solid #84CDF2;
}

.std-btn {
    color: #fff;
    font-weight: 700;
    background-color: #222;
    border-color: #222;
    border-style: solid;
    border-radius: 0;
    width: 100%;
    padding: 12px 20px;
    text-align: center;
}


/*page header*/

#page-header-container{ 
    background: #f4b144;
}

.pg-header{
    padding:5em 3em;
    color:#fff;
    text-align:left;
    text-transform:capitalize;
    font-weight:700; 
}

.breadcrumb-section{
    background:#84CDF2;
}

.breadcrumb a , .breadcrumb > li + li:before{
    color:#fff;
}

.breadcrumb {
    margin: 0; 
    background: transparent;
    color:#fff;
    padding-left:3em;
}


/* navbar */

.navbar {
    margin-bottom: 0;
    box-shadow: 0 15px 40px -20px rgba(40, 44, 63, .35); 
    border-radius: 0;
    height:90px; 
    padding: 0 2em;
}

.navbar-nav{
    padding-top:20px;
}

.navbar-nav > li > a {
    font-size: 120%;
    font-weight: 600;
    text-transform: capitalize;
    color: #565b73;
    padding: 10px; 
    border:1px solid transparent;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: transparent;
}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: transparent;
}

.navbar-toggle {
    border-color: transparent;
}

.navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-brand {
    padding: 0;
}

.home-menu .home-active,.about-menu .about-active,.service-menu .service-active,.price-menu .price-active,.contact-menu .contact-active{
    border-bottom:2px solid #84CDF2; 
}


.login-now {
    background: #84CDF2;
    color: #fff !important;
    border-radius: 7px;
}

.login-now:hover{
     color: #84CDF2 !important;
     border-color:#84CDF2;
}

.dnd{
    font-weight:400 !important;
    color:#fff !important;
    border:1px dashed #fff;
    padding:5px;
    border-radius:5px;
}


/*top bar*/ 
.top-bar {
    padding: 1em;
    background: #222;
}

/*.top-bar-list {*/
/*    margin-left: 20px;*/
/*}*/

.top-bar-list{
    color:#fff;
}


.top-bar-list li {
    display: inline;
    margin-right: 20px;
    padding: 1em;
}

.top-bar-list li a {
    color: #fff;
}


.top-bar-list li .fas {
    margin-right: 10px;
}

.top-bar-list-right {
    text-align:right;
}

.top-bar-list-right li {
    color: #bbb;
    font-size: 14px; 
    text-decoration:none;
    line-height: 2em;
    display:inline;
    margin-right:10px; 
}

.top-bar-list-right a{
    color:#fff;
}

.navbar-brand > img {
    padding-top:10px;
    height: 80px;
}

.section-title .title{
    text-transform:capitalize;
}

.section-title .sub-title{
    text-transform:uppercase;
    color:#84CDF2;
    font-weight:600;
    margin-bottom:10px;
}

/*mobile menu*/
    .icon--transparent {
background-color: transparent;
}
.icon--transparent span {
background-color: #ff3000;
}
.icon-transition {
-webkit-transition: -webkit-transform 0.3s;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
 
:focus {
outline: none;
}
.icons {
margin: 0 10px 0 0;
}

.navbar-toggle{
    margin-top:-8px;
}

.icon {
/*background-color: #ff3000;*/
border: 0;
/*height: 49px;*/
/*width: 49px; */
cursor: pointer;
position: relative;
}
.icon span {
display: block;
height: 2px;
width: 33px;
background-color: #000;
border-radius: 2px;
position: absolute;
left: 23px;
-webkit-transition: -webkit-transform 0.3s;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.icon span:first-child {
top: 28px;
}
.icon span:nth-child(2) {
top: 37px;
}
.icon span:last-child {
top: 46px;
}
.icon--active span:first-child {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 37px;
}
.icon--active span:last-child {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: 37px;
}
.icon--active span:nth-child(2) {
opacity: 0;
}

/* //navbar */

/*banner*/

#banner{
    padding:6em 2em 8em 2em;
    background: #f4b144;
}

.banner-div{
    margin-top:30px;
     /*padding:1em 0 0 1em;*/
}

.banner-text-title{
    color: #fff;
    background: #222;
    padding: 10px 15px;
    margin-bottom: 10px;
    display: inline-flex;
    outline: 1px dashed #fff;
    outline-offset: -5px;
} 


.banner-icon-box{
    display: inline-flex;
    margin-bottom:10px;
    margin-top:30px; 
    margin-left:15px;
}

.banner-icon-box .banner-text-icon-title{
    color:#fff; 
    padding-left:15px;
    padding-top:10px;
    text-transform:capitalize;
    font-weight:700;
}

.banner-icon-box-img{
    /*padding:5px;*/
    height:50px;
    width:50px;
     border-radius:100%; 
     background: #222;
}
 
.banner-icon-box img{
     height:50px;  
}

/***** Pulse *****/

.banner-icon-box-img:hover, .service-box:hover .service-icon-box img{ 
  animation: pulse 1s infinite;
  animation-timing-function: linear;   
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1);}
  100% { transform: scale(1); }
  }


.round-shape::before {
    width: 400px;
    height: 400px;
    animation: rev-rotate 24s linear infinite;
}

.round-shape::after {
    width: 600px;
    height: 600px;
    animation: rotate 30s linear infinite;
}


.round-shape::after,.round-shape::before{
    position: absolute;
    top: 50%;
    left: 30%;
    content: "";
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 2px dashed #d7e1f8;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotateZ(0deg)
  }
  to {
    -webkit-transform: rotateZ(360deg)
  }
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotateZ(360deg)
  }
  to {
    -webkit-transform: rotateZ(0deg)
  }
}
@-webkit-keyframes rev-rotate {
  from {
    -webkit-transform: rotateZ(360deg)
  }
  to {
      -webkit-transform: rotateZ(0deg)
    
  }
}
@-webkit-keyframes rev-rotate {
  from {
     -webkit-transform: rotateZ(0deg)
  }
  to {
      -webkit-transform: rotateZ(360deg)
   
  }
}

/*banner bottom*/

.desc{
    text-align:justify;
    color: #71757c;
}

.desc p{
    padding-top:10px;
}

#cloud-container{
    margin-top:-70px;
}


#service-sector{
    display: flex;
    flex-wrap: wrap;
}

.service-sector {
    display: flex;
    margin-top: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:50px 10px;
    text-align: center;
    width: calc(100%/7);
    color:#fff;
    font-weight:600;
    text-transform:uppercase;
}
 
.service-sector .icon{
    margin-bottom:15px;
}

.service-sector .icon img{ 
    height:80px;
    transition:all 1s;
}


.service-sector:hover img{
      transform: rotate(20deg);
}


.bg-y{ 
 background:#f4b144; 
}


.bg-b{
    background:#84CDF2;
}


/*********service section*******/

#services{
    display: flex;
    flex-wrap: wrap; 
}

.service-box{
    border:2px solid #eee;
    padding:1.5em;  
      width: calc(100%/3);
      transition:all 0.8s;
      outline-offset:-10px;
      color: #71757c;
}
 
.service-box:hover{
    border:2px solid #222;
}

.service-box .service-icon-box{
    text-align: center;
}

.service-box .service-icon-box img{
    height:100px;
}
 
.service-box .service-box-content{
    font-size:90%;
     text-align:justify;
}

.service-box .service-box-content h3{
   margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
    background: #f4b144;
    padding: 10px;
    color:#222;
}
 
 /****work***/
 
 .works_box {
    text-align: center;
    padding: 30px 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 #ddd; 
    margin-top: 30px;
    position: relative;
    transition:all 1s
}

.works_box .fas{
    font-size:250%;
    margin-bottom: 15px;
}

.works_box:hover .fas{
    animation: rotate 1s linear;
}

.works_box:hover{ 
     box-shadow: 0 0 20px 0 #777; 
}

.works_box:hover img{
     animation: rotate 1s linear;
}


.works_box .num {
    font-size: 200%;
    position: absolute;
    width: 52px;
    height: 52px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    background:#f4b144; 
    padding:10px;
    right: 0;
    top: 0;
}

.works_box .icon img {
    width: 64px;
    margin-bottom: 15px;
}


.works_box .title{
    color: #4c5b74;
    font-size:120%;
    font-weight:600;
    margin: 1em 0 0.75em;
}


.works_box .desc{
     font-size:100%;
    margin: 0 auto 1.5625em;
    text-align:center;
}

/*counter-section*/

 .counter-section{
     background:#222;
     padding:4em 2em;
     color:#fff; 
 }
 
  .counter-section .counter-box{
      text-align:center;
       padding:2em;
       border-right:1px solid #f4b144;
  }
  
    
 .counter-section .counter-box .number{
     color:#f4b144;
     margin-bottom:15px;
 }
 
 /*client section*/

.client-box {
    border: 2px solid #eee; 
    width: calc(100%/5);
    transition: all 0.8s; 
}

.client-box img{
    filter: grayscale(100%);
    transition: all 0.8s; 
}

.client-box:hover img{
    filter: grayscale(0%);
}

/***********about us*************/

.vision-list {
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-top:20px;
}

.vision-list  img {
    margin: auto;
    height: 60px;
}

.vision-list .why-title{
    text-align:center;
    padding-top:15px;
    text-transform:capitalize;
}

.vision-list  p { 
    padding: 15px 10px 10px 30px;
    margin-bottom: 20px; 
    z-index: 1; 
    text-align:center;
}

/*price*/

.card{
    padding-bottom:25px;
}

.card img{
   width: 20%;
    padding-top: 40px;
    margin: auto;
    padding-bottom: 15px;
}

.card-title{
    text-align:center; 
    font-size:120%;
}

.card table th{
    background:#84CDF2;
    color:#fff;
}

.card ul{
    margin-left:20px;
}


/*******contact us page********/

.contact-form { 
    margin-top: 30px;
    padding: 30px;
    background-color: #fff;
    box-shadow: 0px 10px 60px rgba(0,0,0,.2); 
}

.contact-form .form-control {
    background-color: transparent;
    border-radius: 0;
    border: 1px solid rgba(167,167,167,0.4);
    font-size: 18px;
}

.contact-input-box {
    margin-bottom: 10px;
    margin-top: 10px;
}

.contact-pg-works_box .works_box{
    min-height:257px;
}

.bank-details{
        background: #f4b144;
}

/*thank you page*/

.thank-you-box {
    text-align: center;
    margin: auto;
    background: #eee;
    display: inline-block;
    padding: 3em 2em;
    width: 30%;
    border: 1px dashed #777;
}

/* footer */

footer {
    background: #161c2a;
    color: #fff;
    padding: 2em 2em 0 2em;
}
 
 
.footer-list{
    margin-left: 5px;
    list-style: none;
    font-size: 110%;
    text-align: center;
    padding: 0 0 20px 0;
}

.footer-list li{
    padding-bottom:10px; 
    display:inline;
    padding-right:15px;
}

.footer-list a{
    color:#fff;
}
 
#copyright {
    border-top:1px solid #fff;
}

#copyright p {
    text-align: center;
    padding: 20px 0;
    color: #fff;
}

#copyright a {
    color: #fff;
}


#top {
    position: fixed;
    bottom: 2%;
    right: 2%;
    z-index: 1; 
    display:none;
}

#top img{
    width:50px;
}


/* footer */