@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Poppins:wght@200;300;400;500;600;700;800;900&family=Rubik:wght@300;400;500;600;700;800;900&display=swap');
@font-face {
    font-family: 'icons';
    src: url('icons.ttf') format('truetype')
}

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

header{z-index: 9000;position: relative; right: 0;left: 0;padding: 0 20px; background: transparent;}
h1, h2, h3,h4{font-family: 'Poppins', sans-serif;}
.sm-title{font-family: 'Dancing Script', cursive;}
.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, #0072FF, #00C6FF)}
.bg-light{background-color: rgb(255, 255, 255,0.8);}
.color3Light { background-color: rgba(2, 103, 191, .3)}
.color3Light { background-color: rgba(0, 200, 255, .3)}

.logo{height: 57px; 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(--cl5);}
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;}

.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: 629px;left: 0;top:0px;bottom:0;  background-color: rgba(83, 101, 119, 0.5);}

.masq2{position: absolute;width: 50%;height: 329px;left: 0;top:0px;bottom:0;  background-color: rgba(0, 0, 0, 0.5);}
.text-balance{text-wrap: balance;}
.br20{border-radius: 20px;}
.fz1{font-size: 1em;}
.hero{position: relative;}
.hero .phones{ height: 650px; object-fit: cover;}
.hero .fleche{ height: 280px; width: 280px; object-fit: contain; position: absolute; top: 30%; left: 0; rotate: 90deg;}
.hero .Reversefleche{ height: 280px; width: 280px; object-fit: contain; position: absolute; top: 30%; right: 0;}

.circle img{width: 18px; height: 18px; object-fit: cover;}
.tabshow{margin-bottom: 50px; margin-top: 50px;}
.store {height:65px !important;}
.img-tele{border-radius: 20px; height: 512px;}

.c .img-g{height: 300px; width: 100%; object-fit: cover;}
.about{z-index: 5; position: relative;}
.shape{width: 150px; height: 150px !important; object-fit: cover; position: absolute; top: 0; left: 70px;}
.shapec{width: 280px; height: 280px !important; object-fit: cover; position: absolute; top: -20px; left: 20px; z-index: 1;}
.z1{z-index: 1;}
.z5{z-index: 10;}
.shapev{
    width: 404px;
    height: 286px !important;
    object-fit: contain;
    position: absolute;
    top: -93px;
    left: -128px;
    z-index: 1;
}
.avatar{height: 100px; object-fit: cover; border-radius: 50%; width: 100px;}

.m100{margin: 100px;}
.bg22{background-color:#171b24;}
.col-15{width: 15%;}
.avis .profile {
    height:100%;
    width: 100%;
    object-fit: cover;
    border-radius: 150px;}


.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;}

.btn{padding: 15px;cursor: pointer;text-transform: capitalize; font-weight: 600;}
.btn-contact{padding: 12px 12px;cursor: pointer; border-radius: 8px;font-weight: 600; }

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

.ovh{overflow: hidden;}
.circle{height: 40px; width: 40px;border-radius: 50%;box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.middle-img{object-fit: cover; height: 550px;}

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

.box img{width: 60px;height: 60px;border-radius: 30px;object-fit: cover;}


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

.c7{position: relative; overflow: hidden;}

.c7 > div{background-color: rgba(0, 0, 0, 0.5); height: 100%; }
.c7 .img-p{height: 320px; object-fit: cover; width: 102%;}
.c7.cover-static{ 
    z-index: -1;width: 100%; height: 320px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: cover;
}
.img { width: 100%;}
.m20{margin: 20px;}
.zi-9{z-index: 9;}

.process img{ height: 60px; width: 60px; object-fit: cover;}

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

p{line-height: 22px;}
footer{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: var(--cl1);}
footer .info p{margin-bottom: 8px}
footer ul { padding: 0; margin-top: 20px;}

.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}

.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 #eeeeee; border-radius: 8px;}
.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}


.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:40%;padding: 10px;cursor: pointer;transition: 0.2s ease;font-size: 1.5em;background-color: #a7b6bd73;}
.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;}


/* Additional style */
.bgt,.hover-bgt:hover{background-color:transparent}

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

.about{display: flex; justify-content: start;}

.about img{height: 577px; object-fit: contain; border-radius: 20px;}

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

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