@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700');

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

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

header{z-index: 9000;position: relative; right: 0;left: 0;padding: 0 20px; background: transparent;}

.flex{display: flex;justify-content: space-between}
.c{margin: 0 auto;width:1300px}
.c8{margin: 0 auto;width:1500px}
.cc{margin: 0 auto;width:900px}
.c5{margin: 0 auto; width: 100%; height: 620px;}

.gridstyle img{ height: 450px;}
.bggg,.hover-bggg:hover{background: linear-gradient(180deg, #003049, #669bbc)}


.logo{height: 60px; margin: 5px 0;}

.head .icon{text-transform: none;margin-right: 7px}
.head form{padding: 5px}
.head form input{padding: 0;border: none;background-color: transparent}
.head form input[type=submit]{margin-right: 0!important;font-size: 1.2em;cursor: pointer;}
.head .act{margin-right: 18px;position: relative;}
.head .act:last-child{margin-right: 0;}
.head .act .icon{font-size: 1.4em!important;}
.head .notif{position: absolute;font-size: .7em;width: 16px;height: 16px;border-radius: 8px;text-align: center;left: 13px;top:-4px}

header ul{display: flex}
header ul li a{color: var(--cl2);padding: 25px 20px;;display: inline-block;font-weight: 500;}
header ul li a:hover{color: var(--cl4);}
header ul ul{position: absolute;top: 70%;padding: 15px;display: none;min-width: 200px; background-color: var(--cl3);}
header nav{margin-bottom: -1px;}
header nav ul{padding:0;justify-content: center;}
header nav ul ul li a{padding: 15px;}
header nav ul ul li a:hover{color: var(--cl1); }
header ul li:hover ul{display: block;}

.trait{border-right: 2px solid #999;margin-right: 0px;margin-left: -20px;}

.shape1{position: absolute; top: 150px; right: 40px;-webkit-animation: effect2 45s linear infinite;}
.shape2{position: absolute; bottom: 50px; left: 100px;-webkit-animation: effect1 20s ease-out infinite;}
.shape3{position: absolute; top: 0; right: 0;-webkit-animation: effect1 40s ease-out infinite;}
.shape4{position: absolute; bottom: 0; left: 0;-webkit-animation: effect1 60s ease-out infinite;}

.c6{width: 100%;height: 700px;z-index: 6000;position: relative;overflow: hidden; }
.border-up::after{content: "";width: 3px; height: 100%; position: absolute;top: 0; right: 0;z-index: 99; background-color: var(--cl4);}
.border-up::before{content: "";width: 16%; height:3px; background-color:var(--cl4); position: absolute;bottom: 0; right: 0;z-index: 99; }

.border-down::after{content: "";width: 3px; height: 100%; position: absolute;bottom: 0; left: 0;z-index: 99;background-color:  var(--cl4);}
.border-down::before {
    content: "";
    width: 16%;
    height: 3px;
    background: var(--cl4);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}
.caroussel{width: 100%;height: 729px;max-width: 100%;z-index: 6000;position: relative;overflow: hidden;}
.caroussel .slider{transition: 0.4s ease;display: flex; width: 100%;height: 729px;}
.caroussel .child{position:relative;display: flex;justify-content:center;flex-wrap: wrap;}
.caroussel .child img{position:absolute;width:100%;height:100%;object-fit: cover; top: 0;}
.caroussel .child div{position:relative;color: #fff;}
.caroussel h1{margin: 0 auto;font-weight:500;;margin-bottom: 20px;display: block}

.brcText{-webkit-text-stroke: 5px #000;;}

.masq{position: absolute;width: 100%;height: 700px;left: 0;top:0px;bottom:0;  background-color: rgba(0, 0, 0, 0.5);}

.masq2{position: absolute;width: 100%;height: 700px;left: 0;top:0px;bottom:0;  background-color: rgba(0, 0, 0, 0.6);}


.tri{
    position: absolute;
    z-index: -3;
    top: 0;
    left: 0;
    width: 1010px;
    border-bottom: 1px solid rgb(7, 7, 7);
    transform: rotate(32deg);
    transform-origin: left;
}
.tri-right{
    position: absolute;
    z-index: -5;
    top: 0;
    right: 0;
    width: 1010px;
    border-bottom: 1px solid rgb(7, 7, 7);
    transform: rotate(-32deg);
    transform-origin: right;
}
/* .tri{position: absolute; border: 2px solid #000; top: 0; bottom: 50px;width: calc(300px*1.41);border-bottom: 3px solid rgb(7, 7, 7);transform: rotate(45deg); transform-origin: left;} */
/* .tri{position: absolute; border: 2px solid #000; top: 0; bottom: 50px;width: calc(300px*1.41);border-bottom: 3px solid rgb(7, 7, 7);transform: rotate(45deg); transform-origin: left;} */
.hero {margin-top: 50px;}
.img-hero{background-position: center center;background-repeat: no-repeat;}

.c .img-g{height: 300px; width: 100%; object-fit: cover;}
.tabshow img{height: 370px; width: 100%; object-fit: cover; padding-bottom: 10px;border-radius: 4px;}
.tabshow .one{transform:perspective(800px)rotateY(9deg);transition: transform 1s ease 0s;}
.tabshow .one:hover{transform:perspective(800px)rotateY(-9deg);transition: transform 1s ease 0s;}
.tabshow .two:hover{transform:perspective(800px) rotateY(-10deg);transition: transform 1s ease 0s;}
.tabshow .three{transform:perspective(800px) rotateY(-10deg);transition: transform 1s ease 0s;}
.tabshow .three:hover{transform:perspective(800px) rotateY(10deg);transition: transform 1s ease 0s;}


.avis .profile {
    height:100%;
    width: 100%;
    object-fit: cover;
    border-radius: 150px;}

.avis p{padding: 30px;}
.box .icon-g{width: 20px; height: 20px; margin-right: 20px; }
.avis .icon-d{width: 20px; height: 20px; position: absolute; right: 5px; top: 5px;}
.avis .bgg{border-radius: 150px;  height: 300px; overflow: hidden;width: 300px; margin-bottom: 20px;}

.caroussel .icon{cursor: pointer;font-size: 1.7em;}
.caroussel .shape{position: absolute;bottom: 0;height: 100%;right: 0;}
.car-btns{position: absolute;bottom: 20px;right: 20px;}
.car-btns span{border-radius: 8px;}
.caroussel .wave{position: absolute;bottom: -5px;left: 0;right: 0;}
.caroussel .wave img{width: 100%;}

.btn{padding: 19px 19px;font-weight: 500;cursor: pointer;text-transform: capitalize; }
.btn-contact{padding: 12px 12px;font-weight: 500;cursor: pointer;}

.btn2{padding: 10px 12px;font-weight: 400;cursor: pointer;}
.btn .icon, .btn.icon{text-transform: none;}

.ovh{overflow: hidden;}

table{border-collapse: collapse;border-radius: 8px;overflow: auto}
table{margin:30px 0;color:#000;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;}

.c1{padding: 20px 0 130px;position: relative;}
.c1 .c{grid-gap:40px}
.box{padding: 35px;box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;}
.box img{width: 60px;height: 60px;border-radius: 30px;object-fit: cover;}
.c1 .box p{line-height: 1.8}

.bigText{position: absolute;bottom: -70px; right: 0;left: 0;text-align: right;}
.bigText span{font-size: 8em;font-weight: 700;display: inline-block;animation: textSlide 40s linear infinite;color: #ececec}
/* .c2 img:last-child{border-radius: 0 0 300px 0;} */
/* .c2 img:first-child{border-radius: 300px 0 0 0;} */
/* .c2 img{height: 300px; width: 100%; object-fit: cover;}

.c2 .img{height: 600px;width: 600px;}
.c2 .img{position: relative;height: 600px;background-size: cover;}
.c2 .img-clip{height: 600px;width: 600px;background-size: cover;} */


.c3 .c_div{border-radius: 8px;}
.c3 .c_div img{border-radius: 8px; height: 400px;object-fit: cover;}
.c3 .c_div p{display: block;}
.c3 .c_div a{margin-right: 10px;box-shadow: 0 0 3px rgba(0,0,0,.2);}

.c4{width: 100%; height: 350px; overflow: hidden;}

.c7{margin: 0 auto; width: 100%; height: 370px; position: relative; overflow: hidden;}
/* .c7 div{background-color: rgba(0, 48, 73, 0.1); height: 100%; } */
.c7 > div{background-color: rgba(102, 155, 188, 0.3); height: 100%; }
.c7 .img-p{height: 370px; object-fit: cover; width: 100%;}
.c7.cover-static{ 
    z-index: -1;width: 100%; height: 320px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: cover;
}

.c7 .icons img{width: 90px;margin-bottom: 20px;}

.steps img{height: 500px;object-fit: cover;}
.img { width: 100%;}

.steps .img{height: 1300px;width: 500px;}
.steps .img{position: relative;height: 1300px;background-size: cover;background-position: center;}
.steps .img-clip{height: 1300px;width: 500px;background-size: cover;}

.steps .box{position: relative;margin-bottom: 40px;}
.steps .box .t{font-size: 1.2em;font-weight: 500;display: block;margin: 15px 0;}
.steps .box p{line-height: 1.7em;}
.steps .box .num{position: absolute;top:0; right:8px; font-size: 9em;font-weight: 700;display: block;text-shadow: 2px 2px 3px rgba(0,0,0,0.06);}


.infos_infos img{width: 130px;margin-bottom: 15px;}

.article img{width: 100%;height: 500px;object-fit: contain;}

.pack img{object-fit: contain;max-height: 400px ;}

.page .first{width: 100%;max-height: 450px;object-fit: cover}
.page .topView .title{position: absolute;top: 0;width: 100%;height: 450px;padding: 20px;background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.8))}

.page .cont{}
.page .cont p{font-size: 1.1em; line-height: 30px; color: var(--cl2); }
.page .cont li{font-size: 1.1em;  color: var(--cl2); margin-bottom: 20px;}
.page .cont h2{font-size: 2em; color: var(--cl4); margin-bottom: 20px; margin-top: 20px;}
.page .cont h3{font-size: 1.5em; color: var(--cl3); margin-bottom: 20px; margin-top: 20px;}
.page .cont h4{font-size: 1em; color: var(--cl2); margin-bottom: 20px; margin-top: 20px;}



.m20{margin: 20px;}

.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 h2{font-size: 3em;}
.content h6{font-size: 1em;color: #0a0a0a; text-transform: uppercase;}
.content h4{color: #0a0a0a; font-size: 2em; font-weight: 300; margin-bottom: 30px;}
.content p{margin-bottom: 15px; padding-top: 10px; line-height: 30px;}
.content li{margin-bottom: 10px}
.content img{width: 100%;min-height: 400px;object-fit: contain;}
.image-f{width: 100%;height: 500px;object-fit: cover;cursor: pointer;}
.image-p{width: 100%;height: 200px;object-fit: cover;cursor: pointer;}


.plans img{width: 100%;height: 300px;object-fit: cover;cursor: pointer;}

.check{content: "&#xe080"; }
.tex { margin-left: 2px;}

.infos div{background-color: rgba(0,0,0,.5)}

/* .contact-form{box-shadow: rgba(182, 182, 180, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; } */

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

footer{color: #b5b5b8;font-size: .9em; padding-top: 50px;}
footer .title{font-size: 1em; font-weight: 600;text-transform: uppercase;display:block;margin-bottom: 25px}
footer a{display: block;margin-bottom: 8px;color: #b5b5b8}
footer .info p{margin-bottom: 8px}
.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,.gla-form textarea,.gla-form select{padding: 20px; }
.gla-form input[type=text],.gla-form input[type=email], .gla-form textarea,.gla-form select{width: 100%;margin-bottom: 25px;background-color: #fff;border: 1px solid var(--cl4);}
.gla-form input[type=submit]{width: auto;margin-top: 15px;border: none;}
.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;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);}
.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}



span.menu-res{display: none; padding: 10px;position: absolute;top: 20px;right: 20px;transition: 0.15s linear; cursor: pointer;}


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


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

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

.gla_slider .slider_btn{position: absolute;color:var(--cl3);top:43%;padding: 10px;cursor: pointer;transition: 0.2s ease;font-size: 1.5em;background-color: var(--cl4);}
.gla_slider .slider_btn:hover{opacity: 1;}
.gla_slider .next_btn{right: 0px}
.gla_slider .previos_btn{left: 0px}

.c6 .gla_slider{position: static;}

/* 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;}



.waves {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 15vh;
    z-index: 1;
    margin-bottom: -8px;
    min-height: 100px;
    max-height: 150px;
}
/* Additional style */
.bgt,.hover-bgt:hover{background-color:transparent}
.lh{line-height: 22px;}
.lh-35{line-height: 35px;}

.services a{ text-align: center; margin-bottom: 20px;}
.services a img{ object-fit: contain; border-radius: 50%; padding: 10px;transition: 0.5s ease; margin-bottom: 20px;}
.services a:hover img{background-color:var(--cl3);}
.services span{font-size: 1.4em; display: block; color: var(--cl4); font-weight: 500;}

.pos-a{position: absolute;}
.pos-f{position: fixed;}

/* Image Effect */
/* .about::after{
    content: "";
    background-image: url(../img/large/sean-pollock-phyq704ffda-unsplash--91.jpg);
    height: 200px;
    background-repeat: no-repeat;
    background-position: right ;
    object-fit: cover;
    width: 200px;
    position: absolute;
    bottom: -120px;
    left: -40px;
    z-index: 99;
 } */

/* .about::before {
    content: "";
    background-image: url(../img/large/adrian-cuj-o-9ymcy0bag-unsplash--13.jpg);
    height: 200px;
    background-repeat: no-repeat;
    background-position: bottom ;
    object-fit: cover;
    width: 200px;
    position: absolute;
    top: -60px;
    right: -20px;
    z-index: 99;
} */
.about{display: flex; justify-content: start;}
.about-img img{width: 100% !important; height: 100% !important; object-fit: cover ;}
.about img{height: 600px; width: 80%; object-fit: cover;}
.projet img{height: 400px; width: 100%; object-fit: cover;}

.about-img {
    height: 250px ;
    width: 250px ;
    position: absolute;
    z-index: 99;
    overflow: hidden;
    top: -60px;
    right: 0px;

}
.facade-img {
    height: 250px ;
    width: 250px ;
    position: absolute;
    bottom: -60px;
    left: 0;
    z-index: 99;
    overflow: hidden;
}
.facade-img img{width: 100% !important; height: 100% !important; object-fit: cover ;}
.facade img{height: 600px; width: 80%; object-fit: cover;}
.facade {display: flex; justify-content: end;}

.border-upp::after{content: "";width:30%; height:3px; position: absolute;top: 0; right: 0;z-index: 99;background-color:  var(--cl4);}
.border-upp::before{content: "";height: 30%; width: 3px;background-color: var(--cl4); position: absolute;top: 0; right: 0;z-index: 99; }

.border-downn::after{content: "";width: 30%; height: 3px; position: absolute;bottom: 0; left: 0;z-index: 99;background-color:  var(--cl4);}
.border-downn::before{content: "";height: 30%;width: 3px; background-color: var(--cl4); position: absolute;bottom: 0; left: 0;z-index: 99;}

.text-Ca{text-transform: capitalize;}

.heading{ width: 100%; height: 300px;max-width: 100%;max-height: 300px;z-index: 6000;position: relative;overflow: hidden;}
.heading div{ height: 100%; background-color: rgba(0, 0, 0, 0.5);}
.heading.img-c{width: 100%; height: 300px; object-fit: cover;background-repeat: no-repeat;background: center;}

.heading2{ width: 100%; height: 300px;max-width: 100%;max-height: 800px;z-index: 6000;position: relative;overflow: hidden; background-color: rgba(0,0,0,0.5);}
.heading2 .div{ height: 100%;}

/* projets */
.realisations{margin: 0 auto; width: 100%;}
.realisation{height: 600px; position: relative;}
.realisation img{width: 100%; height: 100%; object-fit: cover; position: relative;}
.realisation .cnt{position: absolute; top: 25px; left: 25px;}
.realisation .cnt div{background-color: var(--cl1); padding: 30px;transition: .5s ease;}
.realisation:hover .cnt div{background-color: var(--cl4);}
.realisation .title{color: var(--cl2);font-size: 1.5em; font-weight: 600;}
.gridstyle img{ height: 450px;}
/*--------------- Text Effects ------------------------------*/

@keyframes pxlKeywordRotatingIn {
    from {
        transform: translateY(70%) rotateX(-100deg);
        opacity:0
    }

    to {
        transform: translateY(0) rotateX(0);
        opacity:1
    }
}

@keyframes pxlKeywordRotatingOut {
    from {
        transform: translateY(0) rotateX(0);
        opacity:1
    }

    to {
        transform: translateY(-70%) rotateX(100deg);
        opacity:0
    }
}

.text-effect{display: inline-flex;position: relative;z-index: 99;} /*white-space: nowrap;*/
.text-effect .text.is-active {position: relative;opacity: 1;animation: pxlKeywordRotatingIn .8s cubic-bezier(.86,0,.07,1)both;}
.text-effect .text:not(.is-active) {animation: pxlKeywordRotatingOut .8s cubic-bezier(.86,0,.07,1)both;}

.text-effect .text {
    position: absolute;
    top: 0;
    left: 0;
    opacity:0
}

.text-effect .text:not(.is-active) {
    animation:pxlKeywordRotatingOut .8s cubic-bezier(.86, 0, .07, 1)both
}

.text-effect .text.is-active {
    position: relative;
    opacity: 1;
    animation:pxlKeywordRotatingIn .8s cubic-bezier(.86, 0, .07, 1)both
}

/* ----------------- shape Effects ---------------------------*/
@keyframes effect1 {
    0% {
        transform:translate(0, 0)
    }

    20% {
        transform:translate(-30px, 40px)
    }

    40% {
        transform:translate(60px, 60px)
    }

    60% {
        transform:translate(70px, 40px)
    }

    80% {
        transform:translate(40px, -70px)
    }

    100% {
        transform:translate(0, 0)
    }
}

@-ms-keyframes effect2 {
    from {
        -ms-transform:translate(-50%, -50%)rotate(0)
    }

    to {
        -ms-transform:translate(-50%, -50%)rotate(-360deg)
    }
}

@-moz-keyframes effect2 {
    from {
        -moz-transform:translate(-50%, -50%)rotate(0)
    }

    to {
        -moz-transform:translate(-50%, -50%)rotate(-360deg)
    }
}

@-webkit-keyframes effect2 {
    from {
        -webkit-transform:translate(-50%, -50%)rotate(0)
    }

    to {
        -webkit-transform:translate(-50%, -50%)rotate(-360deg)
    }
}

@keyframes effect2 {
    from {
        transform:translate(-50%, -50%)rotate(0)
    }

    to {
        transform:translate(-50%, -50%)rotate(-360deg)
    }
}

@keyframes textSlide {
    0% {
        transform:translate(0, 0)
    }

    100% {
        transform:translate(-100%, 0)
    }
}