@import url('fonts/fonts.css');
@import url('../js/slick/slick.css');


body{font-family:'Gelion', sans-serif;font-weight:400;font-size:22px;line-height:1.8;color:#121212;position:relative;margin:0;padding:0;background:#121212;letter-spacing: 0.020rem;}
html{margin: 0;padding: 0}
h1,h2,h3,h4,h5,h6{font-family:'Kiona', sans-serif; font-weight:bold}

html, body{height: 100%}
* {list-style:none; margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
img{border:none;max-width:100%;padding:0;margin:0;}
input{-moz-transition:all .2s linear;-webkit-transition:all .2s linear; outline:none !important}
a{color:#192335;-moz-transition:all .2s linear;-webkit-transition:all .2s linear;text-decoration:none}
a:hover,
a:focus,
a:active{color:#473bf0;text-decoration:none}
.container{margin: 0 auto; padding: 0 15px; max-width:1220px; width: 100% }
header{position: fixed; left: 0; top: 0; background: #fff; width: 100%; z-index: 9}
header .topinfo{ background: #000000; padding:11px 15px; text-align: center; font-size: 18px; color: #fff; line-height: 1;  font-family:'Gelion Regular', sans-serif; font-style: italic; font-weight: 400}
header .header-wrap{background: #fff; padding: 16px 15px;}
header .container{max-width: 1720px}
header .row{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: center;}
header .header-left{ display: flex; align-content: center; align-items: center; flex-wrap: nowrap; flex-direction: row; width: 39%}
header ul{display: flex; flex-wrap: wrap;}
header ul li{ padding: 0 20px;font-size: 17px; font-weight: 700; color: #010101;letter-spacing: 0.020rem;}
header ul li:first-child{padding-left: 0}
header ul li:last-child{padding-right: 0}
header ul li a{color: #010101; position: relative; padding: 3px 0;}
header ul li a:after{position: absolute; left: 0; bottom: 0; content: ''; width: 0; height:2px; background: #010101;-moz-transition: all .2s linear;-webkit-transition: all .2s linear;}
header ul li a:hover{color: #010101;}
header ul li a:hover:after{width: 100%}
header .leftoggle{padding: 0 60px 0 0}
header .leftoggle a{display: block; height: 30px;}
header .header-middle .middle-logo{display:flex;}
header .header-right{display: flex; align-content: center; align-items: center; flex-wrap: nowrap; flex-direction: row;width: 40%;justify-content: flex-end;}
header .header-right .rightsearch{margin: 0 0 0 55px}
header form{position: relative}
header input[type="text"]{ border-radius: 5px; background-color: rgb(245, 243, 240);  width: 260px; height: 57px; padding:15px 63px 15px 25px; border: 0; outline: none; font-size: 15px; font-family:'Gelion', sans-serif; color: #010101;}
header input[type="submit"]{padding: 0; outline: none;width: 40px; height: 30px;border: 0; border-left: 1px solid #c4c2c0; background: url("../images/icon-search.svg") right 2px no-repeat; background-size: 25px;  font-size: 0; cursor: pointer; position: absolute; right: 15px; top: 15px}

.home-banner{background: url("../images/banner-bg.jpg") center bottom no-repeat; background-size: cover; position: relative; overflow: hidden}
.home-banner .container{max-width:100%; padding: 0 }
.home-banner .row{display: flex;flex-wrap: wrap;align-content: center;justify-content: flex-end;align-items: center; margin:0; position: relative}
.home-banner .leftcaption{width: 50%; float: left; padding: 0 0 0 13%; position: absolute; left: 0; top: 50%; transform: translateY(-65%);margin-top: -10px}
.home-banner h1{font-weight: 700; font-size:80px; color: #fff; line-height: 1; text-transform: uppercase; margin: 0 0 60px 0}
.home-banner h1 span{position: relative; z-index: 1;display: inline-block; margin: 10px 0; padding: 5px 0 0 0}
.home-banner h1 span:after{position: absolute; left: -100%; top: 0; content: ''; z-index: -1; border-radius:0 50px 50px 0; background-color:#262626; width: 208%; height: 99px;}
.home-banner p{color: #fff; font-weight: 500; line-height: 2 }
.home-banner .btnarea{margin: 50px 0 0 0}
.home-banner .btnarea .btn{ background:#fff; font-size: 16px; font-weight: 700; color: #000000; letter-spacing: 0.020rem; display: inline-block; padding: 10px 36px; border: 1px solid transparent}
.home-banner .btnarea .btn:hover{ border-color: #fff; color: #fff; background: #060606}
.home-banner .rightimg{width: 70%; float: left; text-align: center; }
.home-banner .slick-list{margin-bottom: -300px}
.home-banner .slick-arrow{margin: 0; padding: 0; border:0; outline: none !important;width: 42px; height: 42px; border-radius: 50%; background: #fff url("../images/arrow-left.svg") center center  no-repeat; background-size: 12px; font-size: 0; position: absolute; left:15px; top: 43%; transform:translateY(-50%); z-index: 1;-moz-transition: all .2s linear;-webkit-transition: all .2s linear;}
.home-banner .slick-arrow.slick-next {background-image:url("../images/arrow-right.svg"); left: auto; right: 15px}
.home-banner .slick-arrow:hover{background-color:#00b1d1 }

.main-content{padding:30px}
.services{margin-bottom: 30px; position: relative; overflow: hidden}
.services .container{max-width: 100%; padding: 0}
.services .row{display: flex; flex-wrap: wrap; position: relative;justify-content: flex-end;}
.services .left{float: left; width: 100%; position: absolute;left: 0; top: 50%; transform: translateY(-38%);}
.services .right{float: left; width: 60%; padding:110px 0 110px 80px; position: relative; z-index: 1}
.services h2{font-size:70px; color: #121212; line-height: 1.2; text-transform: uppercase; margin: 0 0 40px 0; letter-spacing:-0.20rem}
.services .content-inner{margin: 0 auto; max-width: 490px;}

.services.section-rightimg .row{justify-content: flex-start;}
.services.section-rightimg .left{text-align: right; left: auto; right: 0}
.services.section-rightimg .right{padding-left: 0}
.services.section-rightimg .content-inner{max-width: 550px; position: relative; left:50px}
.services.section-rightimg .content-inner p{max-width: 85%; }

.services1{background: #a79fda;}
.services2{background: #ad6d6d;}
.services3{background: #ff7f5e;}
.services4{background: #91bbd4;}
.services5{background: #77a560;}
.services6{background: #f26767;}
.services7{background: #e080eb;}
.services8{background: #56c3b0;}
.services9{background: #68d8a5;}
.services9.services .right{padding-top: 180px; padding-bottom: 180px}

.services8.services .right,
.services2.services .right,
.services6.services .right{padding-top: 150px; padding-bottom: 150px}

.services5.services .right,
.services7.services .right{padding-top: 150px; padding-bottom: 200px}
.services4.services .right{padding-bottom: 200px}

.services3.services .right {
    padding-bottom: 170px;
    padding-top: 200px;
}

.section-contact h2,
.section-testimonials h2{text-align: center;font-size:70px; color: #fff; line-height: 1.2; text-transform: uppercase; margin: 0 0 60px 0; letter-spacing:-0.20rem}
.section-testimonials{padding: 150px 0 200px 0}
.section-testimonials .boxinner{border: 2px solid transparent; border-bottom: 0; position: relative; margin: 70px 30px 0 30px; padding: 100px 110px 55px 110px; opacity: 0.3;-moz-transition: all .2s linear;-webkit-transition: all .2s linear;}
.section-testimonials .boxinner:after{position: absolute; left: 93px; top: -70px; content: ''; width: 134px; height: 134px; background: #121212 url("../images/quote.png") center center no-repeat; background-size: 42px;-moz-transition: all .2s linear;-webkit-transition: all .2s linear; opacity: 0}
.section-testimonials .boxinner p{font-style: italic; color: #fff; line-height: 1.6; text-align: center; font-weight: 300}
.section-testimonials .boxinner p.author{font-style:normal;  line-height: 1; font-size: 25px; font-weight: 700; margin: 60px 0 0 0}
.section-testimonials .slick-active .boxinner{border-color:#414141; opacity: 1}
.section-testimonials .slick-active .boxinner:after{opacity: 1}
.section-testimonials .slick-arrow{background:url("../images/arrow-left.png") left top no-repeat;width: 38px; height: 11px; position: absolute; left: 23%; bottom:0;display: block; z-index: 1}
.section-testimonials .slick-next.slick-arrow{left:auto; right: 23%;background-image: url("../images/arrow-right.png")}

.section-contact{padding: 80px 0; background: #353535}
.section-contact .container{max-width: 935px}
.section-contact .form-group{margin-bottom: 40px}
.section-contact .form-group input[type="text"]{width: 100%; height: 60px; border: 0; outline: none; border-bottom: 2px solid #fff; font-size: 25px; font-weight: 700;  padding: 0; background: none; color: #a4a4a4;font-family:'Gelion', sans-serif; letter-spacing: 0.020rem;}
.section-contact .form-group input::placeholder { color: #5d5d5d;text-transform: uppercase;}
.section-contact .row{display: flex; flex-wrap: wrap}
.section-contact .left{width: 50%; float: left; padding: 0 40px 0 0}
.section-contact .right{width: 50%; float: left; padding: 0 0 0 40px}
.section-contact .form-btn{text-align: center}
.section-contact .form-btn input[type="submit"]{background: #5d5d5d; width: 251px; height: 62px; border: 0; outline: none; text-transform: uppercase; font-size: 25px; font-weight: 700; color: #fff;font-family:'Gelion', sans-serif;letter-spacing: 0.020rem;}
.section-contact .form-btn input[type="submit"]:hover{background: #fff;  color: #353535; cursor: pointer;}

footer{background: #000; padding: 125px 15px 0 15px}
footer h3{color: #fff; margin: 0 0 25px 0; letter-spacing: 0.040rem; font-size: 19px; text-transform: none;font-family:'Gelion', sans-serif; line-height: 1;}
footer .row{display: flex; flex-wrap: wrap}
footer .footer-col1{float: left; width: 42%;}
footer .footer-col1 .footer-logo{margin-bottom: 40px}
footer .footer-col1 p{color: #808080; font-size: 14px; line-height: 1.7; max-width: 350px}
footer .footer-col2{float: left; width: 18%;}
footer .footer-col2 ul li{font-family: 'Myriad Pro';}
footer .footer-col2 ul li a{font-size: 17px; color: #cbcbcb;}
footer .footer-col2 ul li a:hover{color:#808080}
footer .footer-col3{float: left; width: 28%; color: #cbcbcb; font-size: 16px; line-height: 1.3}
footer .footer-col3 span{display: block; font-size: 15px; color: #787e7e}
footer .footer-col3 p{margin-bottom: 20px}
footer .footer-col3 .footer-phone{font-size: 22px; color: #fff; font-family: 'Myriad Pro';}
footer .footer-col3 .footer-phone a{color: #fff; font-weight: 600}
footer .footer-col3 .footer-phone a:hover{color: #cbcbcb;}
footer .footer-col3 .footer-email{font-size: 18px; color: #fff; font-family: 'Myriad Pro';}
footer .footer-col3 .footer-email a{color: #fff; text-decoration: underline}
footer .footer-col3 .footer-email a:hover{color: #fff; text-decoration: none}
footer .footer-col4{width: 12%; float: left}
footer .footer-col4 .footer-social{width: 130px}
footer .footer-col4 .footer-social li{ float: left; width: 50%; margin-bottom: 8px}
footer .footer-col4 .footer-social li a{ display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; color: #000000; border-radius: 50%; background-color: rgb(255, 255, 255); width: 57px; height: 57px;}
footer .footer-col4 .footer-social li a:hover{background: #5d5d5d}
footer .footer-col4 .footer-social li img{width: 23px; object-fit: contain}
footer .footer-col4 .footer-social li.fb img{width: 12px}
footer .footer-col4 .footer-social li a:hover img{ filter: brightness(0) invert(1);}
footer .footer-copy{margin: 120px 0 0 0}
footer .footer-copy .container{border-top: 1px solid #242424; padding:55px 15px; text-align: center; font-size: 19px; color:#727878}
footer .footer-copy .container strong{color: #fff}

@media only screen and (max-width:1800px){
    .home-banner h1{font-size: 70px}
    .home-banner h1 span:after{height: 89px}
    .services h2{font-size: 60px}
    
    .home-banner .slick-list {
    margin-bottom: -240px;
}
    header .header-middle .middle-logo img{max-width: 250px}
}

@media only screen and (max-width:1699px){
    .section-testimonials .slick-arrow{left: 20%}
    .section-testimonials .slick-next.slick-arrow{right: 20%}
    .services .left{width: 80%}
}

@media only screen and (max-width:1440px){
    .home-banner h1 {
        font-size: 60px;
    }
    .home-banner h1{margin-bottom: 40px}
        .home-banner h1 span:after {
        height: 79px;
    }
    .home-banner .btnarea {
    margin: 35px 0 0 0;
}
        .services h2 {
        font-size: 54px; margin-bottom: 30px;
    }
        .services.services6 .left,
    .services.services4 .left,
    .services.services2 .left,
    .services.services8 .left{ width: 70%;}
    .section-testimonials .slick-arrow {
        left: 16%;
    }
    .section-testimonials .slick-next.slick-arrow{right: 16%}
    footer .footer-copy {
    margin: 80px 0 0 0;
}
    footer{padding-top: 100px}
    footer .footer-copy .container{padding: 35px 15px}
    .section-testimonials {
    padding: 100px 0 150px 0;
}
    body{font-size: 20px; line-height: 1.6}
    
}

@media only screen and (max-width:1360px){
    
    header .header-right .rightsearch {
    margin: 0 0 0 25px;
    }
    header ul li {
    padding: 0 10px;
        font-size: 16px;}
    .home-banner .leftcaption{padding-left: 9%}
    .home-banner h1{font-size: 54px}
/*    .home-banner .leftcaption{transform: translateY(-30%);}*/
        .home-banner h1 {
        margin-bottom: 30px;
    }
    .home-banner h1 span:after {
        height: 69px;
    }
    .home-banner p {
     
    line-height: 1.5;
}
    .home-banner .btnarea {
        margin: 20px 0 0 0;
    }
    
    
}



@media only screen and (max-width:1200px){
    header .header-middle{width: 10%; text-align: center;}
    header .header-right .rightsearch input[type="text"]{width: 200px;}
    header ul li{padding: 0 5px}
}
.mobile-toggle{display: none}
@media only screen and (max-width:767px){
    
    header .header-left ul{display: none}
    header .header-right{display: none}
    
    footer .footer-col1{width: 100%; margin-bottom: 20px}
    footer .footer-col2{width: 100%; margin-bottom: 20px}
    footer .footer-col3{width: 100%; margin-bottom: 20px}
    footer h3{margin-bottom: 15px}
    footer .footer-col4{width: 100%}
    
    .section-contact h2, .section-testimonials h2{font-size: 40px; margin-bottom: 20px}
        .section-testimonials {
        padding: 0px 0 50px 0;
    }
    .section-testimonials .boxinner{padding: 60px 15px 45px 15px; margin: 30px 5px 0 5px}
    .section-testimonials .boxinner p.author {
    font-size: 22px;
    margin: 20px 0 0 0;
}
    .section-testimonials .boxinner p {line-height: 1.4;}
    body{font-size: 18px;line-height: 1.5;}
        footer {
        padding-top: 50px;
    }
    footer .footer-col1 .footer-logo {
    margin-bottom: 20px;
}
    footer .footer-col4 .footer-social{width: 100%}
    footer .footer-col4 .footer-social li{width:auto; margin-right: 5px}
    footer .footer-col4 .footer-social li a{width: 40px; height: 40px;}
        footer .footer-copy {
        margin: 30px 0 0 0;
    }
        footer .footer-copy .container {
        padding: 20px 15px;
    }
    .section-contact {
        padding: 50px 15px;}
    .section-contact .form-group input[type="text"]{height: 50px;font-size: 18px;}
    .section-contact .left{padding-right: 10px}
    .section-contact .right{padding-left: 10px}
    .section-contact .form-group {
    margin-bottom: 20px;
}
    .section-contact .form-btn input[type="submit"] {
    width: 210px;
    height: 57px;
    
        font-size: 22px;}
    .main-content {
    padding: 15px;
}
    .services{margin-bottom: 15px}
        .services.services6 .left, .services.services4 .left, .services.services2 .left, .services.services8 .left {
        width: 100%;
    }
    .services .right{width: 100%; padding: 10px 30px 30px 30px !important}
    .services.section-rightimg .content-inner{max-width: 100%; left:0;}
    .services.section-rightimg .content-inner p{max-width: 100%}
    .services .left{width: 100%; position: static; transform: none; padding: 30px 0 0 0}
     .services h2 { letter-spacing: -0.10rem; line-height: 1;
        font-size: 40px;
        margin-bottom: 15px;
    }   
    .services .left img{max-width: 140%}
    .services.services8 .left img,
    .services.services4 .left img,
    .services.services2 .left img,
    .services.services6 .left img{max-width: 100%}
    .home-banner .leftcaption{position: relative; transform: none;width: 100%}
        .home-banner h1 {
        font-size: 40px;
    }
    .home-banner p br{display: none}
    .home-banner .row{margin: 0}
    .home-banner .rightimg{width: 100%; margin: -50px 0 -130px 0}
    header .header-middle {
        width: 140px;}
    
    .home-banner .rightimg img{max-width: 120%; margin: 0 0 0 -70px}
    header .leftoggle{padding: 0}
    header .leftoggle img{width: 28px}
    header .topinfo { padding: 10px 15px; font-size: 14px;}
    .home-banner .leftcaption{text-align: center; padding: 0 15px}
    .home-banner h1 span:after {height: 59px;top: -1px;}
    body{padding-top:150px}
    
    .mobile-toggle.open{display: block}
    .mobile-toggle.open  ul{display:block;position: absolute;
    left: 0;
    top: 110px;
    background: #fff;
    width: 100%;
    padding: 25px 15px 15px 15px;}
    .mobile-toggle.open  ul li{padding:0 0 5px 0; text-align: center}
    .mobile-toggle.open  ul li:last-child{padding-bottom:0}
    
    header input[type="text"]{width: 100%; height: 50px}
    header form{margin-top: 10px}
    header input[type="submit"]{right: 10px;
    top: 11px;}
    .services h2 br{display: none}
    
    .home-banner .slick-arrow{width: 32px; background-size: 9px;
    height: 32px;}
    .home-banner .slick-list{margin: 0}
        header .header-middle .middle-logo img {
        max-width: 100%;
    }

}

.white{ color:#fff;}
.blink { animation: blinker 1s step-start infinite; }

@keyframes blinker { 50% { opacity: 0; }
}

#frmContact .error{ border-bottom: 2px solid #af4e4e}

.wpbtn{
    position: fixed;
    right: 15px;
    top:7%;
    /*bottom: calc(40% - 160px);*/
    z-index: 1000;
}

@media only screen and (max-width:767px){
 
    .wpbtn{transform: scale(0.6);
    
    right: -5px;
    top:8%;
    
}

    
}