.c,.cc,.c8,.c6,.c7,.head, .content .box{width: 100%;padding: 0}

.content{display: block}

span.menu-res{display: none}
.cont,aside{width: 100%}


@media (max-width : 960px) {

    .flex{display: block}
    .content .c{display: block;padding: 0 20px}

    header{width: 100%;}
    header .flex{justify-content: center; display: flex; flex-direction: column;}
    header,footer .logo{ margin-top: 5px;}
    header .char {margin-left: 0;}
    header .c.flex{display: flex;justify-content: start;}

    header .flex-end{justify-content: flex-start; margin-top: 10px;}
    header .btn{display: none;}

    span.menu-res{z-index: 50;display: block;width: 50px;height: 50px;margin-top: 11px;position: fixed;top: 0;right: 20px;background-color: #fff;transition: 0.15s linear; text-align: center;border-radius: 15px;}
    .mn .menu-res{right: 20px; color: var(--cl7); background: var(--cl7);}
    .mn .menu-res span::before{content: "x";color: var(--cl1);}
    .mn nav{right:0;}
    header nav{position: fixed;overflow:hidden;overflow-y:auto;height:100%;right:-100%;top: 0;width: 100%!important;background-color: var(--cl7);box-shadow: 0 0 6px rgba(0,0,0,0.6);transition: 0.15s linear;}
    header nav ul{display: block;padding-top:50px}
    header nav ul li{display: block;border-bottom: 1px solid rgb(255, 255, 255,0.1);padding: 10px;}
    header nav ul li:hover{background: transparent}
    header nav ul li a{padding: 10px;display:block;color:var(--cl1)}
    header nav ul li a span.icon2{display: none}
    header nav ul li ul{position: relative;margin-left: 20px;box-shadow: none;left: 0;display: block;padding: 0;background-color: transparent !important;}
    header nav ul li ul li{border-bottom: none}
    header nav li ul h3,header nav li ul .top{display: none}
    header nav li ul .mn,header nav li ul li{width: 100%;margin-right: 5px}
    header nav ul li ul li a{color:var(--cl2)}
    header nav ul ul li a:hover{color: var(--cl3); }

    .hero {padding-top: 40px; height: 100vh;}
    .hero h1, .hero p{text-align: center;}
    .hero .btns{justify-content: center; text-align: center; display: flex; margin-bottom: 20px;margin-top: 20px;}
    .hero .btns a{width: 40%; text-align: center;  margin-right: 20px;}
    .hero .btns a img{width: 35%; }

    .about img {
        width: 100%;
        height: 350px;}
    .middle-img {
        display: none;
    }
    .hero .phones {
        width: 100%;
        height: 233px;
        object-fit: contain;
    }
    .shape {
        height: 80px !important;
        z-index: 1;
    }
    .tabshow{display: flex;}
    .circle{display: flex;}
    #services{padding-top: 50px; padding-bottom: 50px;}
    .shapec{display: none;}
    .padding{padding: 20px;}
    .col-38{width: 100%;} 

    .flexreverse{display: flex; flex-direction: column-reverse;}
    .hero .telecharger{justify-content: center; text-align: center; display: flex;}
    .hero .telecharger a{width: 40%; text-align: center;  margin-right: 20px;}
    .hero .telecharger a img{width: 78%; margin-bottom: 20px;}
    .img-tele {margin-top: 30px;}
    
    .about{text-align: center; justify-content: center; margin: 0 auto;}
    .text{padding: 15px; padding-top: 60px; text-align: center;}

    .tabshow {margin-top: 20px;margin-bottom: 20px;}
    .tabshow h3{text-align: start; font-size: 1em;}
    .tc{text-align: center;}

    .contact-img {height: auto;width: 100%;}
    /* .contact .grid3{display: flex;} */
    #demo{margin-bottom: 40px;}
    .caroussel{text-align: center;height: 900px;}
    .caroussel .masq{width: 100%;height: 100%;}
    .caroussel .masq div{width: 100%; margin-top: 70px;}
    .caroussel h1{font-size: 2em;}
    .caroussel span{ font-size: 1em;}
    .caroussel a {display: block; margin-bottom: 20px; padding: 15px 15px; margin-right: 50px; margin-left: 50px;}
    .caroussel .child img{height: auto;width: 80%;}

    .pt50m{padding-top: 50px;}
    .shapev {top: -62px;}
    
    .c6 .masq {display: flex; justify-content: center;}
    .c6 .masq h1{font-size: 3.5em;}

    .border-up::before{right: 8px;}
    .border-up::after{right: 8px;}
    .border-down::after{left: 8px;} 
    .border-down::before{left: 8px;} 

    .c7 .flex{ display: flex;}
    .c7 p{color: var(--cl2);}
    
    .c7{height: auto;}
    .box{box-shadow: none;}
    /* .facade img{width: 100%;} */
    .about-img{top:44px; right: -99px;}
    .facade-img{bottom:44px; left: -99px;}

    .c .col-5{padding-top: 40px;}
    .c .p40{padding: 20px;}


    .projet img {width: 100%; margin: 0;}
    .page {margin-top:100px ; }
    .page .mr40{margin:0px  ; padding: 10px; text-align: center; }
    .page .contact-form{padding: 10px; }
    .page .adr{padding: 10px;text-align: center;}
    .page .adr .mt20{margin-bottom: 50px;}
    .page .map{width: 100%; margin:0; }
    .rm{display: none;}
    .fz4{font-size: 2.1em;}
    .padding1{padding: 15px;}
    .bigText{overflow: hidden;position: relative;}
    
    .c2 .img, .c2 .img-clip, .steps .img,.steps .img-clip{width: 100% !important}
  
    .c2 .img-clip{background-size: 100%;height: 320px; background-repeat: no-repeat;};

    .c5{padding: 20px;}
    .c5 .flex{display: flex;flex-wrap: wrap;flex-direction: column-reverse;}
    .c5 .flex > div{width: 100%;margin-bottom: 20px;}
    .c5 .flex > div.mt70{margin-top: 0}
    .c4 .c > div{margin-bottom: 20px;}
    #contact{padding: 1px 15px;}
    .c4 .mt15p{ margin-top: 25%;}
    .c4 .h1{ font-size: 1.5em;}
    .c4 .p{ font-size: 0.5em;}

    .contact .col-5{margin-bottom: 20px}

    .page .service{margin-bottom: 30px}
    /* .page h1{font-size: 1.5em;margin-bottom: 30px!important} */

    .ovf-h { overflow: hidden;}

    .gla-form .group{display: block}
    .gla-form .group input[type=text], .gla-form .group input[type=email]{width: 100%}
    .gla-cptch{margin: 20px 0}
    .about::after{left: -10px;}

    .mc{ margin: 0; padding: 20px;}
  
    .mbox {display: flex;}
    .fz3{font-size: 2em;}
    .avis.flex {display: flex;}
    .process img {
        height: 40px;
        width: 40px;
        object-fit: cover;
    }
    .fz1 {
        font-size: 0.8em;
    }
    .heading2 h1{font-size: 3em; padding-top: 120px ; }
    .page .cont table tr:first-child {font-size: 1.5em;}
    .g h1{font-size: 3em;}
    .contact {padding: 0px;}
    .store {height: 55px !important;}
    .flexm{display: flex;}
    footer{padding: 30px;}
    footer img{margin-bottom: 30px}
    footer .business .flex{ justify-content: flex-start; display: flex;}
    footer .child{width: 100%}
    footer .c{display: block;}
    footer .c>div{margin-bottom: 40px;width: 100%}
    footer .c>div a{margin-bottom: 20px;}
    footer .imobile{display: flex;}
    footer .c{padding-top: 0; padding-bottom: 0%;}

}