@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..400;1,100..900');

@font-face {
    font-family: 'icons';
    src: url('icons.ttf') format('truetype')
}


*{margin:0;box-sizing: border-box}
body{font-family: 'Roboto Condensed', sans-serif;font-weight: 300;}

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

.logo{height: 80px;display: block;}
.logo-big{height: 70px;display: block;}
.logo img, .logo-big img{height: 100%;}

header{z-index: 9000;position: fixed;left: 0;right: 0;top:0;background-color: var(--cl5);border-bottom: 1px solid var(--cl7);}

header nav .c{position: relative}
header nav ul{display: flex;justify-content: flex-start;position: relative;padding: 0}
header nav ul li{text-align: center;}
header nav ul li a{padding: 10px 30px;display: inline-block;text-transform: uppercase;font-size: .9em;font-weight: 500;position: relative}
header nav ul li a::after{content: ' ';width: 80%;height: 7px;border-radius: 4px;background-color: var(--cl3-light);position: absolute;bottom: -6px;left: 10%;}
header nav ul li a:hover::after{background-color: var(--cl3)}
header nav ul li a .icon{font-size: .8em;transform: rotate(90deg);display: inline-block}
/* header nav ul li a:first-child{padding-left: 0} */
header nav ul ul{position: absolute;top: 100%;padding: 15px;display: none;min-width: 200px;}
header nav ul ul a{padding: 8px 25px;}
header nav ul li:hover ul{display: block}
header nav .card{position: absolute;right: 0;top: 13px;font-size: .8em;text-transform: uppercase;}
header nav .card:after{display: block;content: "";height: 1px;}

header nav li a{color: var(--cl2)}
header nav li a:hover{color: var(--cl3)}
header nav ul ul{background-color:var(--cl2)}
header nav ul ul a{color:var(--cl1)}
header nav ul ul a:hover{color:var(--cl3)}

.caroussel{width: 100%;height: 850;z-index: 6000;position: relative;overflow: hidden;}
.caroussel .child{margin: 0!important}
.caroussel .child img, .caroussel video{width:100%;height:850px;object-fit: cover;object-position: center center;}
.caroussel .seeMore{ display:grid;grid-template-columns: repeat(2, calc( 50% ) [col-start]); position: absolute;bottom: 60px;left: 8%;width: 45%;}
.caroussel .seeMore div{ background-size: cover;}

.masq{padding: 40px;padding-top: 130px;background-color: var(--cl6);}

.btn{padding: 15px 25px;cursor: pointer;text-transform: capitalize;display: inline-block;}
.btn2{padding: 15px 25px;cursor: pointer;text-transform: capitalize;border-width: 1px; border-style: solid;background-color: 'transparent';display: inline-block;}

.service{height: 600px;position: relative;}
.service img{width: 100%;height: 600px;object-fit: cover;}
.service .cnt{position: absolute;height: 600px;bottom: 0;width: 100%; padding: 15px; display: flex;flex-direction: column;justify-content: flex-end;background: linear-gradient(180deg, rgba(0,0,0,0),rgba(0,0,0,.5));}
.service .cnt div{height:15%;width: 100%; padding: 15px; display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-start;transition: .6s ease;}
.service:hover .cnt div{height:100%;background-color: var(--cl3);justify-content: center}
.service .title{font-size: 2.5em;color: var(--cl1);width: 60%;}
.service p{font-size: 1.5em;color: var(--cl1);margin: 20px 0;font-weight: 200;display: none;transition: .8s ease;}
.service:hover p{display: block;}
.service .btn2{font-size: 1.3em;font-weight: 500;border-color: var(--cl1);color: var(--cl1);display: flex;align-items: center;width: auto;display: none;transition: 1s ease;}
.service:hover .btn2{display: inline-block;}
.service .btn2:hover{border-color: var(--cl3);color: var(--cl3);background-color: var(--cl1);}
.service .btn2 .icon{text-transform: lowercase;margin-left: 20px;line-height: 1.3em;}

.c2 .c .img{width: 60px;height: 60px;border-radius: 45px;background-color: var(--cl5);padding: 10px;margin-bottom: 10px;}
.c2 .c img{width: 100%;height: 100%;object-fit: cover;}
.c2 .c span:not(.last){display: block;font-size: 1.3em;color: var(--cl1);font-weight: 400;margin-bottom: 15px;}
.c2 .c p{font-size: 1.1em;color: var(--cl2);}

.c3 video{width: 60%;height: 500px;object-fit: cover;}

.realisation{position: relative;height: 650px;}
.realisation img{width: 100%;height: 100%;object-fit: cover;}
.realisation .cnt{position: absolute;bottom: 20px;left: 20px;width: 30%;background-color: var(--cl3);padding: 20px;}
.realisation .cnt .title{color: var(--cl2);font-size: 1.3em;font-weight: 400;display: block;margin-bottom: 15px;}
.realisation .cnt .adr{color: var(--cl1);font-size: 1.3em;}
.realisation .cnt .adr .icon{margin-right: 8px;}

.c5{background-size: cover;background-position: center;}
.c5 >div{background: linear-gradient(180deg, rgba(255,255,255,.8),var(--cl6))}

table{border-collapse: collapse;border-radius: 8px;overflow: auto}
table{margin:30px 0;color:#111214;border-collapse: collapse; border:0}
table{border-spacing: 1;border-collapse: collapse; background:white;border-radius:6px;max-width:1200px; width:100%;margin:0 auto;border: 1px solid #40bd6e40;}
table tr{border-bottom:1px solid #40bd6e40!important}
table th{width:20%!important; padding: 15px;background-color: #40bd6e40!important;font-weight: 700;font-size: 1.1em;text-transform: uppercase; }
table td{padding: 15px;text-align: left;vertical-align:middle;font-weight: 300;font-size: .9em;}

.more-img img{width:100%;height: 330px;object-fit: cover;cursor: pointer; transition: 2s ease;}
.more-img img:hover{transform: scale(110%);}
.more_services a{display: block;margin-top: 10px; font-size: 1.2em;}

.content{color: var(--cl2); font-size: 1.2em;}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6{color: var(--cl3);margin-bottom: 20px;}
.content h2{font-size: 2.5em;}
.content h3{font-size: 2em;}
.content li{margin-bottom: 10px}
.content img{width: 100%;min-height: 400px;object-fit: contain;}
.image-p{width: 100%;height: 160px;object-fit: cover;transition: 0.2s ease;cursor: pointer;}
.image-p:hover{transform: scale(1.1);}

.infos{background-color: var(--cl3-light);background-size: cover;background-position: center;}

aside ul{padding: 0;}
aside ul li{list-style: none;font-weight: 500;}

footer{background-color: var(--cl5)}
footer ul { padding: 0; display: flex; flex-wrap: wrap; margin-right: 15px;}
footer ul li{margin-right: 15px; padding: 5px 0;}
footer ul li a{font-size: 1.3em;color: var(--cl2);}
footer ul li:hover a{color: var(--cl3);}
footer ul li ul{display: none;}

.social{display: flex;flex-wrap: wrap;}
.social .icon{font-size: 1.5em;color: var(--cl3);margin-right: 15px;padding: 5px;border:none;border-left: 1px solid var(--cl3);border-top: 1px solid var(--cl3);border-radius: 8px 0 0 0}
.social .icon:hover{color: var(--cl1);background-color: var(--cl3);}

.facebook{background-color: #4267B2}
.twitter{background-color: #1DA1F2}
.instagram{background-color: #e95950}
.kiuper{background-color: #6F9C00}

.contact p{margin-bottom: 10px;}
.contact-img {height: 650px;width: 100%;}
.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:not([type=submit]),.gla-form textarea,.gla-form select{padding: 10px; }
.gla-form input[type=text],.gla-form input[type=email], .gla-form textarea,.gla-form select{outline: none;width: 100%;color: var(--cl3);font-family: 'Questrial', sans-serif;font-size: 1em;margin-bottom: 35px;border: 1px solid var(--cl3-light); }
.gla-form input[type=submit]{width: auto;margin-top: 15px;border: none;font-size: 1.2em;cursor: pointer;padding: 10px}
.gla-form textarea{height: 130px}
.gla-form input::placeholder, .gla-form textarea::placeholder{color: var(--cl3);}
.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;font-size: 2em;cursor: pointer;opacity: 0.7;padding: 10px 10px; border-radius: 50%;}
.mask .exit{right: 10px;top: 10px !important;background-color: white; color: var(--cl3);}
.mask .btn{top: 48%;transition: 0.14s linear;background: transparent;vertical-align: middle; background-color: white; color: var(--cl3);text-transform: lowercase;}
.mask .btn:hover, .mask .exit:hover{border: 1px solid var(--cl3); background-color: var(--cl3);color: white;}
.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}


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

.page h1, .page h2, .page h3{margin: 15px 0 10px !important;font-weight: 400;}
.page p{margin-bottom: 10px !important;}


/* GLA Slider ---------- */

.gla_slider{position: relative;overflow: hidden;padding: 30px 0;}
.gla_slider .gla_slider_slider{width:100%;display: flex;transition: 0.4s ease;flex-wrap: nowrap}

.gla_slider .slider_btn{position: absolute;color:var(--cl2);top:0;padding: 5px 0;cursor: pointer;transition: 0.2s ease;font-size: 1.5em;}
.gla_slider .slider_btn:hover{opacity: 1;}
.gla_slider .next_btn{right: 5px;left: auto;}
.gla_slider .previos_btn{left: auto; right: 40px;}

.caroussel .gla_slider{padding: 0;}
.caroussel .gla_slider .slider_btn{top: auto; bottom: 10px;z-index: 9999}


/* GLA Alert ---------- */

.mask{display: flex;align-items: center;justify-content: center;}

.gla_alert{width: 400px;background: #fff;box-shadow: 0 0 20px rgba(0,0,0,0.3);}
.gla_alert p{padding: 20px;}
.gla_alert .gla_btns{padding: 10px;background: rgba(0,0,0,0.04);border-top: 1px solid rgba(0,0,0,0.1);display: flex;justify-content: flex-end;}
.gla_alert .gla_btns span{margin-right: 20px;font-weight: bold;text-transform: uppercase;cursor: pointer;}


/* GLA Captcha ---------- */

.gla_captcha{background: #eee;border:1px solid rgb(223, 222, 222);border-radius: 8px;padding: 10px;}
.gla_captcha h3{font-weight: normal;margin-bottom: 10px;}
.gla_captcha span{background: #fff;padding: 5px;color: #333;width: 30px;text-align: center;cursor: pointer;opacity: 0.7;border-radius: 8px;}
.gla_captcha span:hover{opacity: 1;}
.gla_captcha input{width: 100px;height: 30px;}