/* @import url('https://fonts.googleapis.com/css?family=Lexend:300,400,500,600,700'); */
/* @import url('https://fonts.googleapis.com/css?family=Nata+Sans:wght@100..900'); */
@import url('https://fonts.googleapis.com/css?family=Quicksand:wght@300..700');
@font-face {
    font-family: 'icons';
    src: url('icons.ttf') format('truetype')
}

*{margin:0;box-sizing: border-box}
body{font-family: 'Quicksand', sans-serif}

header{z-index: 9000;position: relative}

.flex{display: flex;justify-content: space-between}
.c{margin: 0 auto;width:1200px}
.cc{margin: 0 auto;width:900px}

.head .c{padding: 10px 5px}
.head .char .icon{display: inline-block;font-size: 1.1em;}
.head .icon{margin-right: 5px}
.head p{font-weight: 300;padding: 0 20px;margin-right: 15px;font-size: .9em}

.logo{height: 65px}

header nav ul{display: flex;justify-content: start;position: relative;padding:0;background-color: var(--cl1);}
header nav ul li a{padding: 15px;display: inline-block;font-size: 1em;font-weight: 600; color: var(--cl2);}
header nav ul li a:hover{color: var(--cl4);}
header nav ul li a .icon2{font-size: .75em;transform: rotate(90deg);display: inline-block;font-weight: 900;margin-left: 5px}
header nav ul ul{position: absolute;top: 100%;padding: 15px 0;display: none}
header nav ul li:hover ul{display: block}

.caroussel{height: 700px;overflow: hidden;z-index: 6000;position: relative}
.caroussel .slider{transition: 0.4s ease;display: flex}
.caroussel .child{position:relative;display: flex;justify-content:center;flex-wrap: wrap}
.caroussel .child img{position:absolute;width:100%;height:100%;object-fit: cover}
.caroussel .child div{position:relative;margin: 100px auto;width: 70%;color: #fff;}
.caroussel .child span{font-size: 3.8em;font-weight:bold;text-shadow: 0 0 3px rgba(0,0,0,0.2), 1px 1px 2px rgba(0,0,0,0.2);margin-bottom: 20px;display: block}
.caroussel .child p{display:block;font-size: 1.2em;font-weight:bold;text-shadow: 0 0 3px rgba(0,0,0,0.2), 1px 1px 2px rgba(0,0,0,0.2)}
.caroussel .child a{display: inline-block;padding: 20px 30px;position: relative;top: 30px;}

.masq{background-color: rgba(0,0,0,.6);position: absolute;width: 100%;top: 0;left:0;bottom: 0;display: flex;flex-direction: column;justify-content: center;}

/* .masq::after{content: "";height: 10px;width: 300px;background-color: #ff7d19;display: block;position: absolute;bottom: 0;left: -45px;transform: skewX(60deg)}
.masq::before{content: "";height: 10px;width: 150px;background-color: #ff7d19;display: block;position: absolute;top: 0;right: -25px;transform: skewX(60deg)} */

.caroussel .btn.icon{display:none;position: absolute;top: 45%;cursor: pointer;transition: 0.3s ease;padding: 10px;box-shadow: none;background-color: transparent;text-align: center;font-size: 1.5em}
.caroussel:hover .btn.icon{display: block}
.caroussel .btn#nx{right: 20px}
.caroussel .btn#pv{transform: rotate(180deg);left: 20px}

.btn{padding: 15px 30px;display: inline-block;text-transform: uppercase; font-size:.9em; border-radius: 15px;}
.btn:hover{box-shadow: 0 0 3px rgba(0,0,0,0.1)}

.c1 .c .imgs{position:relative}
.c1 .c .imgs .img1{height:500px;object-fit:cover; border-radius: 30px;}
.c1 .c .imgs .img2{position: absolute;bottom:-100px; right:0;}
.c1 .c .imgs .img2 img{height: 300px;object-fit:cover; border-radius: 30px}
.c1 .c .imgs .note{position: absolute;top:-30px;left:0;width: 220px;height: 220px;border-radius: 50%;}
.c1 .c .imgs .note img{width: 65%;}

.col-3-all{width: 30%;}
.col-5-all{width: 50%;}
.col-7-all{width: 70%;}

.c2, .infos, .contact{background-size: cover;background-position: center;background-repeat: no-repeat}
.c2 .box{position:relative;overflow: hidden;padding:30px;box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;padding: 0;border-radius: 20px;}
.c2 .box .img img{height: 250px; object-fit: cover}
.c2 .box .img::before{content: "";height: 150px;width: 10px;background-color: var(--cl4);display: block;position: absolute;top: 0;right: 0;transform: skewX(60deg)}
.c2 .box .img::after{content: "";height: 180px;width: 5px;background-color: var(--cl4);display: block;position: absolute;top: 0;right: 0;transform: skewX(60deg)}

.c3{margin-bottom: 80px;}

.c4{position: relative;height:300px;}
.c4 img, .c4 .bg3{position: absolute;}
.c4 img{left: 100px;height:400px;object-fit: cover;border-radius: 30px;}
.c4 span{font-weight: 700}

.services .serv .service{justify-content: space-between;align-items: center;}
.services .serv:nth-child(2n) .service{flex-direction: row-reverse}
.services .serv .cnt{padding: 50px}
.services .serv .title{display:block;font-size: 2em;margin-bottom: 40px;font-weight: 700}
.services .serv img{max-height: 400px;object-fit: cover;border-radius: 30px;}

.services .serv{position: relative;overflow: hidden;border-radius: 3px;margin-bottom: 8px;}
.services .serv .service::before{content: "";height: 3px;width: 300px;background-color: var(--cl4);display: block;position: absolute;top: 0;right: 0;border-radius: 5px;; }
.services .serv .service::after{content: "";height: 150px;width: 3px;background-color: var(--cl4);display: block;position: absolute;top: 0;right: 0;border-radius: 5px;}
.services .serv:nth-child(2n) .service::before{bottom: 0; top: auto;left:0;right:auto}
.services .serv:nth-child(2n) .service::after{bottom: 0;top: auto;left:0;right:auto}

.page .first{width: 100%;max-height: 470px;object-fit: cover}
.more-img img{width:100%;height: 180px;object-fit: cover;cursor: pointer; border-radius: 20px;margin-bottom: 10px;}
.more-img img:hover{opacity: 1;}
.more_services a{display: block;margin-top: 10px; font-size: 1.2em;}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6{margin-bottom: 15px;margin-top: 25px}
.content p{margin-bottom: 15px}
.content li{margin-bottom: 10px}

.content table{margin:30px 0;color:var(--cl1);background-image: linear-gradient(160deg, var(--cl2) 40%, var(--cl3));border-collapse: collapse; border:0; border-radius: 20px;}
.content tr:first-child th{background: rgba(255,255,255,.4)}
.content tr th{background: rgba(255,255,255,.3)}
.content th{padding: 20px 15px;text-align: left;font-weight: 700;font-size: 12px;text-transform: uppercase; }
.content td{padding: 15px;text-align: left;vertical-align:middle;font-weight: 300;font-size: .9em;border-bottom: solid 1px rgba(255,255,255,0.1)!important;}

.infos.inservice{border-radius: 30px;overflow: hidden;}
.infos.inservice div{height: 400px;display: flex;flex-direction: column;justify-content: flex-end;padding: 40px;}
.infos.inservice h1{width: 50%;text-align: start; margin: 0;}
.infos div{background-color: rgba(0,0,0,.5)}

.contact-form{box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;border-radius: 20px;}

footer{color: #b5b5b8;font-size: .9em;padding-top: 50px;}
footer .title{font-size: 1em; font-weight: 600;text-transform: uppercase;display:block;margin-bottom: 15px}
footer a{display: block;margin-bottom: 8px;color: #b5b5b8}
footer .info p{margin-bottom: 8px}
footer .facebook{color: #4267B2}
footer .twitter{color: #1DA1F2}
footer .instagram{color: #e95950}
footer .kiuper{color: #6F9C00}

.contact p{margin-bottom: 10px;}

.gla-pagination a,.gla-pagination .btn{padding: 8px 15px;margin-right: 5px}
.gla-pagination{text-align: right}

.more-articles{position: relative;}
.more-articles .article{margin-right: 10px;width: 100%;}
.more-articles h2{margin: 30px 0 15px 0}

.car-slide{overflow: hidden;margin: 40px 0;position: relative;}
.car-slide .slide{display: flex;justify-content: flex-start;transition: 0.1s linear;padding: 0 20px;}
.car-slide .article{margin-right: 20px}
.btn.sld{position: absolute;top: 50%;padding:12px 15px;text-align: center;}
.btn.sld#nx{right: 0;cursor: pointer}
.btn.sld#pr{transform: rotate(180deg)}


.gla-form input,.gla-form textarea,.gla-form select{padding: 15px;border-radius: 10px;}
.gla-form input[type=text],.gla-form input[type=email], .gla-form textarea,.gla-form select{width: 100%;margin-bottom: 20px;border:none}
.gla-form input[type=submit]{width: auto;border: none;float: right;margin-top: 15px;}
.gla-form textarea{height: 130px}
.gla-cptch input{width: 60px !important;}

.gla-form label{margin: 10px 20px;font-weight: bold;display: block}

.mask{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.4);display: flex;align-items: center;justify-content: center;padding:20px;z-index: 9999}
.mask img{max-width: 100%;max-height: 100%;background: rgba(255,255,255,0.5);border-radius:3px;box-shadow: 0 0 6px #444;transition: 0.14s linear}
.mask .exit, .mask .btn{position: absolute;text-align: center;line-height: 40px;font-size: 2em;cursor: pointer;opacity: 0.7;padding: 10px 20px}
.mask .exit{right: 10px;top: 10px !important;border-radius: 50px;color: #fff}
.mask .btn{top: 48%;transition: 0.14s linear;background: transparent;color: #fff;vertical-align: middle}
.mask .btn:hover, .mask .exit:hover{border: 1px solid #fff}
.mask .btn-next{right: 20px;}
.mask .btn-prev{left: 20px}
.mask .btn-next:hover,.mask .btn-prev:hover,.mask .exit:hover{opacity: 1}

.succes, .error{display:block;margin: 20px 0;padding:10px;}
.succes{background: rgba(0,255,0,0.2);color: rgba(0,200,0,0.9)}
.error{background: rgba(255,0,0,0.3);color: rgba(255,0,0,0.9)}

.rem{font-size: 0.9em !important;color: #666;font-style: italic}
a{text-decoration: none;}
footer li,header li,.contact li{list-style: none;margin-left: 0}

span.menu-res{display: none;width: 50px;height: 50px;font-size:2.2em;text-align:center;margin-right: 20px;margin-top: 35px;cursor: pointer}

.icon{font-family: 'icons' !important;line-height: 1;vertical-align: middle}