@media(max-width:1080px) {
:root{
    --secondary-color:#112e42;
    --bg2-color:#fff;
    --bg-color:#ededed;
    --main-color:#00abf0;
    --font-family:'Roboto';
}
    nav ul{
        flex-direction: column;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: -100%;
        background:var(--main-color);
        width: 80%;
        height: 100%;
        padding: 3rem;
    }
    ul li{
        margin-bottom: 2rem;
    }
    .close{
        left: -100%;
        transition: 1s ease-in-out;
        -webkit-transition: 1s ease-in-out;
        -moz-transition: 1s ease-in-out;
        -ms-transition: 1s ease-in-out;
        -o-transition: 1s ease-in-out;
    }
    .btnclose{
        width: 100%;
        height: 60px;
         display: block;
        position: absolute;
        top: 0;
        right: 0;
        padding: 1rem;
    
        
}
    .displaybar{
       left: 0;
       transition: 1s ease-in;
       -webkit-transition: 1s ease-in-out;
       -moz-transition: 1s ease-in-out;
       -ms-transition: 1s ease-in-out;
       -o-transition: 1s ease-in-out;
    }
    /* Nav container */
     #close{
    display: block;
    position: absolute;
    top: 1rem;
    right: 2rem;
    font-size: 2rem;
    transition: transform .7s;
    -webkit-transition: transform .7s;
    -moz-transition: transform .7s;
    -ms-transition: transform .7s;
    -o-transition: transform .7s;
}
    #close:hover{
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        cursor: pointer;
    }
    /*-------*
    Close
    --------*/
    #bar{
        position: relative;
        left: 3rem;
        top: 15%;
        display: block;
        justify-content: center;
        align-items: center;
        height: 100%; 
        z-index: 10000;
        cursor: pointer; 
        margin-right: 3rem; 
    }

      /*-------*
    Menu
    --------*/
   
    .rgbafornavphoneVisible{
    width: 100%;
    height: 100%;
    background:linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.2), rgba(0,0,0,0.1));
    position: fixed;
    z-index: 9999;
    transition: 3s ease-in;
    -webkit-transition: 3s ease-in;
    -moz-transition: 3s ease-in;
    -ms-transition: 3s ease-in;
    -o-transition: 3s ease-in;
    cursor: pointer;
    }
    /*******
    rgba
    *******/
    .technicSupport,.Comment {
        display: flex;
        gap: .5rem;
        color: var(--bg-color);
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 1.2rem;
        flex-direction: column;
        background: none;
        margin: 0;
    }
        .technicSupport p, .Comment p{
        display: flex;
    }
    .technicSupport span i, .Comment span i{
        background: var(--secondary-color);
    }
    nav ul li a::before, nav ul li::before{
        background: var(--secondary-color);
    }
    .Active{
        position: relative;
    }
    .Active::before{
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--secondary-color);
    }
    
   
    section .boxs{
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    .boxs img{
        width:250px;
    }
    .contenuPourquoinous ul li{
    display: block;
    }
    .swiper {
      width: clamp(300px, 350px, 450px);
    }
    .footer__content{
    width: 80%;
    }
}
@media(max-width:745px){
    .boxmodel{
        top: 50%;
        left: 0;
        background: var(--secondary-color);
        clip-path: circle(50% at center center);
}
}
@media(max-width:480px){
    .h1services{
        font-size: clamp(1.5rem,4vw,2.5rem);
    }
    .container{
        grid-template-columns: 1fr;
    }
    .contentsHTML{
        padding: 1rem;
    }
    .surnous_top{
        text-align: center;
        background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url('../photos/KitokoDevWork_photo_web10.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 75vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 0 0rem;
        gap: 2rem;
    }
    .catalogue .principalebox{
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}
@media(max-width:369px){
    #iframeIndex{
        display: none;
    }
    #videoIntro{
        display: block;
    }
    .catalogue .principalebox{
        height: 100%;
    }
    dialog form input, textarea{
        width: 99%;
    }
}
@media(max-width:347px){
    .presentation{
        display: flex;
        justify-content: center;
        align-items: center;
    }
}