.banner-area{z-index:1;position:relative;min-height:74vh;background-position:center;background-size:cover;}
.banner-content h1{font-size:54px;margin-bottom:20px;line-height:1.2;font-weight:600;text-transform:uppercase;}
.banner-content p{margin-bottom:30px;max-width:700px;color:var(--whiteColor);opacity:.9}
@media only screen and (min-width:1300px) and (max-width:1350px) {
.banner-content h1{font-size:44px}
}
@media only screen and (min-width:1200px) and (max-width:1299px) {
.banner-content h1{font-size:40px}
}
@media only screen and (min-width:992px) and (max-width:1199px) {
.banner-content h1{font-size:36px}
}
@media only screen and (min-width:768px) and (max-width:991px) {
.banner-area{overflow:hidden;min-height:60vh;}
.banner-content{margin-bottom:30px}
.banner-content h1{font-size:28px;margin-bottom:15px}
.banner-content p{margin-bottom:20px}
}
@media only screen and (max-width:767px) {
/* .banner-area{min-height:auto;background-size:100% auto;;background-repeat: no-repeat;background-position:top right;padding-top:50%;} */
.banner-area{overflow:hidden;min-height:50vh;padding:60px 0 0;background-position: right;}
.banner-content{margin-bottom:10px;text-align:center;background:rgba(255,255,255,.8);padding:15px 0 0;}
.banner-content h1{font-size:28px;margin-bottom:15px}
.banner-content p{margin-bottom:20px}
.banner-content .banner-counter h3{font-size:20px}
}
@media only screen and (max-width:575px) {
.banner-content h1{font-size:26px;margin-bottom:15px}
.banner-content p{margin-bottom:10px}   
}

#container{width:200px;height:200px;position:absolute;z-index:4;color:#fff;right:20px;top:0;}
#circle{position:relative;width:100%;padding-bottom:100%;overflow:hidden}
#circle text{font-size:22px;font-weight:500;text-transform: uppercase;background:rgba(255, 255, 255, 0.2)}
#circle svg{position:absolute;left:0;top:0;width:100%;height:100%;-webkit-animation-name:rotate;-moz-animation-name:rotate;-ms-animation-name:rotate;-o-animation-name:rotate;animation-name:rotate;-webkit-animation-duration:10s;-moz-animation-duration:10s;-ms-animation-duration:10s;-o-animation-duration:10s;animation-duration:10s;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-timing-function:linear;-ms-animation-timing-function:linear;-o-animation-timing-function:linear;animation-timing-function:linear}
@-webkit-keyframes rotate {
from{-webkit-transform:rotate(360deg);fill:#1ab69d;}
to{-webkit-transform:rotate(0);fill:#16a08c;}
}
@-moz-keyframes rotate {
from{-moz-transform:rotate(360deg);}
to{-moz-transform:rotate(0);}
}
@-ms-keyframes rotate {
from{-ms-transform:rotate(360deg);fill:#1ab69d;}
to{-ms-transform:rotate(0);fill:#16a08c;}
}
@-o-keyframes rotate {
from{-o-transform:rotate(360deg);fill:#1ab69d;}
to{-o-transform:rotate(0);fill:#16a08c;}
}
@keyframes rotate {
from{transform:rotate(360deg);fill:#1ab69d;}
to{transform:rotate(0);fill:#16a08c;}
}
#circle svg text{-webkit-animation-name:clchange;-moz-animation-name:clchange;-ms-animation-name:clchange;-o-animation-name:clchange;animation-name:clchange;-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-timing-function:linear;-ms-animation-timing-function:linear;-o-animation-timing-function:linear;animation-timing-function:linear}
@-webkit-keyframes clchange {
0%{fill:#1ab69d;}
30%{fill:#16a08c;}
60%{fill:#1ab69d;}
90%{fill:#16a08c;}
}
@-moz-keyframes clchange {
0%{fill:#1ab69d;}
30%{fill:#16a08c;}
60%{fill:#1ab69d;}
90%{fill:#16a08c;}
}
@-ms-keyframes clchange {
0%{fill:#1ab69d;}
30%{fill:#16a08c;}
60%{fill:#1ab69d;}
90%{fill:#16a08c;}
}
@-o-keyframes clchange {
0%{fill:#1ab69d;}
30%{fill:#16a08c;}
60%{fill:#1ab69d;}
90%{fill:#16a08c;}
}
@keyframes clchange {
0%{fill:#1ab69d;}
30%{fill:#16a08c;}
60%{fill:#1ab69d;}
90%{fill:#16a08c;}
}
.features-box{background-color: transparent;box-shadow: none;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;padding:30px 15px 30px 40px;text-align: left;border-right: 1px solid rgba(255,255,255,.15);}
.features-box:first-child{padding-left:15px;}
.features-box .content{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}
.features-box .content .title{margin-bottom:12px;color:#fff;}
.features-box .content .title span{display:block;}
.features-box .icon{height:80px;width:80px;border-radius:50%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:32px;margin:0 auto 28px;-webkit-transition:var(--transition);transition:var(--transition);margin:0 15px 0 0;background-color: rgba(255,255,255,.1);color: var(--color-white);}
@media(max-width:767px){
    .features-box{flex-flow:column;text-align: center;padding:10px;}
    .features-box .title{font-size:18px;}
}