/*
----------------------
2000px 
----------------------
*/

  #grow_title{
        font-size:50px;
    }
  #min_title{
        font-size:35px;
    }
    
    #info_tittle{
        font-size:25px;
    }
    
    
@media (max-width:2000px) {



    /* equipement-nyusu */

    /* print */


    .liste-equipement-pint{
        width: 60%;
        padding-left: 50px;
        margin-top: -30px;
    }
    
     .equipement-print-svg{
        width: 10%;
        cursor: pointer;
    }


    /* 
    =====================
    devise nyusu
    =====================
    */

    .section-devise{
        width: 100%;
        padding-bottom: 200px;
        padding-top: 100px;
    }


    /* 
    ---------------------------
    header
    ---------------------------
    */
    nav {
        position: fixed;
        width: 100%;
        align-items: center;
        z-index: 1000;
        margin: 0 auto;
    }
    .navbar {
        width: 85%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        padding-top: 60px;
        position: relative;
    }
    /* 
    ======================
    Menu
    ======================
    */
    .menu {
        display: flex;
        width: 45%;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        overflow-x: hidden;
        transition: width 0.5s;
        margin-top: 15px;
    }

    .menu li a {
        font-weight: 500;
        padding: 5px 20px;
        text-align: center;
        font-size: 16px;
    }
    .menu li:hover a,
    .menu li.active a {
        color: #ffffff;
        border-radius: 10px;
        padding: 5px 20px;
        font-weight: 700;
    }
    .menu li:hover a,
    .menu li#active a {
        color: #ffffff;
        border-radius: 10px;
        padding: 5px 20px;
        font-weight: 700;
    }
    .menu.slide {
        width: 0;
    }
    .menu.hide {
        display: none !important;
    }
    /* 
    =========================
    menu fon noir
    =========================
    */
    .menu-fd-noir {
        display: flex;
        width: 45%;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        overflow-x: hidden;
        transition: width 0.5s;
    }
    .menu-fd-noir li {
        width: auto;
        height: auto;
        transition: var(--transition);
        cursor: pointer;
        
    }

    .menu-fd-noir li a {
        color: #ffffff;
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        text-align: center;
        font-size: 16px;
    }
    .menu-fd-noir li:hover a,
    .menu-fd-noir li.active a {
        /*color: #0000FF;*/
        border-radius: 10px;
        padding: 5px 15px;
        font-weight: 700;
        
    }
    .menu-fd-noir li:hover a,
    .menu-fd-noir li#active a {
        border-radius: 10px;
        padding: 5px 15px;
        font-weight: 700;
    }
    .menu-fd-noir.slide {
        width: 0;
    }
    .menu-fd-noir.hide {
        display: none !important;
    }
    /* ================
    Menu print
    ===================
    */
    .menu-print {
        display: flex;
        width: 45%;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        overflow-x: hidden;
        transition: width 0.5s;
    }
    .menu-print li {
        width: auto;
        height: auto;
        transition: var(--transition);
        cursor: pointer;
    }
    .menu-print li:hover,
    .menu-print li.active {
        /*background-color: #FFCC00;*/
        border-radius: 400px;
    }
    .menu-print li:hover,
    .menu-print li#active {
        /*background-color: #FFCC00;*/
        border-radius: 400px;
    }
    .menu-print li a {
        color: #ffffff;
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        text-align: center;
        font-size: 16px;
    }
    .menu-print li:hover a,
    .menu-print li.active a {
        color: #000000;
        border-radius: 10px;
        padding: 5px 15px;
        font-weight: 700;
    }
    .menu-print li:hover a,
    .menu-print li#active a {
        /*color: #000000;*/
        border-radius: 10px;
        padding: 5px 15px;
        font-weight: 700;
    }
    .menu-print.slide {
        width: 0;
    }
    .menu-print.hide {
        display: none !important;
    }
    /* ================
    Menu creative
    ===================
    */
    .menu-creative {
        display: flex;
        width: 45%;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        overflow-x: hidden;
        transition: width 0.5s;
    }
    .menu-creative li {
        width: auto;
        height: auto;
        transition: var(--transition);
        cursor: pointer;
    }
    .menu-creative li:hover,
    .menu-creative li.active {
        background-color: #FF6400;
        border-radius: 400px;
    }
    .menu-creative li:hover,
    .menu-creative li#active {
        background-color: #FF6400;
        border-radius: 400px;
    }
    .menu-creative li a {
        color: #ffffff;
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        text-align: center;
        font-size: 16px;
    }
    .menu-creative li:hover a,
    .menu-creative li.active a {
        color: #ffffff;
        border-radius: 10px;
        padding: 5px 15px;
        font-weight: 700;
    }
    .menu-creative li:hover a,
    .menu-creative li#active a {
        color: #ffffff;
        border-radius: 10px;
        padding: 5px 15px;
        font-weight: 700;
    }
    .menu-creative.slide {
        width: 0;
    }
    .menu-creative.hide {
        display: none !important;
    }
    /* ================
    Menu green
    ===================
    */
    .menu-green {
        display: flex;
        width: 45%;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        overflow-x: hidden;
        transition: width 0.5s;
    }
    .menu-green li {
        width: auto;
        height: auto;
        transition: var(--transition);
        cursor: pointer;
    }
    .menu-green li:hover,
    .menu-green li.active {
        background-color: #008D36;
        border-radius: 400px;
    }
    .menu-green li:hover,
    .menu-green li#active {
        background-color: #008D36;
        border-radius: 400px;
    }
    .menu-green li a {
        color: #000000;
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        text-align: center;
        font-size: 16px;
    }
    .menu-green li:hover a,
    .menu-green li.active a {
        color: #ffffff;
        border-radius: 10px;
        padding: 5px 15px;
        font-weight: 700;
    }
    .menu-green li:hover a,
    .menu-green li#active a {
        color: #ffffff;
        border-radius: 10px;
        padding: 5px 15px;
        font-weight: 700;
    }
    .menu-green.slide {
        width: 0;
    }
    .menu-green.hide {
        display: none !important;
    }
    /* 
    --------------
    sous menu
    --------------
    */
    .menu-deroulant-default .sous-menu {
        display: none;
        background-color: #fdfdec;
        border-top: 5px solid #3b91dd;
        width: 200px;
        line-height: 2;
        height: auto;
        position: absolute;
        padding: 20px 10px;
        margin-top: 5px;
        border-radius: 10px;
    }
    .menu-deroulant-green .sous-menu {
        display: none;
        background-color: #fdfdec;
        border-top: 5px solid #008D36;
        width: 200px;
        line-height: 2;
        height: auto;
        position: absolute;
        padding: 20px 10px;
        margin-top: 5px;
        border-radius: 10px;
    }
    .menu-deroulant-print .sous-menu {
        display: none;
        background-color: #fdfdec;
        border-top: 5px solid #FFC800;
        width: 200px;
        line-height: 2;
        height: auto;
        position: absolute;
        padding: 20px 10px;
        margin-top: 5px;
        border-radius: 10px;
    }
    .menu-deroulant-noir .sous-menu {
        display: none;
        background-color: #fdfdec;
        border-top: 5px solid #0000FF;
        width: 200px;
        line-height: 2;
        height: auto;
        position: absolute;
        padding: 20px 10px;
        margin-top: 5px;
        border-radius: 10px;
    }
    .menu-deroulant-creative .sous-menu {
        display: none;
        background-color: #fdfdec;
        border-top: 5px solid #FF6400;
        width: 200px;
        line-height: 2;
        height: auto;
        position: absolute;
        padding: 20px 10px;
        margin-top: 5px;
        border-radius: 10px;
    }
    .menu-deroulant-default .sous-menu li {
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        font-size: 18px;
    }
    .menu-deroulant-green .sous-menu li {
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        font-size: 18px;
    }
    .menu-deroulant-print .sous-menu li {
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        font-size: 18px;
    }
    .menu-deroulant-noir .sous-menu li {
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        font-size: 18px;
    }
    .menu-deroulant-creative .sous-menu li {
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        font-size: 18px;
    }
    .menu-deroulant-default .sous-menu li a {
        color: #000000;
        transition: var(--transition);
        padding: 5px;
    }
    .menu-deroulant-default#active .sous-menu li a {
        color: #000000;
        transition: var(--transition);
        padding: 5px;
    }
    .menu-deroulant-default .sous-menu li:hover a {
        color: #ffffff;
    }
    .menu-deroulant-green .sous-menu li a {
        color: #000000;
        transition: var(--transition);
        padding: 5px;
    }
    .menu-deroulant-green#active .sous-menu li a {
        color: #000000;
        transition: var(--transition);
        padding: 5px;
    }
    .menu-deroulant-creative .sous-menu li a {
        color: #000000;
        transition: var(--transition);
        padding: 5px;
    }
    .menu-deroulant-creative#active .sous-menu li a {
        color: #000000;
        transition: var(--transition);
        padding: 5px;
    }
    .menu-deroulant-print .sous-menu li a {
        color: #000000;
        transition: var(--transition);
        padding: 5px;
    }
    .menu-deroulant-print#active .sous-menu li a {
        color: #000000;
        transition: var(--transition);
        padding: 5px;
    }
    .menu-deroulant-noir .sous-menu li a {
        color: #000000;
        transition: var(--transition);
        padding: 5px;
    }
    .menu-deroulant-noir#active .sous-menu li a {
        color: #000000;
        transition: var(--transition);
        padding: 5px;
    }
    .menu-deroulant-green .sous-menu li:hover a {
        color: #fff;
    }
    .menu-deroulant-creative .sous-menu li:hover a {
        color: #fff;
    }
    .menu-deroulant-noir .sous-menu li:hover a {
        color: #0000ff;
    }
    .menu-deroulant-default:hover .sous-menu {
        display: block;
    }
    .menu-deroulant-green:hover .sous-menu {
        display: block;
    }
    .menu-deroulant-print:hover .sous-menu {
        display: block;
    }
    .menu-deroulant-noir:hover .sous-menu {
        display: block;
    }
    .menu-deroulant-creative:hover .sous-menu {
        display: block;
    }
    /* 
    --------------------------------------
    menu au click
    -------------------------------------
    */
    .menubar {
        position: absolute;
        display: none;
        height: 60px;
        width: 65px;
        background: #000000;
        color: #ffffff;
        font-size: 25px;
        text-align: center;
        padding-top: 12px;
        box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
        border: 1px solid #000;
        cursor: pointer;
        right: 0;
        top: 68px;
        transition: var(--transition);
        z-index: 999999;
    }
    .menubar-fd-noir {
        position: absolute;
        display: none;
        height: 60px;
        width: 65px;
        background: var(--color-ndigital);
        color: #ffffff;
        font-size: 25px;
        text-align: center;
        padding-top: 12px;
        box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
        border: 1px solid #000;
        cursor: pointer;
        right: 0;
        top: 68px;
        transition: var(--transition);
        z-index: 999999;
    }
    .menubar-green {
        position: absolute;
        display: none;
        height: 60px;
        width: 65px;
        background: #008D36;
        color: #ffffff;
        font-size: 25px;
        text-align: center;
        padding-top: 12px;
        box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
        border: 1px solid #000;
        cursor: pointer;
        right: 0;
        top: 68px;
        transition: var(--transition);
        z-index: 999999;
    }
    .menubar-print {
        position: absolute;
        display: none;
        height: 60px;
        width: 65px;
        background: #FFC800;
        color: #141413;
        font-size: 25px;
        text-align: center;
        padding-top: 12px;
        box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
        border: 1px solid #000;
        cursor: pointer;
        right: 0;
        top: 68px;
        transition: var(--transition);
        z-index: 999999;
    }
    .menubar-creative {
        position: absolute;
        display: none;
        height: 60px;
        width: 65px;
        background: #FF6400;
        color: #fff;
        font-size: 25px;
        text-align: center;
        padding-top: 12px;
        box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
        border: 1px solid #000;
        cursor: pointer;
        right: 0;
        top: 68px;
        transition: var(--transition);
        z-index: 999999;
    }
    .menubar:hover {
        background-color: #FFC800;
        color: var(--color-second);
        border: 1px solid var(--color-third);
    }
    .menubar-fd-noir:hover {
        background-color: #FFC800;
        color: var(--color-second);
        border: 1px solid var(--color-third);
    }
    .menubar-green:hover {
        background-color: #FFC800;
        color: var(--color-second);
        border: 1px solid var(--color-third);
    }
    .menubar-print:hover {
        background-color: #FFC800;
        color: var(--color-second);
        border: 1px solid var(--color-third);
    }
    .menubar-creative:hover {
        background-color: #FFC800;
        color: var(--color-second);
        border: 1px solid var(--color-third);
    }
    .menubar.active {
        display: block;
    }
    .menubar.fixed {
        position: relative;
    }
    .menubar-fd-noir.active {
        display: block;
    }
    .menubar-green.active {
        display: block;
    }
    .menubar-print.active {
        display: block;
    }
    .menubar-creative.active {
        display: block;
    }
    .menu.active {
        display: block;
    }
    .menubar.fixed {
        position: relative;
    }
    .Closemenu {
        position: absolute;
        height: 60px;
        width: 65px;
        background: #000000;
        color: #fff;
        font-size: 25px;
        text-align: center;
        padding-top: 11px;
        box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
        border: 1px solid #000000;
        cursor: pointer;
        top: 68px;
        right: 7.5%;
        z-index: 999999999;
        transition: var(--transition);
    }
    .Closemenu:hover {
        background: var(--color-third);
        border: 1px solid var(--color-third);
        color: var(--color-second);
    }
    .navBarclick {
        background-color: #141413;
        width: 100%;
        height: 100vh;
        position: fixed;
        z-index: 999999999;
        transition: var(--transition-01);
        visibility: hidden;
        opacity: 0;
    }
    .navBarclick-active {
        visibility: visible;
        opacity: 1;
    }
    #clickmenu {
        width: 80%;
        margin: 0 auto;
        padding-top: 50px;
        justify-content: space-between;
    }
    .clickmenu {
        width: 8%;
        padding-top: -5px;
    }
    .clickmenu li {
        padding: 25px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 50px;
        font-weight: 600;
        font-family: var(--font-family);
        font-family: Poppins, Arial, Helvetica, sans-serif;
        color: #6e6d6d;
        transition: var(--transition);
        z-index: 100;
        position: relative;
    }
    .clickmenu li a:hover {
        color: var(--color-third);
        padding-left: 10px;
    }
    .clickmenu li:hover .activemenu {
        display: block;
    }
    .activemenu {
        background-color: var(--color-second);
        width: 100%;
        height: 30px;
        position: absolute;
        bottom: 5px;
        left: -15px;
        z-index: 10;
        border-radius: 200px;
        display: none;
        transition: var(--transition);
    }
    .clikmenu-menu-deroulant .clickmenu-sous-menu {
        position: absolute;
        left: 200%;
        top: -150%;
        background-color: #ffffff;
        border-radius: 10px;
        padding: 5px 20px 20px 20px;
        border-left: 5px solid var(--color-second);
        display: none;
        transition: all ease .3s;
    }
    .clikmenu-menu-deroulant .clickmenu-sous-menu li a {
        font-size: 20px;
        padding: 5px 20px;
    }
    .clikmenu-menu-deroulant .clickmenu-sous-menu li:hover a {
        color: rgb(255, 255, 255);
        background-color: blue;
        border-radius: 200px;
    }
    .clikmenu-menu-deroulant:hover .clickmenu-sous-menu {
        display: block;
        transition: all ease .3s;
    }
    .socialmedia {
        width: 45%;
        height: 100vh;
        position: absolute;
        top: 0;
        right: 0;
        padding-top: 50px;
        background-color: rgb(192, 192, 192);
    }
    .block-navClickmenu {
        display: flex;
    }
    #socialmedia {
        padding: 220px 0 0 100px;
        color: #000000;
    }
    .info-social-media {
        padding-bottom: 20px;
    }
    .info-social-media h2 {
        padding-bottom: 20px;
        font-size: 35px;
        font-weight: 600;
        text-transform: uppercase;
        font-family: century gothic, Helvetica, sans-serif;
    }
    .info-social-media span {
        padding: 20px;
        font-size: 16px;
        font-family: century gothic, Helvetica, sans-serif;
    }
    .-img-social-media {
        padding-top: 50px;
    }
    .-img-social-media i {
        font-size: 40px;
    }
    .-img-social-media a i {
        color: rgb(0, 0, 0);
        transition: var(--transition);
        width: 35px;
        height: 35px;
        border-radius: 5px;
    }
    .fa-facebook-square:hover {
        color: rgb(3, 69, 250);
    }
    .fa-instagram-square:hover {
        color: rgb(255, 0, 76);
    }
    .fa-youtube-square:hover {
        color: rgb(255, 0, 0);
    }
    .fa-linkedin:hover {
        color: rgb(0, 98, 255);
    }
    .-img-social-media P {
        font-size: 25px;
        font-family: century gothic, Helvetica, sans-serif;
        font-weight: 600;
    }
    .bande {
        background-color: #FFDE00;
        width: 100%;
        height: 1px;
        position: relative;
        left: -200px;
        margin-bottom: 10px;
    }
    .design-menu {
        font-size: 21px;
        font-weight: 500;
        font-family: century gothic, Poppins, sans-serif;
        text-transform: uppercase;
        transform: rotate(90deg);
        position: absolute;
        bottom: 75%;
        top: 10%;
        color: white;
    }
    /* 
    ---------------------------
    footer
    ---------------------------
    */
    .bg-footer {
        height: auto;
        justify-content: center;
        background-color: var(--color-default);
        padding: 30px 0 100px 0;
    }
    .max-foot {
        width: 90%;
        margin: 0 auto;
        padding: 130px 0 0 0;
    }
    .content_footer {
        width: 100%;
        justify-content: space-between;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        font-weight: 300;
    }
    .b_left {
        color: aliceblue;
        width: 25%;
        text-align: justify;
    }
    .b_center {
        color: aliceblue;
        width: 18%;
        margin-top: 50px;
    }
    .b_center img {
        width: 35px;
        padding-right: 10px;
    }
    .b_rigth {
        color: aliceblue;
        width: 25%;
        margin-top: 50px;
    }
    .span {
        font-size: 20px;
        font-weight: 400;
        padding-left: -10px;
    }
    .block-icones-footer {
        padding: 5px 0;
    }
    input[type="mail"] {
        background-color: #ffffff;
        width: 100%;
        height: 40px;
        border: none;
        padding: 20px 0;
        margin-bottom: 20px;
        padding-left: 20px;
    }
    input[type="Email"] {
        background-color: #ffffff;
        width: 49.5%;
        height: 40px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    input[type="text"] {
        background-color: #ffffff;
        width: 49.5%;
        height: 40px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    textarea {
        background-color: #ffffff;
        width: 99.5%;
        height: 80px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
        padding-top: 10px;
    }
    textarea:focus {
        outline: none;
    }
    input:focus {
        outline: none;
    }
    .tittle-nl {
        font-size: 20px;
        font-weight: 400;
        padding-bottom: 20px;
    }

    /*


    #btn-send{

        background-color: #ffffff;
        border:var(--color-third);
        width: 40%;
        height: 40px;
        color: #000000;
        font-weight: 500;
        font-size: 18px;
        margin-top: 20px;
        transition: var(--transition);
        font-family: Arial, Helvetica, sans-serif;
    }

    #btn-send:hover{
        cursor: pointer;
        box-shadow: var(--box-shadow);
        color: var(--color-second);
        background-color: var(--color-primary);
    }*/
    .info-footer {
        padding-top: -8px;
        font-size: 16px;
        margin-left: 30px;
    }
    /* 
    ------------------------
    index.php
    ------------------------
    */
    .liste-services {
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .liste-services b {
        font-size: 16px;
        font-weight: 400;
    }
    .info-head-left {
        position: relative;
        top: 400px;
        width: 35%;
        left: 150px;
    }
    .info-head-right {
        width: 55%;
        background-color: rgb(207, 206, 206);
        height: 100vh;
    }
    .info-head-right img {
        width: 75%;
        padding: 0 30px 0;
        position: relative;
        bottom: 50px;
        top: 50px;
        left: 100px;
    }
    .bock-head {
        display: flex;
        width: 100%;
        margin: 0 auto;
        position: relative;
        justify-content: space-between;
    }
    .tittle-head {
        position: relative;
        font-size: 45px;
        /*font-weight: bold;*/
        color: #000000;
        line-height: 1;
    }
    .info-head {
        font-size: 18px;
        font-weight: normal;
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        padding-top: -10px;
    }

    /*
    .btn-ensavoirplus {
        background-color: var(--color-second);
        width: 250px;
        height: 45px;
        text-align: center;
        margin-top: 40px;
        transition: var(--transition);
    }
    .btn-ensavoirplus:hover {
        background-color: var(--color-primary);
        box-shadow: var(--box-shadow);
        cursor: pointer;
        color: var(--color-second);
    }
    .btn-ensavoirplus:hover a {
        color: var(--color-second);
    }
    .btn-ensavoirplus a {
        color: #ffffff;
        font-size: 18px;
        font-weight: 500;
        font-family: Arial, Poppins, sans-serif;
        transition: var(--transition);
        padding: 20px;
        position: relative;
        top: 10px;
    }*/

    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 50%;
        margin-top: 40px;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left: -130px;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform: translateX(5%);
    }


    .cercle-btn-plus{
        width: 60px;
        height: 60px;
        padding: 10px;
        left: 0;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        height: 60px;
    }

    .btn-en-sav-plus a{
        font-size: 18px;
        top: 7px;
    }




    /* 
    ------------------------------
    main
    ------------------------------
    */


    .a-propos {
        width: 85%;
        justify-content: space-between;
        margin: 0 auto;
        padding: 300px 10px 0 0;
    }
    .img-a-propos {
        width: 50%;
    }
    .img-a-propos img {
        width: 50%;
    }
    .info-a-propos {
        position: relative;
        left: 50px;
        padding: 50px 0px;
        width: 60%;
    }
    .tittle-info {
        font-size: 40px;
        font-weight: 500;
        line-height: 1.1;
        padding: 10px 0;
        letter-spacing: -1;
        width: 100%;
    }

    .cont-info-a-propos {
        font-size: 18px;
    }

    #a-propos {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
    .a-propos-img {
        width: 60%;
        position: relative;
        bottom: 250px;
        opacity: .8;
    }
    .a-propos-img img {
        width: 100%;
    }
    .info-a-propos-servives {
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-top: -200px;
        padding-bottom: 200px;
    }
    .info-a-propos-servives-text {
        position: relative;
        background-color: #ffd900;
        width: 38%;
        height: 650px;
        top: 250px;
        right: 100px;
        border: 15px solid #ffff;
    }
    .info-a-propos-servives-img {
        width: 40%;
    }
    .bg-info-a-propos-servives-text {
        padding: 40px 30px;
    }
    .block-services {
        padding: 35px;
        width: 100%;
    }
    .services {
        display: flex;
        padding: 15px 0;
    }
    .services svg .cls-1 {
        fill: #0000FF;
    }
    .sec-tittle {
        font-size: 30px;
        font-weight: 500;
        cursor: pointer;
        left: 10px;
    }
    .sec-tittle a {
        color: #000;
        transition: var(--transition);
        position: relative;
        top: 5px;
        left: 15px;
        font-family: 'Arial ', Helvetica, sans-serif;
    }
    .sec-tittle:hover a {
        color: #ffffff;
        background-color: #0000ff;
        border-radius: 280px;
        box-shadow: var(--box-shadow-4);
        padding: 5px 20px;
        font-size: 32px;
    }
    .services svg {
        width: 45px;
        margin-right: 10px;
    }
    .btn-decouvrez-lagence {
        padding: 20px;
        text-align: center;
        width: 100%;
        background-color: var(--color-second);
        transition: var(--transition);
        position: relative;
        top: 60px;
    }


    /* .btn-decouvrez-lagence a {
        color: #fff;
        font-size: 23px;
    }
    .btn-decouvrez-lagence:hover {
        cursor: pointer;
        box-shadow: var(--box-shadow-5);
        background-color: #111fbd;
    }
    .button a {
        color: #ffffff;
        font-size: 30px;
        padding-left: 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        transition: var(--transition);
    }
    .button:hover a {
        color: rgb(255, 255, 255);
    }*/


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 60%;
        text-align: center;
        border-radius: 20px 0 20px 0;
        transition: var(--transition);
        display: flex;
        position: relative;
        align-items: center;
        margin: 1% auto;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: -150px;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: translateX(8%);
        opacity: 1;
        color: rgb(255, 255, 255);
    }

    .btn-decouvrer-lagence:hover .btn-d-agencea{
        color: rgb(255, 255, 255);
    }


    .cercle-btn-d-agence{
        width: 60px;
        height: 60px;
        border-radius: 20px 0 20px 0;
        padding: 10px;
        font-size: 25px;
        left: 0;
    }


    .btn-d-agence{
        width: 100%;
        padding: 10px 20px;
        border-radius: 20px 0 20px 0;
        height: 60px;
        transform: translateX(-5%);
    }

    .btn-d-agence a{
        font-size: 18px;
        top: 7px;
    }




    /* 
    --------------------
    nos-services
    --------------------
    */

    #nos-services {
        background-color: #ECECEC;
        width: 100%;
        height: auto;
    }
    .titre-nos-services {
        position: relative;
        font-size: 75px;
        font-weight: 600;
        z-index: 900;
        /* font-family: century gothic, Poppins, arial; */
        /* font-family: var(--font-family2); */
    }
    .sous-titre-nos-services {
        position: relative;
        font-size: 35px;
        font-weight: 400;
        z-index: 900;
        /* font-family: century gothic, Poppins, arial; */
        /* font-family: var(--font-family2); */
    }
    .nos-services {
        width: 80%;
        margin: 0 auto;
        padding-top: 150px;
    }
    .titre-services {
        padding-left: 50px;
    }
    .titre-services-equp {
        padding-left: 50px;
    }

    .liste-ndigital-page-ndigital{
        position: relative;
        left: 35px;
    }

    .souligneur {
        background-color: var(--color-third);
        width: 250px;
        height: 38px;
        position: relative;
        top: -40px;
        left: -5px;
    }
    /* 
    ----------------
    box-services
    ----------------
    */



    #box-services {
        width: 100%;
        padding: 50px 50px 100px 50px;
        text-align: center;
    }
    .box-services {
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        text-align: center;
        gap: 10px;
        padding-bottom: 100px;
        margin: 0 auto;
    }
    .box {
        background-color: #fff;
        width: 23.5%;
        height: auto;
        text-align: center;
        border: 1px solid #fff;
        transition: var(--transition);
    }
    .box:hover {
        background-color: var(--color-hover);
        border: 1px solid var(--color-second);
        box-shadow: var(--box-shadow-3);
        cursor: pointer;
    }
    .box-green {
        background-color: #fff;
        width: 23.5%;
        height: auto;
        justify-content: space-between;
        text-align: center;
        border: 1px solid #fff;
        transition: var(--transition);
        padding: 30px;
    }
    .box-creative {
        background-color: #fff;
        width: 23.5%;
        height: auto;
        justify-content: space-between;
        text-align: center;
        border: 1px solid #fff;
        transition: var(--transition);
        padding: 30px;
    }
    .box-print {
        background-color: #fff;
        width: 23.5%;
        height: auto;
        justify-content: space-between;
        text-align: center;
        border: 1px solid #fff;
        transition: var(--transition);
        padding: 30px;
    }
    .box-digital {
        background-color: #fff;
        width: 23.5%;
        height: auto;
        justify-content: space-between;
        text-align: center;
        border: 1px solid #fff;
        transition: var(--transition);
        padding: 30px;
    }
    .box-print:hover {
        background-color: #FFC800;
        border: 1px solid #FFC800;
        box-shadow: var(--box-shadow-3);
        cursor: pointer;
    }
    .box-digital:hover {
        background-color: var(--color-second);
        border: 1px solid var(--color-second);
        box-shadow: var(--box-shadow-3);
        cursor: pointer;
    }
    .box-creative:hover {
        background-color: #FF6400;
        border: 1px solid #FF6400;
        box-shadow: var(--box-shadow-3);
        cursor: pointer;
    }
    .box-green:hover {
        background-color: #008D36;
        border: 1px solid #008D36;
        box-shadow: var(--box-shadow-3);
        cursor: pointer;
    }
    .box-green:hover h4 {
        color: #fff;
    }
    .box-green h4 {
        margin: 10px 0;
        font-size: 23px;
        font-weight: 700;
        color: #008D36;
        transition: var(--transition);
    }
    .box-digital h4 {
        margin: 10px 0;
        font-size: 23px;
        font-weight: 700;
        color: #0000FF;
        transition: var(--transition);
    }
    .box-creative h4 {
        margin: 10px 0;
        font-size: 23px;
        font-weight: 700;
        color: #FF6400;
        transition: var(--transition);
    }
    .box-print h4 {
        margin: 10px 0;
        font-size: 23px;
        font-weight: 700;
        color: #FFC800;
        transition: var(--transition);
    }
    .box-creative:hover h4 {
        color: rgb(255, 255, 255);
    }
    .box-print:hover h4 {
        color: rgb(255, 255, 255);
    }
    .box-digital:hover h4 {
        color: rgb(255, 255, 255);
    }
    .box:hover h4 {
        color: #fff;
    }
    h4 {
        margin: 10px 0;
        font-size: 25px;
        font-weight: 700;
        color: var(--color-second);
        transition: var(--transition);
    }
    .cont-box {
        padding: 20px;
    }

    .btn-plus {
        color: var(--color-second);
        background-color: var(--color-second);
        border: none;
        width: 200px;
        height: 50px;
        margin-top: 30px;
        transition: var(--transition);
    }

    .btn-plus:hover {
        /* background-color:var(--color-primary); */
        box-shadow: var(--box-shadow-5);
        cursor: pointer;
    }

    .button.btn-plus a {
        font-size: 18px;
        color: #fff;
        padding: 50px 30px;
        transition: var(--transition);
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
    }

    .cont-box svg {
        position: relative;
        top: 10px;
        width: 100%;
    }
    /* box svg */
    .box-print .cls-1 {
        fill: #FFC800;
        transition: ease all .3s;
        padding-top: 30px;
    }
    .box-print:hover .cls-1 {
        fill: #ffffff;
    }
    .box-digital .cls-1 {
        fill: #0000FF;
        transition: ease all .3s;
    }
    .box-digital:hover .cls-1 {
        fill: #ffffff;
    }
    .box-green .cls-1 {
        fill: #008D36;
        transition: ease all .3s;
    }
    .box-green:hover .cls-1 {
        fill: #ffffff;
    }
    .box-creative .cls-1 {
        fill: #FF6400;
        transition: ease all .3s;
    }
    .box-creative:hover .cls-1,
    .cls-2 {
        fill: #ffffff;
    }
    /* 
    ---------------
    réalisation
    ---------------
    */
    #work {
        width: 100%;
        padding: 300px 0 10px 0;
    }
    .work {
        width: 80%;
        justify-content: space-between;
        margin: 0 auto;
        padding: 30px 10px 0 0;
    }
    #realisation {
        display: flex;
        position: relative;
        bottom: -200px;
    }
    .info-realisation {
        position: relative;
        left: 50px;
        padding: 50px 0px;
        width: 60%;
    }
    .realisation-img {
        width: 60%;
        position: relative;
        bottom: 250px;
    }
    .img-realisation {
        margin-bottom: -250px;
        margin-top: -100px;
    }
    .realisation-img img {
        width: 100%;
    }
    .work-picture-ln .zoom {
        transition: var(--transition);
        overflow: hidden;
        width: 100%;
        height: 365px;
    }
    .work-picture-ln img {
        transition: var(--transition);
        width: 100%;
    }
    .work-picture-ln img:hover {
        transform: scale(1.1);
        cursor: pointer;
    }
    .work-picture {
        width: 65%;
        margin: 0 auto;
        padding: 250px 0;
        justify-content: center;
        text-align: center;
    }
    .work-picture-ln {
        display: flex;
        width: 100%;
    }
    .work-picture-ln .img {
        padding: 11px;
    }
    .work-picture-bg {
        margin-top: -58px;
        background-color: #f5f5f5;
        width: 100%;
        justify-content: center;
        text-align: center;
    }


    /* 
    ---------------------
    btn-voir-plus
    ---------------------

    */


    /* 
    .btn-voir-plus {
        background-color: var(--color-second);
        border: none;
        width: 25%;
        height: 50px;
        padding: 15px;
        position: relative;
        top: 30px;
        margin: 0 auto;
        transition: var(--transition);
    }
    .btn-voir-plus:hover {
        cursor: pointer;
        background-color: var(--color-primary);
        box-shadow: var(--box-shadow-4);
    }
    .btn-voir-plus:hover a {
        color: var(--color-second);
    }
    .btn-voir-plus a {
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        transition: var(--transition);
        font-size: 21px;
        color: #FFF;
    }
    .btn-voir-plus img {
        width: 50px;
    }*/


    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 20%;
        border-radius: 20px 0 20px 0;
        margin: 5% auto;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: -80px;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform: translateX(10%);
    }


    .cercle-btn-v-plus{
        width: 60px;
        height: 60px;
        border-radius: 20px 0 20px 0;
        padding: 10px;
        font-size: 25px;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        border-radius: 20px 0 20px 0;
        height: 60px;
        transform: translateX(-5%);
    }

    .btn-v-plus a{
        font-size: 18px;
        top: 7px;
    }


    /* 
    ------------------
    animation
    ------------------
    */

    /*.bg-animation {
        background-color: var(--color-third);
        border: 7px solid #fff;
        width: 70%;
         height: 330px;
       margin: 0 auto;
        position: relative;
        top: -130px;
        z-index: 100;
    }*/

    .animation {
        display: flex;
        margin: 0 auto;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        width: 80%;
        position: relative;
        top: 30px;
    }
    .block-an {
        width: 24%;
        height: auto;
    }
    .block-an img {
        width: 50%;
    }
    .block-an h2 {
        font-size: 45px;
        position: relative;
        top: -20px;
    }
    .block-an p {
        font-size: 25px;
        position: relative;
        top: -30px;
    }
    .team {
        margin: 0 auto;
        width: 80%;
        position: relative;
        padding-top: 200px;
        padding-bottom: 200px;
    }
    #team {
        margin-bottom: 0;
        width: 100%;
        height: auto;
        background-color: #dfdddd;
        position: relative;
        top: 0;
    }
    .team .img-titre-services {
        margin: 0 auto;
    }
    .img-titre-services {
        margin: 0 auto;
    }
    .team-personal {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 80%;
        position: relative;
        margin: 0 auto;
        padding-bottom: 60px;
        justify-content: space-between;
        top: 70px;
    }
    .block-team {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        margin: 60px 0;
        background-image: url(../images/akosse-1.png);
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .2s;
        align-items: center;
    }
    .block-team:hover {
        cursor: pointer;
        background-image: url(../images/akosse.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    #block-team-smt {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        margin: 60px 0;
        background-image: url(../images/smt-01.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .2s;
        align-items: center;
    }
    #block-team-smt:hover {
        cursor: pointer;
        background-image: url(../images/smt-03.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    #block-team-akosse {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        margin: 60px 0;
        background-image: url(../images/akosse-1.png);
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .2s;
        align-items: center;
    }
    #block-team-akosse:hover {
        cursor: pointer;
        background-image: url(../images/akosse-03.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    #block-team-romaric {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        margin: 60px 0;
        background-image: url(../images/romaric-01.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .2s;
        align-items: center;
    }
    #block-team-romaric:hover {
        cursor: pointer;
        background-image: url(../images/romaric-03.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    #block-team-paul {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        margin: 60px 0;
        background-image: url(../images/paul-01.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .2s;
        align-items: center;
    }
    #block-team-paul:hover {
        cursor: pointer;
        background-image: url(../images/paul-03.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .block-team:hover .btn-team {
        display: block;
    }
    .block-team:hover a {
        color: #0000FF;
    }
    .team-info {
        background-color: var(--color-forth);
        width: 100%;
        height: auto;
        position: relative;
        bottom: 60px;
    }
    .block-team-info {
        padding: 10px 20px;
    }
    .block-team-info b {
        text-transform: uppercase;
        color: var(--color-third);
    }
    .block-team-info h2 {
        font-size: 21px;
    }
    .block-team-info p {
        font-size: 16px;
    }
    .btn-team {
        background-color: var(--color-primary);
        width: 100%;
        position: absolute;
        text-align: center;
        bottom: 0;
        right: 0;
        top: 87%;
        height: 50px;
        display: none;
        padding: 15px;
    }
    .btn-team a {
        font-size: 18px;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        color: var(--color-second);
        font-weight: 400;
    }
    .btn-view-team {
        background-color: var(--color-second);
        width: 25%;
        height: auto;
        margin: 0 auto;
        transition: var(--transition);
        text-align: center;
        padding: 15px;
        z-index: 10;
        position: relative;
        top: 70px;
    }
    .btn-view-team a {
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 21px;
        color: #fff;
        transition: var(--transition);
    }
    .btn-view-team:hover {
        cursor: pointer;
        background-color: var(--color-primary);
        box-shadow: var(--box-shadow-4);
    }
    .btn-view-team:hover a {
        color: var(--color-second);
    }


    /* 
    -----------------
    contact
    -----------------

    */
    .bg-contact {
        width: 100%;
        min-height: 100vh;
        background-image: url('../images/bg-contact.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0 auto;
    }
    .tittle-contact {
        text-align: center;
    }
    .tittle-contact .titre-contact {
        position: relative;
        font-size: 75px;
        font-weight: 600;
        z-index: 10;
        font-family: century gothic, Poppins, arial;
    }
    .souligneur-contact {
        background-color: var(--color-third);
        width: 150px;
        height: 38px;
        position: relative;
        top: -45px;
        margin: 0 auto;
    }

    /* 

    .Nous-contactez {
        background-color: var(--color-second);
        width: 30%;
        padding: 20px;
        transition: var(--transition);
        margin: 0 auto;
        text-align: center;
    }
    .Nous-contactez a {
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 18px;
        transition: var(--transition);
        color: #ffffff;
    }
    .Nous-contactez:hover {
        cursor: pointer;
        background-color: var(--color-primary);
        box-shadow: var(--box-shadow-4);
    }
    .Nous-contactez:hover a {
        color: var(--color-second);
    }

    */



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 15%;
        border-radius: 20px 0 20px 0;
        margin: 1% auto;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: -115px;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: translateX(5%);
    }


    .cercle-btn-c-nous{
        width: 60px;
        height: 60px;
        border-radius: 20px 0 20px 0;
        padding: 10px;
        font-size: 25px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        border-radius: 20px 0 20px 0;
        height: 60px;
        z-index: 50;
        transform: translateX(-5%);
    }


    .btn-c-nous a{
        font-size: 18px;
        top: 7px;
    }


    /* 
    -------------------------
    a propos
    -------------------------
    */
    .video-apropos {
        width: 64%;
        height: auto;
        padding: 50px;
        margin: 0 auto;
    }
    .liste-services {
        font-size: 21px;
        font-weight: 600;
        padding-left: 80px;
    }
    /* 
    -----------------------------
    notre experience
    -----------------------------
    */
    #bloc-experience {
        height: auto;
    }
    .bloc-experience {
        margin: 0 auto;
        width: 80%;
        padding: 0 0 100px 0;
    }
    #box-experience {
        width: 80%;
        margin: 0 auto;
    }
    .box-experience {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
    }
    .box-exp {
        width: 24%;
        height: auto;
        /* background-color:var(--color-hover); */
        /*background-color:#f6fbc3;*/
        background-color: #b5d2fc;
        transition: var(--transition);
        justify-content: center;
        text-align: center;
        padding: 20px;
    }
    .box-exp:hover {
        background-color: var(--color-second);
        cursor: pointer;
        box-shadow: var(--box-shadow-5);
    }
    .box-exp:hover .cont-box-exp svg {
        transform: scale(1.2);
    }
    .box-exp:hover h5 {
        color: #fff;
    }
    .cont-box-exp {
        padding: 10px;
        width: 100%;
    }
    .cont-box-exp svg {
        width: 35%;
    }
    .cont-box-exp-ngenie svg {
        width: 25%;
        padding: 50px 0;
    }
    .cont-box-exp-nyusu svg {
        padding: 20px 0;
        width: 60%;
    }
    .cont-box-exp-nyusu svg .cls-1 {
        fill: rgb(95, 95, 95);
        transition: var(--transition);
    }
    .cont-box-exp-ngenie svg .cls-1 {
        fill: rgb(95, 95, 95);
        transition: var(--transition);
    }
    .box-exp:hover .cont-box-exp-nyusu svg .cls-1 {
        fill: rgb(255, 255, 255);
    }
    .box-exp:hover .cont-box-exp-ngenie svg .cls-1 {
        fill: rgb(255, 255, 255);
    }
    .conmyBtn-box-exp .cls-1 {
        fill: rgb(95, 95, 95);
        transition: var(--transition);
    }
    .box-exp:hover .cont-box-exp .cls-1 {
        fill: rgb(255, 255, 255);
    }
    .cont-box-exp-ngenie h5 {
        font-size: 18px;
        line-height: 1;
        font-weight: 500;
        padding-bottom: 20px;
    }
    .cont-box-exp-nyusu h5 {
        font-size: 18px;
        line-height: 1;
        font-weight: 500;
        padding-bottom: 20px;
    }
    .cont-box-exp h5 {
        font-size: 18px;
        line-height: 1;
        font-weight: 500;
        padding-bottom: 10px;
    }
    #team-page {
        padding: 100px 0 200px 0;
        background-color: #fddddd1a;
    }
    #team-page-tearm-info {
        padding: 50px 0;
    }
    /* 
    ---------------------------
    partenaire
    ---------------------------
    */
    .block-partenaire {
        width: 100%;
        margin-top: 150px;
    }
    .cont-block-partenaire {
        padding: 130px 0 150px 0;
        height: auto;
    }
    .block-img-part02 {
        margin-top: 50px;
        margin-left: 50px;
    }
    .block-img-part01 img {
        width: 20%;
        padding: 0 30px;
    }
    .block-img-part02 img {
        width: 20%;
        padding: 0 30px;
    }
    .img-partenaire {
        width: 80%;
        margin: 0 auto;
    }
    /* 
    -------------------------------
    ngenie
    -------------------------------

    */
    .bg-ngenie {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngenie.jpg);
        background-attachment: fixed;
        background-size: cover;
        position: relative;
    }
    .box-ngenie {
        width: 60%;
        padding-top: 100px;
        margin: 0 auto;
    }
    #ngenie {
        margin-bottom: 100px;
        margin-top: 50px;
    }
    .ngenie {
        width: 100%;
        height: auto;
    }
    .box-serv-01,
    .box-serv-02 {
        display: flex;
        padding: 5px;
    }
    .box-serv {
        width: 250px;
        height: auto;
        background-color: var(--color-forth);
        transition: var(--transition);
        justify-content: center;
        text-align: center;
        border-radius: 10px;
        padding: 30px 0;
        border: 1px solid #fff;
        margin: 10px;
    }
    .box-serv:hover {
        background-color: var(--color-second);
        cursor: pointer;
        box-shadow: var(--box-shadow-5);
        border: px solid var(--color-third);
    }
    .bloc-tittre-ngenie {
        display: flex;
        width: 70%;
        justify-content: space-between;
        margin: 0 auto;
    }
    /* 
    ----------------------------
    nGenie
    ----------------------------
    */
    .info-page-service {
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin: 0 auto;
        padding-top: 120px;
        padding-bottom: 100px;
    }
    .info-page-services {
        width: 100%;
        justify-content: center;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .info-page-service-text {
        width: 80%;
    }
    .info-page-imga {
        width: 100%;
        padding-top: 30px;
    }
    .info-page-imga img {
        width: 100%;
    }
    .banner-services {
        margin: 0 auto;
        position: absolute;
        bottom: -70px;
    }
    .banner-services img {
        width: 100%;
        margin: 0 auto;
    }
    #box-experience-services {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .box-experience-service {
        width: 50%;
        margin: 0 auto;
        justify-content: center;
    }
    .bg-nyusu-services {
        width: 100%;
        padding: 50px 0;
    }
    .block-info-nyusu {
        width: 100%;
        padding: 10px 0 0 0;
    }
    .tittle-service-pack {
        margin: 0 auto;
        width: 80%;
    }
    .pack-offres {
        width: 100%;
        margin: 0 auto;
        padding: 60px 0 0 0;
    }
    .list-pack {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 0 auto;
        width: 75%;
    }
    .pack {
        background-color: #ffffff;
        height: auto;
        width: 23%;
        margin: 0 auto;
        box-shadow: 0 0 8px #b6b6b6;
        position: relative;
        padding-bottom: 50px;
    }
    .souligner-tittle-pack {
        background-color: var(--color-third);
        width: 80%;
        height: 2px;
        margin: 0 auto;
        margin-bottom: 30px;
    }
    .titte-pack h1 {
        text-align: center;
        padding: 20px 0;
        font-size: 21px;
    }
    .content-pack {
        padding: 0 30px;
        font-size: 15px;
    }
    .price-pack {
        font-size: 25px;
        padding: 50px 30px;
        font-weight: 600;
        text-align: center;
        font-family: Arial, Poppins, sans-serif;
    }
    .btn-view-pack {
        background-color: var(--color-second);
        border: none;
        text-align: center;
        width: 100%;
        height: 50px;
        transition: var(--transition);
        position: absolute;
        cursor: pointer;
        left: 0;
        bottom: 0;
    }
    .btn-view-pack a {
        padding: 50px;
        font-size: 18px;
        color: #ffffff;
    }
    .btn-view-pack:hover {
        background-color: var(--color-third);
    }
    .btn-view-pack:hover a {
        color: var(--color-second);
    }
    #ilust {
        width: 100%;
        height: 100vh;
        background-image: url(../images/bg-paralax.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .animation-ngenie {
        width: 75%;
        bottom: -50px;
        margin: 0 auto;

    }
    .tittle-an-ngenie {
        text-align: center;
        padding-top: 120px;
    }
    .par-ngenie {
        text-align: center;
        padding-top: 50px;
    }
    .btn-nous-contactez-ngenie {
        background-color: var(--color-second);
        width: 25%;
        padding: 20px;
        text-align: center;
        margin: 0 auto;
        transition: var(--transition);
        cursor: pointer;
    }
    .btn-nous-contactez-ngenie a {
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 18px;
        transition: var(--transition);
    }
    .btn-nous-contactez-ngenie:hover {
        background-color: #0a0a6d;
        box-shadow: 0 0 5px rgb(139, 139, 139);
    }
    .btn-nous-contactez-ngenie:hover a {
        color: #fff;
    }
    /* 
    -------------------------
    temoignage
    -------------------------
    */
    .temoignage {
        width: 100%;
        padding: 100px 0 200px 0;
    }
    .temoignage-01 {
        background-color: #F3EFCE;
        border: 2px solid #FFCC00;
        border-radius: 10px;
        margin: 0 auto;
        width: 50%;
        height: 280px;
        display: flex;
        justify-content: space-between;
    }
    .image-temoignage {
        width: 30%;
        position: relative;
        top: -100px;
        left: 50px;
    }
    .block-temoignage {
        position: relative;
        margin-top: -100px;
    }
    .block-text-temoignage {
        width: 60%;
        position: relative;
    }
    .image-temoignage img {
        width: 100%;
        margin: 0 auto;
    }
    .text-temoignage {
        padding: 50px 0 30px 0;
    }
    .nom-temoin {
        font-size: 21px;
        font-weight: 600;
        text-align: center;
    }
    .date-temoignage {
        font-size: 16px;
        font-weight: 600;
        padding-top: 10px;
    }
    .box-carr {
        margin: 0 auto;
        width: 20%;
        padding-top: 50px;
        position: absolute;
        right: 50%;
        left: 50%;
    }
    .box-carr ul {
        display: flex;
        text-align: center;
    }
    .box-carr ul li {
        background-color: #ffffff;
        width: 15px;
        height: 15px;
        border-radius: 200px;
        margin: 1px;
        border: 1px solid #0000FF;
    }
    .box-carr ul li.active {
        background-color: var(--color-third);
    }
    /* 
    -----------------------------
    partenaire
    -----------------------------
    */
    #block-partenaire {
        width: 100%;
        background-color: rgb(235, 235, 235);
    }
    .list-partenaire {
        width: 80%;
        margin: 0 auto;
        position: relative;
    }
    #block-liste-partenaire {
        width: 100%;
        margin: 0 auto;
        position: relative;
    }
    .block-partenaire {
        width: 80%;
        margin: 0 auto;
    }
    .liste-partenaire {
        width: 60%;
        height: auto;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 0 auto;
    }
    .logo-part-01 {
        transition: var(--transition);
        overflow: hidden;
        width: 18%;
        height: auto;
    }
    .logo-part-01 img {
        transition: var(--transition);
        width: 100%;
    }
    .logo-part-01 img:hover {
        transform: scale(1.1);
        cursor: pointer;
    }
    /* 
    --------------------------
    Parlons
    --------------------------
    */

    #block-nous-contacter {
        width: 100%;
        min-height: 90vh;
        padding-top: 300px;
        background-image: url('../images/bg-contact.png');
        background-repeat: no-repeat;
        background-size: cover;
        /* margin-top: -300px; */
    }

    #block-nous-contacter-autre {
        width: 100%;
        min-height: 80vh;
        padding-top: 250px;
        background-image: url('../images/bg-contact.png');
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: 0px;
    }

    .block-nous-contacter {
        width: 80%;
        margin: 0 auto;
    }

     /* 
    .btn-nous-contactez {
        margin: 0 auto;
        width: 20%;
        height: auto;
        text-align: center;
        background-color: var(--color-second);
        padding: 15px;
        position: relative;
        top: 30px;
    }
    .btn-nous-contactez a {
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 21px;
        transition: var(--transition);
        color: #ffffff;
        padding: 30px;
    }
    .btn-nous-contactez:hover {
        cursor: pointer;
        background-color: var(--color-primary);
        box-shadow: var(--box-shadow-4);
    }
    .btn-nous-contactez:hover a {
        color: var(--color-second);
    }
    */


    /* 
    -----------------------------------
    nprint
    ----------------------------------
    */
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nprint01.png);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #nprint {
        margin-top: 100px;
    }
    #nprint-equipement {
        margin-top: 200px;
        width: 100%;
    }
    .nprint-info {
        width: 100%;
        margin: 0 auto;
    }
    .nprint-info-text {
        width: 95%;
        position: relative;
    }
    .nprint-info-text-para {
        width: 70%;
        position: relative;
        z-index: 200;
    }
    
    .nprint-info-image {
        width: 30%;
        position: relative;
        left: -50px;
        opacity: .8;
    }
    .nprint-info-image img {
        width: 500px;
    }
    .nprint-info-image-1 {
        position: relative;
        width: 20%;
        bottom: 0;
        z-index: 1;
        opacity: .8;
        left: -100px;
    }
    .nprint-info-image-1 img {
        width: 500px;
    }
    #pres-nprint {
        width: 100%;
        position: relative;
        z-index: 100;
    }
    .pres-nprint {
        width: 60%;
        margin: 0 auto;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .pres-nprint-01 {
        background-color: #FFF5B4;
        width: 48.5%;
        height: auto;
        cursor: pointer;
        transition: var(--transition);
    }
    .pres-nprint-01:hover {
        background-color: var(--color-seventh);
        box-shadow: 0 0 5px #4b4b4b;
    }
    .pres-nprint-01:hover .cls-1 {
        fill: #fff;
    }
    .pres-nprint-01:hover p {
        color: #fff;
    }
    .print-numerique {
        width: 100%;
    }
    .print-numerique svg {
        width: 100%;
        margin-top: 120px;
    }
    .print-numerique p {
        padding: 0 50px 10px 50px;
        font-size: 18px;
        text-align: center;
        font-weight: 500;
        position: relative;
        top: 10px;
        color: #5B5B5B;
    }
    .pres-nprint-02 {
        width: 48.5%;
        height: auto;
        cursor: pointer;
        gap: 10px;
        transition: var(--transition);
    }
    .pres-nprint-num {
        flex-wrap: wrap;
        gap: 10px;
        display: flex;
        justify-content: space-between;
        text-align: center;
        width: 100%;
    }
    .cont-print-offset {
        padding: 10px;
    }
    .print-offset {
        width: 48.5%;
        height: auto;
        background-color: #FFF5B4;
        cursor: pointer;
        transition: var(--transition);
        padding: 20px 0;
    }
    .print-offset:hover {
        background-color: var(--color-seventh);
        box-shadow: 0 0 5px #4b4b4b;
    }
    .print-offset:hover .cls-1 {
        fill: #fff;
    }
    .print-offset:hover p {
        color: #fff;
    }
    .print-offset svg {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 10px;
    }
    .print-offset p {
        font-size: 16px;
        padding-bottom: 10px;
        color: #5B5B5B;
        font-weight: 500;
    }


    #print-offset-nprint{
        width: 32.7%;
        height: auto;
        background-color:var(--color-nprint);
        cursor: pointer;
        transition: var(--transition);
        padding: 20px 0;
    }

    /* 
    ---------------------------
    Equipement
    --------------------------
    */
    .nprint-equipement {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .nprint-equipement img {
        width: 80%;
        padding: 100px;
        margin: 0 auto
    }
    /* 
    -----------------------
    citation nprint
    -----------------------
    */
    .nprint-citation {
        background-color: #F6ECA9;
        width: 100%;
        height: auto;
        text-align: center;
    }
    .cont-nprint-citation {
        padding: 100px 50px;
    }
    .cont-nprint-citation h2 {
        font-size: 30px;
        padding-bottom: 30px;
    }
    .btn-nous-contactez-print {
        position: relative;
        background-color: var(--color-second);
        width: 20%;
        height: 50px;
        transition: var(--transition);
        text-align: center;
        cursor: pointer;
        margin: 0 auto;
        top: 30px;
    }
    .btn-nous-contactez-print a {
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 21px;
        transition: var(--transition);
        color: #ffffff;
        position: relative;
        top: 10px;
    }
    .btn-nous-contactez-print:hover {
        background-color: var(--color-third);
    }
    .btn-nous-contactez-print:hover a {
        color: var(--color-second);
    }
    /* 
    ----------------------------
    ncreative
    ----------------------------
    */
    .bg-ncreative {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ncreative-01.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .ncreative-info-image {
        bottom: 0;
        top: -150px;
        left: -200px;
        opacity: .5;
    }
    .ncreative-info-image img {
        width: 400px;
    }
    #ncreative {
        margin-top: 30px;
        position: relative;
        top: 120px;
        width: 100%;
    }
    .pres-ncreative {
        width: 100%;
    }
    .pres-ncreative-num {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        /*justify-content: space-between;*/
        width: 100%;
        gap: 10px;
    }
    .ncreative-offset {
        width: 32.5%;
        height: auto;
        background-color: #FFF5B4;
        cursor: pointer;
        transition: var(--transition);
        padding: 20px 0;
    }


    .ncreative-offset svg {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 10px;
    }
    .ncreative-offset p {
        font-size: 16px;
        padding-bottom: 10px;
        color: #5B5B5B;
        font-weight: 500;
    }
    .ncreative-offset-ngreen {
        width: 32.5%;
        height: auto;
        cursor: pointer;
    }
    .ncreative-offset-ngreen svg {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 10px;
    }
    .ncreative-offset-ngreen p {
        font-size: 16px;
        padding-bottom: 10px;
        font-weight: 500;
    }
    .bloc-nprint-info-text {
        width: 100%;
        padding: 20px;
    }

    .ncreative-offset-serigraphie {
        width: 32%;
        height: auto;
        cursor: pointer;
        transition: var(--transition);
    }
    .ncreative-offset-serigraphie p {
        position: relative;
        top: 25px;
        color: #5B5B5B;
        font-weight: 500;
        transition: var(--transition);
    }
    .ncreative-offset-atelier {
        width: 32%;
        height: auto;
        cursor: pointer;
        transition: var(--transition);
    }
    .ncreative-offset-atelier svg {
        padding: 8px;
        transition: var(--transition);
    }
    .ncreative-offset-atelier p {
        position: relative;
        top: 10px;
        color: #5B5B5B;
        font-weight: 500;
        transition: var(--transition);
    }
    .ncreative-offset-broderie {
        width: 32%;
        height: auto;
        cursor: pointer;
        transition: var(--transition);
    }
    .ncreative-offset-broderie p {
        position: relative;
        top: -10px;
        color: #5B5B5B;
        font-weight: 500;
    }
    /* hover box offset */
    /* serigraphie */
    .ncreative-offset-serigraphie:hover {
        background-color: var(--color-seventh);
        box-shadow: 0 0 5px #4b4b4b;
    }
    .ncreative-offset-serigraphie:hover .cls-1 {
        fill: #fff;
    }
    .ncreative-offset-serigraphie:hover p {
        color: #fff;
    }
    /* offset */
    .ncreative-offset:hover {
        background-color: var(--color-seventh);
        box-shadow: 0 0 5px #4b4b4b;
    }
    .ncreative-offset:hover .cls-1 {
        fill: #fff;
    }
    .ncreative-offset:hover p {
        color: #fff;
    }
    /* atelier de finition */
    .ncreative-offset-atelier:hover {
        background-color: var(--color-seventh);
        box-shadow: 0 0 5px #4b4b4b;
    }
    .ncreative-offset-atelier:hover .cls-1 {
        fill: #fff;
    }
    .ncreative-offset-atelier:hover p {
        color: #fff;
    }
    /* broderie */
    .ncreative-offset-broderie:hover {
        background-color: var(--color-seventh);
        box-shadow: 0 0 5px #4b4b4b;
    }
    .ncreative-offset-broderie:hover .cls-1 {
        fill: #fff;
    }
    .ncreative-offset-broderie:hover p {
        color: #fff;
    }
    .ncreative-equipement {
        width: 100%;
        text-align: center;
    }
    .ncreative-realisation {
        display: flex;
        width: 50%;
        margin: 0 auto;
        justify-content: space-between;
        padding-bottom: 300px;
    }
    .ncreative-realisation img {
        width: 70%;
    }
    /* 
    ===========================
    nDigital
    ===========================
    */
    .bg-nDigital {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ndigital.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .ndigital-prestation {
        width: 100%;
        margin-bottom: -10px;
    }
    .ndigital-prestation img {
        width: 100%;
    }
    /* 
    ===========================
    nGreen
    ===========================
    */
    .bg-ngreen {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/Pesticides_agricoles.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    /* 
    ===========================
    nDev
    ===========================
    */
    .bg-nDev {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/website-scaled.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    /* 
    ============================
    ngreen
    ============================
    */
    .block-ngreen {
        margin: 100px 0 0 0;
    }
    /* 
    ==========================
    Contact
    ==========================
    */
    .header {
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }
    .header img {
        width: 100%;
        height: auto;
    }
    .content-contact {
        padding: 200px 0 100px 0;
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
    .block-contact {
        width: 80%;
        margin: 0 auto;
        justify-content: center;
        padding-top: 50px;
    }
    .info-page {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 100px;
    }
    .info-page-contact {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 10px;
    }
    .info-page-nprint {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 100px;
    }
    .info-titre-page {
        margin-top: -15px;
        font-size: 21px;
        padding-left: 15px;
        font-family: Arial, Helvetica, sans-serif;
    }
    /* 
    ====================
    contact
    ====================
    */
    #info-contact {
        width: 100%;
    }
    .info-contact {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 80%;
        justify-content: space-between;
        margin: 0 auto;
    }
    .info-contact-index {
        text-align: center;
    }
    .tittle-form {
        padding: 50px 0;
    }
    .tittle-form h1 {
        font-family: century gothic, arial, Poppins;
        font-size: 45px;
        padding-left: 20px;
    }
    .map {
        position: relative;
        top: -30px;
    }
    .map .button {
        background-color: var(--color-second);
        width: 60%;
        height: auto;
        font-size: 18px;
        padding: 10px;
        margin-top: 60px;
        transition: var(--transition);
        cursor: pointer;
        text-align: center;
    }
    .map .button:hover {
        background-color: var(--color-primary);
        --box-shadow-4: 0 0 5px #FFCC00;
    }
    .map .button:hover a {
        color: var(--color-second);
    }
    .map .button a {
        font-size: 18px;
        text-align: center;
        display: inline-block;
        padding-right: 20px;
    }
    #form-contact {
        width: 50%;
        background-color: var(--color-forth);
    }
    .form-contact {
        padding: 20px;
    }
    .contact-nyusu {
        width: 80%;
    }
    .block-icones-footer img {
        width: 30px;
    }
    .block-icones-footer span {
        position: relative;
        top: -5px;
    }
    .block-icones-footer img span {
        font-size: 21px;
        font-weight: 500;
        position: relative;
        top: -50px;
    }
    .checkbox {
        font-size: 15px;
        padding-left: 5px;
    }
    .type input[type="checkbox"] {
        margin-left: 10px;
    }
    #btn-send {
        background-color: #0000FF;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 18px;
        margin-left: 0;
        margin-bottom: 20px;
    }
    #nyusu-rx {
        width: 100%;
        position: relative;
        padding-top: 50px;
        margin: 0 auto;
        right: 0;
        right: 0;
    }
    .nyusu-rx {
        width: 100%;
    }
    .nyusu-rx i {
        font-size: 35px;
        color: #6e6d6d;
    }
    .tittle-rx {
        font-size: 25px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 10px;
        color: #4b4b4b;
    }
    /* 
    =============================
    noffres
    =============================
    */
    .cont-header-noffre {
        background-color: #00e0fe10;
        width: 100%;
        height: 100%;
        padding-top: 18%;
    }
    .tittre-noffre {
        width: 60%;
        font-size: 60px;
        text-align: center;
        line-height: 1.2;
        margin: 0 auto;
        font-weight: 800;
        color: var(--color-fifth);
    }
    .para-noffre {
        width: 40%;
        font-size: 25px;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        padding-top: 20px;
        color: var(--color-fifth);
    }
    .btn-noffre {
        background-color: var(--color-second);
        width: 20%;
        height: auto;
        margin: 50px auto;
        text-align: center;
        padding: 25px 30px;
        cursor: pointer;
        transition: var(--transition);
    }
    .btn-noffre:hover {
        background-color: var(--color-primary);
        box-shadow: var(--box-shadow);
    }
    .btn-noffre:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-noffre a {
        color: #fff;
        font-size: 20px;
        text-align: center;
        font-weight: 500;
    }
    .titre-bloc-kit {
        padding-top: 150px;
        font-size: 45px;
        font-weight: 700;
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }
    .list-kits {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: space-between;
        width: 70%;
        margin: 0 auto;
        padding: 200px 0 20px 0;
    }
    .box-kit {
        width: 24%;
        height: 520px;
        padding: 40px;
        background-color: #fff;
        border: solid 1px #a5a5a5;
        box-shadow: 0 0 10px #00000038;
        cursor: pointer;
        position: relative;
        transition: ease all .3s;
    }
    .box-kit:hover {
        transform: scale(1.1);
        background-color: #d0e9ff;
    }
    #kit-digital {
        width: 24%;
        height: 720px;
        padding: 40px;
        border: solid 1px #a5a5a5;
        box-shadow: 0 0 10px #00000038;
        cursor: pointer;
        position: relative;
        top: -100px;
        transition: ease all .3s;
        background-color: #c5c5c5;
    }
    #kit-digital:hover {
        transform: scale(1.1);
        background-color: #d0e9ff;
    }
    .cont-box-kit h3 {
        text-align: center;
        padding-bottom: 10px;
        font-size: 25px;
    }
    .souligneur-titre-box-kit {
        width: 80%;
        height: 2px;
        margin: 10px auto;
        background-color: #cc530d;
    }
    .price-kit {
        font-size: 28px;
        font-weight: 700;
        color: #000000;
        text-align: center;
        padding: 20px 0;
    }
    .btn-box-kit {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--color-second);
        padding: 10px;
        text-align: center;
        color: #FFF;
        transition: ease all .3s;
    }
    .btn-box-kit:hover {
        background-color: var(--color-primary);
    }
    .btn-box-kit:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-box-kit a {
        color: #FFF;
        font-size: 18px;
    }
    .cont-cit-kit h3 {
        font-size: 35px;
    }
    #cit-kit {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 200px 0;
        background-color: #ecf7ff;
    }
    .par-cit-kit {
        width: 50%;
        margin: 3% auto;
        padding: 10px;
    }
    .btn-cit-kit {
        width: 18%;
        height: auto;
        margin: 0 auto;
        text-align: center;
        background-color: var(--color-second);
        padding: 22px 30px;
        cursor: pointer;
        transition: ease all .3s;
    }
    .btn-cit-kit:hover {
        background-color: var(--color-primary);
        box-shadow: var(--box-shadow);
    }
    .btn-cit-kit:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-cit-kit a {
        color: rgb(255, 255, 255);
        font-size: 20px;
    }
    .cont-header-kit-print {
        width: 100%;
        height: 100vh;
        text-align: center;
        padding-top: 220px;
        background-color: #e8eeb198;
    }
    .cont-header-kit-digital {
        width: 100%;
        height: 100vh;
        text-align: center;
        padding-top: 190px;
        background-color: #e0f4f7;
    }
    .cont-header-kit-event {
        width: 100%;
        height: 100vh;
        text-align: center;
        padding-top: 200px;
        background-color: #eeeff5;
    }
    .cont-header-kit-smedia {
        width: 100%;
        height: 100vh;
        text-align: center;
        padding-top: 150px;
        background-color: #ebf5ff;
    }
    /* KIT PRINT */
    #block-kit-print {
        padding: 100px 0 150px 0;
    }
    #block-kit-digital {
        padding: 100px 0 150px 0;
    }
    #block-kit-event {
        padding: 100px 0 150px 0;
    }
    #block-kit-s-media {
        padding: 100px 0 150px 0;
    }
    .detail-kit {
        width: 80%;
        margin: 0 auto;
    }
    .list-detail-kit {
        list-style: circle;
    }
    .cont-detail-kit {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        padding-top: 100px;
    }
    .list-detail-kit {
        width: 60%;
    }
    .img-detail-kit {
        width: 39%;
        border: solid 1px #000000;
        margin-top: 30px;
    }
    #block-kit-event .img-detail-kit {
        width: 39%;
        border: solid 1px #000000;
        height: 780px;
    }
    #block-kit-digital .img-detail-kit {
        width: 39%;
        border: solid 1px #000000;
        height: 650px;
    }
    #block-kit-s-media .img-detail-kit {
        width: 39%;
        border: solid 1px #000000;
        height: 580px;
    }
    #block-kit-print .img-detail-kit {
        width: 39%;
        border: solid 1px #000000;
        height: 620px;
    }
    .img-detail-kit img {
        padding: 50px;
        width: 100%;
        margin-top: 60px;
    }
    #img-detail-kit-print {
        padding-top: 30px;
    }
    #img-detail-kit-smedia img {
        padding: 0px;
        width: 65%;
        margin-top: 50px;
        position: relative;
        left: 70px;
    }
    .detail-kit h3 {
        width: 100%;
        margin: 10px auto;
        text-align: center;
        font-size: 35px;
    }
    .bande-separateur {
        width: 40%;
        height: 5px;
        background-color: var(--color-primary);
        margin: 0 auto;
        position: relative;
        z-index: 100;
    }
    .bande-separateur-2 {
        width: 20%;
        height: 10px;
        background-color: var(--color-primary);
        margin: 0 auto;
        position: relative;
        z-index: 200;
    }
    #bande-separateur-digital {
        background-color: var(--color-second);
    }
    #bande-separateur-digital-2 {
        background-color: var(--color-second);
    }
    #bande-separateur-event {
        background-color: #c1c4f1;
    }
    #bande-separateur-event-2 {
        background-color: #c1c4f1;
    }
    #bande-separateur-smedia {
        background-color: #66cfe3;
    }
    #bande-separateur-smedia-2 {
        background-color: #66cfe3;
    }
    .list-detail-kit h3 {
        padding-bottom: 20px;
        position: relative;
        left: -220px;
    }
    #list-detail-kit-print h3 {
        position: relative;
        left: -180px;
    }
    #list-detail-kit-smedia h3 {
        position: relative;
        left: -170px;
    }
    #list-detail-kit-event h3 {
        position: relative;
        left: -230px;
    }
    .list-detail-kit h4 {
        padding: 20px 0;
        position: relative;
        left: -60px;
        color: #000;
    }
    .list-detail-kit li {
        list-style: square;
        padding-left: 10px;
        line-height: 2;
        font-size: 14px;
    }
    .price-kit {
        font-size: 30px;
        color: #000000;
        font-weight: 700;
        text-align: center;
        padding-top: 30px;
    }
    .btn-kit {
        background-color: var(--color-primary);
        width: 80%;
        margin: 10px auto;
        padding: 15px;
        text-align: center;
        color: rgb(255, 255, 255);
        cursor: pointer;
        transition: ease all .3s;
    }
    .btn-kit-event {
        background-color: #c1c4f1;
        width: 80%;
        margin: 10px auto;
        padding: 15px;
        text-align: center;
        color: rgb(255, 255, 255);
        cursor: pointer;
        transition: ease all .3s;
    }
    .btn-kit-smedia {
        background-color: #66cfe3;
        width: 80%;
        margin: 10px auto;
        padding: 15px;
        text-align: center;
        color: rgb(255, 255, 255);
        cursor: pointer;
        transition: ease all .3s;
    }
    .btn-kit-smedia:hover {
        box-shadow: 0 0 10px #66cfe3;
    }
    .btn-kit-event:hover {
        box-shadow: 0 0 10px #c1c4f1;
    }
    .btn-kit-event a {
        color: rgb(255, 255, 255);
        font-size: 18px;
        font-weight: 600;
    }
    .btn-kit-smedia a {
        color: rgb(255, 255, 255);
        font-size: 18px;
        font-weight: 600;
    }
    .btn-kit:hover {
        background-color: var(--color-primary);
        box-shadow: var(--box-shadow);
    }
    .btn-kit a {
        color: rgb(255, 255, 255);
        font-size: 18px;
        font-weight: 600;
    }
    #autre-kit {
        background-color: #effeff;
        height: auto;
        width: 100%;
    }
    .btn-kit-digital {
        background-color: var(--color-second);
        width: 80%;
        margin: 15px auto;
        padding: 15px;
        text-align: center;
        color: rgb(255, 255, 255);
        cursor: pointer;
        transition: ease all .3s;
    }
    #price-kit-digital {
        font-size: 30px;
        color: #000000;
        font-weight: 700;
        text-align: center;
        padding-top: 0;
    }
    .btn-kit-digital:hover {
        color: #fff;
        box-shadow: var(--box-shadow-5);
    }
    .btn-kit-digital:hover a {
        color: #fff;
        font-weight: 600;
    }
    .btn-kit-digital a {
        color: rgb(255, 255, 255);
        font-size: 18px;
        font-weight: 600;
    }
    /* 
    =========================
    Portfolio
    =========================
    */
    #portfolio {
        width: 100%;
        height: 60vh;
    }
    .cont-header-portfolio {
        background-color: #dbddf8;
        ;
        width: 100%;
        height: 60vh;
    }
    #cont-portfolio {
        position: relative;
        bottom: -100px;
    }
    .block-cont-header-port {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 0 auto;
        justify-content: space-between;
        padding-top: 250px;
    }
    .tittle-header-port {
        width: 50%;
    }
    .tittle-header-port h3 {
        font-size: 50px;
        line-height: 1.1;
    }
    .par-header-port {
        width: 100%;
        padding: 20px;
        font-size: 16px;
        font-weight: 500;
    }
    .btn-header {
        background-color: var(--color-second);
        width: 20%;
        padding: 20px;
        position: relative;
        left: 180px;
        top: -30px;
        cursor: pointer;
        text-align: center;
        transition: ease all .3s;
    }
    .btn-header:hover {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.432);
    }
    .btn-header a {
        color: rgb(255, 255, 255);
    }
    #cont-portfolio {
        width: 80%;
        margin: 0 auto;
        padding: 100px;
        position: relative;
    }
    .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        width: 75%;
        height: auto;
    }
    .realisation-par-service {
        position: sticky;
        width: 24%;
        top: 65px;
        left: 90%;
    }
    #logo .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        width: 76%;
    }
    #logo .logo-realisation {
        width: 30%;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 21px;
        font-weight: 500;
        transition: ease all .3s;
        list-style: square;
    }
    .realisation-par-service li:hover {
        background-color: #d3d6fa;
    }
    .realisation-par-service li.active {
        background-color: #d3d6fa;
    }
    .logo-realisation {
        cursor: pointer;
        transition: all ease .3s;
        width: 45%;
        position: relative;
        top: -250px;
    }
    .logo-realisation img {
        width: 100%;
    }
    .logo-realisation:hover {
        background-color: #d3d6fa;
        padding-left: 25px;
        padding-bottom: 15px;
    }
    .logo-realisation:hover img {
        box-shadow: -10px 10px 10px #0000006c;
    }
    #comment-portfolio {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: space-between;
        width: 70%;
        margin: 0 auto;
        padding-bottom: 200px;
    }
    .comment-portfolio {
        width: 65%;
        position: relative;
        top: 50px;
    }
    .comment-portfolio p {
        font-size: 30px;
        font-weight: 500;
    }
    .img-comment-portfolio {
        width: 30%;
    }
    .img-comment-portfolio img {
        width: 100%;
    }
    .btn-comment-portfolio {
        background-color: var(--color-primary);
        width: 35%;
        padding: 15px;
        text-align: center;
        margin-top: 20px;
        cursor: pointer;
        transition: ease all .3s;
    }

    /* .btn-comment-portfolio:hover {
        box-shadow: 0 0 20px #000000;
        background-color: var(--color-second);
    } */

    .btn-comment-portfolio:hover a {
        color: rgb(255, 255, 255);
    }
    .btn-comment-portfolio a {
        color: rgb(0, 0, 0);
        font-size: 18px;
        font-weight: 600;
    }
    #webdesign,
    #creation-graphique,
    #logo {
        padding-bottom: 20px;
    }
    /* 
    ======================
    Location
    ======================
    */
    #produit-01 {
        background-color: #f0fefe;
    }
    .produit-01 {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 0 auto;
        justify-content: space-between;
        padding: 200px 0;
    }
    .image-prod01 {
        width: 55%;
        height: 555px;
        background-image: url(../images/location-prod02.jpg);
        background-size: auto;
        cursor: pointer;
        transition: all ease .3s;
    }
    .image-prod01:hover {
        width: 55%;
        height: 555px;
        background-image: url(../images/location-prod05.jpg);
        background-size: auto;
    }
    .par-prod01 {
        width: 43%;
        padding: 30px 50px;
    }
    .par-prod01 h5 {
        padding: 0 0 20px 0;
        font-size: 25px;
    }
    .par-prod01 p {
        font-size: 15px;
    }
    .titre-pro01 {
        width: 60%;
        padding: 50px;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 30px;
    }
    .titre-pro01 h1 {
        font-size: 45px;
        margin-bottom: 20px;
    }
    .bloc-prix-location {
        display: flex;
        width: 90%;
        justify-content: space-between;
        padding: 30px 0;
    }
    .prix-location {
        font-size: 35px;
        font-weight: 700;
    }
    .njour-location {
        position: relative;
        top: 15px;
    }
    .njour-location span {
        background-color: #ff9900;
        padding: 20px 25px;
    }
    .btn-location-prod01 {
        width: 60%;
        padding: 20px 25px;
        background-color: var(--color-second);
        text-align: center;
        cursor: pointer;
        transition: ease all .3s;
    }
    .btn-location-prod01:hover {
        background-color: var(--color-primary);
        box-shadow: 0 0 20px rgba(41, 40, 40, 0.233);
    }
    .btn-location-prod01:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-location-prod01 a {
        font-size: 18px;
        color: #FFF;
    }
    #produit-02 {
        background-color: #feece5;
        width: 100%;
        padding: 150px 0;
    }
    .produit-02 {
        width: 70%;
        margin: 0 auto;
        text-align: center;
    }
    .image-prod02 {
        width: 65%;
        height: 560px;
        margin: 0 auto;
        background-image: url(../images/location-prod12.jpg);
        background-size: auto;
        cursor: pointer;
        transition: all ease .3s;
    }
    .image-prod02:hover {
        width: 65%;
        height: 560px;
        background-image: url(../images/location-prod11.jpg);
        background-size: auto;
    }
    .bloc-prix-location-prod02 {
        width: 40%;
        display: flex;
        padding: 30px 0;
        justify-content: space-between;
        margin: 0 auto;
    }
    .bloc-prix-location-prod02 .prix-location {
        font-size: 45px;
        font-weight: 700;
    }
    .bloc-prix-location-prod02 .njour-location {
        position: relative;
        top: 20px;
    }
    .bloc-prix-location-prod02 .njour-location span {
        background-color: #eeff00;
        padding: 20px 25px;
    }
    .titre-prod02 {
        width: 60%;
        padding: 50px;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 30px;
    }
    .titre-prod02 h1 {
        font-size: 45px;
        margin-bottom: 20px;
    }
    .titre-prod02 b {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .par-prod02 {
        width: 60%;
        margin: 0 auto;
        text-align: center;
    }
    .par-prod02 b {
        font-size: 25px;
    }
    .para-prod02 {
        width: 75%;
        margin: 0 auto;
        position: relative;
        top: -40px;
    }
    .para-prod02 b {
        font-size: 25px;
    }
    .btn-location-prod02 {
        width: 40%;
        padding: 20px 25px;
        background-color: var(--color-second);
        text-align: center;
        cursor: pointer;
        transition: ease all .3s;
        margin: 0 auto;
    }
    .btn-location-prod02:hover {
        background-color: var(--color-primary);
        box-shadow: 0 0 20px rgba(41, 40, 40, 0.233);
    }
    .btn-location-prod02:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-location-prod02 a {
        font-size: 18px;
        color: #FFF;
    }
    /*
    =======================
    produit 03
    =======================
    */
    #produit-03 {
        padding: 100px 0;
        margin: 0 auto;
        width: 80%;
    }
    .image-prod03 {
        display: flex;
        flex-wrap: wrap;
        grid-area: 5px;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .img-prod03 {
        width: 28%;
        cursor: pointer;
        transition: all ease .3s;
    }
    .img-prod03:hover {
        transform: scale(1.1);
    }
    .img-prod03 img {
        width: 80%;
    }
    .par-prod03 {
        width: 48%;
        margin: 0 auto;
        padding-top: 80px;
        padding-bottom: 20px;
    }
    .btn-location-prod03 {
        width: 50%;
        padding: 15px 20px;
        background-color: var(--color-second);
        text-align: center;
        cursor: pointer;
        transition: ease all .3s;
        margin: 10px auto;
    }
    .btn-location-prod03:hover {
        background-color: var(--color-primary);
        box-shadow: 0 0 20px rgba(41, 40, 40, 0.233);
    }
    .btn-location-prod03:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-location-prod03 a {
        font-size: 18px;
        color: #FFF;
    }
    #nbre-jours {
        background-color: #ffe600;
        width: 40%;
        height: 65px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    .njour-location-prod03 {
        position: relative;
        top: -5px;
    }
    .image-prod04 {
        width: 65%;
        height: 560px;
        margin: 5% auto;
        background-image: url(../images/location-prod41.jpg);
        background-size: auto;
        cursor: pointer;
        transition: all ease .3s;
    }
    .image-prod04:hover {
        width: 65%;
        height: 560px;
        background-image: url(../images/location-prod42.jpg);
        background-size: auto;
    }
    .bloc-prix-location-04 {
        width: 70%;
        display: flex;
        padding: 30px 0;
        justify-content: space-between;
        margin: 0 auto;
    }
    .bloc-prix-location-prod04 .njour-location {
        position: relative;
        top: 20px;
    }
    /* 
    ==========================
    info equipe
    ==========================
    */
    .info-perso-equipe {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding-top: 150px;
    }
    #plus-tearm {
        width: 100%;
        background-color: #ecf4ff;
        margin-top: 100px;
        padding-top: 100px;
    }
    .plus-tearm {
        width: 80%;
        margin: 0 auto;
        padding-top: 50px;
    }
    .image-tearm {
        width: 50%;
        margin: 0 auto;
        position: relative;
        z-index: 2;
        padding-top: 100px;
    }
    .block-info-team-detail {
        width: 45%;
        padding-top: 100px;
    }
    .image-tearm img {
        width: 100%;
        margin: 0 auto;
    }
    .bd-tearm {
        background-color: var(--color-third);
        width: 100%;
        height: 90%;
        position: relative;
        top: -450px;
        left: -30px;
        z-index: -1;
    }
    .tearm-rx {
        width: 80%;
        position: relative;
        padding-top: 20px;
    }
    .tearm-rx a i {
        font-size: 45px;
        padding-left: 5px;
    }
    #team-page-tearm-info {
        position: relative;
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        padding-top: 50px;
    }
    .picture-team {
        position: relative;
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        padding-top: 50px;
    }
    .picture-team-info {
        width: 60%;
        margin: 0 auto;
        display: flex;
        padding-top: 50px;
    }
    .para-info-tearm {
        width: 100%;
        padding-left: 0;
    }
    .pp-1 .team-info {
        background-color: var(--color-forth);
        width: 100%;
        height: 20%;
        position: relative;
        top: 0;
    }
    .pp-2 .team-info {
        background-color: var(--color-forth);
        width: 100%;
        height: 20%;
        position: relative;
        top: 0;
    }
    .pp-3 .team-info {
        background-color: var(--color-forth);
        width: 100%;
        height: 20%;
        position: relative;
        top: 0;
    }
    .pp-4 .team-info {
        background-color: var(--color-forth);
        width: 100%;
        height: 20%;
        position: relative;
        top: 0;
    }
    .pp-5 .team-info {
        background-color: var(--color-forth);
        width: 100%;
        height: 20%;
        position: relative;
        top: 0;
    }
    .pp-6 .team-info {
        background-color: var(--color-forth);
        width: 100%;
        height: 20%;
        position: relative;
        top: 0;
    }
    .pp-7 .team-info {
        background-color: var(--color-forth);
        width: 100%;
        height: 20%;
        position: relative;
        top: 0;
    }
    .pp-8 .team-info {
        background-color: var(--color-forth);
        width: 100%;
        height: 20%;
        position: relative;
        top: 0;
    }
    .pp-1 {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .5s;
        align-items: center;
        margin: 5px;
    }
    .pp-2 {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .5s;
        align-items: center;
        margin: 5px;
    }
    .pp-3 {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .5s;
        align-items: center;
        margin: 5px;
    }
    .pp-4 {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .5s;
        align-items: center;
        margin: 5px;
    }
    .pp-5 {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .5s;
        align-items: center;
        margin: 5px;
    }
    .pp-6 {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .5s;
        align-items: center;
        margin: 5px;
    }
    .pp-7 {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .5s;
        align-items: center;
        margin: 5px;
    }
    .pp-8 {
        height: 370px;
        transition: var(--transition);
        position: relative;
        width: 24%;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: ease all .5s;
        align-items: center;
        margin: 5px;
    }
    .pp-1:hover {
        cursor: pointer;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .pp-2:hover {
        cursor: pointer;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .pp-3:hover {
        cursor: pointer;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .pp-4:hover {
        cursor: pointer;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .pp-5:hover {
        cursor: pointer;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .pp-6:hover {
        cursor: pointer;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .pp-7:hover {
        cursor: pointer;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .pp-8:hover {
        cursor: pointer;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .pp-1 .team-info {
        display: none;
    }
    .pp-2 .team-info {
        display: none;
    }
    .pp-3 .team-info {
        display: none;
    }
    .pp-4 .team-info {
        display: none;
    }
    .pp-5 .team-info {
        display: none;
    }
    .pp-6 .team-info {
        display: none;
    }
    .pp-7 .team-info {
        display: none;
    }
    .pp-8 .team-info {
        display: none;
    }
    .pp-2:hover .team-info {
        display: block;
    }
    .pp-1:hover .team-info {
        display: block;
    }
    .pp-3:hover .team-info {
        display: block;
    }
    .pp-4:hover .team-info {
        display: block;
    }
    .pp-5:hover .team-info {
        display: block;
    }
    .pp-6:hover .team-info {
        display: block;
    }
    .pp-7:hover .team-info {
        display: block;
    }
    .pp-8:hover .team-info {
        display: block;
    }

    .pp-1,.pp-3,.pp-4,.pp-5,.pp-6,.pp-7,.pp-8,.pp-2:hover {
        cursor: pointer;
    }

    .pp-1 .btn-team-info {
        display: none;
    }
    .pp-1:hover .btn-team-info {
        display: block;
    }
    .pp-2 .btn-team-info {
        display: none;
    }
    .pp-2:hover .btn-team-info {
        display: block;
    }
    .pp-3 .btn-team-info {
        display: none;
    }
    .pp-3:hover .btn-team-info {
        display: block;
    }
    .pp-4 .btn-team-info {
        display: none;
    }
    .pp-4:hover .btn-team-info {
        display: block;
    }
    .pp-5 .btn-team-info {
        display: none;
    }
    .pp-5:hover .btn-team-info {
        display: block;
    }
    .pp-6 .btn-team-info {
        display: none;
    }
    .pp-6:hover .btn-team-info {
        display: block;
    }
    .pp-7 .btn-team-info {
        display: none;
    }
    .pp-7:hover .btn-team-info {
        display: block;
    }
    .pp-8 .btn-team-info {
        display: none;
    }
    .pp-8:hover .btn-team-info {
        display: block;
    }
    .btn-team-info {
        background-color: var(--color-primary);
        width: 100%;
        height: auto;
        border: none;
        position: absolute;
        text-align: center;
        transition: var(--transition);
        bottom: 0;
        padding: 10px;
        right: 0;
        z-index: 100;
    }
    .btn-team-info:hover a {
        color: var(--color-second);
    }
    .btn-team-info a {
        color: var(--color-second);
        font-size: 18px;
        padding: 10px;
    }
    .pp-1 .team-info {
        position: absolute;
    }
    .pp-2 .team-info {
        position: absolute;
    }
    .pp-3 .team-info {
        position: absolute;
    }
    .pp-4 .team-info {
        position: absolute;
    }
    .pp-5 .team-info {
        position: absolute;
    }
    .pp-6 .team-info {
        position: absolute;
    }
    .pp-7 .team-info {
        position: absolute;
    }
    .pp-8 .team-info {
        position: absolute;
    }

}


/*
----------------------
1800px 
----------------------

*/

@media (max-width:1800px) {
    .menu {
        width: 600px;
        margin-right: .5%;
        padding-bottom: 10px;
    }
}


/*
----------------------
    1600px 
----------------------

*/

@media (max-width:1600px) {


    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 20%;
        border-radius: 20px 0 20px 0;
        margin: 1% auto;
    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: -100px;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: translateX(8%);
    }


    .cercle-btn-c-nous{
        width: 60px;
        height: 60px;
        border-radius: 20px 0 20px 0;
        padding: 10px;
        font-size: 25px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        border-radius: 20px 0 20px 0;
        height: 60px;
        z-index: 50;
        transform: translateX(-4%);
    }


    .btn-c-nous a{
        font-size: 18px;
        top: 7px;
    }


    .menu {
        width: 600px;
        margin-right: .5%;
        padding-bottom: 10px;
    }
    /* 
    -----------------------
    menu
    ----------------------
    */
    nav {
        position: fixed;
        width: 100%;
        z-index: 1000;
        margin: 0 auto;
    }
    .navbar {
        width: 85%;
        margin: 0 auto;
        padding: 55px 0 0 0;
    }
    .logo {
        width: 15%;
    }
    .logo img {
        width: 100%;
    }
    .menu {
        width: 600px;
        margin-right: .5%;
    }
    .menu-fd-noir {
        width: 600px;
    }
    .menu-green {
        width: 600px;
    }
    .menu-print {
        width: 600px;
    }
    .menu-creative {
        width: 600px;
    }
    .menu li a {
        padding: 10px 8px;
    }
    .menu-fd-noir li a {
        padding: 10px 8px;
    }
    .menu-green li a {
        padding: 10px 8px;
    }
    .menu-print li a {
        padding: 10px 8px;
    }
    .menu-creative li a {
        padding: 10px 8px;
    }
    /* 
    -----------------------------
    Menu click
    ----------------------------
    */
    #clickmenu {
        width: 80%;
        padding-top: 35px;
    }
    .clickmenu {
        padding-top: 20px;
    }
    .clickmenu li {
        padding: 10px 0 0 0;
    }
    .socialmedia {
        padding-top: 50px;
        background-color: rgb(192, 192, 192);
    }
    #socialmedia {
        padding: 200px 0 0 50px;
    }
    .-img-social-media {
        padding-top: 40px;
    }
    .-img-social-media a i {
        font-size: 35px;
        position: relative;
        top: -20px;
    }
    .bande {
        width: 90%;
        left: -20%;
        margin-bottom: 10px;
    }
    .design-menu {
        font-size: 21px;
        top: 20%;
    }
    .menubar {
        height: 55px;
        width: 60px;
        top: 53px;
        font-size: 25px;
        padding-top: 8px;
    }
    .menubar-fd-noir {
        height: 55px;
        width: 60px;
        top: 62px;
        font-size: 25px;
        padding-top: 8px;
    }
    .menubar-green {
        height: 55px;
        width: 60px;
        top: 57px;
        font-size: 25px;
        padding-top: 8px;
    }
    .menubar-print {
        height: 55px;
        width: 60px;
        top: 62px;
        font-size: 25px;
        padding-top: 8px;
    }
    .menubar-creative {
        height: 55px;
        width: 60px;
        top: 62px;
        font-size: 25px;
        padding-top: 8px;
    }
    .Closemenu {
        height: 55px;
        width: 60px;
        top: 55px;
        font-size: 25px;
        padding-top: 10px;
    }
    /* 
    ------------------------
    index.php
    ------------------------
    */
    .liste-services {
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .liste-services b {
        font-size: 15px;
    }
    .info-head-left {
        top: 400px;
        left: 120px;
    }
    .info-head-right img {
        width: 80%;
        padding: 0 30px 0;
        position: relative;
        bottom: 30px;
        top: 70px;
        left: 80px;
    }
    .bock-head {
        display: flex;
        width: 100%;
        margin: 0 auto;
        position: relative;
        justify-content: space-between;
    }
    .tittle-head {
        position: relative;
        font-size: 38px;
        /*font-weight: bold;*/
        color: #000000;
        line-height: 1;
    }
    .info-head {
        font-size: 18px;
        font-weight: normal;
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        padding-top: 10px;
    }
    .btn-ensavoirplus {
        background-color: var(--color-second);
        width: 230px;
        height: 45px;
        text-align: center;
        margin-top: 40px;
        transition: var(--transition);
    }
    /* 
    ------------------------------
    main
    ------------------------------
    */
    
     #grow_title{
        font-size:50px;
    }
    .a-propos {
        width: 85%;
        justify-content: space-between;
        margin: 0 auto;
        padding: 100px 10px 100px 0;
    }
    .a-propos-img {
        width: 60%;
        position: relative;
        bottom: 200px;
    }
    .a-propos-img img {
        width: 80%;
        padding-top: 100px;
    }
    
   
    .tittle-info {
        font-size: 35px;
        padding: 20px 0;
    }
    .info-a-propos-servives {
        padding-bottom: 50px;
        margin-bottom: 100px;
    }
    .info-a-propos-servives-text {
        width: 35%;
        height: 580px;
        top: 150px;
        right: 150px;
    }
    .info-a-propos-servives-img {
        width: 65%;
    }
    .info-a-propos-servives-img img {
        width: 100%;
    }
    .bg-info-a-propos-servives-text {
        padding: 20px;
    }
    .sec-tittle {
        font-size: 25px;
        position: relative;
        left: 10px;
        top: 3px;
    }
    .sec-tittle a {
        color: #000;
        transition: var(--transition);
        position: relative;
        top: 8px;
        left: 5px;
        font-family: 'Arial ', Helvetica, sans-serif;
    }
    .services svg {
        width: 40px;
    }
    .btn-decouvrez-lagence {
        margin-top: -20px;
        padding: 20px;
        width: 100%;
    }
    .work-picture-ln .zoom {
        transition: var(--transition);
        overflow: hidden;
        width: 100%;
        height: 300px;
    }
    .tearm-rx {
        left: 0;
        padding-top: 20px;
    }
    .img-a-propos {
        width: 25%;
        top: 50px;
    }
    .img-a-propos img {
        width: 80%;
    }
    #block-nous-contacter {
        min-height: 100vh;
        padding-top: 360px;
    }
    #block-nous-contacter-autre {
        min-height: 90vh;
        padding-top: 220px;
    }
    #block-team-smt {
        height: 275px;
        width: 24%;
    }
    #block-team-akosse {
        height: 275px;
        width: 24%;
    }
    #block-team-paul {
        height: 275px;
        width: 24%;
    }
    #block-team-romaric {
        height: 275px;
        width: 24%;
    }
    .btn-team {
        width: 100%;
        bottom: 0;
        right: 0;
        top: 86%;
        padding: 10px;
        height: 40px;
    }
    .pp-1 {
        height: 280px;
        width: 23%;
    }
    .pp-2 {
        height: 280px;
        width: 23%;
    }
    .pp-3 {
        height: 280px;
        width: 23%;
    }
    .pp-4 {
        height: 280px;
        width: 23%;
    }
    .pp-5 {
        height: 280px;
        width: 23%;
    }
    .pp-6 {
        height: 280px;
        width: 23%;
    }
    .pp-7 {
        height: 280px;
        width: 23%;
    }
    .pp-8 {
        height: 280px;
        width: 23%;
    }
    .pp-1 .team-info {
        height: 22%;
    }
    .pp-2 .team-info {
        height: 22%;
    }
    .pp-3 .team-info {
        height: 22%;
    }
    .pp-4 .team-info {
        height: 22%;
    }
    .pp-5 .team-info {
        height: 22%;
    }
    .pp-6 .team-info {
        height: 22%;
    }
    .pp-7 .team-info {
        height: 22%;
    }
    .pp-8 .team-info {
        height: 22%;
    }
    .btn-team-info a {
        font-size: 16px;
    }
    .btn-team-info {
        padding: 7px;
    }
    /* 
    ------------------------
    nos services
    ------------------------
    */
    .titre-nos-services {
        position: relative;
        font-size: 55px;
        /* font-family: century gothic, Poppins, arial; */
        /* font-family: var(--font-family2); */
    }
    .nos-services {
        width: 80%;
        margin: 0 auto;
        padding-top: 100px;
    }
    .titre-services {
        padding-left: 35px;
    }
    .souligneur {
        background-color: var(--color-third);
        width: 170px;
        height: 30px;
        position: relative;
        top: -30px;
        left: -13px;
    }
    /* 
    =========================
    Portfolio
    =========================
    */
    .cont-header-portfolio {
        height: 65vh;
    }
    #cont-portfolio {
        bottom: -100px;
    }
    .block-cont-header-port {
        width: 80%;
        padding-top: 190px;
    }
    .tittle-header-port {
        width: 48%;
    }
    .tittle-header-port h3 {
        font-size: 45px;
    }
    .par-header-port {
        width: 50%;
        padding: 10px;
        font-size: 18px;
    }
    .btn-header {
        width: 23%;
        left: 130px;
        top: -30px;
    }
    .realisation-par-service {
        position: sticky;
        width: 22%;
        top: 52px;
        left: 100%;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 21px;
        font-weight: 500;
    }
    /* nos offres */
    .btn-noffre {
        width: 20%;
        padding: 15px 20px;
    }
    .btn-noffre a {
        font-size: 16px;
    }
    .btn-noffre:hover a {
        font-weight: 600;
    }
    /* les kits */
    .box-kit {
        width: 24%;
        height: 420px;
        padding: 20px;
    }
    #kit-digital {
        width: 24%;
        height: 600px;
        padding: 20px;
        top: -100px;
    }
    .list-detail-kit li {
        list-style: square;
        padding-left: 10px;
        line-height: 3;
        font-size: 15px;
    }
    .price-kit {
        font-size: 27px;
        padding-top: 20px;
    }
    .btn-kit {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    /*
    =======================
    les kits
    =======================
     */
    .cont-header-kit-print {
        padding-top: 130px;
    }
    .cont-header-kit-print img {
        width: 45%;
    }
    .cont-header-kit-digital {
        padding-top: 150px;
    }
    .cont-header-kit-digital img {
        width: 45%;
    }
    .cont-header-kit-event {
        padding-top: 200px;
    }
    .cont-header-kit-print {
        padding-top: 170px;
    }
    .cont-header-kit-event img {
        width: 45%;
    }
    .cont-header-kit-smedia {
        padding-top: 180px;
    }
    .cont-header-kit-smedia img {
        width: 45%;
    }
    #block-kit-print {
        padding: 100px 0 150px 0;
    }
    #block-kit-digital {
        padding: 100px 0 150px 0;
    }
    #block-kit-event {
        padding: 100px 0 150px 0;
    }
    #block-kit-s-media {
        padding: 100px 0 150px 0;
    }
    .cont-detail-kit {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        padding-top: 100px;
    }
    .list-detail-kit {
        width: 58%;
    }
    .img-detail-kit {
        width: 40%;
        height: 540px;
    }
    .img-detail-kit img {
        padding: 20px;
        width: 100%;
        margin-top: 60px;
    }
    .detail-kit h3 {
        margin: 5px auto;
        font-size: 30px;
    }
    .list-detail-kit h3 {
        padding-bottom: 20px;
        left: -120px;
    }
    .list-detail-kit h4 {
        padding: 20px 0;
        left: -80px;
    }
    .list-detail-kit li {
        list-style: square;
        padding-left: 10px;
        line-height: 2;
        font-size: 15px;
    }
    .price-kit-creation {
        font-size: 23px;
    }
    .btn-kit-creation a {
        font-size: 16px;
    }
    .btn-kit-digital a {
        font-size: 16px;
    }
    .img-detail-kit {
        width: 39%;
        border: solid 1px #000000;
        margin-top: 30px;
    }
    #block-kit-digital .img-detail-kit {
        width: 39%;
        height: 480px;
    }
    #block-kit-print .img-detail-kit {
        width: 39%;
        height: 450px;
    }
    #block-kit-s-media .img-detail-kit {
        width: 39%;
        height: 490px;
    }
    #block-kit-digital .list-detail-kit h3 {
        padding-bottom: 20px;
        left: -150px;
    }
    #block-kit-event .img-detail-kit {
        width: 39%;
        height: 580px;
    }
    .img-detail-kit img {
        padding: 30px;
        width: 100%;
        margin-top: 30px;
    }
    #img-detail-kit-print {
        padding-top: 30px;
    }
    #img-detail-kit-smedia img {
        padding: 0px;
        width: 65%;
        margin-top: 50px;
        position: relative;
        left: 70px;
    }
    .detail-kit h3 {
        width: 100%;
        margin: 10px auto;
        text-align: center;
        font-size: 30px;
    }
    .bande-separateur {
        width: 40%;
        height: 5px;
        background-color: var(--color-primary);
        margin: 0 auto;
        position: relative;
        z-index: 100;
    }
    .bande-separateur-2 {
        width: 20%;
        height: 10px;
        background-color: var(--color-primary);
        margin: 0 auto;
        position: relative;
        z-index: 200;
    }
    .list-detail-kit h3 {
        padding-bottom: 20px;
        position: relative;
        left: -180px;
    }
    #list-detail-kit-print h3 {
        position: relative;
        left: -180px;
    }
    #list-detail-kit-smedia h3 {
        position: relative;
        left: -170px;
    }
    #list-detail-kit-event h3 {
        position: relative;
        left: -180px;
    }
    .list-detail-kit h4 {
        padding: 20px 0;
        position: relative;
        left: -60px;
        color: #000;
    }
    .list-detail-kit li {
        list-style: square;
        padding-left: 10px;
        line-height: 2;
        font-size: 14px;
    }
    .price-kit {
        font-size: 27px;
        padding-top: 20px;
    }
    .btn-kit {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-event {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-smedia {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-event a {
        font-size: 16px;
    }
    .btn-kit-smedia a {
        font-size: 16px;
    }
    .btn-kit a {
        font-size: 16px;
    }
    #autre-kit {
        background-color: #effeff;
        height: auto;
        width: 100%;
    }
    .btn-kit-digital {
        width: 80%;
        margin: 15px auto;
        padding: 15px;
    }
    #price-kit-digital {
        font-size: 30px;
    }
    .btn-kit-digital a {
        font-size: 16px;
    }

    /* 
    =======================
    contacts
    =======================
    */

    #info-contact {
        padding-top: 20px;
    }

    .contact-nyusu{
        width: 90%;
    }

    .block-info-contact{
        width: 48%;
    }

    .info-contact-nyusu{
        gap: 10px;
        width: 100%;
    }

    .drapeau-nyusu{
        width: 100%;
        padding-left: 100px;
    }

    .drapeau-nyusu img{
        width: 40px;
    }

    .contact-ci{
        width: 48%;
    }

    .contact-maroc{
        width: 48%;
    }

  #contact-ci{
        width: 100%;
    }

    #contact-maroc{
        width: 100%;
    }

    .info-nyusu{
        width: 100%;
        display: flex;
        height: 50px;
    }

    .info-nyusu img{
        width:35px;
        position: relative;
        top: -10px;
    }

    .info-nyusu p{
        padding-left: 10px;
        margin-top: 10px;
        padding-top: 5px;
    }

    .info-contact-index {
        text-align: center;
    }

    .tittle-form {
        padding: 50px 0;
    }

    .tittle-form h1 {
        font-family: century gothic, arial, Poppins;
        font-size: 45px;
        padding-left: 20px;
    }


    #form-contact {
        width: 50%;
        background-color: var(--color-forth);
    }

    .form-contact {
        padding: 20px;
    }

    .checkbox {
        font-size: 15px;
        padding-left: 5px;
    }

    .type input[type="checkbox"] {
        margin-left: 10px;
    }

    #btn-send {
        background-color: #0000FF;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 18px;
        margin-left: 0;
        margin-bottom: 20px;
    }

    #nyusu-rx {
        width: 100%;
        position: relative;
        padding-top: 50px;
        margin: 0 auto;
        right: 0;
        right: 0;
    }

    .nyusu-rx {
        width: 100%;
    }

    .nyusu-rx i {
        font-size: 35px;
        color: #6e6d6d;
    }

    .tittle-rx {
        font-size: 25px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 10px;
        color: #4b4b4b;
    }



}


/*
----------------------
    1400px 
----------------------

*/

@media (max-width:1400px) {

        

    #print-offset-nprint{
        width: 32.5%;
        height: auto;
        background-color:var(--color-nprint);
        cursor: pointer;
        transition: var(--transition);
        padding: 20px 0;

    }
    /* section partenaire */


    .block-partenaire{
        width: 80%;
        margin: 0 auto;
        padding: 30px;
    }

    .contenu-parteniare{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: center;
    }

    .logopart{
        width: 16%;
        margin: 5px;
        transition: all ease .5s;
        cursor: pointer;
    }

    .logopart img{
        width: 100%;
    }

    .logopart:hover{
    transform: scale(1.1);
    }

    .bg-ngenie {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngenie-1368_768.jpg);
        background-attachment: fixed;
        background-size: cover;
    }
    .bg-nyusu {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nyusu-1368_768.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }


    .cont-header-noffre {
        background-image: url(../images/bg-construction-1368_768.jpg);
    }
    
    .bg-nDigital {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ndigital-1368_768.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nprint-1368_768.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .bg-ncreative {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ncreative-1368_768.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .bg-contact {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-contact-1368_768.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .bg-ngreen {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngreen-1368_768.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    #bg-location {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-location-1368_768.jpg);
        background-attachment: fixed;
        background-size: cover;
    }
    .cont-block-partenaire {
        padding: 130px 0 100px 0;
    }
    .header-nyusu {
        background-color: rgb(233, 233, 233);
        width: 100%;
        height: 100vh;
    }
    #myBtn {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 30px;
        padding: 8px;
        font-size: 15px;
    }
    .clikmenu-menu-deroulant .clickmenu-sous-menu {
        position: absolute;
        left: 200%;
        top: -230%;
        background-color: #ffffffa8;
        border-radius: 10px;
        padding: 15px 20px;
        border-left: 5px solid #0000ff;
        display: none;
        transition: all ease .3s;
    }

 
    #block-nous-contacter {
        min-height: 100vh;
        padding-top: 200px;
    }
    #block-nous-contacter-autre {
        min-height: 90vh;
        padding-top: 165px;
    }
    .block-contact-titre {
        margin-bottom: -10px;
    }
    .btn-nous-contactez {
        width: 25%;
        padding: 10px;
    }
    .btn-nous-contactez a {
        font-size: 18px;
    }


    /* 
    -----------------------
    menu
    ----------------------
    */


    nav {
        position: fixed;
        width: 100%;
        margin: 0 auto;
    }
    .navbar {
        width: 85%;
        margin: 0 auto;
        padding: 55px 0 0 0;
    }
    .logo {
        width: 15%;
    }
    .logo img {
        width: 100%;
    }
    .menu {
        width: 600px;
        margin-right: .5%;
        padding-bottom: 10px;
        margin-top: 5px;
    }
    .menu-fd-noir {
        width: 600px;
    }
    .menu-green {
        width: 600px;
        padding-bottom: 10px;
    }
    .menu-print {
        width: 600px;
        padding-bottom: 10px;
    }
    .menu-creative {
        width: 600px;
        padding-bottom: 10px;
    }
    .menu li a {
        padding: 5px 8px;
    }
    .menu-fd-noir li a {
        padding: 5px 8px;
    }
    .menu-green li a {
        padding: 5px 8px;
    }
    .menu-print li a {
        padding: 5px 8px;
    }
    .menu-creative li a {
        padding: 5px 8px;
    }
    /* 
    -----------------------------
    Menu click
    ----------------------------
    */
    #clickmenu {
        padding-top: 35px;
    }
    .navbar-clickmenu {
        padding-top: -10px;
    }
    .clickmenu {
        padding-top: 10px;
    }
    .clickmenu li {
        padding: 10px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 38px;
    }
    .social-media {
        width: 60%;
        left: -20%;
    }
    .socialmedia {
        width: 40%;
    }
    #socialmedia {
        padding: 150px 0 0 50px;
    }
    .info-social-media h2 {
        padding-bottom: 10px;
        font-size: 25px;
    }
    .menubar {
        height: 45px;
        width: 50px;
        top: 55px;
        font-size: 20px;
        padding-top: 8px;
    }
    .menubar-fd-noir {
        height: 45px;
        width: 50px;
        top: 55px;
        font-size: 20px;
        padding-top: 8px;
    }
    .menubar-green {
        height: 45px;
        width: 50px;
        top: 55px;
        font-size: 20px;
        padding-top: 8px;
    }
    .menubar-print {
        height: 45px;
        width: 50px;
        top: 55px;
        font-size: 20px;
        padding-top: 8px;
    }
    .menubar-creative {
        height: 45px;
        width: 50px;
        top: 55px;
        font-size: 20px;
        padding-top: 8px;
    }
    .activemenu {
        background-color: var(--color-second);
        width: 100%;
        height: 20px;
        position: absolute;
        bottom: 2px;
        left: -15px;
        border-radius: 200px;
        display: none;
        transition: var(--transition);
    }
    .Closemenu {
        position: absolute;
        height: 45px;
        width: 50px;
        font-size: 20px;
        padding-top: 8px;
        top: 55px;
    }
    .navBarclick {
        width: 100%;
        height: 100vh;
        position: fixed;
        transition: var(--transition-01);
        visibility: hidden;
        opacity: 0;
        bottom: 0;
        top: 0;
    }
    .navBarclick-active {
        visibility: visible;
        opacity: 1;
    }
    .design-menu {
        font-size: 18px;
        font-weight: 500;
        font-family: century gothic, Poppins, sans-serif;
        text-transform: uppercase;
        transform: rotate(90deg);
        position: absolute;
        bottom: 72%;
        top: 15%;
    }
    .-img-social-media {
        padding-top: 40px;
    }
    .info-social-media h2 {
        padding-bottom: 20px;
        font-size: 25px;
        font-weight: 600;
        text-transform: uppercase;
        font-family: century gothic, Helvetica, sans-serif;
    }
    .-img-social-media P {
        font-size: 18px;
        font-weight: 600;
    }
    .-img-social-media i {
        font-size: 25px;
        padding: -5px 0 0 5px;
        position: relative;
        top: -20px;
    }
    .activemenu {
        background-color: var(--color-second);
        width: 100%;
        height: 20px;
        position: absolute;
        bottom: 2px;
        left: -15px;
        z-index: 10;
        border-radius: 200px;
        display: none;
        transition: var(--transition);
    }
    /* 
    ---------------------------
    footer
    ---------------------------
    */
    .bg-footer {
        height: auto;
        margin: 0 auto;
	padding: 50px 0;
    }
    .max-foot {
        width: 80%;
        padding-bottom: 30px;
    }
    .texte_info {
        font-size: 14px;
    }
    .b_left {
        width: 40%;
    }
    .b_left img {
        width: 50%;
    }
    .b_center {
        width: 26%;
        margin-top: 15px;
    }
    .b_center img {
        width: 35px;
        position: relative;
        top: -5px;
    }
    .b_rigth {
        width: 100%;
        margin-top: 15px;
    }
    .block-icones-footer span {
        font-size: 16px;
        position: relative;
        left: 3px;
        top: -10px;
    }
    .block-icones-footer {
        padding: 3px 0;
    }
    .info-footer p {
        font-size: 14px;
        position: relative;
        top: -10px;
        left: 5px;
    }
    .tittle-nl {
        font-size: 18px;
    }
    #btn-send {
        font-weight: 500;
        width: 25%;
        font-size: 16px;
        transition: var(--transition);
    }
    #btn-send:hover {
        color: var(--color-second);
        background-color: var(--color-primary);
    }
    input[type="Email"] {
        background-color: #ffffff;
        width: 49;
        height: 40px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    input[type="text"] {
        background-color: #ffffff;
        width: 49%;
        height: 40px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    /* 
    -------------------
    header
    -------------------
    */
    .info-head-left {
        position: relative;
        top: 250px;
        width: 35%;
        left: 100px;
        padding: 10px;
    }
    .tittle-head {
        font-size: 30px;
        line-height: 1.3;
    }
    .info-head {
        font-size: 15px;
        line-height: 1.1;
        margin-top: 1px;
    }
    .info-head-right {
        width: 55%;
        background-color: rgb(207, 206, 206);
        height: 100vh;
    }
    .info-head-right img {
        bottom: 100px;
        width: 75%;
        left: 75px;
        top: 50px;
    }
    .btn-ensavoirplus a {
        font-size: 16px;
    }
    input[type="mail"] {
        background-color: #ffffff;
        width: 100%;
        height: 40px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    .b_rigth div {
        font-size: 15px;
    }
    /* 
    ------------------------------
    main
    ------------------------------
    */
    .a-propos {
        width: 85%;
        justify-content: space-between;
        margin: 0 auto;
        padding: 200px 10px 0 0;
        position: relative;
    }
    .img-a-propos {
        width: 25%;
    }
    .img-a-propos img {
        width: 100%;
    }
    .info-a-propos {
        position: relative;
        left: 25px;
        padding: 30px 0px;
        width: 60%;
    }
    .tittle-info {
        font-size: 30px;
        padding: 10px 0;
    }
    .a-propos-img {
        width: 60%;
        position: relative;
        bottom: 200px;
    }
    .a-propos-img img {
        width: 100%;
    }
    .cont-info-a-propos {
        font-size: 15px;
    }
    .info-a-propos-servives-text {
        position: relative;
        background-color: #ffd900;
        width: 35%;
        height: 460px;
        top: 150px;
        right: 150px;
        border: 8px solid #ffff;
    }
    .info-a-propos-servives-img {
        width: 70%;
    }
    .info-a-propos-servives-img img {
        width: 100%;
    }
    .bg-info-a-propos-servives-text {
        padding: 0 15px;
    }
    .sec-tittle {
        font-size: 22px;
        position: relative;
        left: 10px;
        top: 3px;
        padding: 5px 15px;
    }
    .sec-tittle a {
        color: #000;
        transition: var(--transition);
        position: relative;
        top: 8px;
        left: 5px;
        font-family: 'Arial ', Helvetica, sans-serif;
    }
    .services {
        padding: 5px 0;
    }
    .services img {
        width: 35px;
    }
    .services svg {
        width: 40px;
        margin-right: 10px;
    }

    .sec-tittle:hover a {
        padding: 5px 20px;
        font-size: 22px;

    }

    /* 
    .btn-decouvrez-lagence {
        padding: 15px;
        background-color: var(--color-second);
        transition: var(--transition);
        top: 10px;
        margin-top: 35px;
    }
    .btn-decouvrez-lagence a {
        color: #fff;
        font-size: 18px;
    }
    .sec-tittle:hover a {
        padding: 5px 20px;
        font-size: 22px;
    }
    .button a {
        font-size: 18px;
        padding-left: 20px;
    }
    */


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 80%;
        border-radius: 20px 0 20px 0;
        margin: 1% auto;
        position: relative;
        top: 20px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: -120px;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: translateX(3%);
    }

    .cercle-btn-d-agence{
        width: 60px;
        height: 60px;
        border-radius: 20px 0 20px 0;
        padding: 10px;
        color: rgb(255, 255, 255);
        font-size: 25px;
        left: 0;
    }


    .btn-d-agence{
        width: 100%;
        padding: 10px 20px;
        border-radius: 20px 0 20px 0;
        height: 60px;
        transform: translateX(-5%);
    }

    .btn-d-agence a{
        font-size: 16px;
        top: 7px;
    }


    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 60%;
        margin-top: 40px;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left: -100px;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform: translateX(10%);
    }


    .cercle-btn-plus{
        width: 60px;
        height: 60px;
        padding: 10px;
        left: 0;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        height: 60px;
    }

    .btn-en-sav-plus a{
        font-size: 16px;
        top: 7px;
    }


    /* 
    ------------------------
    nos services
    ------------------------
    */
    .titre-nos-services {
        position: relative;
        font-size: 45px;
        /* font-family: var(--font-family2); */
    }

    #titre-nos-services {
        position: relative;
        font-size: 45px;
        /* font-family: var(--font-family2); */
    }
    .nos-services {
        width: 80%;
        margin: 0 auto;
        padding-top: 100px;
    }
    .titre-services {
        padding-left: 35px;
    }

    .liste-ndigital-page-ndigital{
        position: relative;
        left: 25px;
    }

    .souligneur {
        background-color: var(--color-third);
        width: 150px;
        height: 25px;
        position: relative;
        top: -30px;
        left: -13px;
    }
    #box-services {
        padding: 30px;
        margin: 30px 0;
    }
    .cont-box img {
        padding-top: 20px;
        width: auto;
    }
    h4 {
        margin: 10px 0;
        font-size: 18px;
    }
    .box p {
        font-size: 16px;
    }
    /* 
    ---------------
    réalisation
    ---------------
    */
    #work {
        width: 100%;
        padding: 200px 0 60px 0;
    }
    .work {
        width: 80%;
        justify-content: space-between;
        margin: 0 auto;
        padding: 30px 10px 0 0;
    }
    #realisation {
        display: flex;
        position: relative;
        bottom: -250px;
    }
    .info-realisation {
        position: relative;
        left: 50px;
        padding: 20px 0 50px 0px;
        width: 60%;
    }
    .realisation-img {
        width: 60%;
        position: relative;
        bottom: 200px;
    }
    .img-realisation {
        width: 25%;
    }
    .img-realisation img {
        width: 100%;
    }
    .work-picture {
        width: 65%;
        padding: 150px 0;
    }
    .work-picture-bg {
        margin-top: 45px;
    }
    .work-picture-ln .zoom {
        width: 100%;
        height: 250px;
    }
    .work-picture-ln img {
        width: 100%;
    }

    .work-picture-ln{
        gap: 0px;
    }


    
    /* 
    ------------------
    animation
    ------------------
    */
    .bg-animation {
        width: 80%;
        top: -150px;
    }
    

    .bg-animation1 {
        width: 80%;
        top: -80px;
        z-index: 100;
    }

    .titre-section-annimation{
        width: 50%;
        font-size: 25px;
        padding: 20px 0;
        top: -30px;
    }
    
    .titre-section-annimation1{
        width: 50%;
        font-size: 21px;
        padding: 20px;
    }

    .titre-section-annimation1 h1{
        font-size: 25px;

    } 

    .animation {
        gap: 10px;
        width: 90%;
        top: 35px;
        padding: 20px;
    }


    .block-an {
        width: 19%;
        height: auto;
    }
    
    #block-an{
        width: 25%;
        height: auto;
    }
    
    .titre-block-an{
        font-size: 18px;
        margin-bottom: 30px;
    }
    
    .block-an img {
        width: 50%;
    }
    
    .block-an h2 {
        font-size: 30px;
        top: -20px;
    }
    
    .block-an p {
        font-size: 15px;
        top: -30px;
    }


    /* 
    ------------------------
    team
    ------------------------
    */


    .team {
        position: relative;
        padding-top: 100px;
        padding-bottom: 30px;
    }
    .team-personal {
        width: 80%;
        padding-bottom: 150px;
    }
    .block-team {
        width: 24%;
        height: 260px;
    }
    #block-team-smt {
        height: 260px;
        width: 24%;
    }
    #block-team-akosse {
        height: 260px;
        width: 24%;
    }
    #block-team-paul {
        height: 260px;
        width: 24%;
    }
    #block-team-romaric {
        height: 260px;
        width: 24%;
    }
    #block-team-smt img {
        width: 100%;
    }
    #block-team-akosse img {
        width: 100%;
    }
    #block-team-paul img {
        width: 100%;
    }
    #block-team-romaric img {
        width: 100%;
    }
    .block-team img {
        width: 100%;
    }
    .btn-team {
        width: 100%;
        bottom: 0;
        right: 0;
        top: 83%;
        padding: 10px;
        height: 45px;
    }
    .btn-team a {
        font-size: 16px;
    }
    .team-info {
        width: 100%;
        height: auto;
        bottom: 68px;
    }
    .block-team-info {
        padding: 20px;
    }
    .block-team-info h2 {
        font-size: 18px;
    }
    .block-team-info p {
        font-size: 14px;
    }
    .btn-view-team {
        width: 25%;
        padding: 10px;
        top: -70px;
    }
    .btn-view-team a {
        font-size: 16px;
    }
    /* 
    -----------------
    contact
    -----------------
    */
    .Nous-contactez {
        width: 30%;
        padding: 20px;
    }
    .Nous-contactez a {
        font-size: 18px;
    }
    .block-Nous-contactez {
        width: 50%;
        margin: 0 auto;
        position: relative;
        left: 10%;
        top: 50px;
    }
    .block-Nous-contactez .img-titre-services {
        margin: 0 auto;
    }
    .contact .btn-view-team {
        position: relative;
        left: 40%;
        top: 5px;
    }


    .btn-voirplusx{
        width: 20%;
        border-radius: 20px 0 20px 0;
        margin: 5% auto;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: -80px;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform: translateX(10%);
    }


    .cercle-btn-v-plus{
        width: 60px;
        height: 60px;
        border-radius: 20px 0 20px 0;
        padding: 10px;
        font-size: 25px;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        border-radius: 20px 0 20px 0;
        height: 60px;
        transform: translateX(-5%);
    }

    .btn-v-plus a{
        font-size: 16px;
        top: 7px;
    }


    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 20%;
        border-radius: 20px 0 20px 0;
        margin: 1% auto;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: -100px;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: translateX(6%);
        opacity: 1;
    }


    .cercle-btn-c-nous{
        width: 60px;
        height: 60px;
        border-radius: 20px 0 20px 0;
        padding: 10px;
        font-size: 25px;
        left: 0;
    }


    .btn-c-nous{
        width: 90%;
        padding: 10px 20px;
        border-radius: 20px 0 20px 0;
        height: 60px;
        transform: translateX(-5%);
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 7px;
    }




    /* 
    ---------------
    contact
    ---------------
    */


    .header {
        width: 80%;
        margin: 0 auto;
    }
    .header img {
        width: 80%;
        margin: 0 auto;
        position: relative;
        bottom: 60px;
    }
    .info-contact {
        width: 80%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .tittle-form {
        padding: 20px 0;
    }
    #form-contact {
        width: 55%;
    }
    .form-contact {
        padding: 20px;
        width: 100%;
    }
    .tittle-form h1 {
        font-size: 35px;
        padding-left: 10px;
    }
    textarea {
        width: 100%;
        padding-top: 20px;
    }
    .contact-nyusu {
        width: 40%;
    }

    /* 
    ---------------------
    nyusu
    ---------------------
    */
    .organigramme-nyusu {
        width: 90%;
    }
    .organigramme-nyusu img {
        width: 100%;
    }
    .bloc-experience {
        width: 80%;
    }
    #box-experience {
        width: 80%;
    }
    .box-exp {
        width: 48.5%;
        height: auto;
        padding: 30px 0;
        padding: 5px 0;
    }
    .tittle-contact .titre-contact {
        font-size: 55px;
    }
    .block-team-info {
        padding: 10px;
    }

    /* 
    --------------------------------
    ngenie
    --------------------------------
    */
    .banner-services {
        margin: 0 auto;
        position: absolute;
        bottom: -70px;
    }
    .info-page-service {
        padding-bottom: -10px;
    }
    .info-page-service-text {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 100px;
    }
    .info-page-service-text {
        width: 60%;
    }

    /* 
    ------------------------
    liste pack
    ------------------------
    */
    .pack {
        box-shadow: 0 0 6px #b6b6b6;
    }
    .titte-pack h1 {
        text-align: center;
        padding: 20px 0;
        font-size: 18px;
    }
    .content-pack {
        padding: 0 10px 0 20px;
        font-size: 15px;
    }
    .price-pack {
        font-size: 21px;
        padding: 20px 10px;
        font-weight: 600;
        text-align: center;
        font-family: Arial, Poppins, sans-serif;
    }
    .btn-view-pack {
        background-color: var(--color-second);
        border: none;
        text-align: center;
        width: 100%;
        height: 40px;
        transition: var(--transition);
        cursor: pointer;
    }
    .btn-view-pack a {
        padding: 20px;
        font-size: 16px;
    }
    .btn-nous-contacter-ngenie {
        width: 200px;
        height: 40px;
        left: 38%;
    }
    .btn-nous-contacter-ngenie a {
        font-size: 16px;
        padding-top: 20px;
    }

    /* 
    -----------------------------
    partenaire
    -----------------------------
    */

    .block-partenaire {
        width: 80%;
        margin: 0 auto;
    }
    .liste-part-02 {
        width: 60%;
        margin-top: -50px;
    }
    .liste-part-03 {
        width: 60%;
        margin-top: -50px;
    }
    .liste-part-01 {
        width: 60%;
        margin-top: -50px;
    }
    .liste-part-02 img {
        width: 100%;
        padding: 20px;
    }
    .liste-part-01 img {
        width: 100%;
        padding: 20px;
    }
    .logo-part {
        width: 18%;
        height: 200px;
    }
    .logo-part img {
        width: 100%;
        padding: 10px;
    }
    .logo-part img:hover {
        transform: scale( 1.1);
        width: 100%;
        padding: 10px;
    }

    /* 
    -------------------------
    temoignage
    -------------------------
    */

    .temoignage {
        width: 100%;
        padding: 30px 0 100px 0;
    }
    .temoignage-01 {
        width: 50%;
        height: 180px;
    }
    .image-temoignage {
        width: 30%;
        position: relative;
        top: -80px;
        left: 40px;
    }
    .block-text-temoignage {
        width: 60%;
        position: relative;
    }
    .text-temoignage {
        padding: 50px 0 30px 0;
    }
    .nom-temoin {
        font-size: 18px;
        font-weight: 600;
        text-align: center;
    }
    .date-temoignage {
        font-size: 15px;
        font-weight: 600;
        padding-top: 5px;
    }
    .text-temoignage {
        padding: 20px 20px 10px 0;
    }
    .box-carr {
        margin: 0 auto;
        width: 40%;
        padding-top: 30px;
    }
    .box-carr ul li {
        width: 12px;
        height: 12px;
    }

    /* 
    =============
    ncreative
    =============
    */

    .svg-creative {
        width: 130px;
        margin: 0 auto;
    }
    .ncreative-offset .svg-creative svg {
        width: 100%;
        padding-bottom: 0;
        padding-top: 0;
    }
    .ncreative-info-image {
        top: -150px;
        left: 0px;
        bottom: 0;
        opacity: .8;
        width: 40%;
    }
    .ncreative-info-image img {
        width: 80%;
    }
    .btn-nous-contactez-ngenie {
        background-color: var(--color-second);
        width: 30%;
        padding: 20px;
        margin: 0 auto;
        transition: var(--transition);
        cursor: pointer;
    }
    .btn-nous-contactez-ngenie a {
        font-size: 18px;
    }
    .nprint-info-image-1 {
        width: 30%;
    }
    .nprint-info-image-1 img {
        width: 100%;
        right: 0;
        opacity: .8;
    }
    .nprint-info-text-para {
        left: 20px;
        width: 60%;
    }

    .nprint-info-image {
        width: 40%;
        right: 0;
        bottom: 0;
        z-index: 1;
        opacity: .3;
    }
    .nprint-info-image img {
        position: relative;
        width: 100%;
    }

    .info-page-imga {
        width: 100%;
        padding-top: 80px;
    }

    /* 
    =============================
    noffres
    =============================
    */

    .cont-header-noffre {
        background-color: #dadada;
        width: 100%;
        height: 100%;
        padding-top: 17%;
    }
    .tittre-noffre {
        width: 65%;
        font-size: 45px;
    }
    .para-noffre {
        width: 45%;
        font-size: 18px;
    }
    .btn-noffre {
        width: 18%;
        padding: 25px 20px;
    }
    .btn-noffre a {
        font-size: 18px;
    }
    .titre-bloc-kit {
        padding-top: 150px;
        font-size: 45px;
        font-weight: 700;
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }
    .list-kits {
        width: 60%;
    }
    .box-kit {
        width: 32%;
        height: 520px;
        padding: 30px;
    }
    #kit-digital {
        width: 32%;
        height: 720px;
        padding: 30px;
    }
    .btn-box-kit {
        padding: 12px;
    }
    .btn-box-kit a {
        font-size: 16px;
    }
    .cont-cit-kit h3 {
        font-size: 35px;
    }
    .par-cit-kit {
        width: 70%;
        margin: 3% auto;
        padding: 10px;
    }
    .btn-cit-kit {
        width: 20%;
        padding: 15px 20px;
    }
    .btn-cit-kit a {
        font-size: 16px;
    }
    .titre-bloc-kit {
        padding-top: 150px;
        font-size: 45px;
        font-weight: 700;
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }
    .list-kits {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: space-between;
        width: 75%;
        margin: 0 auto;
        padding: 200px 0 20px 0;
    }
    .box-kit {
        width: 24%;
        height: 500px;
        padding: 30px;
        background-color: #fff;
        border: solid 1px #a5a5a5;
        box-shadow: 0 0 10px #00000038;
        cursor: pointer;
        position: relative;
        transition: ease all .3s;
    }
    .box-kit:hover {
        transform: scale(1.1);
        background-color: #d0e9ff;
    }
    #kit-digital {
        width: 24%;
        height: 700px;
        padding: 30px;
        border: solid 1px #a5a5a5;
        box-shadow: 0 0 10px #00000038;
        cursor: pointer;
        position: relative;
        top: -100px;
        transition: ease all .3s;
        background-color: #c5c5c5;
    }
    #kit-digital:hover {
        transform: scale(1.1);
        background-color: #d0e9ff;
    }
    .cont-box-kit h3 {
        text-align: center;
        padding-bottom: 10px;
    }
    .souligneur-titre-box-kit {
        width: 80%;
        height: 2px;
        margin: 10px auto;
        background-color: #cc530d;
    }
    .list-cont-box-kit {
        font-size: 15px;
    }
    .btn-box-kit {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--color-second);
        padding: 10px;
        text-align: center;
        color: #FFF;
        transition: ease all .3s;
    }
    .btn-box-kit:hover {
        background-color: var(--color-primary);
    }
    .btn-box-kit:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-box-kit a {
        color: #FFF;
        font-size: 16px;
    }
    .cont-cit-kit h3 {
        font-size: 35px;
    }
    #cit-kit {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 100px 0;
        background-color: #d0e9ff;
    }
    .par-cit-kit {
        width: 50%;
        margin: 3% auto;
        padding: 10px;
    }

    /* 
    =========================
    Portfolio
    =========================
    */

    .cont-header-portfolio {
        height: 65vh;
    }
    #cont-portfolio {
        bottom: -100px;
    }
    .block-cont-header-port {
        width: 80%;
        padding-top: 180px;
    }
    .tittle-header-port {
        width: 48%;
    }
    .tittle-header-port h3 {
        font-size: 28px;
    }
    .par-header-port {
        width: 50%;
        padding: 10px;
        font-size: 15px;
    }
    .btn-header {
        width: 23%;
        left: 130px;
        top: -30px;
    }
    #cont-portfolio {
        padding: 50px;
    }
    .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        width: 73%;
        height: auto;
    }
    .realisation-par-service {
        position: sticky;
        width: 25%;
        top: 55px;
        left: 90%;
    }
    #logo .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        width: 74%;
    }
    #logo .logo-realisation {
        width: 30%;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 18px;
    }
    .logo-realisation {
        width: 45%;
        top: -250px;
    }
    .logo-realisation img {
        width: 100%;
    }
    .logo-realisation:hover {
        padding-left: 20px;
        padding-bottom: 10px;
    }
    #comment-portfolio {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: space-between;
        width: 70%;
        margin: 0 auto;
        padding-bottom: 100px;
    }
    .comment-portfolio {
        width: 55%;
        position: relative;
        top: 50px;
    }
    .comment-portfolio p {
        font-size: 20px;
        font-weight: 500;
    }
    .img-comment-portfolio {
        width: 40%;
    }
    .img-comment-portfolio img {
        width: 100%;
    }
    .btn-comment-portfolio {
        width: 50%;
        padding: 10px;
        margin-top: 20px;
    }
    .btn-comment-portfolio:hover {
        box-shadow: 0 0 10px #0000006e;
    }
    .btn-comment-portfolio a {
        font-size: 16px;
    }

    /*
    =======================
    les kits
    =======================
    */

    .cont-header-kit-print {
        padding-top: 130px;
    }
    .cont-header-kit-print img {
        width: 45%;
    }
    .cont-header-kit-digital {
        padding-top: 120px;
    }
    .cont-header-kit-digital img {
        width: 45%;
    }
    .cont-header-kit-event {
        padding-top: 150px;
    }
    .cont-header-kit-event img {
        width: 45%;
    }
    .cont-header-kit-smedia {
        padding-top: 180px;
    }
    .cont-header-kit-smedia img {
        width: 45%;
    }
    #block-kit-print {
        padding: 100px 0 150px 0;
    }
    #block-kit-digital {
        padding: 100px 0 150px 0;
    }
    #block-kit-event {
        padding: 100px 0 150px 0;
    }
    #block-kit-s-media {
        padding: 100px 0 150px 0;
    }
    .cont-detail-kit {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        padding-top: 100px;
    }
    .list-detail-kit {
        width: 58%;
    }
    .img-detail-kit {
        width: 40%;
        height: 540px;
    }
    .img-detail-kit img {
        padding: 20px;
        width: 100%;
        margin-top: 60px;
    }
    .detail-kit h3 {
        margin: 5px auto;
        font-size: 30px;
    }
    .list-detail-kit h3 {
        padding-bottom: 20px;
        left: -120px;
    }
    .list-detail-kit h4 {
        padding: 20px 0;
        left: -80px;
    }
    .list-detail-kit li {
        list-style: square;
        padding-left: 10px;
        line-height: 2;
        font-size: 15px;
    }
    .price-kit-creation {
        font-size: 23px;
    }
    .btn-kit-creation a {
        font-size: 16px;
    }
    .btn-kit-digital a {
        font-size: 16px;
    }
    .img-detail-kit {
        width: 39%;
        border: solid 1px #000000;
        margin-top: 30px;
    }
    #block-kit-digital .img-detail-kit {
        width: 39%;
        height: 480px;
    }
    #block-kit-print .img-detail-kit {
        width: 39%;
        height: 450px;
    }
    #block-kit-s-media .img-detail-kit {
        width: 39%;
        height: 490px;
    }
    #block-kit-digital .list-detail-kit h3 {
        padding-bottom: 20px;
        left: -150px;
    }
    #block-kit-event .img-detail-kit {
        width: 39%;
        height: 580px;
    }
    .img-detail-kit img {
        padding: 30px;
        width: 100%;
        margin-top: 30px;
    }
    #img-detail-kit-print {
        padding-top: 30px;
    }
    #img-detail-kit-smedia img {
        padding: 0px;
        width: 65%;
        margin-top: 50px;
        position: relative;
        left: 70px;
    }
    .detail-kit h3 {
        width: 100%;
        margin: 10px auto;
        text-align: center;
        font-size: 30px;
    }
    .bande-separateur {
        width: 40%;
        height: 5px;
        background-color: var(--color-primary);
        margin: 0 auto;
        position: relative;
        z-index: 100;
    }
    .bande-separateur-2 {
        width: 20%;
        height: 10px;
        background-color: var(--color-primary);
        margin: 0 auto;
        position: relative;
        z-index: 200;
    }
    .list-detail-kit h3 {
        padding-bottom: 20px;
        position: relative;
        left: -180px;
    }
    #list-detail-kit-print h3 {
        position: relative;
        left: -180px;
    }
    #list-detail-kit-smedia h3 {
        position: relative;
        left: -170px;
    }
    #list-detail-kit-event h3 {
        position: relative;
        left: -180px;
    }
    .list-detail-kit h4 {
        padding: 20px 0;
        position: relative;
        left: -60px;
        color: #000;
    }
    .list-detail-kit li {
        list-style: square;
        padding-left: 10px;
        line-height: 2;
        font-size: 14px;
    }
    .price-kit {
        font-size: 27px;
        padding-top: 20px;
    }
    .btn-kit {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-event {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-smedia {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-event a {
        font-size: 16px;
    }
    .btn-kit-smedia a {
        font-size: 16px;
    }
    .btn-kit a {
        font-size: 16px;
    }
    #autre-kit {
        background-color: #effeff;
        height: auto;
        width: 100%;
    }
    .btn-kit-digital {
        width: 80%;
        margin: 15px auto;
        padding: 15px;
    }
    #price-kit-digital {
        font-size: 30px;
    }
    .btn-kit-digital a {
        font-size: 16px;
    }

    /* 
    ======================
    Location
    ======================
    */

    .produit-01 {
        padding: 100px 0;
    }
    .image-prod01 {
        width: 50%;
        height: 500px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .image-prod01:hover {
        width: 50%;
        height: 500px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .par-prod01 {
        width: 48%;
        padding: 20px;
    }
    .par-prod01 h5 {
        padding: 0 0 20px 0;
        font-size: 23px;
    }
    .par-prod01 p {
        font-size: 14px;
    }
    .titre-pro01 {
        width: 80%;
        padding: 20px;
    }
    .titre-pro01 h1 {
        font-size: 45px;
        margin-bottom: 20px;
    }
    .bloc-prix-location {
        width: 100%;
        padding: 20px 0;
    }
    .prix-location {
        font-size: 35px;
        font-weight: 700;
    }
    .njour-location {
        position: relative;
        top: 8px;
    }
    .btn-location-prod01 {
        width: 60%;
        padding: 15px 20px;
    }
    .btn-location-prod01 a {
        font-size: 16px;
    }
    #produit-02 {
        padding: 100px 0;
    }
    .produit-02 {
        width: 80%;
    }
    .image-prod02 {
        width: 60%;
        height: 500px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .image-prod02:hover {
        width: 60%;
        height: 500px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .bloc-prix-location-prod02 {
        width: 50%;
        padding: 20px 0;
    }
    .titre-prod02 {
        width: 80%;
        padding: 30px;
    }
    .par-prod02 {
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }
    .par-prod02 b {
        font-size: 25px;
    }
    .para-prod02 {
        width: 75%;
        margin: 0 auto;
        position: relative;
        top: -40px;
    }
    .para-prod02 b {
        font-size: 25px;
    }
    .btn-location-prod02 {
        width: 35%;
        padding: 15px 20px;
    }
    .btn-location-prod02 a {
        font-size: 16px;
    }
    /*
    =======================
    produit 03
    =======================
    */
    #produit-03 {
        padding: 100px 0;
        margin: 0 auto;
        width: 80%;
    }
    .image-prod03 {
        display: flex;
        flex-wrap: wrap;
        grid-area: 5px;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .img-prod03 {
        width: 28%;
        cursor: pointer;
        transition: all ease .3s;
    }
    .img-prod03:hover {
        transform: scale(1.1);
    }
    .img-prod03 img {
        width: 80%;
    }
    .par-prod03 {
        width: 50%;
        margin: 0 auto;
        padding-top: 80px;
        padding-bottom: 20px;
    }
    .bloc-prix-location-prod03 .prix-location {
        font-size: 45px;
        font-weight: 700;
    }
    .par-prod03 .njour-location {
        position: relative;
        top: 30px;
    }
    .bloc-prix-location-prod03 .njour-location {
        position: relative;
        top: 20px;
    }
    .btn-location-prod03 {
        width: 60%;
        padding: 15px 20px;
        background-color: var(--color-second);
        text-align: center;
        cursor: pointer;
        transition: ease all .3s;
        margin: 10px auto;
    }
    .btn-location-prod03:hover {
        background-color: var(--color-primary);
        box-shadow: 0 0 20px rgba(41, 40, 40, 0.233);
    }
    .btn-location-prod03:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-location-prod03 a {
        font-size: 16px;
        color: #FFF;
    }
    #nbre-jours {
        background-color: #ffe600;
        width: 35%;
        height: 45px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    /* 
    ==========================
    info equipe
    ==========================
    */
    .info-perso-equipe {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding-top: 60px;
        justify-content: space-between;
    }
    .image-tearm {
        width: 50%;
        z-index: 2;
        padding-top: 0;
    }
    .block-info-team-detail {
        width: 43%;
        padding-top: 130px;
    }
    .image-tearm img {
        width: 100%;
        margin: 0 auto;
        padding-top: 130px;
    }
    .bd-tearm {
        background-color: var(--color-third);
        width: 100%;
        height: 68%;
        top: -350px;
        left: -20px;
    }
    .tearm-rx {
        width: 80%;
        position: relative;
        padding-top: 20px;
    }
    .tearm-rx a i {
        font-size: 35px;
        padding-left: 5px;
    }
    .block-info-team-deatail {
        width: 80%;
        margin: 0 auto;
        padding: 100px 0 0 0;
    }
    .para-info-tearm {
        width: 80%;
        padding-left: 50px;
    }
    .titre-services-tearm {
        width: 80%;
        padding-left: 0px;
    }
    .titre-services-equp {
        padding-left: 50px;
    }
    #team-page-tearm-info {
        width: 100%;
        padding: 20px 0 150px 0;
    }
    #plus-tearm {
        width: 100%;
        background-color: #ecf4ff;
        margin-top: 50px;
        padding-top: 0;
    }
    .plus-tearm {
        width: 90%;
        margin: 0 auto;
        padding-top: 10px;
    }
    .picture-team-info {
        width: 60%;
        margin: 0 auto;
        display: flex;
        padding-top: 50px;
    }
    .para-info-tearm {
        width: 100%;
        padding-left: 0;
    }
    .pp-1 {
        height: 280px;
        width: 23%;
    }
    .pp-2 {
        height: 280px;
        width: 23%;
    }
    .pp-3 {
        height: 280px;
        width: 23%;
    }
    .pp-4 {
        height: 280px;
        width: 23%;
    }
    .pp-5 {
        height: 280px;
        width: 23%;
    }
    .pp-6 {
        height: 280px;
        width: 23%;
    }
    .pp-7 {
        height: 280px;
        width: 23%;
    }
    .pp-8 {
        height: 280px;
        width: 23%;
    }
    .pp-1 .team-info {
        height: 22%;
    }
    .pp-2 .team-info {
        height: 22%;
    }
    .pp-3 .team-info {
        height: 22%;
    }
    .pp-4 .team-info {
        height: 22%;
    }
    .pp-5 .team-info {
        height: 22%;
    }
    .pp-6 .team-info {
        height: 22%;
    }
    .pp-7 .team-info {
        height: 22%;
    }
    .pp-8 .team-info {
        height: 22%;
    }
    .btn-team-info a {
        font-size: 16px;
    }
    .btn-team-info {
        padding: 7px;
    }


    
    /* contact */

    .contact-nyusu {
        width: 40%;
    }

    .block-icones-footer {
        padding: 10px 0;
        width: 100%;
    }

    #block-icones-footer {
        padding: 10px 0;
        width: 42%;
    }

    .block-icones-footer img {
        width: 30px;
    }

    .block-icones-footer span {
        position: relative;
        top: -5px;
    }

    .block-icones-footer img span {
        font-size: 21px;
        font-weight: 500;
        position: relative;
        top: -50px;
    }

    #info-footer {
        position: relative;
        top: -25px;
        left: 10px;
    }

    #drapeau {
        width: 48%;
        height: auto;
        position: relative;
        left: 10%;
    }

    #drapeau img {
        height: auto;
        width: 35px;
    }


    /* 
    =======================
    contacts
    =======================
    */

    #info-contact {
        padding-top: 40px;
    }

    .contact-nyusu{
        width: 90%;
    }

    .block-info-contact{
        width: 49%;
    }

    .info-contact-nyusu{
        gap: 10px;
        width: 100%;
    }

    .drapeau-nyusu{
        width: 100%;
        padding-left: 80px;
    }

    .drapeau-nyusu img{
        width: 35px;
    }

    .contact-ci{
        width: 48%;
    }

    .contact-maroc{
        width: 48%;
    }

    .info-nyusu{
        width: 100%;
        display: flex;
        height: 50px;
    }

    .info-nyusu img{
        width:30px;
        position: relative;
        top: -10px;
    }

    .info-nyusu p{
        padding-left:5px;
        padding-top: -10px;
        font-size:14px;
        position: relative;
        top: -10px;
    }

    .info-contact-index {
        text-align: center;
    }

    .tittle-form {
        padding: 50px 0;
    }

    .tittle-form h1 {
        font-family: century gothic, arial, Poppins;
        font-size: 45px;
        padding-left: 20px;
    }


    #form-contact {
        width: 50%;
        background-color: var(--color-forth);
    }

    .form-contact {
        padding: 20px;
    }

    .checkbox {
        font-size: 15px;
        padding-left: 5px;
    }

    .type input[type="checkbox"] {
        margin-left: 10px;
    }

    #btn-send {
        background-color: #0000FF;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 18px;
        margin-left: 0;
        margin-bottom: 20px;
        width:25%;
    }

    #nyusu-rx {
        width: 100%;
        position: relative;
        padding-top: 50px;
        margin: 0 auto;
        right: 0;
        right: 0;
    }

    .nyusu-rx {
        width: 100%;
    }

    .nyusu-rx i {
        font-size: 35px;
        color: #6e6d6d;
    }

    .tittle-rx {
        font-size: 25px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 10px;
        color: #4b4b4b;
    }


}


/*
----------------------
    1330px 
----------------------

*/

@media(max-width:1330px) {
    .ncreative-offset {
        width: 32%;
    }
    .ncreative-offset-ngreen {
        width: 32%;
    }
}


/*
----------------------
    1320px 
----------------------

*/

@media(max-width:1320px) {
    .ncreative-offset {
        width: 32%;
    }
}


/*
----------------------
    1200px 
----------------------

*/

@media (max-width:1280px) {

    #print-offset-nprint{
        width: 32%;
        height: auto;
        background-color:var(--color-nprint);
        cursor: pointer;
        transition: var(--transition);
        padding: 20px 0;

    }

    .liste-services b {
        font-size: 15px;
        font-weight: 400;
    }
    .info-head-left {
        position: absolute;
        top: 0;
        width: 48%;
        height: 100vh;
        left: 0;
        z-index: 100;
        background: #ffffffe8;
        padding: 390px 50px 20px 80px;
    }
    .info-head-right {
        width: 100%;
        position: absolute;
        opacity: .8;
        height: 100vh;
        background-color: rgb(207, 206, 206);
    }
    .info-head-right img {
        width: 60%;
        height: auto;
        position: relative;
        padding: 30px 0 50px 0;
        left: 40%;
        bottom: 10%;
    }
    .tittle-head {
        font-size: 35px;
        line-height: 1;
    }
    .info-head {
        font-size: 21px;
        padding-top: 2px;
    }
    .btn-ensavoirplus {
        width: 150px;
        height: 40px;
        margin-top: 30px;
    }
    .btn-ensavoirplus a {
        font-size: 16px;
        padding-top: 10px;
        top: 8px;
    }
    .ncreative-offset {
        width: 32%;
    }
    .info-footer {
        padding-top: 10px;
        margin-left: 50px;
        font-size: 16px;
    }
    /* 
    ==========================
    Contact
    ==========================
    */
    #info-contact {
        width: 100%;
    }
    .tittle-form {
        padding: 30px 0;
    }
    #btn-send {
        width: 25%;
    }
    .map .button {
        width: 100%;
        font-size: 16px;
    }
    #form-contact {
        width: 100%;
    }
    .contact-nyusu {
        width: 100%;
    }
    .block-icones-footer img {
        width: 25px;
    }
    .block-icones-footer img span {
        font-size: 18px;
    }

    .checkbox {
        font-size: 12px;
        padding-left: 3px;
    }
    input[type="Email"]{
        width: 49.5%;
        font-size: 14px;
    }

    input[type="text"]{
        width: 49.5%;
        font-size: 14px;
    }

    .type input[type="checkbox"] {
        margin-left: 10px;
    }
    #btn-send {
        background-color: #0000FF;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 18px;
        margin-left: 0;
        margin-bottom: 0;
        width: 25%;
    }
    #nyusu-rx {
        width: 100%;
        position: relative;
        padding-top: 10px;
        margin: 0 auto;
        right: 0;
        right: 0;
    }
    .nyusu-rx {
        width: 100%;
        margin-top: -30px;
    }
    .nyusu-rx i {
        font-size: 35px;
        color: #6e6d6d;
    }
    .tittle-rx {
        font-size: 25px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 10px;
        color: #4b4b4b;
    }
    #clickmenu {
        width: 80%;
        margin: 0 auto;
        padding-top: 60px;
        justify-content: space-between;
    }
    .clickmenu li a {
        font-size: 55px;
    }
    .clickmenu li {
        padding: 10px 0 0 0;
    }
    .socialmedia {
        width: 45%;
        height: 100vh;
        position: absolute;
        top: 0;
        right: -3%;
        padding-top: 180px;
    }
    .bande {
        background-color: #FFDE00;
        width: 80%;
        height: 1px;
        position: relative;
        left: 0;
        margin-bottom: 10px;
    }
    .-img-social-media {
        padding-top: 20px;
    }
    .-img-social-media i {
        position: relative;
        left: -20px;
        top: -60px;
        font-size: 50px;
        padding: 23px;
    }


        
    /* contact */

    .contact-nyusu {
        width: 100%;
    }

    .contact-tel {
        padding-top: 10px;
    }

    .contact-mail {
        margin-top: -50px;
    }

    .contact-loc {
        margin-top: -50px;
    }

    .contact-drap {
        position: relative;
    }

    .block-icones-footer {
        padding: 10px 0;
        width: 100%;
    }

    #block-icones-footer {
        width: 48%;
    }


    .block-icones-footer img {
        width: 30px;
    }

    .block-icones-footer span {
        position: relative;
        top: -5px;
    }

    .block-icones-footer img span {
        font-size: 21px;
        font-weight: 500;
        position: relative;
        top: -50px;
    }

    #info-footer {
        position: relative;
        top: -25px;
        left: 15px;
    }

    #drapeau {
        width: 48%;
        height: auto;
        position: relative;
        left: 10%;
    }

    #drapeau img {
        height: auto;
        width: 35px;
    }


    .col #imag01 {
        width: 100%;
    }

    #imag01 img{
        width: 100%;
    }



    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 80%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 50px;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 60px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 16px;
        top: 7px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 30%;
        margin: 4% auto;
        top: 0px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 25%;
        margin: 0% auto;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 100%;
        margin: 0 auto;
        top: 30px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -102px;
    }


    .btn-d-agence{
        width: 100%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }



}


/*
----------------------
    1150px 
----------------------

*/

@media (max-width:1190px) {

    /* 
    ------------------
    animation
    ------------------
    */
    .bg-animation {
        width: 80%;
        top: -200px;
    }
    

    .bg-animation1 {
        width: 80%;
        top: -80px;
        z-index: 100;
    }


    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 60%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 20px;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 60px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 16px;
        top: 7px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 40%;
        margin: 15% auto;
        top: -10px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 35%;
        margin: 1% auto;
        top: 0;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 100%;
        margin: 0 auto;
        top: 5px;
        left: 5px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -102px;
    }


    .btn-d-agence{
        width: 100%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }


    .bg-ngenie {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngenie-1180_820.jpg);
        background-attachment: fixed;
        background-size: cover;
        position: relative;
    }

    .bg-nyusu {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nyusu-1180_820.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

    .cont-header-noffre {
        background-image: url(../images/bg-construction-1180_820.jpg);
    }

    .bg-nDigital {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ndigital-1180_820.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nprint-1180_820.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ncreative {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ncreative-1180_820.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-contact {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-contact-1180_820.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #bg-location {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-location-1180-820.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .liste-services b {
        font-size: 15px;
        font-weight: 400;
    }
    .info-head-left {
        position: absolute;
        top: 0;
        width: 48%;
        height: 100vh;
        left: 0;
        z-index: 100;
        background: #ffffffe8;
        padding: 350px 50px 20px 80px;
    }
    .info-head-right {
        width: 100%;
        position: absolute;
        opacity: .8;
        height: 100vh;
        background-color: rgb(207, 206, 206);
    }
    .info-head-right img {
        width: 52%;
        height: auto;
        position: relative;
        padding: 60px 0 50px 0;
        left: 45%;
        bottom: 10%;
    }
    .tittle-head {
        font-size: 27px;
        line-height: 1;
    }
    .info-head {
        font-size: 18px;
        padding-top: 2px;
    }
    .btn-ensavoirplus {
        width: 150px;
        height: 40px;
        margin-top: 30px;
    }
    .btn-ensavoirplus a {
        font-size: 16px;
        padding-top: 10px;
        top: 8px;
    }
    /* 
    ======================
    Menu
    ======================
    */
    .menu {
        width: 50%;
    }
    .menu li {
        padding: 0;
    }
    .menu li a {
        padding: 3px 5px;
        font-size: 14px;
    }
    /* 
    =========================
    menu fon noir
    =========================
    */
    .menu-fd-noir {
        width: 50%;
    }
    .menu-fd-noir li {
        padding: 0;
    }
    .menu-fd-noir li a {
        padding: 3px 5px;
        font-size: 14px;
    }
    /*
    ===================
    Menu print
    ===================
    */
    .menu-print {
        width: 50%;
    }
    .menu-print li {
        padding: 0;
    }
    .menu-print li a {
        padding: 3px 5px;
        font-size: 14px;
    }
    /* ================
    Menu creative
    ===================
    */
    .menu-creative {
        width: 50%;
    }
    .menu-creative li {
        padding: 0;
    }
    .menu-creative li a {
        padding: 3px 5px;
        font-size: 14px;
    }
    /* ================
    Menu green
    ===================
    */
    .menu-green {
        width: 50%;
    }
    .menu-green li {
        padding: 0;
    }
    .menu-green li a {
        padding: 3px 5px;
        font-size: 14px;
    }
    /* 
    --------------
    sous menu
    --------------
    */
    .menu-deroulant-default .sous-menu {
        width: 180px;
        line-height: 1.5;
        padding: 15px 10px;
        margin-top: 3px;
    }
    .menu-deroulant-green .sous-menu {
        width: 180px;
        line-height: 1.5;
        padding: 15px 10px;
        margin-top: 3px;
    }
    .menu-deroulant-print .sous-menu {
        width: 180px;
        line-height: 1.5;
        padding: 15px 10px;
        margin-top: 3px;
    }
    .menu-deroulant-noir .sous-menu {
        width: 180px;
        line-height: 1.5;
        padding: 15px 10px;
        margin-top: 3px;
    }
    .menu-deroulant-creative .sous-menu {
        width: 180px;
        line-height: 1.5;
        padding: 15px 10px;
        margin-top: 3px;
    }
    .menu-deroulant-default .sous-menu li {
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        font-size: 18px;
    }
    .menu-deroulant-green .sous-menu li {
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        font-size: 18px;
    }
    .menu-deroulant-print .sous-menu li {
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        font-size: 18px;
    }
    .menu-deroulant-noir .sous-menu li {
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        font-size: 18px;
    }
    .menu-deroulant-creative .sous-menu li {
        transition: var(--transition);
        font-weight: 500;
        padding: 5px 20px;
        font-size: 18px;
    }
    .tittle-contact .titre-contact {
        position: relative;
        font-size: 40px;
        font-weight: 600;
        z-index: 10;
    }
    #clickmenu {
        width: 80%;
        margin: 0 auto;
        padding-top: 60px;
        justify-content: space-between;
    }
    .clickmenu li a {
        font-size: 45px;
    }
    .clickmenu li {
        padding: 10px 0 0 0;
    }
    .socialmedia {
        width: 45%;
        height: 100vh;
        position: absolute;
        top: 0;
        right: 0;
        padding-top: 100px;
    }
    .bande {
        background-color: #FFDE00;
        width: 80%;
        height: 1px;
        position: relative;
        left: -20%;
        margin-bottom: 10px;
    }
    /* 
    =========================
    Footer
    =========================
    */
    .b_left {
        width: 35%;
    }
    .b_center {
        width: 28%;
        margin-top: 50px;
    }
    .b_rigth {
        width: 100%;
        margin-top: 50px;
    }
    .info-footer {
        padding-top: -10px;
        margin-left: 5px;
    }
    .block-icones-footer {
        padding: 0;
    }
    /* 
    =========================
    Portfolio
    =========================
    */
    #portfolio {
        width: 100%;
        height: 60vh;
    }
    .cont-header-portfolio {
        height: 65vh;
    }
    #cont-portfolio {
        position: relative;
        bottom: -100px;
    }
    .block-cont-header-port {
        padding-top: 230px;
    }
    .tittle-header-port {
        width: 45%;
    }
    .tittle-header-port h3 {
        font-size: 29px;
    }
    .par-header-port {
        width: 50%;
        padding: 15px;
    }
    .btn-header {
        width: 25%;
        left: 120px;
        top: -30px;
    }
    #cont-portfolio {
        width: 80%;
        padding: 5px;
    }
    .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        width: 75%;
        height: auto;
    }
    .realisation-par-service {
        position: sticky;
        width: 25%;
        top: 54px;
        left: 68%;
    }
    #logo .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 71%;
    }
    #logo .logo-realisation {
        width: 30%;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 18px;
    }
    .logo-realisation {
        cursor: pointer;
        transition: all ease .3s;
        width: 43%;
        position: relative;
        top: -200px;
    }
    .logo-realisation img {
        width: 100%;
    }
    .logo-realisation:hover {
        background-color: #d3d6fa;
        padding-left: 25px;
        padding-bottom: 15px;
    }
    .logo-realisation:hover img {
        box-shadow: -10px 10px 10px #0000006c;
    }
    #comment-portfolio {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: space-between;
        width: 70%;
        margin: 0 auto;
        padding-bottom: 200px;
    }
    .comment-portfolio {
        width: 55%;
        position: relative;
        top: 50px;
    }
    .comment-portfolio p {
        font-size: 18px;
        font-weight: 500;
    }
    .img-comment-portfolio {
        width: 40%;
    }
    .img-comment-portfolio img {
        width: 100%;
    }
    .btn-comment-portfolio {
        background-color: var(--color-primary);
        width: 45%;
        padding: 15px;
        text-align: center;
        margin-top: 20px;
        cursor: pointer;
        transition: ease all .3s;
    }
    .btn-comment-portfolio:hover {
        box-shadow: 0 0 20px #000000;
        background-color: var(--color-second);
    }
    .btn-comment-portfolio:hover a {
        color: rgb(255, 255, 255);
    }
    .btn-comment-portfolio a {
        color: rgb(0, 0, 0);
        font-size: 16px;
        font-weight: 600;
    }
    #webdesign,
    #creation-graphique,
    #logo {
        padding-bottom: 20px;
    }
    /*
    ======================
    noffres
    ======================
    */
    .cont-header-noffre {
        background-color: #00e0fe10;
        padding-top: 25%;
    }
    .btn-noffre {
        width: 25%;
        padding: 20px 25px;
    }
    .btn-noffre a {
        font-size: 16px;
    }
    .list-kits {
        gap: 5px;
        width: 65%;
        padding: 150px 0;
    }
    .box-kit {
        width: 49%;
        height: 500px;
        padding: 40px;
    }
    .box-kit:hover {
        transform: none;
    }
    #kit-digital {
        width: 50%;
        height: 680px;
        padding: 40px;
        top: -80px;
    }
    .cont-cit-kit h3 {
        font-size: 30px;
    }
    .par-cit-kit {
        width: 60%;
        margin: 3% auto;
        padding: 10px;
    }
    .btn-cit-kit {
        width: 25%;
        padding: 15px 20px;
    }
    /* 
    ======================
    Location
    ======================
    */
    .produit-01 {
        padding: 100px 0;
    }
    .image-prod01 {
        width: 50%;
        height: 500px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .image-prod01:hover {
        width: 50%;
        height: 500px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .par-prod01 {
        width: 48%;
        padding: 20px;
    }
    .par-prod01 h5 {
        padding: 0 0 20px 0;
        font-size: 23px;
    }
    .par-prod01 p {
        font-size: 14px;
    }
    .titre-pro01 {
        width: 80%;
        padding: 20px;
    }
    .titre-pro01 h1 {
        font-size: 45px;
        margin-bottom: 20px;
    }
    .bloc-prix-location {
        width: 100%;
        padding: 20px 0;
    }
    .prix-location {
        font-size: 30px;
        font-weight: 700;
    }
    .njour-location {
        position: relative;
        top: 8px;
    }
    .btn-location-prod01 {
        width: 60%;
        padding: 15px 20px;
    }
    .btn-location-prod01 a {
        font-size: 16px;
    }
    #produit-02 {
        padding: 100px 0;
    }
    .produit-02 {
        width: 80%;
    }
    .image-prod02 {
        width: 60%;
        height: 500px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .image-prod02:hover {
        width: 60%;
        height: 500px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .bloc-prix-location-prod02 {
        width: 55%;
        padding: 20px 0;
    }
    .titre-prod02 {
        width: 80%;
        padding: 30px;
    }
    .par-prod02 {
        width: 80%;
        margin: 0 auto;
    }
    .par-prod02 b {
        font-size: 25px;
    }
    .para-prod02 {
        width: 75%;
        margin: 0 auto;
        position: relative;
        top: -40px;
    }
    .para-prod02 b {
        font-size: 25px;
    }
    .btn-location-prod02 {
        width: 35%;
        padding: 15px 20px;
    }
    .btn-location-prod02 a {
        font-size: 16px;
    }
    /*
    =======================
    produit 03
    =======================
    */
    #produit-03 {
        padding: 100px 0;
        margin: 0 auto;
        width: 80%;
    }
    .image-prod03 {
        display: flex;
        flex-wrap: wrap;
        grid-area: 5px;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .img-prod03 {
        width: 28%;
        cursor: pointer;
        transition: all ease .3s;
    }
    .img-prod03:hover {
        transform: scale(1.1);
    }
    .img-prod03 img {
        width: 80%;
    }
    .par-prod03 {
        width: 60%;
        margin: 0 auto;
        padding-top: 80px;
        padding-bottom: 20px;
    }
    .bloc-prix-location-prod03 .prix-location {
        font-size: 45px;
        font-weight: 700;
    }
    .par-prod03 .njour-location {
        position: relative;
        top: 30px;
    }
    .bloc-prix-location-prod03 .njour-location {
        position: relative;
        top: 20px;
    }
    .btn-location-prod03 {
        width: 50%;
        padding: 15px 20px;
        background-color: var(--color-second);
        text-align: center;
        cursor: pointer;
        transition: ease all .3s;
        margin: 10px auto;
    }
    .btn-location-prod03:hover {
        background-color: var(--color-primary);
        box-shadow: 0 0 20px rgba(41, 40, 40, 0.233);
    }
    .btn-location-prod03:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-location-prod03 a {
        font-size: 16px;
        color: #FFF;
    }
    #nbre-jours {
        background-color: #ffe600;
        width: 35%;
        height: 45px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    /* 
    =====================
    produit 04
    =====================
    */
    .image-prod04 {
        width: 80%;
        height: 500px;
        margin: 5% auto;
        background-image: url(../images/location-prod41.jpg);
        background-size: 100%;
        cursor: pointer;
        transition: all ease .3s;
    }
    .image-prod04:hover {
        width: 80%;
        height: 500px;
        background-image: url(../images/location-prod42.jpg);
        background-size: 100%;
    }
    .bloc-prix-location-04 {
        width: 70%;
        display: flex;
        padding: 30px 0;
        justify-content: space-between;
        margin: 0 auto;
    }
    .bloc-prix-location-prod04 .njour-location {
        position: relative;
        top: 60px;
    }
    /*
    =======================
    les kits
    =======================
    */
    .list-detail-kit {
        width: 58%;
    }
    .img-detail-kit img {
        padding: 20px;
        width: 100%;
        margin-top: 60px;
    }
    .detail-kit h3 {
        margin: 5px auto;
        font-size: 30px;
    }
    .list-detail-kit h3 {
        padding-bottom: 20px;
        left: -120px;
    }
    .list-detail-kit h4 {
        padding: 20px 0;
        left: -80px;
    }
    .list-detail-kit li {
        list-style: square;
        padding-left: 10px;
        line-height: 2;
        font-size: 15px;
    }
    .price-kit-creation {
        font-size: 23px;
    }
    .btn-kit-creation a {
        font-size: 16px;
    }
    .btn-kit-digital a {
        font-size: 16px;
    }
    .img-detail-kit {
        width: 39%;
        border: solid 1px #000000;
        margin-top: 30px;
    }
    #block-kit-digital .img-detail-kit {
        width: 39%;
        height: 450px;
    }
    #block-kit-print .img-detail-kit {
        width: 39%;
        height: 430px;
    }
    #block-kit-s-media .img-detail-kit {
        width: 39%;
        height: 430px;
    }
    #block-kit-digital .list-detail-kit h3 {
        padding-bottom: 20px;
        left: -150px;
    }
    #block-kit-event .img-detail-kit {
        width: 39%;
        height: 520px;
    }
    .img-detail-kit img {
        padding: 30px;
        width: 100%;
        margin-top: 30px;
    }
    #img-detail-kit-print {
        padding-top: 30px;
    }
    #img-detail-kit-smedia img {
        padding: 0px;
        width: 65%;
        margin-top: 50px;
        position: relative;
        left: 70px;
    }
    .detail-kit h3 {
        width: 100%;
        margin: 10px auto;
        text-align: center;
        font-size: 30px;
    }
    .bande-separateur {
        width: 40%;
        height: 5px;
        background-color: var(--color-primary);
        margin: 0 auto;
        position: relative;
        z-index: 100;
    }
    .bande-separateur-2 {
        width: 20%;
        height: 10px;
        background-color: var(--color-primary);
        margin: 0 auto;
        position: relative;
        z-index: 200;
    }
    .list-detail-kit h3 {
        padding-bottom: 20px;
        position: relative;
        left: -180px;
    }
    #list-detail-kit-print h3 {
        position: relative;
        left: -130px;
        font-size: 25px;
    }
    #list-detail-kit-smedia h3 {
        position: relative;
        left: -120px;
        font-size: 25px;
    }
    #list-detail-kit-event h3 {
        position: relative;
        left: -160px;
        font-size: 25px;
    }
    #list-detail-kit-digital h3 {
        position: relative;
        /* left: -500px; */
        font-size: 25px;
    }
    .list-detail-kit h4 {
        padding: 20px 0;
        position: relative;
        left: -60px;
        color: #000;
    }
    .list-detail-kit li {
        list-style: square;
        padding-left: 10px;
        line-height: 2;
        font-size: 14px;
    }
    .price-kit {
        font-size: 27px;
        padding-top: 20px;
    }
    .btn-kit {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-event {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-smedia {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-event a {
        font-size: 16px;
    }
    .btn-kit-smedia a {
        font-size: 16px;
    }
    .btn-kit a {
        font-size: 16px;
    }
    #autre-kit {
        background-color: #effeff;
        height: auto;
        width: 100%;
    }
    .btn-kit-digital {
        width: 80%;
        margin: 15px auto;
        padding: 15px;
    }
    #price-kit-digital {
        font-size: 30px;
    }
    .btn-kit-digital a {
        font-size: 16px;
    }
    #block-nous-contacter {
        min-height: 100vh;
        padding-top: 200px;
        padding-bottom: 200px;
    }
    #block-nous-contacter-autre {
        width: 100%;
        min-height: 80vh;
        padding-top: 230px;
        padding-bottom: 200px;
    }
    /* 
    =====================
    partenaire
    =====================
    */
    .liste-partenaire {
        width: 70%;
        height: auto;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 0 auto;
    }
    .logo-part-01 {
        transition: var(--transition);
        overflow: hidden;
        width: 18%;
        height: auto;
    }
    .logo-part-01 img {
        transition: var(--transition);
        width: 100%;
    }
    .btn-nous-contactez-ngenie {
        background-color: var(--color-second);
        width: 35%;
        padding: 18px;
        margin: 0 auto;
        transition: var(--transition);
        cursor: pointer;
    }
    .btn-nous-contactez-ngenie a {
        font-size: 18px;
    }
    /* 
    ==========================
    info equipe
    ==========================
    */
    .info-perso-equipe {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding-top: 50px;
    }
    #plus-tearm {
        width: 100%;
        background-color: #ecf4ff;
        margin-top: 50px;
        padding-top: 0;
    }
    .plus-tearm {
        width: 100%;
        margin: 0 auto;
        padding-top: 0;
    }
    .image-tearm {
        width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 2;
        padding-top: 0;
    }
    .block-info-team-detail {
        width: 100%;
        padding-top: 80px;
        margin-top: 0px;
    }
    .bd-tearm {
        width: 100%;
        height: 75%;
        top: -550px;
        left: -25px;
    }
    .image-tearm img {
        width: 100%;
        margin: 0 auto;
    }
    .tearm-rx {
        width: 80%;
        position: relative;
        padding-top: 20px;
        left: 15px;
    }
    .tearm-rx a i {
        font-size: 35px;
        padding-left: 5px;
    }
    .para-info-tearm {
        width: 100%;
        padding-left: 20px;
    }
    .titre-services-tearm {
        width: 80%;
        padding-left: 20px;
    }
    .titre-services-equp {
        padding-left: 50px;
    }
    .bloc-prix-location-prod03 .team-info {
        height: 25%;
    }
    .pp-1 .team-info {
        height: 24%;
    }
    .pp-2 .team-info {
        height: 24%;
    }
    .pp-3 .team-info {
        height: 24%;
    }
    .pp-4 .team-info {
        height: 24%;
    }
    .pp-5 .team-info {
        height: 24%;
    }
    .pp-6 .team-info {
        height: 24%;
    }
    .pp-7 .team-info {
        height: 24%;
    }
    .pp-8 .team-info {
        height: 24%;
    }
    .pp-1 {
        height: 270px;
    }
    .pp-2 {
        height: 270px;
    }
    .pp-3 {
        height: 270px;
    }
    .pp-4 {
        height: 270px;
    }
    .pp-5 {
        height: 270px;
    }
    .pp-6 {
        height: 270px;
    }
    .pp-7 {
        height: 270px;
    }
    .pp-8 {
        height: 270px;
    }
    .pp-1 {
        background-image: url(../images/smt-03.jpg);
    }
    .pp-2 {
        background-image: url(../images/akosse-03.jpg);
    }
    .pp-3 {
        background-image: url(../images/romaric-03.jpg);
    }
    .pp-4 {
        background-image: url(../images/sangan-03.jpg);
    }
    .pp-5 {
        background-image: url(../images/paul-03.jpg);
    }
    .pp-6 {
        background-image: url(../images/eustache-03.jpg);
    }
    .pp-7 {
        background-image: url(../images/smt-03.jpg);
    }
    .pp-8 {
        background-image: url(../images/alain-03.jpg);
    }
    .pp-1 .team-info {
        display: block;
    }
    .pp-2 .team-info {
        display: block;
    }
    .pp-3 .team-info {
        display: block;
    }
    .pp-4 .team-info {
        display: block;
    }
    .pp-5 .team-info {
        display: block;
    }
    .pp-6 .team-info {
        display: block;
    }
    .pp-7 .team-info {
        display: block;
    }
    .pp-8 .team-info {
        display: block;
    }
    .pp-1 .btn-team-info {
        display: block;
    }
    .pp-2 .btn-team-info {
        display: block;
    }
    .pp-3 .btn-team-info {
        display: block;
    }
    .pp-4 .btn-team-info {
        display: block;
    }
    .pp-5 .btn-team-info {
        display: block;
    }
    .pp-6 .btn-team-info {
        display: block;
    }
    .pp-7 .btn-team-info {
        display: block;
    }
    .pp-8 .btn-team-info {
        display: block;
    }
    #team-page-tearm-info {
        padding: 20px 0 0 0;
    }
    .team-info {
        width: 100%;
        height: auto;
        bottom: 50px;
    }
    .team-personal {
        padding-bottom: 100px;
    }
    .block-team-info {
        padding: 5px;
    }
    .block-team-info h2 {
        font-size: 18px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 13px;
        padding-left: 5px;
    }
    .block-team {
        height: 250px;
        width: 24%;
        margin: 60px 0;
    }
    #block-team-smt {
        height: 250px;
        width: 24%;
        margin: 60px 0;
    }
    #block-team-akosse {
        height: 250px;
        width: 24%;
        margin: 60px 0;
        background-image: url(../images/akosse-03.jpg);
    }
    #block-team-romaric {
        height: 250px;
        width: 24%;
        margin: 60px 0;
        background-image: url(../images/romaric-03.jpg);
    }
    #block-team-paul {
        height: 250px;
        width: 24%;
        margin: 60px 0;
        background-image: url(../images/paul-03.jpg);
    }
    .btn-team {
        width: 100%;
        bottom: 0;
        right: 0;
        top: 90%;
        padding: 10px;
        height: 45px;
        display: block;
    }
    .btn-team a {
        font-size: 15px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
    }
    /* 
    ------------------
    animation
    ------------------
    */

    .animation {
        padding-top: -20px;
        padding-bottom: 20px;
    }
    .block-an h2 {
        font-size: 25px;
        top: -10px;
    }
    .block-an p {
        font-size: 16px;
        top: -10px;
    }




    /* 
    =======================
    contacts
    =======================
    */

    #info-contact {
        padding-top: 40px;
    }

    .contact-nyusu{
        width: 90%;
    }

    .block-info-contact{
        width: 49%;
    }

    .info-contact-nyusu{
        gap: 10px;
        width: 100%;
    }

    .drapeau-nyusu{
        width: 100%;
        padding-left: 80px;
    }

    .drapeau-nyusu img{
        width: 35px;
    }

    .contact-ci{
        width: 48%;
    }

    .contact-maroc{
        width: 48%;
    }

    .info-nyusu{
        width: 100%;
        display: flex;
        height: 50px;
    }

    .info-nyusu img{
        width:30px;
        top: 0px;
    }

    .info-nyusu p{
        padding-left: 5px;
        font-size:14px;
        position: relative;
        top: 0;
    }

    .info-contact-index {
        text-align: center;
    }

    .tittle-form {
        padding: 30px 0;
    }

    .tittle-form h1 {
        font-size: 40px;
        padding-left: 20px;
    }


    #form-contact {
        width: 49%;
    }

    .form-contact {
        padding: 20px;
    }

    .checkbox {
        font-size: 14px;
        padding-left: 5px;
    }

    .type input[type="checkbox"] {
        margin-left: 5px;
        font-size: 14px;
    }

    #btn-send {
        background-color: #0000FF;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 18px;
        margin-left: 0;
        margin-bottom: 20px;
        width:25%;
    }

    #nyusu-rx {
        width: 100%;
        position: relative;
        padding-top: 150px;
        margin: 0 auto;
        right: 0;
        right: 0;
    }

    .nyusu-rx {
        width: 100%;
    }

    .nyusu-rx i {
        font-size: 35px;
        color: #6e6d6d;
    }

    .tittle-rx {
        font-size: 25px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 10px;
        color: #4b4b4b;
    }


    #block-nous-contacter {
        min-height: 80vh;
        padding-top: 200px;
    }
    #block-nous-contacter-autre {
        width: 100%;
        min-height: 60vh;
        padding-top: 250px;
    }
    .block-contact-titre {
        margin-bottom: -10px;
    }
    .btn-nous-contactez {
        width: 40%;
        padding: 10px;
    }
    .btn-nous-contactez a {
        font-size: 18px;
    }

}


/*
----------------------
    1115px 
----------------------

*/

@media(max-width:1115px) {

    /* 
    =================================
    team
    =================================
    */
    .team {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .team-info {
        width: 100%;
        height: auto;
        bottom: 50px;
    }
    .team-personal {
        padding-bottom: 100px;
        gap: 10px;
        width: 90%;
    }
    .block-team-info {
        padding: 5px;
    }
    .block-team-info h2 {
        font-size: 18px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 13px;
        padding-left: 5px;
    }
    #block-team-smt {
        height: 300px;
        width: 24%;
        margin: 20px 0;
    }
    #block-team-akosse {
        height: 300px;
        width: 24%;
        margin: 20px 0;
    }
    #block-team-romaric {
        height: 300px;
        width: 24%;
        margin: 20px 0;
    }
    #block-team-paul {
        height: 300px;
        width: 24%;
        margin: 20px 0;
    }
    .btn-team {
        width: 100%;
        bottom: 0;
        right: 0;
        top: 80%;
        padding: 10px;
        height: 45px;
        display: block;
    }
    .btn-team a {
        font-size: 15px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
    }

    #block-nous-contacter{
        width: 100%;
        min-height: 80vh;
        padding-top: 200px;
    }

    #block-nous-contacter-autre {
        width: 100%;
        min-height: 80vh;
        padding-top: 180px;
    }

 
    
    /* section partenaire */


    .block-partenaire{
        width: 100%;
        padding: 20px;
    }

    .contenu-parteniare{
        gap: 20px;
    }

    .logopart{
        width:19%;
        margin: 10px;
        padding: 0;
    }

    .logopart img{
        width: 80%;
    }

    .logopart:hover{
    transform: scale(1.1);
    }

    .titre-section-annimation1{
        width: 80%;
        font-size: 21px;
        padding: 20px;
    }

    .titre-section-annimation1 h1{
        font-size: 25px;

    } 

}


/*
----------------------
    1024px 
----------------------

*/

@media (max-width:1024px) {
    
    
        .liste-equipement-digitals{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding-left: 0px;
        padding-top: 10px;
        align-items: center;
    }
    
    .liste-equipement-digitals .equipement-digital-svg{
        width: 20%;
        cursor: pointer;
        text-align: center;
        justify-content: center;
    }
    
    .liste-equipement-digitals .equipement-digital-svg img{
        width: 100%;
    }


    .nprint-info-text-para .ul{
        margin-left: 0;
    }

    .liste-ndigital-page-ndigital{
        position: relative;
        left: 0;
    }
    

    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 100%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 50px;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 50px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 15px;
        top: 3px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 35%;
        margin: 10% auto;
        top: 0px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 30%;
        margin: 0% auto;
        top: -10px;
    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 3px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 100%;
        margin: 0 auto;
        top: 18px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -102px;
    }


    .btn-d-agence{
        width: 100%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }


    .logo {
        width: 22%;
    }
    /* menu */
    .menu {
        width: 60%;
    }
    .menu-fd-noir {
        width: 60%;
    }
    .menu-creative {
        width: 60%;
    }
    .menu-print {
        width: 60%;
    }
    .menu-green {
        width: 60%;
    }
    .menu li a {
        padding: 5px 9px;
        font-size: 14px;
    }
    .menu-print li a {
        padding: 5px 9px;
        font-size: 14px;
    }
    .menu-fd-noir li a {
        padding: 5px 9px;
        font-size: 14px;
    }
    .menu-green li a {
        padding: 5px 8px;
        font-size: 14px;
    }
    /* 
    --------------------------------------
    menu au click
    -------------------------------------
    */
    .menubar {
        height: 40px;
        width: 45px;
        font-size: 21px;
        padding-top: 4px;
        top: 60px;
    }
    .menubar-fd-noir {
        height: 40px;
        width: 45px;
        font-size: 21px;
        padding-top: 4px;
        top: 60px;
    }
    .menubar-green {
        height: 40px;
        width: 45px;
        font-size: 21px;
        padding-top: 4px;
        top: 60px;
    }
    .menubar-print {
        height: 40px;
        width: 45px;
        font-size: 21px;
        padding-top: 4px;
        top: 65px;
    }
    .menubar-creative {
        height: 40px;
        width: 45px;
        font-size: 21px;
        padding-top: 4px;
        top: 60px;
    }
    .Closemenu {
        height: 40px;
        width: 45px;
        font-size: 19px;
        padding-top: 4px;
        top: 60px;
    }
    header {
        height: 100vh;
        width: 100%;
    }
    #clickmenu {
        width: 80%;
        margin: 0 auto;
        padding-top: 60px;
        justify-content: space-between;
    }
    .clickmenu li a {
        font-size: 35px;
    }
    .clickmenu li {
        padding: 10px 0 0 0;
    }
    .socialmedia {
        width: 45%;
        height: 100vh;
        position: absolute;
        top: 0;
        right: 0;
        padding-top: 50px;
    }
    .bande {
        background-color: #FFDE00;
        width: 80%;
        height: 1px;
        position: relative;
        left: -20%;
        margin-bottom: 10px;
    }
    .-img-social-media {
        padding-top: 20px;
    }
    .-img-social-media i {
        position: relative;
        left: -20px;
        top: -60px;
        font-size: 45px;
        padding: 20px;
    }
    /* 
    =========================
    Footer
    =========================
    */
    .b_left {
        width: 35%;
    }
    .b_center {
        width: 28%;
        margin-top: 50px;
    }
    .b_rigth {
        width: 100%;
        margin-top: 50px;
    }
    .info-footer {
        padding-top: -10px;
        margin-left: 20px;
    }
    .block-icones-footer {
        padding: 0;
    }
    /* 
    ------------------------
    index.php
    ------------------------
    */
    .liste-services b {
        font-size: 15px;
        font-weight: 400;
    }
    .info-head-left {
        position: absolute;
        top: 0;
        width: 45%;
        height: 100vh;
        left: 0;
        z-index: 100;
        background: #ffffffc2;
        padding: 300px 50px 20px 80px;
    }
    .info-head-right {
        width: 100%;
        position: absolute;
        opacity: .8;
    }
    .info-head-right img {
        width: 50%;
        position: relative;
        bottom: 30px;
        padding: 10px;
        top: 50px;
        left: 470px;
    }
    .tittle-head {
        font-size: 21px;
        padding: 5px 0;
        line-height: 1;
    }
    .info-head {
        font-size: 15px;
        padding: 5px 30px 0 0;
        line-height: 1.2;
    }
    .btn-ensavoirplus {
        width: 250px;
        height: 40px;
        padding: 5px 30px 0 0;
    }
    .btn-ensavoirplus a {
        font-size: 16px;
        padding-top: 10px;
        top: 4px;
        left: 12px;
        text-align: center;
    }
    /* 
    ------------------------------
    main
    ------------------------------
    */
    .a-propos {
        width: 80%;
        padding-top: 100px;
        padding-left: 10px;
        margin-bottom: 150px;
        position: relative;
    }
    .a-propos-img {
        width: 60%;
        position: absolute;
        opacity: .8;
        top: 40px;
        right: 0;
        bottom: 0;
    }
    .info-a-propos {
        left: 10px;
        padding: 20px 0px;
        width: 80%;
    }
    .cont-info-a-propos {
        font-size: 15px;
    }
    .info-a-propos-servives {
        margin-top: -10px;
    }
    .info-a-propos-servives-text {
        width: 45%;
        height: 350px;
        top: 80px;
        right: 100px;
        border: 10px solid #ffff;
    }
    .info-a-propos-servives-img {
        width: 80%;
    }
    .bg-info-a-propos-servives-text {
        padding: 25px;
    }
    .block-services {
        padding: 5px;
    }
    .services {
        padding: 0;
    }
    .services svg {
        width: 25px;
        margin-top: -5px;
    }
    .sec-tittle {
        font-size: 18px;
    }
    .sec-tittle a {
        top: 3px;
    }
    .btn-decouvrez-lagence {
        margin-top: 10px;
        padding: 10px;
    }
    .button a {
        color: #ffffff;
        font-size: 16px;
        padding-left: 20px;
    }
    .info-realisation {
        left: 20px;
        padding: 30px 0px;
        width: 60%;
        top: -130px;
    }
    #work {
        padding: 250px 0 10px 0;
    }
    .work {
        padding: 20px 10px 0 0;
    }
    .img-realisation {
        width: 60%;
        position: relative;
        top: -100px;
    }
    .img-realisation img {
        width: 50%;
    }
    .work-picture {
        width: 65%;
        margin: 0 auto;
        padding: 100px 0;
        justify-content: center;
        text-align: center;
    }
    /* 
    ---------------------
    btn-voir-plus
    ---------------------

    */
    .btn-voir-plus {
        width: 200px;
        height: 40px;
        margin-top: 30px;
        margin-bottom: 150px;
        transition: var(--transition);
    }
    .btn-voir-plus a {
        padding: 20px;
        font-size: 16px;
    }
    .work-picture-ln .zoom {
        transition: var(--transition);
        overflow: hidden;
        width: 100%;
        height: 190px;
    }
    .work-picture-ln .img {
        padding: 6px;
        width: auto;
    }
    .box-services {
        position: relative;
        left: 10px;
    }
    .box {
        width: 32%;
    }
    .box-green {
        width: 32%;
    }
    .box-creative {
        width: 32%;
    }
    .box-print {
        width: 32%;
    }
    .box-digital {
        width: 32%;
    }
    /* 
    ------------------
    animation
    ------------------
    */
    .animation {
        padding-top: 10px;
        padding-bottom: 20px;
        width: 100%;
    }

    .block-an {
        width: 22%;
        height: auto;
    }

    .block-an h2 {
        font-size: 21px;
        top: -10px;
    }
    .block-an p {
        font-size: 16px;
        top: -10px;
    }
    .team {
        padding-top: 180px;
        padding-bottom: 50px;
    }
    .team-info {
        bottom: 50px;
    }
    .block-team {
        width: 45%;
        height: 400px;
    }
    .block-team-info {
        padding: 10px;
    }
    .btn-team {
        top: 82%;
        width: 100%;
    }
    .btn-team a {
        font-size: 16px;
    }
    .btn-view-team {
        width: 30%;
        padding: 10px;
        height: auto;
    }
    .btn-view-team a {
        font-size: 16px;
    }
    /* footer */
    .tittle-nl {
        font-size: 18px;
        font-weight: 400;
        padding-bottom: 20px;
    }
    /* 
    -----------------------------------
    nprint
    ----------------------------------
    */
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
    }
    #nprint {
        margin-top: 30px;
    }
    #nprint-equipement {
        margin-top: 100px;
        width: 100%;
    }
    .nprint-equipement {
        width: 100%;
    }
    .nprint-equipement img {
        width: 80%;
        padding: 50px;
    }
    .nprint-info-text {
        width: 100%;
    }
    .nprint-info-text-para {
        width: 100%;
        z-index: 200;
        padding: 0 10px;
    }
    .nprint-info-image {
        top: -80px;
        opacity: .3;
        position: absolute;
        width: 100%;
        left: 0;
        opacity: .1;
    }
    .nprint-info-image img {
        width: 60%;
        position: relative;
        left: 40%;
    }

    #nprint-info-image{
        position:absolute;
        width: 60%;
        opacity: .1;
        left: 20px;
        top: 0px;
    
    }
    
    #nprint-info-image img {
        width:100%;
    }
    
    .nprint-info-image-1 {
        top: -20px;
        position: absolute;
        width: 70%;
        left: 100px;
        opacity: .1;
    }
    .nprint-info-image-1 img {
        position: relative;
        left: 10%;
    }
    .pres-nprint {
        width: 70%;
    }
    .pres-nprint-01 {
        width: 49%;
    }
    .pres-nprint-02 {
        width: 49%;
    }


    /* 
    ===============
    ncreative
    ===============
    */
    .titre-services {
        padding-left: 10px;
    }
    .bloc-nprint-info-text {
        text-align: justify;
        width: 100%;
        padding: 5px;
    }
    .ncreative-info-image {
        top: -200px;
        left: 50%;
        bottom: 0;
        opacity: .1;
        width: 50%;
        position: absolute;
    }

    .ncreative-info-image img{
        width: 100%;

    }

    #nprint-info-text-para {
        width: 100%;
        padding-bottom: 100px;
    }
    /* 
    --------
    ngenie
    --------
    */
    .info-page-service {
        padding-bottom: 10px;
        padding-top: 80px;
        padding-left: -200px;
        width: 80%;
    }
    .info-page-service-text {
        width: 100%;
        position: relative;
    }
    .info-page-service-text {
        width: 100%;
    }
    .info-page-imga {
        width: 50%;
        padding-top: 50px;
        position: absolute;
        left: 40%;
        z-index: -500;
        opacity: .5;
    }
    .info-page-imga img {
        width: 100%;
    }
    .animation-ngenie {
        left: -10px;
    }
    .ng-animation {
        padding: 5px;
    }
    .tittle-an-ngenie {
        text-align: center;
        padding-top: 80px;
    }
    .tittle-an-ngenie h2 {
        font-size: 20px;
    }
    .btn-nous-contactez-ngenie {
        background-color: var(--color-second);
        width: 35%;
        padding: 18px;
        margin: 0 auto;
        transition: var(--transition);
        cursor: pointer;
    }
    .btn-nous-contactez-ngenie a {
        font-size: 18px;
    }
    /* temoignage */
    .temoignage-01 {
        margin: 0 auto;
        width: 65%;
        height: 250px;
    }
    /* 
    =====================
    partenaire
    =====================
    */
    .liste-partenaire {
        width: 70%;
        height: auto;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 auto;
    }
    .logo-part-01 {
        transition: var(--transition);
        overflow: hidden;
        width: 18%;
        height: auto;
    }
    .logo-part-01 img {
        transition: var(--transition);
        width: 100%;
    }
    /* ngreen */
    .ncreative-offset-ngreen {
        width: 32%;
    }
    .ncreative-offset-ngreen svg {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 10px;
    }
    /* 
    ======================
    nyusu
    ======================
    */
    .video-apropos {
        padding: 50px;
    }
    .video-apropos img {
        width: 100%;
    }
    .Nous-contactez {
        width: 50%;
        padding: 20px;
    }
    .Nous-contactez a {
        font-size: 18px;
    }
    /*
    ----------------------
    location
    ----------------------

    */
    #bg-location {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-location-768-1024.jpg);
        background-attachment: fixed;
        background-size: cover;
        position: relative;
    }
    /*
    ======================
    noffres
    ======================
    */
    .tittre-noffre {
        font-size: 40px;
    }
    .cont-header-noffre {
        padding-top: 28%;
    }
    .btn-noffre {
        width: 25%;
        padding: 15px 20px;
    }
    .btn-noffre a {
        font-size: 16px;
    }
    .list-kits {
        gap: 5px;
        width: 65%;
        padding: 150px 0;
    }
    .box-kit {
        width: 49%;
        height: 500px;
        padding: 40px;
    }
    .box-kit:hover {
        transform: none;
        background-color: none;
    }
    #kit-digital {
        width: 50%;
        height: 680px;
        padding: 40px;
        top: -80px;
    }
    #kit-digital:hover {
        transform: none;
        background-color: none;
    }
    .cont-cit-kit h3 {
        font-size: 30px;
    }
    .par-cit-kit {
        width: 70%;
        margin: 3% auto;
        padding: 10px;
    }
    .btn-cit-kit {
        width: 25%;
        padding: 15px 20px;
    }
    /* 
    ======================
    Location
    ======================
    */
    .produit-01 {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 0 auto;
        justify-content: space-between;
        padding: 200px 0;
    }
    .produit-01 {
        padding: 100px 0;
    }
    .image-prod01 {
        width: 90%;
        height: 520px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .image-prod01:hover {
        width: 90%;
        height: 520px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .par-prod01 {
        width: 100%;
        padding: 20px;
        text-align: center;
    }
    .par-prod01 h5 {
        padding: 0 0 20px 0;
        font-size: 23px;
    }
    .par-prod01 p {
        font-size: 14px;
    }
    .titre-pro01 {
        width: 100%;
        padding: 20px;
    }
    .titre-pro01 h1 {
        font-size: 45px;
        margin-bottom: 20px;
    }
    .bloc-prix-location {
        width: 65%;
        padding: 20px 0;
        margin: 0 auto;
    }
    .prix-location {
        font-size: 40px;
        font-weight: 700;
    }
    .njour-location {
        position: relative;
        top: 10px;
    }
    .btn-location-prod01 {
        width: 40%;
        padding: 15px 20px;
        margin: 10px auto;
    }
    .btn-location-prod01 a {
        font-size: 16px;
    }
    /*
    ======================
    produit 02
    ======================
    */
    #produit-02 {
        padding: 100px 0;
    }
    .produit-02 {
        width: 80%;
    }
    .image-prod02 {
        width: 80%;
        height: 500px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .image-prod02:hover {
        width: 80%;
        height: 500px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .bloc-prix-location-prod02 {
        width: 65%;
        padding: 20px 0;
    }
    .titre-prod02 {
        width: 80%;
        padding: 30px;
    }
    .par-prod02 {
        width: 80%;
        margin: 0 auto;
    }
    .par-prod02 b {
        font-size: 25px;
    }
    .para-prod02 {
        width: 75%;
        margin: 0 auto;
        position: relative;
        top: -40px;
    }
    .para-prod02 b {
        font-size: 25px;
    }
    .btn-location-prod02 {
        width: 40%;
        padding: 15px 20px;
    }
    .btn-location-prod02 a {
        font-size: 16px;
    }
    /*
    =======================
    produit 03
    =======================
    */
    #produit-03 {
        padding: 100px 0;
        margin: 0 auto;
        width: 80%;
    }
    .image-prod03 {
        display: flex;
        flex-wrap: wrap;
        grid-area: 5px;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .img-prod03 {
        width: 28%;
        cursor: pointer;
        transition: all ease .3s;
    }
    .img-prod03:hover {
        transform: scale(1.1);
    }
    .img-prod03 img {
        width: 80%;
    }
    .par-prod03 {
        width: 70%;
        margin: 0 auto;
        padding-top: 80px;
        padding-bottom: 20px;
    }
    .bloc-prix-location-prod03 .prix-location {
        font-size: 45px;
        font-weight: 700;
    }
    .par-prod03 .njour-location {
        position: relative;
        top: 30px;
    }
    .bloc-prix-location-prod03 .njour-location {
        position: relative;
        top: 20px;
    }
    .btn-location-prod03 {
        width: 50%;
        padding: 15px 20px;
        background-color: var(--color-second);
        text-align: center;
        cursor: pointer;
        transition: ease all .3s;
        margin: 10px auto;
    }
    .btn-location-prod03:hover {
        background-color: var(--color-primary);
        box-shadow: 0 0 20px rgba(41, 40, 40, 0.233);
    }
    .btn-location-prod03:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-location-prod03 a {
        font-size: 16px;
        color: #FFF;
    }
    #nbre-jours {
        background-color: #ffe600;
        width: 35%;
        height: 45px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    /* 
    =====================
    produit 04
    =====================
    */
    .image-prod04 {
        width: 90%;
        height: 500px;
        margin: 5% auto;
        background-image: url(../images/location-prod41.jpg);
        background-size: 100%;
        cursor: pointer;
        transition: all ease .3s;
    }
    .image-prod04:hover {
        width: 90%;
        height: 500px;
        background-image: url(../images/location-prod42.jpg);
        background-size: 100%;
    }
    .bloc-prix-location-04 {
        width: 65%;
        display: flex;
        padding: 30px 0;
        justify-content: space-between;
        margin: 0 auto;
    }
    .bloc-prix-location-prod04 .njour-location {
        position: relative;
        top: 60px;
    }
    /* 
    ==========================
    info equipe
    ==========================
    */
    .info-perso-equipe {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding-top: 50px;
    }
    #plus-tearm {
        width: 100%;
        background-color: #ecf4ff;
        margin-top: 50px;
        padding-top: 0;
    }
    .plus-tearm {
        width: 100%;
        margin: 0 auto;
        padding-top: 0px;
    }
    .image-tearm {
        width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 2;
        padding-top: 0;
    }
    .block-info-team-detail {
        width: 100%;
        padding-top: 100px;
        margin-top: 0;
    }
    .image-tearm img {
        width: 100%;
        margin: 0 auto;
    }
    .bd-tearm {
        width: 100%;
        height: 80%;
        top: -525px;
        left: -25px;
    }
    .tearm-rx {
        width: 80%;
        position: relative;
        padding-top: 20px;
        left: 15px;
    }
    .tearm-rx a i {
        font-size: 35px;
        padding-left: 5px;
    }
    .para-info-tearm {
        width: 100%;
        padding-left: 20px;
    }
    .titre-services-tearm {
        width: 80%;
        padding-left: 20px;
    }
    .titre-services-equp {
        padding-left: 50px;
    }
    .bloc-prix-location-prod03 .team-info {
        height: 25%;
    }
    .pp-1 .team-info {
        height: 25%;
    }
    .pp-2 .team-info {
        height: 25%;
    }
    .pp-3 .team-info {
        height: 25%;
    }
    .pp-4 .team-info {
        height: 25%;
    }
    .pp-5 .team-info {
        height: 25%;
    }
    .pp-6 .team-info {
        height: 25%;
    }
    .pp-7 .team-info {
        height: 25%;
    }
    .pp-8 .team-info {
        height: 25%;
    }
    .pp-1 {
        height: 235px;
    }
    .pp-2 {
        height: 235px;
    }
    .pp-3 {
        height: 235px;
    }
    .pp-4 {
        height: 235px;
    }
    .pp-5 {
        height: 235px;
    }
    .pp-6 {
        height: 235px;
    }
    .pp-7 {
        height: 235px;
    }
    .pp-8 {
        height: 235px;
    }
    .block-team-info {
        padding: 8px;
    }
    .block-team-info h2 {
        font-size: 16px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 13px;
        padding-left: 5px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
        padding: 3px;
    }
    /* 
    =========================
    Portfolio
    =========================
    */
    #portfolio {
        width: 100%;
        height: 60vh;
    }
    .cont-header-portfolio {
        height: 65vh;
    }
    #cont-portfolio {
        position: relative;
        bottom: -100px;
    }
    .block-cont-header-port {
        padding-top: 200px;
    }
    .tittle-header-port {
        width: 45%;
    }
    .tittle-header-port h3 {
        font-size: 29px;
    }
    .par-header-port {
        width: 50%;
        padding: 15px;
        position: relative;
        top: -30px;
    }
    .btn-header {
        width: 25%;
        left: 100px;
        top: -30px;
    }
    #cont-portfolio {
        width: 80%;
        padding: 5px;
    }
    .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        width: 75%;
        height: auto;
    }
    .realisation-par-service {
        position: sticky;
        width: 25%;
        top: 60px;
        left: 68%;
    }
    #logo .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 71%;
    }
    #logo .logo-realisation {
        width: 30%;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 16px;
    }
    .logo-realisation {
        cursor: pointer;
        transition: all ease .3s;
        width: 43%;
        position: relative;
        top: -190px;
    }
    .logo-realisation img {
        width: 100%;
    }
    .logo-realisation:hover {
        background-color: #d3d6fa;
        padding-left: 25px;
        padding-bottom: 15px;
    }
    .logo-realisation:hover img {
        box-shadow: -10px 10px 10px #0000006c;
    }
    #comment-portfolio {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: space-between;
        width: 70%;
        margin: 0 auto;
        padding-bottom: 200px;
    }
    .comment-portfolio {
        width: 55%;
        position: relative;
        top: 50px;
    }
    .comment-portfolio p {
        font-size: 18px;
        font-weight: 500;
    }
    .img-comment-portfolio {
        width: 40%;
    }
    .img-comment-portfolio img {
        width: 100%;
    }
    .btn-comment-portfolio {
        background-color: var(--color-primary);
        width: 55%;
        padding: 15px;
        text-align: center;
        margin-top: 20px;
        cursor: pointer;
        transition: ease all .3s;
    }
    .btn-comment-portfolio:hover {
        box-shadow: 0 0 20px #000000;
        background-color: var(--color-second);
    }
    .btn-comment-portfolio:hover a {
        color: rgb(255, 255, 255);
    }
    .btn-comment-portfolio a {
        color: rgb(0, 0, 0);
        font-size: 16px;
        font-weight: 600;
    }
    #webdesign,
    #creation-graphique,
    #logo {
        padding-bottom: 20px;
    }
    /* 
    =================================
    team
    =================================
    */
    .team {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .team-info {
        width: 100%;
        height: auto;
        bottom: 50px;
    }
    .team-personal {
        padding-bottom: 100px;
        gap: 10px;
        width: 90%;
    }
    .block-team-info {
        padding: 5px;
    }
    .block-team-info h2 {
        font-size: 18px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 13px;
        padding-left: 5px;
    }
    #block-team-smt {
        height: 300px;
        width: 32%;
        margin: 30px 0;
    }
    #block-team-akosse {
        height: 300px;
        width: 32%;
        margin: 30px 0;
    }
    #block-team-romaric {
        height: 300px;
        width: 32%;
        margin: 30px 0;
    }
    #block-team-paul {
        height: 300px;
        width: 32%;
        margin: 30px 0;
    }
    .btn-team {
        width: 100%;
        bottom: 0;
        right: 0;
        top: 85%;
        padding: 10px;
        height: 45px;
        display: block;
    }
    .btn-team a {
        font-size: 15px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
    }
    .bd-tearm {
        width: 100%;
        height: 75%;
        top: -420px;
        left: -25px;
    }



    /* 
    =======================
    contacts
    =======================
    */

    #info-contact {
        padding-top: 20px;
    }

    .contact-nyusu{
        width: 90%;
    }

    .block-info-contact{
        width: 100%;
    }

    .info-contact-nyusu{
        gap: 10px;
        width: 100%;
        padding-bottom:50px;
        padding-left:20px;
    }

    .drapeau-nyusu{
        width: 100%;
        padding-left: 80px;
    }

    .drapeau-nyusu img{
        width: 35px;
    }

    .contact-ci{
        width: 49%;
    }

    .contact-maroc{
        width: 49%;
    }

    .info-nyusu{
        width: 100%;
        display: flex;
        height: 50px;
    }

    .info-nyusu img{
        width:30px;
        top: 0px;
    }

    .info-nyusu p{
        padding-left:5px;
        font-size:14px;
    }

    .info-contact-index {
        text-align: center;
    }

    .tittle-form {
        padding: 30px 0;
    }

    .tittle-form h1 {
        font-size: 40px;
        padding-left: 20px;
    }


    #form-contact {
        width: 100%;
        margin-bottom:50px;
    }

    .form-contact {
        padding: 20px;
    }

    .checkbox {
        font-size: 14px;
        padding-left: 5px;
    }

    .type input[type="checkbox"] {
        margin-left: 5px;
        font-size: 14px;
    }

    #btn-send {
        background-color: #0000FF;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 18px;
        margin-left: 0;
        margin-bottom: 20px;
        width:25%;
    }

    #nyusu-rx {
        width: 100%;
        position: absolute;
        margin: 0 auto;
        right: 0;
        left:50px;
        bottom:30px;
    }

    .nyusu-rx {
        width: 100%;
    }

    .nyusu-rx i {
        font-size: 35px;
    }

    .tittle-rx {
        font-size: 21px;
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    
    /* 
    =====================
    devise nyusu
    =====================
    */

    .section-devise{
        width: 100%;
        padding-bottom: 80px;
        padding-top: 0;
    }


    #titre-nos-services {
        position: relative;
        font-size: 35px;
        font-weight: 600;
    }

    #souligneur {
        background-color: var(--color-third);
        width: 100px;
        height: 20px;
        position: relative;
        top: -25px;
        left: -5px;
    }

    .bloc-experience {
        margin: 0 auto;
        width: 80%;
        padding: 0 0 200px 0;
    }



    .bloc-separateur-devise{
        width: 90%;
        margin: 5% auto;
        position: relative;
        align-items: center;
        opacity: .5;
    }

    .separateur-devise01{
        width: 40%;
        margin: 0 auto;
        height: 2px;
        background-color: rgba(112, 112, 112, 0.377);
        border-radius: 100px;
    }

    .separateur-devise02{
        width: 20px;
        height: 20px;
        background-color: rgb(180, 180, 180);
        border-radius: 500px;
        position: absolute;
        left: 48%;
        top: -10px;
        transform: translateX(50%);
        
    }


    #devise-nyusu{
        width: 70%;
        margin: 0% auto;
    }


    .contenu-devise-nyusu{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }


    .devise{
        width: 55%;
        padding: 30px;
    }


    .image-devise{
        width: 45%;
        align-items: center;
        justify-content: center;
        text-align: center;
        transition: all ease .5s;
        cursor: pointer;
    }

    .image-devise:hover{
        transform: scale(1.1);
    }

    .image-devise img{
        width: 100%;
    }


}


/*
----------------------
    992px 
----------------------

*/

@media (max-width:992px) {

    /* 
    -----------------------
    menu
    ----------------------
    */
    nav {
        position: fixed;
        width: 100%;
        z-index: 1000;
        margin: 0 auto;
    }
    .navbar {
        width: 85%;
        margin: 0 auto;
        padding: 55px 0 0 0;
    }
    .logo {
        width: 22%;
    }
    .menu {
        display: none;
    }
    .menu-fd-noir {
        display: none;
    }
    .menu-green {
        display: none;
    }
    .menu-print {
        display: none;
    }
    .menu-creative {
        display: none;
    }
    /* 
    -----------------------------
    Menu click
    ----------------------------
    */
    #clickmenu {
        padding-top: 55px;
    }
    .navbar-clickmenu {
        padding-top: 10px;
    }
    .clickmenu {
        padding-top: 5px;
    }
    .clickmenu li {
        padding: 15px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 35px;
    }
    /* Click menu */
    .design-menu {
        font-size: 35px;
        top: 5%;
        left: -20px;
    }
    .block-navClickmenu {
        display: block;
        padding: 30px;
    }
    #clickmenu {
        width: 100%;
        padding-top: 50px;
        padding-left: 180px;
    }
    .clickmenu li {
        padding: 30px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 60px;
    }
    .socialmedia {
        width: 100%;
        top: 75%;
        bottom: 0;
        left: 0;
        padding-top: 15px;
        background-color: #afafaf;
        height: 100%;
    }
    #socialmedia {
        padding: 0;
        color: #000000;
        display: flex;
        position: relative;
        left: 10%;
        top: 5%;
    }
    .info-social-media {
        width: 60%;
        padding-bottom: 20px;
    }
    .info-social-media h2 {
        padding-bottom: 20px;
        font-size: 45px;
    }
    .info-social-media span {
        padding: 20px;
        font-size: 18px;
    }
    .-img-social-media {
        padding-top: 50px;
    }
    .-img-social-media i {
        font-size: 40px;
        padding: 5px;
        left: 0;
        top: 2px;
    }
    .-img-social-media a i {
        color: rgb(0, 0, 0);
    }
    .bande {
        background-color: #FFDE00;
        width: 100%;
        height: 1px;
        position: absolute;
        left: -10%;
        margin-bottom: 20px;
        top: -70%;
    }
    .social-media {
        width: 60%;
        height: auto;
        background-color: #000000;
    }
    .socialmedia {
        width: 40%;
    }
    #socialmedia {
        padding: 100px 0 0 10px;
    }
    .info-social-media h2 {
        padding-bottom: 10px;
        font-size: 25px;
    }
    .menubar {
        height: 45px;
        width: 50px;
        top: 55px;
        font-size: 20px;
        padding-top: 8px;
    }
    .menubar-fd-noir {
        height: 45px;
        width: 50px;
        top: 55px;
        font-size: 20px;
        padding-top: 8px;
    }
    .menubar-green {
        height: 45px;
        width: 50px;
        top: 55px;
        font-size: 20px;
        padding-top: 8px;
    }
    .menubar-print {
        height: 45px;
        width: 50px;
        top: 55px;
        font-size: 20px;
        padding-top: 8px;
    }
    .menubar-creative {
        height: 45px;
        width: 50px;
        top: 55px;
        font-size: 20px;
        padding-top: 8px;
    }
    .activemenu {
        background-color: var(--color-second);
        width: 100%;
        height: 20px;
        position: absolute;
        bottom: 2px;
        left: -15px;
        z-index: 10;
        border-radius: 200px;
        display: none;
        transition: var(--transition);
    }
    /* footer */
    .b_left {
        width: 100%;
        text-align: justify;
    }
    .b_left img {
        width: 32%;
        position: relative;
        left: -10px;
    }
    .b_center {
        width: 45%;
        margin-top: 50px;
    }
    .b_center img {
        width: 35px;
        padding-right: 10px;
    }
    .b_rigth {
        width: 100%;
        margin-top: 50px;
    }
    .tittle-nl {
        font-size: 18px;
        font-weight: 400;
        padding-bottom: 20px;
    }
    /* 
    -----------------------------------
    nprint
    ----------------------------------
    */
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
    }
    #nprint {
        margin-top: 30px;
    }
    #nprint-equipement {
        margin-top: 100px;
        width: 100%;
    }
    .nprint-equipement {
        width: 100%;
    }
    .nprint-equipement img {
        width: 80%;
        padding: 50px;
    }
    .nprint-info-text-para {
        width: 100%;
        z-index: 200;
        text-align: justify;
        /* left: -50px; */
    }
    .nprint-info-image {
        right: -20px;
        top: 50px;
        position: absolute;
    }
    .nprint-info-image-1 {
        right: -20px;
        top: 0px;
        position: absolute;
    }
    .titre-nos-services {
        font-size: 35px;
    }
    .souligneur {
        background-color: var(--color-third);
        width: 100px;
        height: 20px;
        position: relative;
        top: -20px;
        left: -20px;
    }
    .titre-services-equp {
        padding-left: 10px;
    }
    header {
        height: 100vh;
        width: 100%;
    }
    .logo {
        width: 22%;
    }
    /* 
    ------------------------
    index.php
    ------------------------
    */
    .liste-services b {
        font-size: 15px;
        font-weight: 400;
    }
    .info-head-left {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        left: 0;
        z-index: 100;
        background: #ffffffb4;
        padding: 480px 80px 20px 80px;
    }
    .info-head-right {
        width: 100%;
        position: absolute;
        opacity: .8;
    }
    .info-head-right img {
        width: 80%;
        padding: 50px;
        top: 50px;
        left: 50px;
    }
    .tittle-head {
        font-size: 30px;
        line-height: 1;
    }
    .info-head {
        font-size: 21px;
        padding-top: 0px;
    }
    .btn-ensavoirplus {
        width: 40%;
        height: 50px;
        margin: 30px auto;
    }
    .btn-ensavoirplus a {
        font-size: 21px;
        padding-top: 10px;
        top: 8px;
    }
    /* 
    ------------------------------
    main
    ------------------------------
    */
    .a-propos {
        width: 80%;
        padding-top: 100px;
        padding-left: 10px;
    }
    .img-a-propos {
        width: 40%;
    }
    .a-propos-img {
        width: 60%;
        top: 15%;
    }
    .info-a-propos {
        width: 90%;
    }
    .cont-info-a-propos {
        font-size: 15px;
    }
    .info-a-propos-servives {
        margin-top: -60px;
    }
    .info-a-propos-servives-text {
        width: 50%;
        height: auto;
        top: 60px;
        right: 100px;
        border: 8px solid #ffff;
    }
    .info-a-propos-servives-img {
        width: 80%;
    }
    .bg-info-a-propos-servives-text {
        padding: 20px;
    }
    .block-services {
        padding: 8px;
    }
    .services {
        padding: 1px 0;
    }
    .services {
        padding: 2px 0;
    }
    .services svg {
        width: 35px;
    }
    .sec-tittle {
        font-size: 17px;
    }
    .sec-tittle a {
        top: 15px;
        left: -5px;
    }
    .sec-tittle:hover a {
        padding: 3px 10px;
        font-size: 18px;
    }
    .btn-decouvrez-lagence {
        margin-top: 10px;
        padding: 10px;
    }
    .button a {
        color: #ffffff;
        font-size: 18px;
        padding-left: 20px;
    }
    /* 
    ------------------------
    nos services
    ------------------------
    */
    .titre-services {
        padding-left: 0;
    }
    .nprint-info-text-para p {
        width: 100%;
        text-align: justify;
        /* padding-left:5px; */
    }
    /* 
    ----------------
    box-services
    ----------------
    */
    .box {
        width: 23%;
    }
    .box-green {
        padding: 5px 10px;
    }
    .box-creative {
        padding: 5px 10px;
    }
    .box-print {
        padding: 5px 10px;
    }
    .box-digital {
        padding: 5px 10px;
    }
    .box-green h4 {
        font-size: 21px;
        padding-top: 15px;
    }
    .box-digital h4 {
        font-size: 21px;
        padding-top: 15px;
    }
    .box-creative h4 {
        font-size: 21px;
        padding-top: 15px;
    }
    .box-print h4 {
        font-size: 21px;
        padding-top: 15px;
    }
    .cont-box svg {
        position: relative;
        top: 20px;
        width: 100%;
    }
    .info-realisation {
        left: 20px;
        padding: 0px;
        width: 70%;
        top: -150px;
    }
    #work {
        padding: 250px 0 10px 0;
    }
    .work {
        padding: 20px 10px 0 0;
    }
    .img-realisation {
        width: 40%;
        position: relative;
        top: -150px;
    }
    .img-realisation img {
        width: 100%;
    }
    .realisation-img {
        width: 50%;
    }
    .realisation-img img {
        width: 100%;
    }
    /* 
    ================================
    realisation
    ================================
    */
    .work-picture {
        width: 70%;
    }
    .print-offset {
        width: 49%;
    }
    .print-numerique {
        width: 100%;
        height: 500px;
    }
    .pres-nprint-01 {
        width: 100%;
        height: 400px;
    }
    .pres-nprint {
        width: 70%;
    }
    .pres-nprint-02 {
        width: 100%;
    }
    #intro-print {
        width: 100%;
        /* padding-left: 50px; */
    }
    .nprint-info-text-para {
        position: relative;
        width: 100%;
        z-index: 200;
        left: 0;
    }
    .titre-services {
        width: 100%;
        text-align: justify;
    }
    .btn-nous-contactez-print {
        width: 50%;
    }
    .btn-nous-contactez-print a {
        font-size: 16px;
        top: 10px;
    }
    /* team */
    .block-team {
        width: 45%;
        height: 310px;
    }



    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 50%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 50px;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 60px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 16px;
        top: 7px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 40%;
        margin: 15% auto;
        top: -10px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 45%;
        margin: 1% auto;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 100%;
        margin: 0 auto;
        top: 5px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -102px;
    }


    .btn-d-agence{
        width: 100%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }


    
    /* 
    ------------------
    animation
    ------------------
    */
    .bg-animation {
        width: 100%;
        top: -50px;
    }
    

    .bg-animation1 {
        width: 100%;
        top: -50px;
        z-index: 100;
    }

    .titre-section-annimation{
        width: 50%;
        font-size: 25px;
        padding: 20px 0;
        top: 0;
        margin-bottom: 120px;
    }
    
    .titre-section-annimation1{
        width: 80%;
        font-size: 21px;
        padding: 20px;
        margin-bottom: 120px;
    }

    .titre-section-annimation1 h1{
        font-size: 25px;

    } 

    .animation {
        gap: 10px;
        width: 80%;
        top: 35px;
        padding: 20px;
    }


    .block-an {
        width: 30%;
        height: auto;
    }
    
    #block-an{
        width: 30%;
        height: auto;
    }
    
    .titre-block-an{
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .block-an img {
        width: 50%;
    }
    
    .block-an h2 {
        font-size: 30px;
        top: -20px;
    }
    
    .block-an p {
        font-size: 15px;
        top: -30px;
    }


    
    /* section partenaire */


    .block-partenaire{
        width: 100%;
        padding: 20px;
    }

    .contenu-parteniare{
        gap: 10px;
    }

    .logopart{
        width:19%;
        margin: 10px;
        padding: 10px;
    }

    .logopart img{
        width: 100%;
    }

    .logopart:hover{
    transform: scale(1.1);
    }


}


/* 
==========================
915
==========================
*/

@media (max-width:915px) {


    .bg-ngenie {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngenie-920_420.jpg);
        background-attachment: fixed;
        background-size: cover;
        position: relative;
    }
    .bg-nyusu {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nyusu-920_420.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

    .cont-header-noffre {
        background-image: url(../images/bg-construction-920_420.jpg);
    }

    .bg-nDigital {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ndigital-920_420.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nprint-915_415.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ncreative {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ncreative-920_420.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-contact {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-contact-920_420.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ngreen {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngreen-920_420.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #bg-location {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-location-920_420.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #ilust {
        width: 100%;
        height: 100vh;
        background-image: url(../images/bg-paralax-920_420.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .info-head-left {
        position: relative;
        top: 0;
        width: 50%;
        height: 100vh;
        left: 0;
        z-index: 100;
        background: #ffffffc2;
        padding: 180px 20px 20px 75px;
    }
    .info-head-right {
        width: 50%;
        position: relative;
        /* opacity: .8; */
        top: 15%;
        right: 0;
    }
    .info-head-right img {
        width: 90%;
        position: relative;
        bottom: 30px;
        padding: 10px;
        top: -45px;
        left: -10px;
    }
    .tittle-head {
        font-size: 22px;
        line-height: 1;
        padding-left: 0;
        height: auto;
        top: 2px;
    }
    .info-head {
        font-size: 14px;
        padding-top:5px;
        text-align: justify;
    }
    .btn-ensavoirplus {
        width: 100%;
        height: 40px;
        margin: 20px auto;
    }
    .btn-ensavoirplus a {
        font-size: 16px;
        top: 2px;
    }
    /* Click menu */
    .design-menu {
        font-size: 18px;
        top: 25%;
        left: 40px;
    }
    .block-navClickmenu {
        display: flex;
        width: 100%;
        height: 100vh;
    }
    #clickmenu {
        width: 50%;
        padding-top: 5px;
        padding-left: 100px;
    }
    .clickmenu li {
        padding: 10px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 25px;
    }
    .socialmedia {
        width: 50%;
        top: 0;
        bottom: 0;
        left: 0;
        padding-top: 160px;
        height: 100%;
        background-color: #bebebe;
    }
    #socialmedia {
        padding: 0;
        color: #000000;
        display: block;
        position: relative;
        left: 40%;
        top: -35%;
    }
    .info-social-media {
        width: 60%;
        padding-bottom: 20px;
    }
    .info-social-media h2 {
        padding-bottom: 20px;
        font-size: 18px;
    }
    .info-social-media span {
        padding: 20px;
        font-size: 13px;
    }
    .-img-social-media {
        padding-top: 10px;
    }
    .-img-social-media i {
        font-size: 25px;
        padding: 0;
    }
    .-img-social-media a i {
        color: rgb(0, 0, 0);
        top: -10px;
    }
    .bande {
        background-color: #FFDE00;
        width: 100%;
        height: 1px;
        position: absolute;
        left: -10%;
        margin-bottom: 20px;
        top: 20%;
        display: none;
    }
    .pp-1 {
        height: 280px;
        width: 30%;
    }
    .pp-2 {
        height: 280px;
        width: 30%;
    }
    .pp-3 {
        height: 280px;
        width: 30%;
    }
    .pp-4 {
        width: 30%;
        height: 280px;
    }
    .pp-5 {
        height: 280px;
        width: 30%;
    }
    .pp-6 {
        height: 280px;
        width: 30%;
    }
    .pp-7 {
        height: 280px;
        width: 30%;
    }
    .pp-8 {
        height: 280px;
        width: 30%;
    }
    .pp-1 .team-info {
        height: 20%;
    }
    .pp-2 .team-info {
        height: 20%;
    }
    .pp-3 .team-info {
        height: 20%;
    }
    .pp-4 .team-info {
        height: 20%;
    }
    .pp-5 .team-info {
        height: 20%;
    }
    .pp-6 .team-info {
        height: 20%;
    }
    .pp-7 .team-info {
        height: 20%;
    }
    .pp-8 .team-info {
        height: 20%;
    }
    .tittle-contact .titre-contact {
        position: relative;
        font-size: 40px;
        font-weight: 600;
        z-index: 10;
    }
    .block-team-info {
        padding: 8px;
    }
    .block-team-info h2 {
        font-size: 15px;
    }
    .block-team-info p {
        font-size: 12px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
        padding: 3px;
    }

    #block-nous-contacter {
        min-height: 100vh;
        padding-top: 320px;
    }
    
    #block-nous-contacter-autre {
        width: 100%;
        min-height: 80vh;
        padding-top: 150px;
    }
    /*
    =======================
    les kits
    =======================
     */
    .cont-header-kit-print {
        padding-top: 100px;
    }
    .cont-header-kit-print img {
        width: 45%;
    }
    .cont-header-kit-digital {
        padding-top: 80px;
    }
    .cont-header-kit-digital img {
        width: 46%;
    }
    .cont-header-kit-event {
        padding-top: 100px;
    }
    .cont-header-kit-event img {
        width: 48%;
    }
    .cont-header-kit-smedia {
        padding-top: 60px;
    }
    .cont-header-kit-smedia img {
        width: 50%;
    }
    /* 
    =========================
    Portfolio
    =========================
    */
    #portfolio {
        width: 100%;
        height: 100vh;
    }
    .cont-header-portfolio {
        background-color: #dbddf8;
        ;
        width: 100%;
        height: 100vh;
    }
    #cont-portfolio {
        position: relative;
        bottom: -100px;
    }
    .block-cont-header-port {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 0 auto;
        justify-content: space-between;
        padding-top: 140px;
    }
    .btn-header {
        width: 30%;
        padding: 20px;
        left: 90px;
        top: -100px;
    }
    .realisation-par-service {
        position: sticky;
        width: 28%;
        top: 55px;
        left: 80%;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 16px;
    }
    .img-comment-portfolio {
        padding-top: 60px;
    }
    /*
    ======================
    noffres
    ======================
    */
    .cont-header-noffre {
        padding-top: 15%;
    }
    .tittre-noffre {
        width: 80%;
        font-size: 30px;
    }
    .para-noffre {
        width: 60%;
        font-size: 16px;
        padding-top: 10px;
    }
    .btn-noffre {
        width: 45%;
        padding: 20px 20px;
        margin: 20px auto;
    }
    .btn-noffre a {
        font-size: 16px;
    }
    .list-kits {
        gap: 5px;
        width: 80%;
        padding: 150px 0;
    }
    .box-kit {
        width: 49%;
        height: 500px;
        padding: 40px;
    }
    #kit-digital {
        width: 50%;
        height: 680px;
        padding: 40px;
        top: -80px;
    }
    .cont-cit-kit h3 {
        font-size: 25px;
    }
    .par-cit-kit {
        width: 85%;
        margin: 3% auto;
        padding: 10px;
    }
    .btn-cit-kit {
        width: 35%;
        padding: 15px 20px;
    }



    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 80%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 0px;
        left: -10px;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 50px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 50%;
        margin: 15% auto;
        top: -30px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 35%;
        margin: 10% auto;
        top: -80px;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 100%;
        margin: 0 auto;
        top: 10px;
        left: 20px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -150px;
    }


    .btn-d-agence{
        width: 98%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }


        
    #block-nous-contacter {
        min-height: 50vh;
        padding-top: 200px;
    }
    #block-nous-contacter-autre {
        width: 100%;
        min-height:50vh;
        padding-top: 250px;
    }
    .block-contact-titre {
        margin-bottom: -10px;
    }
    .btn-nous-contactez {
        width: 40%;
        padding: 10px;
    }
    .btn-nous-contactez a {
        font-size: 18px;
    }



}


/*
----------------------
    860px 
----------------------

*/

@media ( max-width:860px) {
    
    
       .liste-equipement-pint{
        width: 100%;
        padding-left: 50px;
        margin-top: -30px;
    }
    
     .equipement-print-svg{
        width: 15%;
        cursor: pointer;
    }


    #print-offset-nprint{
        width: 49%;
        height: auto;
        background-color:var(--color-nprint);
        cursor: pointer;
        transition: var(--transition);
        padding: 20px 0;

    }

    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 100%;
        margin: 0 auto;
        top: 5px;
        left: 5px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -102px;
    }


    .btn-d-agence{
        width: 100%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }


    .menubar,
    .menubar.active {
        display: block;
    }
    .menubar-print,
    .menubar-print.active {
        display: block;
    }
    .menubar-fd-noir,
    .menubar-fd-noir.active {
        display: block;
    }
    .menubar-green,
    .menubar-green.active {
        display: block;
    }
    .menubar-creative,
    .menubar-creative.active {
        display: block;
    }
    /* Click menu */
    .design-menu {
        font-size: 18px;
        top: 25%;
        left: 40px;
    }
    .block-navClickmenu {
        display: flex;
        width: 100%;
        height: 100vh;
    }
    #clickmenu {
        width: 50%;
        padding-top: 20px;
        padding-left: 150px;
    }
    .clickmenu li {
        padding: 5px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 22px;
    }
    .socialmedia {
        width: 50%;
        top: 0;
        bottom: 0;
        left: 0;
        padding-top: 150px;
        height: 100%;
        background-color: #969696;
    }
    #socialmedia {
        padding: 0;
        color: #000000;
        display: block;
        position: relative;
        left: 20%;
        top: -25%;
    }
    .info-social-media {
        width: 60%;
        padding-bottom: 20px;
    }
    .info-social-media h2 {
        padding-bottom: 15px;
        font-size: 18px;
    }
    .info-social-media span {
        padding: 20px;
        font-size: 13px;
    }
    .-img-social-media {
        padding-top: 10px;
    }
    .-img-social-media i {
        font-size: 15px;
        padding: 1px;
        top: -40px;
    }
    .-img-social-media a i {
        color: rgb(0, 0, 0);
        font-size: 30px;
    }
    .bande {
        background-color: #FFDE00;
        width: 100%;
        height: 1px;
        position: absolute;
        left: -10%;
        margin-bottom: 20px;
        top: 20%;
        display: none;
    }
    /* 
    ------------------------
    index.php
    ------------------------
    */
    .titre-nos-services {
        font-size: 35px;
    }
    .souligneur {
        background-color: var(--color-third);
        width: 100px;
        height: 20px;
        position: relative;
        top: -25px;
        left: -10px;
    }
    .tittle-info {
        font-size: 25px;
        padding: 10px 0;
    }
    .tittle-page p {
        text-align: justify;
    }
    .liste-services b {
        font-size: 15px;
        font-weight: 400;
    }
    .info-head-left {
        position: relative;
        top: 0;
        width: 50%;
        height: 100vh;
        left: 0;
        z-index: 100;
        background: #ffffffc2;
        padding: 160px 20px 20px 60px;
    }
    .info-head-right {
        width: 50%;
        position: relative;
        top: 15%;
        right: 0;
    }
    .info-head-right img {
        width: 90%;
        position: relative;
        bottom: 30px;
        padding: 10px;
        top: -45px;
        left: -10px;
    }
    .tittle-head {
        font-size: 22px;
        line-height: 1;
        padding-left: 0;
        height: auto;
        top: 2px;
    }
    .info-head {
        font-size: 14px;
        padding-top: 15px;
        text-align: justify;
    }
    .btn-ensavoirplus {
        width: 100%;
        height: 40px;
        margin: 20px auto;
    }
    .btn-ensavoirplus a {
        font-size: 16px;
        top: 2px;
    }
    /*
    ======================
    noffres
    ======================
    */
    .cont-header-noffre {
        background-color: #00e0fe10;
        padding-top: 15%;
    }
    .tittre-noffre {
        width: 80%;
        font-size: 30px;
    }
    .para-noffre {
        width: 60%;
        font-size: 16px;
        padding-top: 10px;
    }
    .btn-noffre {
        width: 45%;
        padding: 20px 25px;
    }
    .btn-noffre a {
        font-size: 18px;
    }
    .list-kits {
        gap: 5px;
        width: 65%;
        padding: 150px 0;
    }
    .box-kit {
        width: 49%;
        height: 500px;
        padding: 40px;
    }
    #kit-digital {
        width: 50%;
        height: 680px;
        padding: 40px;
        top: -80px;
    }
    .cont-cit-kit h3 {
        font-size: 25px;
    }
    .par-cit-kit {
        width: 85%;
        margin: 3% auto;
        padding: 10px;
    }
    .btn-cit-kit {
        width: 35%;
        padding: 15px 20px;
    }
    /* 
    ======================
    Location
    ======================
    */
    .produit-01 {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 0 auto;
        justify-content: space-between;
        padding: 200px 0;
    }
    .produit-01 {
        padding: 100px 0;
    }
    .image-prod01 {
        width: 90%;
        height: 450px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .image-prod01:hover {
        width: 90%;
        height: 450px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .par-prod01 {
        width: 100%;
        padding: 20px;
    }
    .par-prod01 h5 {
        padding: 0 0 20px 0;
        font-size: 25px;
    }
    .par-prod01 p {
        font-size: 15px;
    }
    .titre-pro01 {
        width: 100%;
        padding: 20px;
    }
    .titre-pro01 h1 {
        font-size: 45px;
        margin-bottom: 20px;
    }
    .bloc-prix-location {
        width: 80%;
        padding: 20px 0;
        margin: 0 auto;
    }
    .prix-location {
        font-size: 40px;
        font-weight: 700;
    }
    .njour-location {
        position: relative;
        top: 20px;
    }
    .btn-location-prod01 {
        width: 50%;
        padding: 15px 20px;
        margin: 10px auto;
    }
    .btn-location-prod01 a {
        font-size: 16px;
    }
    /*
    ======================
    produit 02
    ======================
    */
    #produit-02 {
        padding: 100px 0;
    }
    .produit-02 {
        width: 80%;
    }
    .image-prod02 {
        width: 90%;
        height: 480px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .image-prod02:hover {
        width: 90%;
        height: 480px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .bloc-prix-location-prod02 {
        width: 80%;
        padding: 20px 0;
    }
    .titre-prod02 {
        width: 100%;
        padding: 30px;
    }
    .par-prod02 {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .para-prod02 {
        width: 75%;
        margin: 0 auto;
        position: relative;
        top: -40px;
        text-align: center;
    }
    .para-prod02 b {
        font-size: 25px;
    }
    .btn-location-prod02 {
        width: 50%;
        padding: 15px 20px;
    }
    .btn-location-prod02 a {
        font-size: 16px;
    }
    /*
    =======================
    produit 03
    =======================
    */
    #produit-03 {
        padding: 100px 0;
        margin: 0 auto;
        width: 80%;
    }
    .image-prod03 {
        display: flex;
        flex-wrap: wrap;
        grid-area: 5px;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .img-prod03 {
        width: 48%;
        cursor: pointer;
        transition: all ease .3s;
    }
    .img-prod03:hover {
        transform: scale(1.1);
    }
    .img-prod03 img {
        width: 80%;
    }
    .par-prod03 {
        width: 90%;
        margin: 0 auto;
        padding-top: 80px;
        padding-bottom: 20px;
    }
    .bloc-prix-location-prod03 .prix-location {
        font-size: 45px;
        font-weight: 700;
    }
    .par-prod03 .njour-location {
        position: relative;
        top: 30px;
    }
    .bloc-prix-location-prod03 .njour-location {
        position: relative;
        top: 20px;
    }
    .btn-location-prod03 {
        width: 50%;
        padding: 15px 20px;
        background-color: var(--color-second);
        text-align: center;
        cursor: pointer;
        transition: ease all .3s;
        margin: 10px auto;
    }
    .btn-location-prod03:hover {
        background-color: var(--color-primary);
        box-shadow: 0 0 20px rgba(41, 40, 40, 0.233);
    }
    .btn-location-prod03:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-location-prod03 a {
        font-size: 16px;
        color: #FFF;
    }
    #nbre-jours {
        background-color: #ffe600;
        width: 35%;
        height: 45px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    /* 
    =====================
    produit 04
    =====================
    */
    .image-prod04 {
        width: 90%;
        height: 400px;
        margin: 5% auto;
        background-image: url(../images/location-prod41.jpg);
        background-size: 100%;
        cursor: pointer;
        transition: all ease .3s;
    }
    .image-prod04:hover {
        width: 90%;
        height: 400px;
        background-image: url(../images/location-prod42.jpg);
        background-size: 100%;
    }
    .bloc-prix-location-04 {
        width: 60%;
        display: flex;
        padding: 30px 0;
        justify-content: space-between;
        margin: 0 auto;
    }
    .bloc-prix-location-prod04 .njour-location {
        position: relative;
        top: 60px;
    }
    .btn-nous-contactez-ngenie {
        background-color: var(--color-second);
        width: 50%;
        padding: 18px;
        margin: 0 auto;
        transition: var(--transition);
        cursor: pointer;
    }
    .btn-nous-contactez-ngenie a {
        font-size: 16px;
    }
    .pp-1 {
        height: 280px;
        width: 30%;
    }
    .pp-2 {
        height: 280px;
        width: 30%;
    }
    .pp-3 {
        height: 280px;
        width: 30%;
    }
    .pp-4 {
        width: 30%;
        height: 280px;
    }
    .pp-5 {
        height: 280px;
        width: 30%;
    }
    .pp-6 {
        height: 280px;
        width: 30%;
    }
    .pp-7 {
        height: 280px;
        width: 30%;
    }
    .pp-8 {
        height: 280px;
        width: 30%;
    }
    .pp-1 .team-info {
        height: 20%;
    }
    .pp-2 .team-info {
        height: 20%;
    }
    .pp-3 .team-info {
        height: 20%;
    }
    .pp-4 .team-info {
        height: 20%;
    }
    .pp-5 .team-info {
        height: 20%;
    }
    .pp-6 .team-info {
        height: 20%;
    }
    .pp-7 .team-info {
        height: 20%;
    }
    .pp-8 .team-info {
        height: 20%;
    }
    #block-team-smt {
        height: 280px;
        width: 32%;
        margin: 30px 0;
    }
    #block-team-akosse {
        height: 280px;
        width: 32%;
        margin: 30px 0;
    }
    #block-team-romaric {
        height: 280px;
        width: 32%;
        margin: 30px 0;
    }
    #block-team-paul {
        height: 280px;
        width: 32%;
        margin: 30px 0;
    }

    .ncreative-offset {
        width: 49%;
    }
    
}


/* 
===================
845px
===================
*/

@media (max-width:845px) {

    .ncreative-offset{
        width: 49%;
    }
    
    .info-head-left {
        position: relative;
        top: 0;
        width: 50%;
        height: 100vh;
        left: 0;
        z-index: 100;
        background: #ffffffc2;
        padding: 150px 20px 20px 75px;
    }
    .info-head-right {
        width: 50%;
        position: relative;
        opacity: .8;
        top: 15%;
        right: 0;
    }
    .info-head-right img {
        width: 90%;
        position: relative;
        bottom: 30px;
        padding: 10px;
        top: -45px;
        left: -10px;
    }
    .tittle-head {
        font-size: 22px;
        line-height: 1;
        padding-left: 0;
        height: auto;
        top: 10px;
    }
    .info-head {
        font-size: 14px;
        padding-top: 15px;
        text-align: justify;
    }
    .btn-ensavoirplus {
        width: 100%;
        height: 40px;
        margin: 20px auto;
    }
    .btn-ensavoirplus a {
        font-size: 16px;
        top: 2px;
    }
    .pp-1 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-2 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-3 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-4 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-5 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-6 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-7 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-8 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    /* 
    =========================
    Portfolio
    =========================
    */
    #portfolio {
        width: 100%;
        height: 100vh;
    }
    .cont-header-portfolio {
        background-color: #dbddf8;
        ;
        width: 100%;
        height: 100vh;
    }
    #cont-portfolio {
        position: relative;
        bottom: -100px;
    }
    .block-cont-header-port {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 0 auto;
        justify-content: space-between;
        padding-top: 130px;
    }
    .tittle-header-port {
        width: 98%;
        margin: 0 auto
    }
    .tittle-header-port h3 {
        font-size: 25px;
    }
    .par-header-port {
        font-size: 15px;
        width: 100%;
        top: 10px;
    }
    .btn-header {
        width: 50%;
        padding: 20px;
        left: 100px;
        top: 20px;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 16px;
    }

        
    /* 
    ------------------
    animation
    ------------------
    */
    .bg-animation {
        width: 100%;
        top: -50px;
        padding-top: 20px;
        margin-bottom: 0;
    }
    
    .bg-animation1 {
        width: 100%;
        top: -50px;
        z-index: 100;
        padding-top: 20px;
    }

    .titre-section-annimation{
        width: 50%;
        font-size: 25px;
        padding: 20px 0;
        top: 0;
        margin-bottom: 30px;
    }
    
    .titre-section-annimation1{
        width: 80%;
        font-size: 21px;
        padding: 20px;
        margin-bottom: 30px;
    }

    .titre-section-annimation1 h1{
        font-size: 25px;

    } 

    .animation {
        gap: 10px;
        width: 80%;
        top: 35px;
        padding: 20px;
    }


}



/* 
===================
830px
===================
*/

@media (max-width: 830px) {

    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 60%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 50px;
        text-align: center;
        justify-content: center;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: -150px;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 50px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 15px;
        top: 3px;
    }





    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 45%;
        margin: 0% auto;
        top: -10px;
    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 3px;
    }


    .bg-ngenie {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngenie-820_1180.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-nyusu {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nyusu-820_1180.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

    .cont-header-noffre {
        background-image: url(../images/bg-construction-820_1180.jpg);
    }

    .bg-nDigital {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ndigital-820_1180.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nprint-820_1180.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ncreative {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ncreative-820_1180.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-contact {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-contact-820_1180.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #bg-location {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-location-820_1180.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #ilust {
        width: 100%;
        height: 100vh;
        background-image: url(../images/bg-paralax-820_1180.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    /* 
    ------------------------
    index.php
    ------------------------
    */
    #titre-nos-services {
        font-size: 35px;
    }
    .souligneur {
        background-color: var(--color-third);
        width: 100px;
        height: 20px;
        position: relative;
        top: -25px;
        left: -10px;
    }
    .tittle-info {
        font-size: 25px;
        padding: 10px 0;
        text-align: justify;
    }
    .liste-services b {
        font-size: 15px;
        font-weight: 400;
    }
    .info-head-left {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        left: 0;
        right: 0;
        z-index: 100;
        background: none;
        padding: 800px 50px 20px 70px;
    }
    .info-head-right {
        width: 100%;
        position: absolute;
        top: 20%;
        min-height: 100vh;
        background-image: url(../images/bg-accueil-820_1200.jpg);
        background-size: cover;
        position: relative;
    }
    .info-head-right img {
        width: 100%;
        position: relative;
        bottom: 30px;
        padding: 10px;
        top: 35px;
        left: -20px;
        display: none;
    }
    .tittle-head {
        font-size: 35px;
        line-height: 1;
    }
    .info-head {
        font-size: 21px;
        padding-top: 10px;
    }
    .btn-ensavoirplus {
        width: 97%;
        height: 60px;
        margin: 30px auto;
        position: relative;
        left: -10px;
    }
    .btn-ensavoirplus a {
        font-size: 24px;
        padding-top: 0;
        top: 10px;
    }
    /* Click menu */
    .design-menu {
        font-size: 18px;
        top: 0;
        left: -30px;
    }
    .block-navClickmenu {
        display: block;
        padding: 30px;
    }
    #clickmenu {
        width: 100%;
        padding-top: 20px;
        padding-left: 130px;
    }
    .clickmenu li {
        padding: 15px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 40px;
    }
    .socialmedia {
        width: 100%;
        top: 62%;
        bottom: 0;
        left: 0;
        padding-top: 10px;
        background-color: #afafaf;
        height: 100%;
    }
    #socialmedia {
        padding: 0;
        color: #000000;
        display: block;
        position: relative;
        left: 10%;
        top: 8%;
    }
    .info-social-media {
        width: 100%;
        padding-bottom: 20px;
    }
    .info-social-media h2 {
        padding-bottom: 20px;
        font-size: 25px;
    }
    .info-social-media span {
        padding: 5px;
        font-size: 18px;
    }
    .-img-social-media P {
        font-size: 15px;
    }
    .-img-social-media {
        padding-top: 2px;
        width: 100%;
    }
    .-img-social-media i {
        font-size: 30px;
        padding: 1px;
        top: -20px;
        left: 0;
    }
    .-img-social-media a i {
        color: rgb(0, 0, 0);
    }
    .bande {
        background-color: #FFDE00;
        width: 100%;
        height: 1px;
        position: absolute;
        left: -10%;
        margin-bottom: 20px;
        top: 10%;
    }
    /*
    =======================
    les kits
    =======================
     */
    .cont-header-kit-print {
        padding-top: 350px;
    }
    .cont-header-kit-print img {
        width: 70%;
    }
    .cont-header-kit-digital {
        padding-top: 310px;
    }
    .cont-header-kit-digital img {
        width: 70%;
    }
    .cont-header-kit-event {
        padding-top: 380px;
    }
    .cont-header-kit-event img {
        width: 70%;
    }
    .cont-header-kit-smedia {
        padding-top: 270px;
    }
    .cont-header-kit-smedia img {
        width: 70%;
    }
    #block-kit-print {
        padding: 100px 0 150px 0;
    }
    #block-kit-digital {
        padding: 100px 0 150px 0;
    }
    #block-kit-event {
        padding: 100px 0 150px 0;
    }
    #block-kit-s-media {
        padding: 100px 0 150px 0;
    }
    .cont-detail-kit {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        padding-top: 100px;
    }
    .list-detail-kit {
        width: 100%;
    }
    .img-detail-kit {
        width: 100%;
        height: 540px;
    }
    .img-detail-kit img {
        padding: 20px;
        width: 100%;
        margin-top: 60px;
    }
    .detail-kit h3 {
        margin: 5px auto;
        font-size: 30px;
    }
    .list-detail-kit h3 {
        padding-bottom: 20px;
        left: -200px;
    }
    .list-detail-kit h4 {
        padding: 20px 0;
        left: -80px;
    }
    .list-detail-kit li {
        list-style: square;
        padding-left: 10px;
        line-height: 2;
        font-size: 15px;
    }
    .price-kit-creation {
        font-size: 40px;
    }
    .btn-kit-creation a {
        font-size: 16px;
    }
    .btn-kit-digital a {
        font-size: 16px;
    }
    .img-detail-kit {
        width: 100%;
        margin-top: 30px;
        border: none;
    }
    #block-kit-digital .img-detail-kit {
        width: 100%;
        height: 650px;
        border: none;
    }
    #block-kit-print .img-detail-kit {
        width: 100%;
        height: 550px;
        border: none;
    }
    #block-kit-s-media .img-detail-kit {
        width: 100%;
        height: 490px;
        border: none;
    }
    #block-kit-digital .list-detail-kit h3 {
        padding-bottom: 20px;
        left: -180px;
    }
    #block-kit-event .img-detail-kit {
        width: 100%;
        height: 750px;
        border: none;
    }
    .img-detail-kit img {
        padding: 30px;
        width: 100%;
        margin-top: 30px;
    }
    #img-detail-kit-print {
        padding-top: 30px;
    }
    #img-detail-kit-smedia img {
        padding: 0px;
        width: 65%;
        margin-top: 50px;
        position: relative;
        left: 70px;
    }
    .detail-kit h3 {
        width: 100%;
        margin: 10px auto;
        text-align: center;
        font-size: 30px;
    }
    .bande-separateur {
        width: 80%;
        height: 5px;
        background-color: var(--color-primary);
        margin: 0 auto;
        position: relative;
        z-index: 100;
    }
    .bande-separateur-2 {
        width: 40%;
        height: 10px;
        background-color: var(--color-primary);
        margin: 0 auto;
        position: relative;
        z-index: 200;
    }
    .list-detail-kit h3 {
        padding-bottom: 20px;
        position: relative;
        left: -180px;
    }
    #list-detail-kit-print h3 {
        position: relative;
        left: -150px;
    }
    #list-detail-kit-smedia h3 {
        position: relative;
        left: -140px;
    }
    #list-detail-kit-event h3 {
        position: relative;
        left: -190px;
    }
    .list-detail-kit h4 {
        padding: 20px 0;
        position: relative;
        left: -60px;
        color: #000;
    }
    .list-detail-kit li {
        list-style: square;
        padding-left: 10px;
        line-height: 2;
        font-size: 14px;
    }
    .price-kit {
        font-size: 25px;
        padding-top: 20px;
    }
    .btn-kit {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-event {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-smedia {
        width: 80%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-event a {
        font-size: 16px;
    }
    .btn-kit-smedia a {
        font-size: 16px;
    }
    .btn-kit a {
        font-size: 16px;
    }
    #autre-kit {
        background-color: #effeff;
        height: auto;
        width: 100%;
    }
    .btn-kit-digital {
        width: 80%;
        margin: 15px auto;
        padding: 15px;
    }
    #price-kit-digital {
        font-size: 25px;
    }
    .btn-kit-digital a {
        font-size: 16px;
    }
    .titre-bloc-kit {
        padding-top: 100px;
        font-size: 35px;
    }
    
    #block-nous-contacter {
        min-height: 80vh;
        padding-top: 350px;
    }
    #block-nous-contacter-autre {
        width: 100%;
        min-height: 60vh;
        padding-top: 250px;
    }
    .block-contact-titre {
        margin-bottom: -10px;
    }
    .btn-nous-contactez {
        width: 40%;
        padding: 10px;
    }
    .btn-nous-contactez a {
        font-size: 18px;
    }
    /* 
    ------------------
    animation
    ------------------
    */
    .bg-animation {
        background-color: var(--color-third);
        border: none;
        width: 100%;
        /* height: 300px; */
        margin: 0 auto;
        position: relative;
        top: -130px;
        z-index: 100;
        padding-top: 100px;
    }
    .animation {
        display: flex;
        margin: 0 auto;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        width: 80%;
        position: relative;
        top: -50px;
        padding-top: 0;
    }
    .block-an {
        width: 30%;
        height: auto;
    }
    .block-an img {
        width: 60%;
    }
    .block-an h2 {
        font-size: 35px;
        position: relative;
        top: -20px;
    }
    .block-an p {
        font-size: 18px;
        position: relative;
        top: -30px;
    }
    /* 
    ==========================
    info equipe
    ==========================
    */
    .info-perso-equipe {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding-top: 50px;
    }
    #plus-tearm {
        width: 100%;
        background-color: #ecf4ff;
        margin-top: 50px;
        padding-top: 0;
    }
    .plus-tearm {
        width: 100%;
        margin: 0 auto;
        padding-top: 0;
    }
    .image-tearm {
        width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 2;
        padding-top: 0;
    }
    .block-info-team-detail {
        width: 100%;
        padding-top: 100px;
        margin-top: 0;
    }
    .image-tearm img {
        width: 100%;
        margin: 0 auto;
    }
    .bd-tearm {
        width: 100%;
        height: 75%;
        top: -415px;
        left: -20px;
    }
    .tearm-rx {
        width: 80%;
        position: relative;
        padding-top: 20px;
        left: 15px;
    }
    .tearm-rx a i {
        font-size: 35px;
        padding-left: 5px;
    }
    .para-info-tearm {
        width: 100%;
        padding-left: 20px;
    }
    .picture-team {
        left: 4%;
    }
    .titre-services-tearm {
        width: 80%;
        padding-left: 20px;
    }
    .titre-services-equp {
        padding-left: 50px;
    }
    .bloc-prix-location-prod03 .team-info {
        height: 25%;
    }
    .pp-1 .team-info {
        height: 24%;
    }
    .pp-2 .team-info {
        height: 24%;
    }
    .pp-3 .team-info {
        height: 24%;
    }
    .pp-4 .team-info {
        height: 24%;
    }
    .pp-5 .team-info {
        height: 24%;
    }
    .pp-6 .team-info {
        height: 24%;
    }
    .pp-7 .team-info {
        height: 24%;
    }
    .pp-8 .team-info {
        height: 24%;
    }
    .pp-1 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-2 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-3 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-4 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-5 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-6 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-7 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .pp-8 {
        height: 245px;
        width: 30%;
        margin: 5px;
    }
    .block-team-info {
        padding: 8px;
    }
    .block-team-info h2 {
        font-size: 15px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 13px;
        padding-left: 5px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
        padding: 3px;
    }
    /* 
    =========================
    Portfolio
    =========================
    */
    #portfolio {
        width: 100%;
        height: 60vh;
    }
    .cont-header-portfolio {
        height: 65vh;
    }
    #cont-portfolio {
        position: relative;
        bottom: -100px;
    }
    .block-cont-header-port {
        padding-top: 250px;
    }
    .tittle-header-port {
        width: 100%;
    }
    .tittle-header-port h3 {
        font-size: 30px;
        padding: 15px;
    }
    .par-header-port {
        width: 100%;
        padding: 15px;
        position: relative;
        top: 0;
        font-size: 16px;
    }
    .btn-header {
        width: 35%;
        left: 100px;
        top: -30px;
    }
    #cont-portfolio {
        width: 80%;
        padding: 5px;
    }
    .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        width: 75%;
        height: auto;
        position: relative;
        left: 13.5px;
    }
    .realisation-par-service {
        position: sticky;
        width: 90%;
        top: 56px;
        left: 100px;
        background-color: #eff5ff;
        z-index: 100;
    }
    #creation-graphique .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 93%;
        position: relative;
        left: 13.5px;
    }
    #logo .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 96%;
        position: relative;
        left: 13.5px;
    }
    #logo .logo-realisation {
        width: 30%;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 16px;
    }
    .logo-realisation {
        cursor: pointer;
        transition: all ease .3s;
        width: 31%;
        position: relative;
        top: 60px;
    }
    .logo-realisation img {
        width: 100%;
    }
    .logo-realisation:hover {
        background-color: #d3d6fa;
        padding-left: 25px;
        padding-bottom: 15px;
    }
    .logo-realisation:hover img {
        box-shadow: -10px 10px 10px #0000006c;
    }
    #comment-portfolio {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: space-between;
        width: 80%;
        margin: 0 auto;
        padding-bottom: 100px;
        padding-top: 200px;
    }
    .comment-portfolio {
        width: 100%;
        position: relative;
        top: 50px;
    }
    .comment-portfolio p {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 50px;
        text-align: center;
    }
    .img-comment-portfolio {
        width: 80%;
        padding-top: 100px;
        margin: 0 auto;
    }
    .img-comment-portfolio img {
        width: 100%;
    }

    .btn-comment-portfolio {
        background-color: var(--color-primary);
        width: 45%;
        padding: 15px;
        text-align: center;
        margin-top: 50px;
        cursor: pointer;
        transition: ease all .3s;
        margin: 0 auto;
    }


    .btn-comment-portfolio:hover a {
        color: rgb(255, 255, 255);
    }

    .btn-comment-portfolio a {
        color: rgb(0, 0, 0);
        font-size: 16px;
        font-weight: 600;
    }

    #webdesign,
    #creation-graphique,
    #logo {
        padding-bottom: 20px;
    }

    /* 
    =================================
    team
    =================================
    */
    .team {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .team-info {
        width: 100%;
        height: auto;
        bottom: 50px;
    }
    .team-personal {
        padding-bottom: 100px;
        gap: 10px;
        width: 90%;
    }
    .block-team-info {
        padding: 5px;
    }
    .block-team-info h2 {
        font-size: 18px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 13px;
        padding-left: 5px;
    }
    #block-team-smt {
        height: 300px;
        width: 32%;
        margin: 10px 0;
    }
    #block-team-akosse {
        height: 300px;
        width: 32%;
        margin: 10px 0;
    }
    #block-team-romaric {
        height: 300px;
        width: 32%;
        margin: 10px 0;
    }
    #block-team-paul {
        height: 300px;
        width: 32%;
        margin: 10px 0;
    }
    .btn-team {
        width: 100%;
        bottom: 0;
        right: 0;
        top: 75%;
        padding: 10px;
        height: 45px;
        display: block;
    }
    .btn-team a {
        font-size: 15px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
    }
    /*
    ======================
    noffres
    ======================
    */
    .cont-header-noffre {
        background-color: #00e0fe10;
        padding-top: 55%;
    }
    .tittre-noffre {
        width: 80%;
        font-size: 40px;
    }
    .para-noffre {
        width: 60%;
        font-size: 18px;
        padding-top: 10px;
    }
    .btn-noffre {
        width: 45%;
        padding: 20px 25px;
    }
    .btn-noffre a {
        font-size: 18px;
    }
    .list-kits {
        gap: 5px;
        width: 65%;
        padding: 150px 0;
    }
    .box-kit {
        width: 49%;
        height: 500px;
        padding: 40px;
    }
    #kit-digital {
        width: 50%;
        height: 680px;
        padding: 40px;
        top: -80px;
    }
    .cont-cit-kit h3 {
        font-size: 25px;
    }
    .par-cit-kit {
        width: 85%;
        margin: 3% auto;
        padding: 10px;
    }
    .btn-cit-kit {
        width: 35%;
        padding: 15px 20px;
    }
}


/* 
===================
768px
===================
*/

@media (max-width:768px) {


    /* equipement-nyusu */

    /* print */


    .liste-equipement-pint{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding-left: 10px;
    }

    .equipement-print-svg{
        width: 25%;
        cursor: pointer;
    }

    .liste-equipement-pint .hp{
        width: 6%;
    }

    .liste-equipement-pint .canon{
        width: 12%;
    }


    .liste-equipement-pint .epson{
        width: 15%;
    }


    .liste-equipement-pint .konica{
        width: 15%;
    }


    /* creative */


    .liste-equipement-creative{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding-left: 10px;
        padding-top: 10px;
    }

    .liste-equipement-creative p{
        font-size: 12px;
        padding-top: 10px;
    }

    .equipement-creative-svg{
        width: 15%;
    }

    .photoshop svg .cls-1 {
        fill: #228CC7;
    }
    
    .illustrator svg .cls-1 {
        fill: #F97F0E;
    }
    
    .indesign svg .cls-1 {
        fill: #FF3B93;
    }
    
    .after svg .cls-1 {
        fill: #D692FF;
    }
    
    .premier svg .cls-1 {
        fill: #EB70FF;
    }
    
    .xd svg .cls-1 {
        fill: #FF19BB;
    }

    /* digital */

    .liste-equipement-digital{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1px;
        padding-left: 10px;
        padding-top: 10px;
        align-items: center;
    }


    .equipement-digital-svg{
        width: 8%;
        cursor: pointer;
        text-align: center;
        justify-content: center;
    }

    .equipement-digital-svg img{
        width:6%;
    }

    .js{
        width: 10%;
    }

    .js img{
        width: 60%;
    }

    .wordpress{
        width: 10%;
    }

    .wordpress img{
        width: 60%;
    }


    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 60%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 20px;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: -120px;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 60px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 16px;
        top: 7px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 40%;
        margin: 15% auto;
        top: -10px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 45%;
        margin: 1% auto;
        top: 0;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 100%;
        margin: 0 auto;
        top: 5px;
        left: 5px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -102px;
    }


    .btn-d-agence{
        width: 100%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }



    .bg-ngenie {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngenie-768_1024.jpg);
        background-attachment: fixed;
        background-size: cover;
        position: relative;
    }
    .bg-nyusu {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nyusu-768_1024.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

    .cont-header-noffre {
        background-image: url(../images/bg-construction-768_1024.jpg);
    }
    .bg-nDigital {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ndigital-768_1024.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nprint-768_1024.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ncreative {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ncreative-768_1024.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-contact {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-contact-768_1024.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ngreen {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngreen-768_1024.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #bg-location {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-location-768_1024.jpg);
        background-attachment: fixed;
        background-size: cover;
        position: relative;
    }
    header {
        height: 100vh;
        width: 100%;
    }
    .animation-ngenie {
        left: 10px;
    }
    .logo {
        width: 22%;
    }
    /* 
    ------------------------
    index.php
    ------------------------
    */
    .titre-nos-services {
        font-size: 35px;
    }
    .souligneur {
        background-color: var(--color-third);
        width: 100px;
        height: 20px;
        position: relative;
        top: -25px;
        left: -10px;
    }
    .tittle-info {
        font-size: 25px;
        line-height: 1;
        padding: 10px 0;
    }
    .liste-services b {
        font-size: 15px;
        font-weight: 400;
    }
    .info-head-left {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        left: 0;
        z-index: 100;
        background: none;
        padding: 700px 40px 20px 70px;
    }
    .info-head-right {
        width: 100%;
        position: absolute;
        top: 20%;
        min-height: 100vh;
        background-image: url(../images/bg-accueil-768_1024.jpg);
        background-size: cover;
        position: relative;
    }
    .info-head-right img {
        width: 100%;
        position: relative;
        bottom: 30px;
        padding: 10px;
        top: 30px;
        left: -20px;
        display: none;
    }
    .tittle-head {
        font-size: 30px;
        line-height: 1.2;
    }
    .info-head {
        font-size: 19px;
        padding-top: 10px;
    }
    .btn-ensavoirplus {
        width: 96%;
        height: 60px;
        margin: 30px auto;
        position: relative;
        left: -13px;
    }
    .btn-ensavoirplus a {
        font-size: 21px;
        padding-top: 0;
        top: 13px;
    }
    /* 
    ------------------------------
    main
    ------------------------------
    */
    .a-propos {
        width: 80%;
        padding-top: 50px;
        padding-left: 10px;
    }
    .img-a-propos {
        width: 40%;
    }
    .a-propos-img {
        width: 60%;
        top: 15%;
    }
    .info-a-propos {
        width: 90%;
    }
    .cont-info-a-propos {
        font-size: 15px;
    }
    .info-a-propos-servives {
        margin-top: -60px;
        margin-bottom: -50px;
    }
    .info-a-propos-servives-text {
        width: 55%;
        height: auto;
        top: 50px;
        right: 80px;
        border: 5px solid #ffff;
    }
    .info-a-propos-servives-img {
        width: 90%;
    }
    .bg-info-a-propos-servives-text {
        padding: 20px;
    }
    .block-services {
        padding: 5px;
    }
    .services {
        padding: 0;
    }
    .box-services {
        position: relative;
        left: 20px;
    }
    .box {
        width: 45%;
    }
    .box-green {
        width: 45%;
    }
    .box-creative {
        width: 45%;
    }
    .box-print {
        width: 45%;
    }
    .box-digital {
        width: 45%;
    }
    .services svg {
        width: 20px;
        margin-top: -15px;
    }
    .sec-tittle {
        font-size: 14px;
    }
    .sec-tittle a {
        top: -2px;
        left: -5px;
    }
    .sec-tittle:hover a {
        padding: 3px 8px;
        font-size: 15px;
    }
    .btn-decouvrez-lagence {
        margin-top: -5px;
        padding: 8px;
    }
    .btn-decouvrez-lagence a {
        color: #ffffff;
        font-size: 14px;
        text-align: center;
    }
    .info-realisation {
        left: 20px;
        padding: 30px 0px;
        width: 60%;
        top: -130px;
    }
    #work {
        padding-top: 230px;
        padding-bottom: 50px;
    }
    .work {
        padding: 20px 10px 0 0;
    }
    .work-picture {
        width: 65%;
        margin: 0 auto;
        padding: 10px 0;
        justify-content: center;
        text-align: center;
    }
    .work-picture-ln .img {
        padding: 8px;
    }
    .work-picture-ln .zoom {
        transition: var(--transition);
        overflow: hidden;
        width: 100%;
        height: 150px;
    }
    .img-realisation {
        width: 60%;
        top: -100px;
    }
    .realisation-img {
        width: 60%;
        position: absolute;
        top: -230px;
        left: 300px;
        padding: 50px;
    }
    .img-realisation img {
        width: 60%;
    }
    .work-picture {
        width: 65%;
        margin: 0 auto;
        padding: 100px 0;
        justify-content: center;
        text-align: center;
    }
    /* team */
    .team {
        padding-bottom: 30px;
    }
    .team-info {
        bottom: 50px;
    }
    .block-team {
        width: 45%;
        height: 400px;
        margin-top: 30px;
        margin-bottom: 0;
    }
    .btn-team {
        top: 59%;
        width: 100%;
    }
    .btn-view-team {
        top: -100px;
    }
    /* 
    ===================
    ncreative
    ===================
    */
    .nprint-equipement {
        width: 100%;
    }
    .nprint-equipement img {
        width: 100%;
        padding: 50px 20px 0px 20px;
    }
    .ncreative-realisation {
        width: 80%;
        padding-bottom: 200px;
    }
    .ncreative-realisation img {
        width: 80%;
    }
    .ncreative-equipement {
        margin-top: -100px;
        margin-bottom: -100px;
    }
    /* nprint */
    .nprint-info-text {
        width: 100%;
        position: relative;
    }
    .nprint-info-image {
        /* right: -70px; */
        top: -80px;
        left: 10px;
        position: absolute;
    }

    
    #nprint-info-image{
        position:absolute;
        width: 70%;
        opacity: .1;
        left: 20px;
        top: 0px;
    
    }
    .nprint-info-image img {
        opacity: .5;
    }
    .ncreative-info-image {
        top: -100px;
        left: 40%;
        bottom: 0;
        opacity: .1;
    }
    .ncreative-info-image img {
        width: 100%;
    }
    .pres-nprint {
        width: 70%;
    }
    .pres-nprint-01 {
        width: 100%;
    }
    .pres-nprint-02 {
        width: 100%;
    }
    .print-numerique svg {
        width: 100%;
        margin-top: 50px;
    }
    .print-numerique p {
        padding-bottom: 50px;
        font-size: 18px;
        text-align: center;
        font-weight: 500;
        position: relative;
        top: 10px;
        color: #5B5B5B;
    }
    .nprint-info-text-para {
        width: 100%;
    }

    #nprint-info-text-para {
        width: 100%;
        padding-bottom: 100px;
    }
    /* 
    ------------------------
    liste pack
    ------------------------
    */
    .pack {
        box-shadow: 0 0 6px #b6b6b6;
        width: 45%;
        padding-left: 20px;
    }
    .titte-pack h1 {
        text-align: center;
        padding: 20px 0;
        font-size: 18px;
    }
    .content-pack {
        padding: 0 10px 0 20px;
        font-size: 15px;
    }
    .price-pack {
        font-size: 21px;
        padding: 20px 10px;
        font-weight: 600;
        text-align: center;
        font-family: Arial, Poppins, sans-serif;
    }
    .btn-view-pack {
        width: 100%;
        height: 40px;
    }
    .btn-view-pack a {
        padding: 20px;
        font-size: 16px;
    }
    .btn-nous-contacter-ngenie {
        width: 200px;
        height: 40px;
        left: 38%;
    }
    .btn-nous-contacter-ngenie a {
        font-size: 16px;
        padding-top: 20px;
    }
    .btn-nous-contactez-ngenie {
        background-color: var(--color-second);
        width: 50%;
        padding: 18px;
        margin: 0 auto;
        transition: var(--transition);
        cursor: pointer;
    }
    .btn-nous-contactez-ngenie a {
        font-size: 16px;
    }
    /* ngenie */
    .ncreative-offset-ngreen {
        width: 49%;
    }
    .ncreative-offset-ngreen svg {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 10px;
    }
    /* 
    ======================
    nyusu
    ======================
    */
    .video-apropos {
        padding: 10px;
        width: 100%;
    }
    .video-apropos img {
        width: 100%;
    }
    .video-apropos {
        padding: 50px;
    }
    .tittle-contact .titre-contact {
        position: relative;
        font-size: 40px;
        font-weight: 600;
        z-index: 10;
        font-family: century gothic, Poppins, arial;
    }
    .souligneur-contact {
        background-color: var(--color-third);
        width: 150px;
        height: 30px;
        position: relative;
        top: -35px;
        margin: 0 auto;
    }
    .Nous-contactez {
        width: 50%;
    }
    .Nous-contactez a {
        font-size: 18px;
    }
    /* 
    ==========================
    Contact
    ==========================
    */
    #info-contact {
        width: 100%;
    }
    .tittle-form {
        padding: 30px 0;
    }
    .map .button {
        width: 60%;
        font-size: 16px;
        margin: 10% auto;
    }
    #form-contact {
        width: 100%;
    }
    .contact-nyusu {
        width: 100%;
    }
    .block-icones-footer img {
        width: 25px;
    }
    .block-icones-footer img span {
        font-size: 18px;
    }
    .checkbox {
        font-size: 12px;
        padding-left: 3px;
    }
    input[type="text"],
    input[type="Email"] {
        width: 100%;
    }
    .type input[type="checkbox"] {
        margin-left: 10px;
    }
    #btn-send {
        font-size: 18px;
        margin-left: 0;
        margin-bottom: 0;
        width: 25%;
        position: relative;
        left: 0%;
        right: 0%;
    }
    #nyusu-rx {
        width: 100%;
        position: relative;
        padding-top: 10px;
        margin: 0 auto;
        right: 0;
        right: 0;
    }
    .nyusu-rx {
        width: 100%;
    }
    .nyusu-rx i {
        font-size: 35px;
        color: #6e6d6d;
    }
    .tittle-rx {
        font-size: 25px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 10px;
        color: #4b4b4b;
    }
    /*
    ======================
    noffres
    ======================
    */
    .cont-header-noffre {
        background-color: #00e0fe10;
        padding-top: 45%;
    }
    .tittre-noffre {
        width: 80%;
        font-size: 40px;
    }
    .para-noffre {
        width: 60%;
        font-size: 21px;
        padding-top: 20px;
    }
    .btn-noffre {
        width: 45%;
        padding: 20px 25px;
    }
    .btn-noffre a {
        font-size: 18px;
    }
    .list-kits {
        gap: 5px;
        width: 80%;
        padding: 150px 0;
    }
    .box-kit {
        width: 49%;
        height: 500px;
        padding: 40px;
    }
    #kit-digital {
        width: 50%;
        height: 680px;
        padding: 40px;
        top: -80px;
    }
    .cont-cit-kit h3 {
        font-size: 25px;
    }
    .par-cit-kit {
        width: 85%;
        margin: 3% auto;
        padding: 10px;
    }
    .btn-cit-kit {
        width: 35%;
        padding: 15px 20px;
    }
    /* 
    ======================
    Location
    ======================
    */
    .produit-01 {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 0 auto;
        justify-content: space-between;
        padding: 200px 0;
    }
    .produit-01 {
        padding: 100px 0;
    }
    .image-prod01 {
        width: 90%;
        height: 420px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .image-prod01:hover {
        width: 90%;
        height: 420px;
        background-size: 110%;
        background-repeat: no-repeat;
    }
    .par-prod01 {
        width: 100%;
        padding: 20px;
        text-align: center;
    }
    .par-prod01 h5 {
        padding: 0 0 20px 0;
        font-size: 23px;
    }
    .par-prod01 p {
        font-size: 14px;
    }
    .titre-pro01 {
        width: 100%;
        padding: 20px;
    }
    .titre-pro01 h1 {
        font-size: 45px;
        margin-bottom: 20px;
    }
    .bloc-prix-location {
        width: 90%;
        padding: 20px 0;
        margin: 0 auto;
    }
    .prix-location {
        font-size: 40px;
        font-weight: 700;
    }
    .njour-location {
        position: relative;
        top: 10px;
    }
    .btn-location-prod01 {
        width: 50%;
        padding: 15px 20px;
        margin: 10px auto;
    }
    .btn-location-prod01 a {
        font-size: 16px;
    }
    /*
    ======================
    produit 02
    ======================
    */
    #produit-02 {
        padding: 100px 0;
    }
    .produit-02 {
        width: 80%;
    }
    .image-prod02 {
        width: 90%;
        height: 450px;
        background-size: 110%;
        background-repeat: no-repeat;
        margin: 0 auto;
    }
    .image-prod02:hover {
        width: 90%;
        height: 450px;
        background-size: 110%;
        background-repeat: no-repeat;
        margin: 0 auto;
    }
    .bloc-prix-location-prod02 {
        width: 85%;
        padding: 20px 0;
    }
    .titre-prod02 {
        width: 100%;
        padding: 30px;
    }
    .par-prod02 {
        width: 80%;
        margin: 0 auto;
    }
    .par-prod02 b {
        font-size: 25px;
    }
    .para-prod02 {
        width: 75%;
        margin: 0 auto;
        position: relative;
        top: -40px;
    }
    .para-prod02 b {
        font-size: 25px;
    }
    .btn-location-prod02 {
        width: 60%;
        padding: 15px 20px;
    }
    .btn-location-prod02 a {
        font-size: 16px;
    }
    /*
    =======================
    produit 03
    =======================
    */
    #produit-03 {
        padding: 100px 0;
        margin: 0 auto;
        width: 80%;
    }
    .image-prod03 {
        display: flex;
        flex-wrap: wrap;
        grid-area: 5px;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .img-prod03 {
        width: 50%;
        cursor: pointer;
        transition: all ease .3s;
    }
    .img-prod03:hover {
        transform: scale(1.1);
    }
    .img-prod03 img {
        width: 80%;
    }
    .par-prod03 {
        width: 90%;
        margin: 0 auto;
        padding-top: 80px;
        padding-bottom: 20px;
    }
    .bloc-prix-location-prod03 .prix-location {
        font-size: 45px;
        font-weight: 700;
    }
    .par-prod03 .njour-location {
        position: relative;
        top: 30px;
    }
    .bloc-prix-location-prod03 .njour-location {
        position: relative;
        top: 20px;
    }
    .btn-location-prod03 {
        width: 55%;
        padding: 15px 20px;
        background-color: var(--color-second);
        text-align: center;
        cursor: pointer;
        transition: ease all .3s;
        margin: 10px auto;
    }
    .btn-location-prod03:hover {
        background-color: var(--color-primary);
        box-shadow: 0 0 20px rgba(41, 40, 40, 0.233);
    }
    .btn-location-prod03:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-location-prod03 a {
        font-size: 16px;
        color: #FFF;
    }
    #nbre-jours {
        background-color: #ffe600;
        width: 35%;
        height: 45px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    /* 
    =====================
    produit 04
    =====================
    */
    .image-prod04 {
        width: 100%;
        height: 410px;
        margin: 5% auto;
        background-image: url(../images/location-prod41.jpg);
        background-size: 100%;
        cursor: pointer;
        transition: all ease .3s;
    }
    .image-prod04:hover {
        width: 100%;
        height: 410px;
        background-image: url(../images/location-prod42.jpg);
        background-size: 100%;
    }
    .bloc-prix-location-04 {
        width: 60%;
        display: flex;
        padding: 30px 0;
        justify-content: space-between;
        margin: 0 auto;
    }
    .bloc-prix-location-prod04 .njour-location {
        position: relative;
        top: 60px;
    }
    #block-nous-contacter {
        min-height: 80vh;
        padding-top: 300px;
    }
    #block-nous-contacter-autre {
        width: 100%;
        min-height: 60vh;
        padding-top: 200px;
    }
    /* 
    ==========================
    info equipe
    ==========================
    */
    .info-perso-equipe {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding-top: 50px;
    }
    #plus-tearm {
        width: 100%;
        background-color: #ecf4ff;
        margin-top: 50px;
        padding-top: 0;
    }
    .plus-tearm {
        width: 100%;
        margin: 0 auto;
        padding-top: 0;
    }
    .image-tearm {
        width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 2;
        padding-top: 0;
    }
    .block-info-team-detail {
        width: 100%;
        padding-top: 100px;
        margin-top: 0;
    }
    .image-tearm img {
        width: 100%;
        margin: 0 auto;
    }
    .bd-tearm {
        width: 100%;
        height: 75%;
        top: -390px;
        left: -25px;
    }
    .tearm-rx {
        width: 80%;
        position: relative;
        padding-top: 20px;
        left: 15px;
    }
    .tearm-rx a i {
        font-size: 35px;
        padding-left: 5px;
    }
    .para-info-tearm {
        width: 100%;
        padding-left: 20px;
        text-align: justify;
    }
    .titre-services-tearm {
        width: 80%;
        padding-left: 20px;
    }
    .titre-services-equp {
        padding-left: 0px;
    }
    .bloc-prix-location-prod03 .team-info {
        height: 25%;
    }
    .pp-1 .team-info {
        height: 24%;
    }
    .pp-2 .team-info {
        height: 24%;
    }
    .pp-3 .team-info {
        height: 24%;
    }
    .pp-4 .team-info {
        height: 24%;
    }
    .pp-5 .team-info {
        height: 24%;
    }
    .pp-6 .team-info {
        height: 24%;
    }
    .pp-7 .team-info {
        height: 24%;
    }
    .pp-8 .team-info {
        height: 24%;
    }
    .pp-1 {
        height: 230px;
        width: 30%;
    }
    .pp-2 {
        height: 230px;
        width: 30%;
    }
    .pp-3 {
        height: 230px;
        width: 30%;
    }
    .pp-4 {
        height: 230px;
        width: 30%;
    }
    .pp-5 {
        height: 230px;
        width: 30%;
    }
    .pp-6 {
        height: 230px;
        width: 30%;
    }
    .pp-7 {
        height: 230px;
        width: 30%;
    }
    .pp-8 {
        height: 230px;
        width: 30%;
    }
    .block-team-info {
        padding: 8px;
    }
    .block-team-info h2 {
        font-size: 16px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 13px;
        padding-left: 5px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
        padding: 3px;
    }
    /* 
    =========================
    Portfolio
    =========================
    */
    #portfolio {
        width: 100%;
        height: 60vh;
    }
    .cont-header-portfolio {
        height: 65vh;
    }
    #cont-portfolio {
        position: relative;
        bottom: -100px;
    }
    .block-cont-header-port {
        padding-top: 200px;
    }
    .tittle-header-port {
        width: 100%;
    }
    .tittle-header-port h3 {
        font-size: 30px;
        padding: 15px;
    }
    .par-header-port {
        width: 100%;
        padding: 15px;
        position: relative;
        top: 0;
        font-size: 16px;
    }
    .btn-header {
        width: 35%;
        left: 100px;
        top: -30px;
    }
    #cont-portfolio {
        width: 80%;
        padding: 5px;
    }
    .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        width: 75%;
        height: auto;
        position: relative;
        left: 13.5px;
    }
    .realisation-par-service {
        position: sticky;
        width: 90%;
        top: 56px;
        left: 100px;
        background-color: #eff5ff;
        z-index: 100;
    }
    #creation-graphique .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 93%;
        position: relative;
        left: 18px;
    }
    #Impression .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 93%;
        position: relative;
        left: 18px;
    }
    #webdesign .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 93%;
        position: relative;
        left: 18px;
    }
    #logo .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 96.2%;
        position: relative;
        left: 18px;
    }
    #logo .logo-realisation {
        width: 30%;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 16px;
    }
    .logo-realisation {
        cursor: pointer;
        transition: all ease .3s;
        width: 31%;
        position: relative;
        top: 60px;
    }
    .logo-realisation img {
        width: 100%;
    }
    .logo-realisation:hover {
        background-color: #d3d6fa;
        padding-left: 25px;
        padding-bottom: 15px;
    }
    .logo-realisation:hover img {
        box-shadow: -10px 10px 10px #0000006c;
    }
    #comment-portfolio {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: space-between;
        width: 80%;
        margin: 0 auto;
        padding-bottom: 100px;
        padding-top: 200px;
    }
    .comment-portfolio {
        width: 100%;
        position: relative;
        top: 50px;
    }
    .comment-portfolio p {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 50px;
        text-align: center;
    }
    .img-comment-portfolio {
        width: 80%;
        padding-top: 100px;
        margin: 0 auto;
    }
    .img-comment-portfolio img {
        width: 100%;
    }
    .btn-comment-portfolio {
        background-color: var(--color-primary);
        width: 45%;
        padding: 15px;
        text-align: center;
        margin-top: 50px;
        cursor: pointer;
        transition: ease all .3s;
        margin: 0 auto;
    }
    .btn-comment-portfolio:hover {
        box-shadow: 0 0 20px #000000;
        background-color: var(--color-second);
    }
    .btn-comment-portfolio:hover a {
        color: rgb(255, 255, 255);
    }
    .btn-comment-portfolio a {
        color: rgb(0, 0, 0);
        font-size: 16px;
        font-weight: 600;
    }
    #webdesign,
    #creation-graphique,
    #logo {
        padding-bottom: 20px;
    }
    /* 
    =================================
    team
    =================================
    */
    .team {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .team-info {
        width: 100%;
        height: auto;
        bottom: 50px;
    }
    .team-personal {
        padding-bottom: 100px;
        gap: 10px;
        width: 90%;
    }
    .block-team-info {
        padding: 5px;
    }
    .block-team-info h2 {
        font-size: 18px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 13px;
        padding-left: 5px;
    }
    #block-team-smt {
        height: 370px;
        width: 49%;
        margin: 10px 0;
    }
    #block-team-akosse {
        height: 370px;
        width: 49%;
        margin: 10px 0;
    }
    #block-team-romaric {
        height: 370px;
        width: 49%;
        margin: 10px 0;
    }
    #block-team-paul {
        height: 370px;
        width: 49%;
        margin: 10px 0;
    }
    .btn-team {
        width: 100%;
        bottom: 0;
        right: 0;
        top: 80%;
        padding: 10px;
        height: 45px;
        display: block;
    }
    .btn-team a {
        font-size: 15px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
    }



    /* 
    =======================
    contacts
    =======================
    */

    #info-contact {
        padding-top: 20px;
    }

    .contact-nyusu{
        width: 90%;
    }

    .block-info-contact{
        width: 100%;
    }

    .info-contact-nyusu{
        gap: 10px;
        width: 100%;
        padding-bottom:50px;
        padding-left:20px;
    }

    .drapeau-nyusu{
        width: 100%;
        padding-left: 80px;
    }

    .drapeau-nyusu img{
        width: 35px;
    }

    .contact-ci{
        width: 49%;
    }

    .contact-maroc{
        width: 49%;
    }

    .info-nyusu{
        width: 100%;
        display: flex;
        height: 50px;
    }

    .info-nyusu img{
        width:30px;
        top: 0px;
    }

    .info-nyusu p{
        padding-left: 5px;
        font-size:14px;
    }

    .info-contact-index {
        text-align: center;
    }

    .tittle-form {
        padding: 30px 0;
    }

    .tittle-form h1 {
        font-size: 40px;
        padding-left: 20px;
    }


    #form-contact {
        width: 100%;
        margin-bottom:50px;
    }

    .form-contact {
        padding: 20px;
    }

    .checkbox {
        font-size: 14px;
        padding-left: 5px;
    }

    .type input[type="checkbox"] {
        margin-left: 5px;
        font-size: 14px;
    }

    #btn-send {
        background-color: #0000FF;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 18px;
        margin-left: 0;
        margin-bottom: 20px;
        width:25%;
    }

    #nyusu-rx {
        width: 100%;
        position: absolute;
        margin: 0 auto;
        right: 0;
        left:50px;
        bottom:30px;
    }

    .nyusu-rx {
        width: 100%;
    }

    .nyusu-rx i {
        font-size: 35px;
    }

    .tittle-rx {
        font-size: 21px;
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 10px;
    }


    /* 
    =====================
    devise nyusu
    =====================
    */

    #devise-nyusu{
        width: 80%;
        margin: 5% auto;
    }


    .contenu-devise-nyusu{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }


    .devise{
        width: 100%;
        padding: 0;
    }


    .image-devise{
        width: 100%;
    }

    .image-devise img{
        width: 100%;
    }


    .image-devise:hover{
        transform: none;
    }

    /* communs */

    #titre-nos-services {
        position: relative;
        font-size: 35px;
    }

    #souligneur {
        width: 100px;
        height: 15px;
        top: -25px;
        left: -5px;
    }


        
    .bloc-separateur-devise{
        width: 90%;
        margin: 10% auto;
    }

    .separateur-devise01{
        width: 40%;
        margin: 0 auto;
        height: 2px;
        border-radius: 100px;
    }

    .separateur-devise02{
        width: 20px;
        height: 20px;
        left: 45%;
        top: -10px;
        transform: translateX(50%);
        
    }


}


/*
======================
    740px 
======================

*/

@media (max-width:740px) {


    #block-nous-contacter-autre {
        width: 100%;
        min-height: 60vh;
        padding-top: 200px;
    }

    #block-nous-contacter {
        width: 100%;
        min-height: 100vh;
        padding-top: 320px;
    }


    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 100%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 10px;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 45px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: -110px;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 50px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 15px;
        top: 3px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 40%;
        margin: 15% auto;
        top: -10px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 45%;
        margin: 1% auto;
        padding-bottom: 50px;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 100%;
        margin: 0 auto;
        top: 5px;
        left: 5px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -102px;
    }


    .btn-d-agence{
        width: 100%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }


    .bg-ngenie {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngenie-740_360.jpg);
        background-attachment: fixed;
        background-size: cover;
        position: relative;
    }
    .bg-nyusu {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nyusu-740_360.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

    .cont-header-noffre {
        background-image: url(../images/bg-construction-740_360.jpg);
    }
    .bg-nDigital {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ndigital-740_360.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nprint-740_360.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ncreative {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ncreative-740_360.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-contact {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-contact-740_360.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ngreen {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngreen-740_360.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #bg-location {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-location-740-360.jpg);
        background-attachment: fixed;
        background-size: cover;
        position: relative;
    }
    .info-head-left {
        position: relative;
        top: 0;
        width: 50%;
        height: 100vh;
        left: 0;
        z-index: 100;
        background: #ffffffc2;
        padding: 130px 20px 20px 50px;
    }
    .info-head-right {
        width: 50%;
        position: relative;
        height: 100vh;
        opacity: .8;
        top: 15%;
        right: 0;
        bottom: 0;
    }
    .info-head-right img {
        width: 100%;
        position: relative;
        bottom: 30px;
        padding: 10px;
        top: -35px;
        left: -10px;
    }
    .tittle-head {
        font-size: 17px;
        line-height: 1;
        padding-left: 0;
        height: auto;
        top: 10px;
    }
    .info-head {
        font-size: 14px;
        padding-top: 15px;
        text-align: justify;
    }
    .btn-ensavoirplus {
        width: 100%;
        height: 40px;
        margin: 20px auto;
    }
    .btn-ensavoirplus a {
        font-size: 16px;
        top: 2px;
    }
    /* 
    ------------------------------
    main
    ------------------------------
    */
    .a-propos {
        width: 80%;
        padding-top: 70px;
        padding-left: 10px;
    }
    .img-a-propos {
        width: 40%;
    }
    .a-propos-img {
        width: 60%;
        top: 30%;
    }
    .info-a-propos {
        width: 90%;
    }
    .print-offset {
        width: 48%;
    }
    .ncreative-offset {
        width: 48%;
    }
    .ncreative-offset-ngreen {
        width: 48%;
    }
    .ncreative-info-image {
        top: 20px;
        left: 50px;
        bottom: 0;
        opacity: .1;
    }
    .ncreative-info-image img {
        width: 100%;
    }
    /* Click menu */
    .design-menu {
        font-size: 18px;
        top: 25%;
        left: 40px;
    }
    .block-navClickmenu {
        display: flex;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
    }
    #clickmenu {
        width: 50%;
        height: 100vh;
        padding-top: 0;
        top: 0;
        bottom: 0;
        padding-left: 100px;
    }
    .clickmenu li {
        padding: 10px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 21px;
    }
    .socialmedia {
        width: 50%;
        height: 100vh;
        top: 0;
        bottom: 0;
        left: 0;
        padding-top: 150px;
        height: 100%;
        background-color: #bebebe;
    }
    #socialmedia {
        padding: 0;
        color: #000000;
        display: block;
        position: relative;
        left: 40%;
        top: -45%;
    }
    .info-social-media {
        width: 60%;
        padding-bottom: 20px;
    }
    .info-social-media h2 {
        padding-bottom: 20px;
        font-size: 18px;
    }
    .info-social-media span {
        padding: 20px;
        font-size: 13px;
    }
    .-img-social-media {
        padding-top: 10px;
    }
    .-img-social-media i {
        font-size: 25px;
        padding: 0;
    }
    .-img-social-media a i {
        color: rgb(0, 0, 0);
        top: -10px;
    }
    .bande {
        background-color: #FFDE00;
        width: 100%;
        height: 1px;
        position: absolute;
        left: -10%;
        margin-bottom: 20px;
        top: 20%;
        display: none;
    }
    .btn-team {
        top: 55%;
        width: 100%;
    }
    .btn-view-team {
        width: 50%;
        padding: 10px;
        height: auto;
        top: -150px;
        margin-bottom: -80px;
    }
    /* 
    ======================
    nyusu
    ======================
    */
    .video-apropos {
        padding: 50px;
    }
    .video-apropos img {
        width: 100%;
    }
    .Nous-contactez {
        width: 50%;
    }
    .Nous-contactez a {
        font-size: 18px;
    }
    .tittle-contact .titre-contact {
        position: relative;
        font-size: 35px;
    }
    .souligneur-contact {
        background-color: var(--color-third);
        width: 150px;
        height: 30px;
        position: relative;
        top: -35px;
        margin: 0 auto;
    }
    .block-team-info {
        padding: 8px 15px;
    }
    .btn-team-info {
        padding: 5px;
        bottom: 0;
    }
    .btn-team-info a {
        font-size: 15px;
        padding: 3px;
    }
    /* 
    =================================
    team
    =================================
    */
    .team {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .team-info {
        width: 100%;
        height: auto;
        bottom: 50px;
    }
    .team-personal {
        padding-bottom: 100px;
        gap: 10px;
        width: 90%;
    }
    .block-team-info {
        padding: 5px;
    }
    .block-team-info h2 {
        font-size: 18px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 13px;
        padding-left: 5px;
    }
    #block-team-smt {
        height: 370px;
        width: 49%;
        margin: 10px 0;
    }
    #block-team-akosse {
        height: 370px;
        width: 49%;
        margin: 10px 0;
    }
    #block-team-romaric {
        height: 370px;
        width: 49%;
        margin: 10px 0;
    }
    #block-team-paul {
        height: 370px;
        width: 49%;
        margin: 10px 0;
    }
    .btn-team {
        width: 100%;
        bottom: 0;
        right: 0;
        top: 80%;
        padding: 10px;
        height: 45px;
        display: block;
    }
    .btn-team a {
        font-size: 15px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
    }
    /* 
    =========================
    Portfolio
    =========================
    */
    #portfolio {
        width: 100%;
        height: 100vh;
    }
    .cont-header-portfolio {
        background-color: #dbddf8;
        ;
        width: 100%;
        height: 100vh;
    }
    #cont-portfolio {
        position: relative;
        bottom: -100px;
    }
    .block-cont-header-port {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 0 auto;
        justify-content: space-between;
        padding-top: 100px;
    }
    .tittle-header-port h3 {
        font-size: 21px;
    }
    .par-header-port {
        font-size: 13px;
    }
    .btn-header {
        width: 71%;
        padding: 20px;
        left: 100px;
        top: 30px;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 16px;
    }
    /*
    ======================
    noffres
    ======================
    */
    .cont-header-noffre {
        padding-top: 15%;
    }
    .tittre-noffre {
        width: 80%;
        font-size: 30px;
    }
    .para-noffre {
        width: 60%;
        font-size: 16px;
        padding-top: 10px;
    }
    .btn-noffre {
        width: 45%;
        padding: 20px 20px;
        margin: 20px auto;
    }
    .btn-noffre a {
        font-size: 16px;
    }
    .list-kits {
        gap: 5px;
        width: 80%;
        padding: 150px 0;
    }
    .box-kit {
        width: 49%;
        height: 500px;
        padding: 40px;
    }
    #kit-digital {
        width: 50%;
        height: 680px;
        padding: 40px;
        top: -80px;
    }
    .cont-cit-kit h3 {
        font-size: 25px;
    }
    .par-cit-kit {
        width: 85%;
        margin: 3% auto;
        padding: 10px;
    }
    .btn-cit-kit {
        width: 35%;
        padding: 15px 20px;
    }


    /* 
    =======================
    contacts
    =======================
    */

    #info-contact {
        padding-top: 20px;
    }

    .contact-nyusu{
        width: 90%;
    }

    .block-info-contact{
        width: 100%;
    }

    .info-contact-nyusu{
        gap: 10px;
        width: 100%;
        padding-bottom:50px;
        padding-left:20px;
    }

    .drapeau-nyusu{
        width: 100%;
        padding-left: 80px;
    }

    .drapeau-nyusu img{
        width: 35px;
    }

    .contact-ci{
        width: 49%;
    }

    .contact-maroc{
        width: 49%;
    }

    .info-nyusu{
        width: 100%;
        display: flex;
        height: 50px;
    }

    .info-nyusu img{
        width:30px;
        top: 0px;
    }

    .info-nyusu p{
        padding-left: 5px;
        font-size:14px;
    }

    .info-contact-index {
        text-align: center;
    }

    .tittle-form {
        padding: 30px 0;
    }

    .tittle-form h1 {
        font-size: 40px;
        padding-left: 20px;
    }


    #form-contact {
        width: 100%;
        margin-bottom:50px;
    }

    .form-contact {
        padding: 20px;
    }

    .checkbox {
        font-size: 14px;
        padding-left: 5px;
    }

    .type input[type="checkbox"] {
        margin-left: 5px;
        font-size: 14px;
    }

    #btn-send {
        background-color: #0000FF;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 18px;
        margin-left: 0;
        margin-bottom: 20px;
        width:25%;
    }

    #nyusu-rx {
        width: 100%;
        position: absolute;
        margin: 0 auto;
        right: 0;
        left:25px;
        bottom:30px;
    }

    .nyusu-rx {
        width: 100%;
    }

    .nyusu-rx i {
        font-size: 35px;
    }

    .tittle-rx {
        font-size: 21px;
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
}


/*
======================
    700px 
======================

*/

@media(max-width:700px) {

    /* 
    =================================
    team
    =================================
    */
    .team-personal {
        padding-bottom: 100px;
        gap: 10px;
        width: 90%;
    }
    #block-team-smt {
        height: 350px;
        width: 40%;
        margin: 0;
    }
    .btn-team {
        top: 70%;
    }
    .btn-team a {
        font-size: 16px;
    }
    /* 
    ------------------
    animation
    ------------------
    */
    .bg-animation {
        padding: 10px;
        width: 100%;
        /* height: 220px; */
    }
    .animation {
        top: 30px;
    }
    .block-an {
        width: 30%;
        height: auto;
    }
    .block-an img {
        width: 50%;
    }
    .block-an h2 {
        font-size: 25px;
        position: relative;
        top: -20px;
    }
    .block-an p {
        font-size: 15px;
        position: relative;
        top: -30px;
    }
    #block-nous-contacter {
        width: 100%;
        min-height: 100vh;
        padding-top: 320px;
    }
    /* 
    =========================
    Portfolio
    =========================
    */
    .cont-header-portfolio {
        background-color: #dbddf8;
        ;
        width: 100%;
        height: 100vh;
    }
    #cont-portfolio {
        bottom: -100px;
    }
    .block-cont-header-port {
        padding-top: 100px;
    }
    .tittle-header-port {
        width: 100%;
    }
    .tittle-header-port h3 {
        font-size: 25px;
        padding: 10px;
    }
    .par-header-port {
        width: 100%;
        padding: 10px;
        font-size: 14px;
    }
    .btn-header {
        width: 80%;
        left: 0;
        top: 50px;
        margin: 0 auto;
    }
    .cont-portfolio-realisation {
        padding-top: 160px;
    }
    #cont-portfolio {
        width: 80%;
        padding: 5px;
        top: -10px;
    }
    .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        width: 75%;
        left: 13.5px;
    }
    .realisation-par-service {
        position: sticky;
        width: 90%;
        top: 56px;
        left: 90px;
        background-color: #eff5ff;
        z-index: 100;
    }
    #creation-graphique .list-des-images-par-cartegorie {
        gap: 10px;
        width: 93%;
        position: relative;
        left: 18px;
    }
    #Impression .list-des-images-par-cartegorie {
        gap: 10px;
        width: 93%;
        position: relative;
        left: 18px;
    }
    #webdesign .list-des-images-par-cartegorie {
        gap: 10px;
        width: 93%;
        position: relative;
        left: 18px;
    }
    #logo .list-des-images-par-cartegorie {
        gap: 10px;
        width: 96.2%;
        position: relative;
        left: 18px;
    }
    #logo .logo-realisation {
        width: 30%;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 16px;
    }
    .logo-realisation {
        width: 31%;
        top: 60px;
    }
    .logo-realisation img {
        width: 100%;
    }
    .logo-realisation:hover {
        background-color: #d3d6fa;
        padding-left: 25px;
        padding-bottom: 15px;
    }
    .logo-realisation:hover img {
        box-shadow: -10px 10px 10px #0000006c;
    }
    #comment-portfolio {
        gap: 5px;
        width: 80%;
        padding-bottom: 100px;
        padding-top: 200px;
    }
    .comment-portfolio {
        width: 100%;
        position: relative;
        top: 50px;
    }
    .comment-portfolio p {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 50px;
        text-align: center;
    }
    .img-comment-portfolio {
        width: 80%;
        padding-top: 100px;
        margin: 0 auto;
    }
    .img-comment-portfolio img {
        width: 100%;
    }
    .btn-comment-portfolio {
        background-color: var(--color-primary);
        width: 45%;
        padding: 15px;
        text-align: center;
        margin-top: 50px;
        cursor: pointer;
        transition: ease all .3s;
        margin: 0 auto;
    }
    .btn-comment-portfolio:hover {
        box-shadow: 0 0 20px #000000;
        background-color: var(--color-second);
    }
    .btn-comment-portfolio:hover a {
        color: rgb(255, 255, 255);
    }
    .btn-comment-portfolio a {
        color: rgb(0, 0, 0);
        font-size: 16px;
        font-weight: 600;
    }
    #webdesign,
    #creation-graphique,
    #logo {
        padding-bottom: 20px;
    }
    .pp-1 {
        height: 350px;
        width: 48%;
    }
    .pp-2 {
        height: 350px;
        width: 48%;
    }
    .pp-3 {
        height: 350px;
        width: 48%;
    }
    .pp-4 {
        width: 48%;
        height: 350px;
    }
    .pp-5 {
        height: 350px;
        width: 48%;
    }
    .pp-6 {
        height: 350px;
        width: 48%;
    }
    .pp-7 {
        height: 350px;
        width: 48%;
    }
    .pp-8 {
        height: 350px;
        width: 48%;
    }
    /* 
    =================================
    team
    =================================
    */
    .team {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .team-info {
        width: 100%;
        height: auto;
        bottom: 50px;
    }
    .team-personal {
        padding-bottom: 100px;
        gap: 10px;
        width: 90%;
    }
    .block-team-info {
        padding: 5px;
    }
    .block-team-info h2 {
        font-size: 18px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 13px;
        padding-left: 5px;
    }
    #block-team-smt {
        height: 350px;
        width: 48%;
        margin: 20px 0;
    }
    #block-team-akosse {
        height: 350px;
        width: 48%;
        margin: 20px 0;
    }
    #block-team-romaric {
        height: 350px;
        width: 48%;
        margin: 20px 0;
    }
    #block-team-paul {
        height: 350px;
        width: 48%;
        margin: 20px 0;
    }
    .btn-team {
        width: 100%;
        bottom: 0;
        right: 0;
        top: 80%;
        padding: 10px;
        height: 45px;
        display: block;
    }
    .btn-team a {
        font-size: 15px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
    }
    .pp-1 .team-info {
        height: 20%;
    }
    .pp-2 .team-info {
        height: 20%;
    }
    .pp-3 .team-info {
        height: 20%;
    }
    .pp-4 .team-info {
        height: 20%;
    }
    .pp-5 .team-info {
        height: 20%;
    }
    .pp-6 .team-info {
        height: 20%;
    }
    .pp-7 .team-info {
        height: 20%;
    }
    .pp-8 .team-info {
        height: 20%;
    }
}


/*
======================
   662px 
======================

*/

@media(max-width:670px){


    #block-nous-contacter-autre {
        width: 100%;
        min-height: 60vh;
        padding-top: 200px;
        padding-bottom: 120px;
    }

    #block-nous-contacter {
        width: 100%;
        min-height: 100vh;
        padding-top: 320px;
        padding-bottom: 120px;

    }


    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 100%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 10px;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 45px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        left: -90px;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 50px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 15px;
        top: 3px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 40%;
        margin: 15% auto;
        top: -10px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 45%;
        margin: 0% auto;
        padding-bottom: 40px;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 100%;
        margin: 0 auto;
        top: 5px;
        left: 10px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 45px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -102px;
    }


    .btn-d-agence{
        width: 100%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }


}



/*
======================
    576px 
======================

*/

@media (max-width:576px) {


        /* equipement-nyusu */

    /* print */


    .liste-equipement-pint{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding-left: 10px;
    }

    .equipement-print-svg{
        width: 40%;
        cursor:pointer;
    }
    
    
    .equipement-print-svg img{
        width: 100px;
    }



    /* creative */


    .liste-equipement-creative{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding-left: 0px;
        padding-top: 10px;
    }

    .liste-equipement-creative p{
        font-size: 12px;
        padding-top: 10px;
    }

    .equipement-creative-svg{
        width: 25%;
    }

    /* digital */

    .liste-equipement-digital{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1px;
        padding-left: 0px;
        padding-top: 10px;
        align-items: center;
    }


    .equipement-digital-svg{
        width: 15%;
        cursor: pointer;
        text-align: center;
        justify-content: center;
    }

    .equipement-digital-svg img{
        width: 70%;
    }


    .liste-equipement-digitals{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding-left: 0px;
        padding-top: 10px;
        align-items: center;
    }
    
    .liste-equipement-digitals .equipement-digital-svg{
        width: 30%;
        cursor: pointer;
        text-align: center;
        justify-content: center;
    }
    
    .liste-equipement-digitals .equipement-digital-svg img{
        width: 100%;
    }


    #print-offset-nprint{
        width: 100%;
        padding: 20px 0;

    }

     /* 
    =====================
    devise nyusu
    =====================
    */

    .section-devise{
        width: 100%;
        padding-bottom: 100px;
        margin-top: 50px;
    }
        
    /* section partenaire */

    .block-partenaire{
        width: 100%;
        padding: 20px;
    }

    .contenu-parteniare{
        gap: 10px;
    }

    .logopart{
        width:40%;
        margin: 10px;
        padding: 0;
    }

    .logopart img{
        width: 80%;
    }

    .logopart:hover{
    transform: scale(1.1);
    }

    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 80%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 5px;
        left: 0;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: -120px;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 50px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 80%;
        margin: 20% auto;
        top: -80px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 70%;
        margin: 0 auto;
        top: 0;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 80%;
        margin: 0 auto;
        top: 10px;
        left: -10px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -150px;
    }


    .btn-d-agence{
        width: 98%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }


input[name="daterange"]{
    
    height:100vh;
    
    }
    .logo {
        width: 50%;
        padding-left: 10px;
    }
    /* Click menu */
    .design-menu {
        font-size: 18px;
        top: 0;
        left: -30px;
    }
    .block-navClickmenu {
        display: block;
        padding: 30px;
    }
    #clickmenu {
        width: 100%;
        padding-top: 0px;
        padding-left: 50px;
    }
    .clickmenu li {
        padding: 15px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 25px;
    }
    .socialmedia {
        width: 100%;
        top: 62%;
        bottom: 0;
        left: 0;
        padding-top: 10px;
        background-color: #afafaf;
        height: 100%;
    }
    #socialmedia {
        padding: 0;
        color: #000000;
        display: block;
        position: relative;
        left: 10%;
        top: 2%;
    }
    .info-social-media {
        width: 100%;
        padding-bottom: 20px;
    }
    .info-social-media h2 {
        padding-bottom: 20px;
        font-size: 15px;
    }
    .info-social-media span {
        padding: 5px;
        font-size: 12px;
    }
    .-img-social-media P {
        font-size: 15px;
    }
    .-img-social-media {
        padding-top: 2px;
        width: 100%;
    }
    .-img-social-media i {
        font-size: 30px;
        padding: 1px;
        top: -20px;
        left: 0;
    }
    .-img-social-media a i {
        color: rgb(0, 0, 0);
    }
    .bande {
        background-color: #FFDE00;
        width: 100%;
        height: 1px;
        position: absolute;
        left: -10%;
        margin-bottom: 20px;
        top: -20%;
    }
    /* 
    ======================-------
    Menu click
    ----------------------------
    */
    .menubar {
        height: 40px;
        width: 45px;
        padding-top: 6px;
    }
    .menubar-fd-noir {
        height: 40px;
        width: 45px;
        padding-top: 6px;
    }
    .menubar-green {
        height: 40px;
        width: 45px;
        padding-top: 6px;
    }
    .menubar-print {
        height: 40px;
        width: 45px;
        padding-top: 6px;
    }
    .menubar-creative {
        height: 45px;
        width: 45px;
        padding-top: 6px;
    }
    .Closemenu {
        height: 30px;
        width: 35px;
        font-size: 18px;
        padding-top: 2px;
        top: 60px;
    }
    /* footer */
    .b_left {
        color: aliceblue;
        width: 100%;
        text-align: justify;
    }
    .b_left img {
        width: 60%;
    }
    .b_center {
        color: aliceblue;
        width: 100%;
        margin-top: 50px;
    }
    .b_center img {
        width: 35px;
        padding-right: 10px;
    }
    .b_rigth {
        color: aliceblue;
        width: 100%;
        margin-top: 50px;
    }
    .tittle-nl {
        font-size: 16px;
        font-weight: 400;
        padding-bottom: 20px;
    }
    .ncreative-offset {
        width: 100%;
    }
    /* 
    ------------------------
    index.php
    ------------------------
    */
    .titre-nos-services {
        font-size: 30px;
    }

    #titre-nos-services {
        font-size: 30px;
    }
    .souligneur {
        background-color: var(--color-third);
        width: 100px;
        height: 20px;
        position: relative;
        top: -25px;
        left: -10px;
    }
    .tittle-info {
        font-size: 25px;
        line-height: 1;
        padding: 10px 0;
    }
    .liste-services b {
        font-size: 15px;
        font-weight: 400;
    }
    .info-head-left {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        left: 0;
        z-index: 100;
        background: #ffffff00;
        padding: 470px 35px 0 35px;
    }
    .info-head-right {
        width: 100%;
        position: absolute;
        opacity: .8;
        top: 20%;
        background-image: url(../images/bg-accueil-540_720.jpg);
        background-size: cover;
        position: relative;
    }
    .info-head-right img {
        width: 100%;
        position: relative;
        bottom: 30px;
        padding: 10px;
        top: 30px;
        left: -20px;
    }
    .info-head-right img {
        display: none;
    }
    .tittle-head {
        font-size: 25px;
        line-height: 1;
    }
    .info-head {
        font-size: 16px;
        padding-top: 10px;
    }
    .btn-ensavoirplus {
        width: 30%;
        height: 40px;
        margin: 30px auto;
    }
    .btn-ensavoirplus a {
        font-size: 16px;
        padding-top: 10px;
        top: 8px;
    }
    /* 
    ------------------------------
    main
    ------------------------------
    */
    .a-propos {
        width: 100%;
        padding-top: 30px;
        padding-left: 10px;
        margin-bottom: 150px;
        position: relative;
    }
    .a-propos-img {
        width: 50%;
        top: 30px;
        padding: 20px;
    }
    .info-a-propos {
        left: 2px;
        padding: 20px 10px;
        width: 80%;
    }
    .box-services {
        position: relative;
        left: 0;
    }
    .box {
        width: 100%;
    }
    .box-green {
        width: 100%;
    }
    .box-creative {
        width: 100%;
    }
    .box-print {
        width: 100%;
    }
    .box-digital {
        width: 100%;
    }
    #work {
        padding-top: 230px;
        padding-bottom: 50px;
    }
    .work {
        padding: 20px 10px 30px 0;
        left: -10px;
        position: relative;
    }
    .work-picture {
        width: 65%;
        margin: 0 auto;
        padding: 10px 0;
        justify-content: center;
        text-align: center;
    }
    .work-picture-ln .img {
        padding: 8px;
    }
    .work-picture-ln .zoom {
        transition: var(--transition);
        overflow: hidden;
        width: 100%;
        height: 150px;
    }
    #realisation {
        display: block;
        position: relative;
    }
    .info-realisation {
        padding: 50px 0px;
        width: 100%;
        margin-bottom: 50px;
    }
    .img-realisation {
        width: 100%;
        left: 20px;
    }
    .img-realisation img {
        width: 70%;
    }
    .realisation-img {
        width: 100%;
        left: 10px;
        padding: 0;
        display: none;
    }
    /* about */
    .info-a-propos-servives {
        display: inline-block;
        width: 100%;
        justify-content: space-between;
        margin-top: -200px;
        padding-bottom: 0;
    }
    .info-a-propos-servives-text {
        position: relative;
        background-color: #ffd900;
        width: 100%;
        height: auto;
        top: -20px;
        right: 0;
        border: none;
        padding-bottom: 20px;
    }
    .info-a-propos-servives-img {
        width: 100%;
        margin-top: 100px;
    }
    .info-a-propos-servives-img img {
        width: 100%;
    }
    .realisation-img {
        width: 100%;
        position: absolute;
        top: 100px;
        left: 0;
        padding: 50px;
    }
    .work-picture-bg {
        background-color: #e9e9e9;
    }
    .work-picture {
        padding-top: 70px;
    }
    .work-picture-ln {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        /* padding-top:50px ;   */
    }
    .work-picture-ln .zoom {
        transition: var(--transition);
        overflow: hidden;
        width: 100%;
        height: auto;
    }
    .work-picture-ln img {
        transition: var(--transition);
        width: 100%;
    }
    .work-picture-ln img:hover {
        transform: none;
    }
    .work-picture-ln .img {
        padding: 0;
    }
    .btn-voir-plus {
        width: 100%;
        height: 40px;
        margin-top: 15px;
        margin-bottom: 200px;
        transition: var(--transition);
    }
    .btn-voir-plus a {
        padding: 20px;
        font-size: 16px;
    }
    .btn-view-team {
        width: 80%;
        padding: 10px;
        height: auto;
        top: -50px;
    }
    .btn-view-team a {
        font-size: 15px;
    }
    .btn-ensavoirplus {
        width: 100%;
        height: 40px;
        margin: 30px auto;
        position: relative;
        left: 0;
    }
    .btn-ensavoirplus a {
        font-size: 15px;
        padding-top: 10px;
        top: 4px;
    }
    .block-team {
        width: 100%;
        height: 300px;
        margin-top: 40px;
        margin-bottom: 50px;
    }
    .btn-team {
        top: 85%;
        width: 100%;
    }
    .btn-team a {
        font-size: 16px;
    }
    .btn-nous-contactez {
        width: 100%;
        padding: 10px;
        margin: 0 auto;
        left: 1px;
    }
    .btn-nous-contactez a {
        position: relative;
        top: -2px;
        font-size: 16px;
    }
    .tittle-contact .titre-contact {
        font-size: 40px;
    }
    .souligneur-contact {
        background-color: var(--color-third);
        width: 100px;
        height: 25px;
        position: relative;
        top: -32px;
        margin: 0 auto;
    }
    .info-contact-index {
        text-align: center;
        width: 100%;
    }
    /* nprint */
    .print-offset {
        width: 100%;
    }
    .nprint-info-image {
        right: -30px;
        top: -50px;
        position: absolute;
        display: none;
    }
    .nprint-info-text-para {
        width: 100%;
    }

    #nprint-info-text-para {
        width: 100%;
        padding-bottom: 100px;
    }

    .nprint-info-text {
        width: 100%;
    }
    .titre-services {
        padding: 5px;
        width: 100%;
    }
    .titre-services-equp {
        padding-left: 0;
        width: 100%;
    }
    .bloc-nprint-info-text {
        width: 100%;
        padding: 0 10px 0 2px;
    }
    .pres-nprint-01 {
        width: 100%;
        height: 220px;
    }
    .print-numerique svg {
        width: 50%;
        margin-top: 20px;
        margin-left: 60px;
    }
    .print-numerique p {
        padding: 10px;
        font-size: 16px;
        text-align: center;
        font-weight: 500;
        position: relative;
        top: -25px;
        color: #5B5B5B;
    }
    .nprint-info-image-1 {
        display: none;
    }
    .btn-nous-contactez-print {
        width: 100%;
        height: 45px;
    }
    .btn-nous-contactez-print a {
        font-size: 16px;
        top: 10px;
    }
    /* 
    =====================
    partenaire
    =====================
    */
    .liste-partenaire {
        width: 80%;
        height: auto;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 auto;
        padding-left: 10px;
    }
    .logo-part-01 {
        transition: var(--transition);
        overflow: hidden;
        width: 45%;
        height: auto;
        justify-content: space-between;
    }
    .logo-part-01 img {
        transition: var(--transition);
        width: 100%;
    }

    /* ngenie */
    .par-ngenie {
        padding: 10px;
        font-size: 16px;
    }

    .animation-ngenie {
        width: 100%;
        top: -250px;
    }

    .btn-nous-contactez-ngenie {
        background-color: var(--color-second);
        width: 80%;
        padding: 18px;
        margin: 0 auto;
        transition: var(--transition);
        cursor: pointer;
    }
    .btn-nous-contactez-ngenie a {
        font-size: 18px;
    }
    .tittle-an-ngenie {
        text-align: center;
        padding-top: 80px;
    }
    .tittle-an-ngenie h2 {
        font-size: 18px;
    }
    .ncreative-info-image {
        display: none;
    }
    .box-carr {
        margin: 0 auto;
        width: 20%;
        right: 60%;
        left: 40%;
        padding-top: 20px;
    }
    .box-carr ul li {
        width: 10px;
        height: 10px;
    }
    .animation-ngenie {
        left: 1px;
    }
    .block-text-temoignage {
        visibility: hidden;
    }
    .info-page-imga {
        display: none;
    }
    .pack {
        width: 100%;
    }
    .box-exp {
        width: 100%;
    }
    /* ngenie */
    .ncreative-offset-ngreen {
        width: 100%;
    }
    /* 
    ======================
    nyusu
    ======================
    */
    .video-apropos {
        padding: 10px;
    }
    .video-apropos img {
        width: 100%;
    }
    .Nous-contactez {
        width: 100%;
    }
    .Nous-contactez a {
        font-size: 16px;
    }
    .video-apropos {
        padding: 50px;
    }
    .video-apropos img {
        width: 100%;
    }
    .tittle-contact .titre-contact {
        position: relative;
        font-size: 30px;
        padding: 10px;
    }
    .souligneur-contact {
        background-color: var(--color-third);
        width: 150px;
        height: 30px;
        position: relative;
        top: -40px;
        margin: 0 auto;
    }
    .tittle-page p {
        text-align: justify;
    }
    .team-info {
        bottom: 70px;
    }
    .block-team-info {
        padding: 20px;
    }
    .block-team-info h2 {
        font-size: 18px;
    }
    .block-team-info p {
        font-size: 15px;
    }
    .block-team-info {
        padding: 8px 15px;
    }
    .btn-team-info {
        padding: 10px;
    }
    .btn-team-info a {
        font-size: 14px;
        padding: 2px;
    }
    .liste-services {
        font-size: 18px;
        padding-left: 10px;
    }
    .video-apropos {
        width: 100%;
        padding: 0;
        margin: 10% auto;
        text-align: center;
    }
    .video-apropos img {
        width: 100%;
    }
    /* 
    ==========================
    Contact
    ==========================
    */
    #info-contact {
        width: 100%;
    }
    .tittle-form {
        padding: 30px 0;
    }
    .map .button {
        width: 100%;
        font-size: 16px;
        margin: 10% auto;
    }
    #form-contact {
        width: 100%;
    }
    .info-titre-page {
        font-size: 18px;
        padding-left: 8px;
    }
    .contact-nyusu {
        width: 100%;
    }
    .block-icones-footer img {
        width: 25px;
    }
    .block-icones-footer img span {
        font-size: 18px;
    }
    .type input[type="checkbox"] {
        margin-left: 10px;
    }
    #btn-send {
        font-size: 16px;
        width: 100%;
        position: relative;
        left: 0;
        right: 0;
    }
    /* Click menu */
    .design-menu {
        font-size: 18px;
        top: 0;
        left: -30px;
    }
    .block-navClickmenu {
        display: block;
        padding: 30px;
    }
    #clickmenu {
        width: 100%;
        padding-top: 20px;
        padding-left: 55px;
    }
    .clickmenu li {
        padding: 10px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 30px;
    }
    .socialmedia {
        width: 100%;
        top: 62%;
        bottom: 0;
        left: 0;
        padding-top: 20px;
        background-color: #afafaf;
        height: 100%;
    }
    #socialmedia {
        padding: 0;
        color: #000000;
        display: block;
        position: relative;
        left: 10%;
        top: 5%;
    }
    .info-social-media {
        width: 100%;
        padding-bottom: 20px;
    }
    .info-social-media h2 {
        padding-bottom: 20px;
        font-size: 15px;
    }
    .info-social-media span {
        padding: 5px;
        font-size: 12px;
    }
    /*
    ======================
    noffres
    ======================
    */
    .cont-header-noffre {
        background-color: #00e0fe10;
        padding-top: 25%;
    }
    .tittre-noffre {
        width: 80%;
        font-size: 30px;
    }
    .para-noffre {
        width: 80%;
        font-size: 16px;
        padding-top: 20px;
    }
    .btn-noffre {
        width: 80%;
        padding: 15px 20px;
    }
    .btn-noffre a {
        font-size: 15px;
    }
    .titre-bloc-kit {
        padding-top: 80px;
        font-size: 30px;
        width: 80%;
    }
    .list-kits {
        gap: 5px;
        width: 80%;
        padding: 100px 0;
    }
    .box-kit {
        width: 100%;
        height: 500px;
        padding: 40px;
    }
    #kit-digital {
        width: 100%;
        height: 680px;
        padding: 40px;
        top: 0;
    }
    .cont-cit-kit h3 {
        font-size: 25px;
        padding: 20px;
    }
    .par-cit-kit {
        width: 90%;
        margin: 3% auto;
        padding: 10px;
        text-align: justify;
    }
    .btn-cit-kit {
        width: 85%;
        padding: 15px 20px;
    }
    /* 
    ======================
    Location
    ======================
    */
    .produit-01 {
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 0 auto;
        justify-content: space-between;
        padding: 200px 0;
    }
    .produit-01 {
        padding: 100px 0;
    }
    .image-prod01 {
        width: 100%;
        height: 220px;
        background-size: 110%;
        background-repeat: no-repeat;
        position: relative;
        left: -15px;
    }
    .image-prod01:hover {
        width: 100%;
        height: 220px;
        background-size: 110%;
        background-repeat: no-repeat;
        position: relative;
        left: -15px;
    }
    .par-prod01 {
        width: 100%;
        padding: 20px;
        text-align: justify;
    }
    .par-prod01 h5 {
        padding: 0 0 20px 0;
        font-size: 18px;
    }
    .par-prod01 p {
        font-size: 14px;
    }
    .titre-pro01 {
        width: 100%;
        padding: 20px;
        text-align: justify;
    }
    .titre-pro01 h1 {
        font-size: 35px;
        margin-bottom: 20px;
        text-align: center;
    }
    .bloc-prix-location {
        width: 100%;
        padding: 20px 0;
        margin: 0 auto;
        display: block;
    }
    .prix-location {
        font-size: 40px;
        font-weight: 700;
        text-align: center;
    }
    .njour-location span {
        background-color: #ff9900;
        padding: 15px 20px;
    }
    .njour-location {
        position: relative;
        top: 20px;
        text-align: center;
    }
    .btn-location-prod01 {
        width: 100%;
        padding: 15px 20px;
        margin: 0 auto;
        position: relative;
        top: 40px;
    }
    .btn-location-prod01 a {
        font-size: 16px;
    }
    /*
    ======================
    produit 02
    ======================
    */
    #produit-02 {
        padding: 100px 0;
    }
    .produit-02 {
        width: 90%;
    }
    .image-prod02 {
        width: 100%;
        height: 250px;
        background-size: 110%;
        background-repeat: no-repeat;
        margin: 0 auto;
        position: relative;
        left: -15px;
    }
    .image-prod02:hover {
        width: 100%;
        height: 250px;
        background-size: 110%;
        background-repeat: no-repeat;
        margin: 0 auto;
        position: relative;
        left: -15px;
    }
    .bloc-prix-location-prod02 {
        width: 100%;
        padding: 20px 0;
        display: block;
    }
    .titre-prod02 {
        width: 100%;
        padding: 20px;
        text-align: justify;
    }
    .titre-prod02 h1 {
        font-size: 30px;
        text-align: center;
        margin-top: 20px;
    }
    .par-prod02 {
        width: 100%;
        margin: 0 auto;
        padding: 20px;
        text-align: justify;
    }
    .par-prod02 b {
        font-size: 20px;
        text-align: center;
    }
    .para-prod02 {
        width: 100%;
        margin: 0 auto;
        position: relative;
        top: -40px;
        text-align: justify;
        padding: 20px;
    }
    .para-prod02 b {
        font-size: 21px;
        text-align: center;
    }
    .btn-location-prod02 {
        width: 100%;
        padding: 15px 20px;
    }
    .btn-location-prod02 a {
        font-size: 16px;
    }
    /*
    =======================
    produit 03
    =======================
    */
    #produit-03 {
        padding: 100px 0;
        margin: 0 auto;
        width: 100%;
        padding: 20px;
    }
    .image-prod03 {
        display: flex;
        flex-wrap: wrap;
        grid-area: 5px;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .img-prod03 {
        width: 100%;
        cursor: pointer;
        transition: all ease .3s;
        position: relative;
        left: 20px;
    }
    .img-prod03:hover {
        transform: scale(1.1);
    }
    .img-prod03 img {
        width: 90%;
    }
    .par-prod03 {
        width: 100%;
        margin: 0 auto;
        padding-top: 80px;
        padding-bottom: 20px;
    }
    .bloc-prix-location-prod03 {
        display: block;
        padding: 30px 0;
    }
    .bloc-prix-location-prod03 .prix-location {
        font-size: 35px;
        font-weight: 700;
    }
    .par-prod03 .njour-location {
        position: relative;
        top: 30px;
    }
    .bloc-prix-location-prod03 .njour-location {
        position: relative;
        top: 30px;
    }
    .btn-location-prod03 {
        width: 90%;
        padding: 15px 20px;
        background-color: var(--color-second);
        text-align: center;
        cursor: pointer;
        transition: ease all .3s;
        margin: 10px auto;
        position: relative;
        top: 30px;
    }
    .btn-location-prod03:hover {
        background-color: var(--color-primary);
        box-shadow: 0 0 20px rgba(41, 40, 40, 0.233);
    }
    .btn-location-prod03:hover a {
        color: var(--color-second);
        font-weight: 600;
    }
    .btn-location-prod03 a {
        font-size: 16px;
        color: #FFF;
    }
    #nbre-jours {
        background-color: #ffe600;
        width: 35%;
        height: 45px;
        border: none;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    /* 
    =====================
    produit 04
    =====================
    */
    .image-prod04 {
        width: 100%;
        height: 225px;
        margin: 5% auto;
        background-image: url(../images/location-prod41.jpg);
        background-size: 100%;
        cursor: pointer;
        transition: all ease .3s;
    }
    .image-prod04:hover {
        width: 100%;
        height: 225px;
        background-image: url(../images/location-prod42.jpg);
        background-size: 100%;
    }
    .bloc-prix-location-04 {
        width: 80%;
        display: block;
        padding: 30px 0;
        margin-top: 20px;
    }
    .bloc-prix-location-prod04 .njour-location {
        position: relative;
        top: 60px;
    }
    /*
    =======================
    les kits
    =======================
     */
    .cont-header-kit-print {
        padding-top: 350px;
    }
    .cont-header-kit-print img {
        width: 70%;
    }
    .cont-header-kit-digital {
        padding-top: 310px;
    }
    .cont-header-kit-digital img {
        width: 70%;
    }
    .cont-header-kit-event {
        padding-top: 380px;
    }
    .cont-header-kit-event img {
        width: 70%;
    }
    .cont-header-kit-smedia {
        padding-top: 270px;
    }
    .cont-header-kit-smedia img {
        width: 70%;
    }
    #block-kit-print {
        padding: 50px 0 50px 0;
    }
    #block-kit-digital {
        padding: 100px 0 150px 0;
    }
    #block-kit-event {
        padding: 50px 0 50px 0;
    }
    #block-kit-s-media {
        padding: 100px 0 150px 0;
    }
    .cont-detail-kit {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        padding-top: 100px;
    }
    .list-detail-kit {
        width: 100%;
    }
    .img-detail-kit {
        width: 100%;
        height: auto;
    }
    .img-detail-kit img {
        padding: 20px;
        width: 100%;
        margin-top: 60px;
    }
    .detail-kit h3 {
        margin: 5px auto;
        font-size: 30px;
    }
    .list-detail-kit h3 {
        padding-bottom: 20px;
        left: -200px;
    }
    .list-detail-kit h4 {
        padding: 20px 0;
        left: -80px;
    }
    .list-detail-kit li {
        list-style: square;
        padding-left: 10px;
        line-height: 2;
        font-size: 15px;
    }
    .price-kit-creation {
        font-size: 40px;
    }
    .btn-kit-creation a {
        font-size: 16px;
    }
    .btn-kit-digital a {
        font-size: 16px;
    }
    .img-detail-kit {
        width: 100%;
        margin-top: 30px;
        border: none;
    }
    #block-kit-digital .img-detail-kit {
        width: 100%;
        height: 300px;
        border: none;
    }
    #block-kit-print .img-detail-kit {
        width: 100%;
        height: auto;
        border: none;
    }
    #block-kit-s-media .img-detail-kit {
        width: 100%;
        height: 300px;
        border: none;
    }
    #block-kit-digital .list-detail-kit h3 {
        padding-bottom: 20px;
        left: 0;
    }
    #block-kit-event .img-detail-kit {
        width: 100%;
        height: auto;
        border: none;
    }
    .img-detail-kit img {
        padding: 30px;
        width: 100%;
        margin-top: 30px;
    }
    #img-detail-kit-print {
        padding-top: 30px;
    }
    #img-detail-kit-smedia img {
        padding: 0px;
        width: 65%;
        margin-top: 50px;
        position: relative;
        left: 70px;
    }
    .detail-kit h3 {
        width: 100%;
        margin: 10px auto;
        text-align: center;
        font-size: 30px;
    }
    .bande-separateur {
        width: 80%;
        height: 5px;
        background-color: var(--color-primary);
        margin: 0 auto;
        position: relative;
        z-index: 100;
    }
    .bande-separateur-2 {
        width: 40%;
        height: 10px;
        background-color: var(--color-primary);
        margin: 0 auto;
        position: relative;
        z-index: 200;
    }
    .list-detail-kit h3 {
        padding-bottom: 20px;
        position: relative;
        left: 0;
    }
    #list-detail-kit-print h3 {
        position: relative;
        left: 0;
    }
    #list-detail-kit-smedia h3 {
        position: relative;
        left: 0;
    }
    #list-detail-kit-event h3 {
        position: relative;
        left: 0;
    }
    .list-detail-kit h4 {
        padding: 20px 0;
        position: relative;
        left: 0;
        color: #000;
    }
    .list-detail-kit li {
        list-style: square;
        padding-left: 20px;
        line-height: 2;
        font-size: 15px;
        position: relative;
        left: 15px;
    }
    .price-kit {
        font-size: 25px;
        padding-top: 20px;
    }
    .btn-kit {
        width: 100%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-event {
        width: 100%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-smedia {
        width: 100%;
        margin: 10px auto;
        padding: 15px;
    }
    .btn-kit-event a {
        font-size: 16px;
    }
    .btn-kit-smedia a {
        font-size: 16px;
    }
    .btn-kit a {
        font-size: 16px;
    }
    #autre-kit {
        background-color: #effeff;
        height: auto;
        width: 100%;
    }
    .btn-kit-digital {
        width: 80%;
        margin: 15px auto;
        padding: 15px;
    }
    #price-kit-digital {
        font-size: 25px;
    }
    .btn-kit-digital a {
        font-size: 16px;
    }
    .titre-bloc-kit {
        padding-top: 100px;
        font-size: 35px;
    }
    #block-nous-contacter {
        min-height: 70vh;
        padding-top: 250px;
        margin-top: 0;
        padding-bottom: 120px;
    }
    #block-nous-contacter-autre {
        width: 100%;
        min-height: 60vh;
        padding-top: 130px;
        padding-bottom: 120px;
    }
    .block-contact-titre {
        margin-bottom: -10px;
    }
    .btn-nous-contactez {
        width: 80%;
        padding: 10px;
    }
    .btn-nous-contactez a {
        font-size: 18px;
    }
    /* 
    ------------------
    animation
    ------------------
    */


    .bg-animation {
        width: 100%;
        top: -50px;
    }
    

    .bg-animation1 {
        width: 100%;
        top: -50px;
        z-index: 100;
        text-align: center;
        justify-items: center;
    }

    .titre-section-annimation{
        width: 50%;
        font-size: 25px;
        padding: 20px 0;
        top: 0;
        margin-bottom: 50px;
    }
    
    .titre-section-annimation1{
        width: 80%;
        font-size: 21px;
        padding: 20px;
        margin-bottom: 50px;
    }

    .titre-section-annimation1 h1{
        font-size: 21px;
        width: 100%;

    } 
    .animation {
        display: flex;
        margin: 0 auto;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        width: 80%;
        position: relative;
        top: -50px;
    }

    #block-an{
        margin: 0 auto;
        text-align: center;
    }

    .block-an {
        width: 100%;
        height: auto;
    }

    .block-an img {
        width: 40%;
    }

    .block-an h2 {
        font-size: 30px;
        position: relative;
        top: -20px;
    }
    .block-an p {
        font-size: 18px;
        position: relative;
        top: -30px;
        text-align: center;
    }

    #block-an p {
        font-size: 18px;
        position: relative;
        top: -30px;
        text-align: center;
    }
    /* 
    ==========================
    info equipe
    ==========================
    */
    .info-perso-equipe {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding-top: 50px;
    }
    #plus-tearm {
        width: 100%;
        background-color: #ecf4ff;
        margin-top: 20px;
        padding-top: 0;
    }
    .plus-tearm {
        width: 100%;
        margin: 0 auto;
        padding-top: 0;
    }
    .image-tearm {
        width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 2;
        padding-top: 0;
    }
    .block-info-team-detail {
        width: 100%;
        padding-top: 100px;
        margin-top: 0;
    }
    .image-tearm img {
        width: 100%;
        margin: 0 auto;
    }
    .bd-tearm {
        width: 100%;
        height: 65%;
        top: -260px;
        left: -20px;
    }
    .tearm-rx {
        width: 80%;
        position: relative;
        padding-top: 20px;
        left: 15px;
    }
    .tearm-rx a i {
        font-size: 35px;
        padding-left: 5px;
    }
    .para-info-tearm {
        width: 100%;
        padding-left: 20px;
    }
    .titre-services-tearm {
        width: 100%;
        padding-left: 20px;
    }
    .titre-services-equp {
        padding-left: 0;
    }
    .bloc-prix-location-prod03 .team-info {
        height: 25%;
    }
    .pp-1 .team-info {
        height: 24%;
    }
    .pp-2 .team-info {
        height: 24%;
    }
    .pp-3 .team-info {
        height: 24%;
    }
    .pp-4 .team-info {
        height: 24%;
    }
    .pp-5 .team-info {
        height: 24%;
    }
    .pp-6 .team-info {
        height: 24%;
    }
    .pp-7 .team-info {
        height: 24%;
    }
    .pp-8 .team-info {
        height: 24%;
    }
    .pp-1 {
        height: 280px;
        width: 50%;
    }
    .pp-2 {
        height: 280px;
        width: 50%;
    }
    .pp-3 {
        height: 280px;
        width: 50%;
    }
    .pp-4 {
        height: 280px;
        width: 50%;
    }
    .pp-5 {
        height: 280px;
        width: 50%;
    }
    .pp-6 {
        height: 280px;
        width: 50%;
    }
    .pp-7 {
        height: 280px;
        width: 50%;
    }
    .pp-8 {
        height: 280px;
        width: 50%;
    }
    .block-team-info {
        padding: 6px;
    }
    .block-team-info h2 {
        font-size: 16px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 13px;
        padding-left: 5px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
        padding: 3px;
    }
    /* 
    =========================
    Portfolio
    =========================
    */
    #portfolio {
        width: 100%;
        height: 60vh;
    }
    .cont-header-portfolio {
        height: 100vh;
    }
    .cont-portfolio-realisation {
        padding-top: 30px;
    }
    #cont-portfolio {
        position: relative;
        bottom: -100px;
        top: 370px;
    }
    .block-cont-header-port {
        padding-top: 120px;
    }
    .tittle-header-port {
        width: 100%;
    }
    .tittle-header-port h3 {
        font-size: 25px;
        padding: 15px;
    }
    .par-header-port {
        width: 100%;
        padding: 15px;
        position: relative;
        top: 0;
        font-size: 15px;
        text-align: justify;
    }
    .btn-header {
        width: 80%;
        left: 0px;
        top: 30px;
        margin: 0 auto;
    }
    #cont-portfolio {
        width: 80%;
        padding: 5px;
    }
    .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        width: 75%;
        height: auto;
        position: relative;
        left: 13.5px;
    }
    .realisation-par-service {
        position: sticky;
        width: 100%;
        top: 55px;
        left: 100px;
        background-color: #eff5ff;
        z-index: 100;
    }
    #creation-graphique .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
        position: relative;
        left: 0px;
    }
    #Impression .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
        position: relative;
        left: 0px;
    }
    #webdesign .list-des-images-par-cartegorie {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
        position: relative;
        left: 0px;
    }
    #logo .list-des-images-par-cartegorie {
        gap: 10px;
        width: 100%;
        left: 0px;
    }
    #logo .logo-realisation {
        width: 48%;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 16px;
    }
    .logo-realisation {
        width: 48%;
        top: 60px;
    }
    .logo-realisation img {
        width: 100%;
    }
    .logo-realisation:hover {
        background-color: #d3d6fa;
        padding-left: 25px;
        padding-bottom: 15px;
    }
    .logo-realisation:hover img {
        box-shadow: -10px 10px 10px #0000006c;
    }
    #comment-portfolio {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: space-between;
        width: 80%;
        margin: 0 auto;
        padding-bottom: 100px;
        padding-top: 400px;
    }
    .comment-portfolio {
        width: 100%;
        position: relative;
        top: 50px;
    }
    .comment-portfolio p {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 50px;
        text-align: center;
    }
    .img-comment-portfolio {
        width: 80%;
        padding-top: 100px;
        margin: 0 auto;
    }
    .img-comment-portfolio img {
        width: 100%;
    }
    .btn-comment-portfolio {
        background-color: var(--color-primary);
        width: 80%;
        padding: 15px;
        text-align: center;
        margin-top: 50px;
        cursor: pointer;
        transition: ease all .3s;
        margin: 0 auto;
    }
    .btn-comment-portfolio:hover {
        box-shadow: 0 0 20px #000000;
        background-color: var(--color-second);
    }
    .btn-comment-portfolio:hover a {
        color: rgb(255, 255, 255);
    }
    .btn-comment-portfolio a {
        color: rgb(0, 0, 0);
        font-size: 16px;
        font-weight: 600;
    }
    #webdesign,
    #creation-graphique,
    #logo {
        padding-bottom: 20px;
    }
    /* 
    =================================
    team
    =================================
    */
    .team {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .team-info {
        width: 100%;
        height: auto;
        bottom: 50px;
    }
    .team-personal {
        padding-bottom: 100px;
        gap: 10px;
        width: 90%;
    }
    .block-team-info {
        padding: 5px;
    }
    .block-team-info h2 {
        font-size: 18px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 13px;
        padding-left: 5px;
    }
    #block-team-smt {
        height: 370px;
        width: 80%;
        margin: 30px 0;
    }
    #block-team-akosse {
        height: 370px;
        width: 80%;
        margin: 30px 0;
    }
    #block-team-romaric {
        height: 370px;
        width: 80%;
        margin: 30px 0;
    }
    #block-team-paul {
        height: 370px;
        width: 80%;
        margin: 30px 0;
    }
    .btn-team {
        width: 100%;
        bottom: 0;
        right: 0;
        top: 90%;
        padding: 10px;
        height: 45px;
        display: block;
    }
    .btn-team a {
        font-size: 15px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 15px;
    }


    /* contact */

    .contact-nyusu {
        width: 100%;
    }

    .contact-tel {
        padding-top: 0px;
    }

    .contact-mail {
        margin-top: -50px;
    }

    .contact-loc {
        margin-top: -50px;
    }

    .contact-drap {
        position: relative;
    }

    .block-icones-footer {
        padding: 10px 0;
        width: 100%;
    }

    #block-icones-footer {
        width: 100%;
    }


    /* 
    =======================
    contacts
    =======================
    */

    #info-contact {
        padding-top: 20px;
    }

    .contact-nyusu{
        width: 90%;
    }

    .block-info-contact{
        width: 100%;
    }

    .info-contact-nyusu{
        gap: 10px;
        width: 100%;
        padding-bottom:50px;
        padding-left:20px;
    }

    .drapeau-nyusu{
        width: 100%;
        padding-left: 50px;
    }

    .drapeau-nyusu img{
        width: 35px;
    }

    .contact-ci{
        width: 100%;
    }

    .contact-maroc{
        width: 100%;
        padding-top: 50px;
    }

    .info-nyusu{
        width: 100%;
        display: flex;
        height: 50px;
    }

    .info-nyusu img{
        width:30px;
        top: 0px;
    }

    .info-nyusu p{
        padding-left: 5px;
        font-size:14px;
    }

    .info-contact-index {
        text-align: center;
    }

    .tittle-form {
        padding: 30px 0;
    }

    .tittle-form h1 {
        font-size: 40px;
        padding-left: 20px;
    }


    #form-contact {
        width: 100%;
        margin-bottom:50px;
    }

    .form-contact {
        padding: 20px;
    }

    .checkbox {
        font-size: 14px;
        padding-left: 5px;
    }

    .type input[type="checkbox"] {
        margin-left: 5px;
        font-size: 14px;
    }

    #btn-send {
        background-color: #0000FF;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 18px;
        Margin-left:0;
        margin-bottom: 20px;
        width:100%;
    }

    #nyusu-rx {
        width: 100%;
        position: absolute;
        margin: 0 auto;
        right: 0;
        left:20px;
        bottom:30px;
    }

    .nyusu-rx {
        width: 100%;
    }

    .nyusu-rx i {
        font-size: 35px;
    }

    .tittle-rx {
        font-size: 21px;
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

}


/*
----------------------
    425px 
----------------------

*/

@media (max-width:425px) {

    .liste-ndigital-page-ndigital{
        position: relative;
        left: -10px;
    }

        /* section partenaire */

        .block-partenaire{
            width: 100%;
            padding: 20px;
        }
    
        .contenu-parteniare{
            gap: 10px;
        }
    
        .logopart{
            width:40%;
            margin: 10px;
            padding: 0;
        }
    
        .logopart img{
            width: 80%;
        }
    
        .logopart:hover{
        transform: scale(1.1);
        }


    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 100%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 20px;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: -120px;
    }


    .btn-en-sav-plus{
        width: 70%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 50px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 100%;
        margin: 50% auto;
        top: -30px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 70%;
        margin: 0 auto;
        top: 0;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 100%;
        margin: 0 auto;
        top: 10px;
        left: 3px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -150px;
    }


    .btn-d-agence{
        width: 98%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }



    .bg-ngenie {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngenie-415_915.jpg);
        background-attachment: fixed;
        background-size: cover;
        position: relative;
    }
    .bg-nyusu {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nyusu-415_915.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .cont-header-noffre {
        background-image: url(../images/bg-construction-415_915.jpg);
    }
    .bg-nDigital {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ndigital-415_915.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nprint-415_900.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ncreative {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ncreative-415_915.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-contact {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-contact-415_900.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ngreen {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngreen-415_915.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #bg-location {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-location-415_915.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #ilust {
        width: 100%;
        height: 100vh;
        background-image: url(../images/bg-paralax-415_900.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    /* 
    ------------------------
    index.php
    ------------------------
    */
    .liste-services b {
        font-size: 15px;
        font-weight: 400;
    }
    .info-head-left {
        background: none;
        padding: 600px 15px 20px 40px;
    }
    .info-head-right {
        width: 100%;
        position: absolute;
        top: 20%;
        min-height: 100vh;
        background-image: url(../images/bg-accueil-415_915.jpg);
        background-size: cover;
        position: relative;
    }
    .info-head-right img {
        display: none;
    }
    .tittle-head {
        font-size: 20px;
        line-height: 1.1;
    }
    .info-head {
        font-size: 16px;
        padding-top: 10px;
    }
    .btn-ensavoirplus {
        width: 92%;
        height: 40px;
        margin: 30px auto;
        position: relative;
        left: -13px;
    }
    .btn-ensavoirplus a {
        font-size: 15px;
        padding-top: 10px;
        top: 4px;
    }
    /* 
    ------------------------------
    main
    ------------------------------
    */
    .a-propos {
        width: 100%;
        padding: 40px;
        margin-bottom: 100px;
        position: relative;
    }
    .a-propos-img {
        width: 80%;
        top: 150px;
        left: 0;
        padding: 20px;
    }
    .info-a-propos {
        /* left: 10px; */
        padding: 10px 0;
        width: 100%;
        text-align: justify;
    }
    .img-a-propos {
        width: 60%;
        padding-top: 30px;
        padding-left: 5px;
    }
    .block-team-info {
        padding: 20px;
    }
    .block-team-info h2 {
        font-size: 25px;
    }
    .block-team-info p {
        font-size: 16px;
    }
    .block-team-info {
        padding: 8px 16px;
    }
    .btn-team-info {
        padding: 10px;
    }
    .btn-team-info a {
        font-size: 14px;
        padding: 2px;
    }
    .tittle-contact .titre-contact {
        position: relative;
        font-size: 30px;
        padding: 20px;
    }
    /*
    ======================
    noffres
    ======================
    */
    .cont-header-noffre {
        background-color: #00e0fe10;
        padding-top: 75%;
    }
    .tittre-noffre {
        width: 90%;
        font-size: 30px;
    }
    .para-noffre {
        width: 80%;
        font-size: 16px;
        padding-top: 20px;
    }
    #block-nous-contacter {
        min-height: 80vh;
        padding-top: 270px;
        padding-bottom: 120px;
    }
    #block-nous-contacter-autre {
        width: 100%;
        min-height: 60vh;
        padding-top: 140px;
        padding-bottom: 80px;
    }
    .block-contact-titre {
        margin-bottom: -10px;
    }
    .btn-nous-contactez {
        width: 80%;
        padding: 10px;
    }
    .btn-nous-contactez a {
        font-size: 18px;
    }
    /* 
    ==========================
    info equipe
    ==========================
    */
    .info-perso-equipe {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding-top: 50px;
    }
    #plus-tearm {
        width: 100%;
        background-color: #ecf4ff;
        margin-top: 20px;
        padding-top: 0;
    }
    .plus-tearm {
        width: 100%;
        margin: 0 auto;
        padding-top: 0;
    }
    .image-tearm {
        width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 2;
        padding-top: 0;
    }
    .block-info-team-detail {
        width: 100%;
        padding-top: 100px;
        margin-top: 0;
    }
    .image-tearm img {
        width: 100%;
        margin: 0 auto;
    }
    .bd-tearm {
        width: 100%;
        height: 65%;
        top: -220px;
        left: -20px;
    }
    .tearm-rx {
        width: 80%;
        position: relative;
        padding-top: 20px;
        left: 15px;
    }
    .tearm-rx a i {
        font-size: 35px;
        padding-left: 5px;
    }
    .tittle-info {
        font-size: 25px;
        padding: 10px 0;
    }
    .para-info-tearm {
        width: 100%;
        padding-left: 0px;
    }
    .titre-services-tearm {
        width: 100%;
        padding-left: 20px;
    }
    .titre-services-equp {
        padding-left: 0px;
    }
    .bloc-prix-location-prod03 .team-info {
        height: 25%;
    }
    .pp-1 .team-info {
        height: 24%;
    }
    .pp-2 .team-info {
        height: 24%;
    }
    .pp-3 .team-info {
        height: 24%;
    }
    .pp-4 .team-info {
        height: 24%;
    }
    .pp-5 .team-info {
        height: 24%;
    }
    .pp-6 .team-info {
        height: 24%;
    }
    .pp-7 .team-info {
        height: 24%;
    }
    .pp-8 .team-info {
        height: 24%;
    }
    .pp-1 {
        height: 300px;
        width: 80%;
    }
    .pp-2 {
        height: 350px;
        width: 80%;
    }
    .pp-3 {
        height: 350px;
        width: 80%;
    }
    .pp-4 {
        height: 350px;
        width: 80%;
    }
    .pp-5 {
        height: 350px;
        width: 80%;
    }
    .pp-6 {
        height: 350px;
        width: 80%;
    }
    .pp-7 {
        height: 350px;
        width: 80%;
    }
    .pp-8 {
        height: 350px;
        width: 80%;
    }
    .block-team-info {
        padding: 8px;
    }
    .block-team-info h2 {
        font-size: 22px;
        padding-left: 5px;
    }
    .block-team-info p {
        font-size: 15px;
        padding-left: 5px;
    }
    .btn-team-info {
        padding: 5px;
    }
    .btn-team-info a {
        font-size: 18px;
        padding: 3px;
    }
    .picture-team {
        left: 6%;
    }
    /* 
    =================================
    team
    =================================
    */
    .team-personal {
        padding-bottom: 100px;
        gap: 10px;
        width: 90%;
    }
    #block-team-smt {
        height: 370px;
        width: 100%;
        margin: 30px 0;
    }
    #block-team-akosse {
        height: 370px;
        width: 100%;
        margin: 30px 0;
    }
    #block-team-romaric {
        height: 370px;
        width: 100%;
        margin: 30px 0;
    }
    #block-team-paul {
        height: 370px;
        width: 100%;
        margin: 30px 0;
    }
    .btn-team {
        top: 90%;
    }
    .btn-team a {
        font-size: 16px;
    }
    /* 
    ------------------
    animation
    ------------------
    */
    .bg-animation {
        padding: 30px;
    }
    .animation {
        top: 20px;
    }
    .btn-header {
        width: 80%;
        left: 0px;
        top: -120px;
        margin: 0 auto;
    }
    .block-cont-header-port {
        padding-top: 200px;
    }
}


/*
----------------------
    400px 
----------------------

*/

@media(max-width:400px) {


    .bd-tearm {
        width: 100%;
        height: 63%;
        top: -210px;
        left: -15px;
    }
    .btn-header {
        width: 80%;
        left: 0px;
        top: -120px;
        margin: 0 auto;
    }
    .block-cont-header-port {
        padding-top: 200px;
    }

    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 100%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 10px;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: -120px;
    }


    .btn-en-sav-plus{
        width: 70%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 50px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 100%;
        margin: 50% auto;
        top: -30px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 80%;
        margin: 0 auto;
        left: 0;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 100%;
        margin: 0 auto;
        top: 10px;
        left: 3px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -150px;
    }


    .btn-d-agence{
        width: 95%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }


}


/*
----------------------
    390px 
----------------------

*/

@media (max-width:390px) {


    /* section partenaire */

    .block-partenaire{
        width: 100%;
        padding: 20px;
    }

    .contenu-parteniare{
        gap: 10px;
    }

    .logopart{
        width:40%;
        margin: 10px;
        padding: 0;
    }

    .logopart img{
        width: 80%;
    }

    .logopart:hover{
    transform: scale(1.1);
    }

    
    .info-head-left {
        background: none;
        padding: 550px 15px 20px 40px;
    }
    .info-head-right {
        width: 100%;
        position: absolute;
        top: 20%;
        min-height: 100vh;
        background-image: url(../images/bg-accueil-415_915.jpg);
        background-size: cover;
        position: relative;
    }
    .info-head-right img {
        display: none;
    }
    /* Click menu */
    .design-menu {
        font-size: 18px;
        top: 0;
        left: -30px;
    }
    .block-navClickmenu {
        display: block;
        padding: 30px;
    }
    #clickmenu {
        width: 100%;
        padding-top: 10px;
        padding-left: 50px;
    }
    .clickmenu li {
        padding: 8px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 25px;
    }
    .socialmedia {
        width: 100%;
        top: 62%;
        bottom: 0;
        left: 0;
        padding-top: 10px;
        background-color: #afafaf;
        height: 100%;
    }
    #socialmedia {
        padding: 0;
        color: #000000;
        display: block;
        position: relative;
        left: 10%;
        top: 2%;
    }
    .info-social-media {
        width: 100%;
        padding-bottom: 20px;
    }
    .info-social-media h2 {
        padding-bottom: 20px;
        font-size: 15px;
    }
    .info-social-media span {
        padding: 5px;
        font-size: 12px;
    }
    .btn-team {
        top: 85%;
        width: 100%;
    }
    /*
    ----------------------
    location
    ----------------------

    */
    #bg-location {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-location-360-740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ngenie {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngenie-390_845.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-nyusu {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nyusu-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

    .cont-header-noffre {
        background-image: url(../images/bg-construction-360_740.jpg);
    }
    .bg-nDigital {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ndigital-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nprint-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ncreative {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ncreative-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-contact {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-contact-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ngreen {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngreen-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #block-nous-contacter {
        min-height: 70vh;
        padding-top: 180px;
        padding-bottom: 120px;
    }
    #block-nous-contacter-autre {
        width: 100%;
        min-height: 60vh;
        padding-top: 120px; 
        padding-bottom: 120px;

    }
    .block-contact-titre {
        margin-bottom: -10px;
    }
    .btn-nous-contactez {
        width: 80%;
        padding: 10px;
    }
    .btn-nous-contactez a {
        font-size: 18px;
    }
    .bd-tearm {
        width: 100%;
        height: 63%;
        top: -200px;
        left: -20px;
    }

   
}


/*
----------------------
    375px 
----------------------

*/

@media (max-width:375px) {


    /* section partenaire */

    .block-partenaire{
        width: 100%;
        padding: 20px;
    }

    .contenu-parteniare{
        gap: 10px;
    }

    .logopart{
        width:40%;
        margin: 10px;
        padding: 0;
    }

    .logopart img{
        width: 80%;
    }

    .logopart:hover{
    transform: scale(1.1);
    }

    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 100%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 20px;
        left: 0;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: -120px;
    }


    .btn-en-sav-plus{
        width: 70%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 50px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 100%;
        margin: 50% auto;
        top: -30px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 80%;
        margin: 0 auto;
        top: -20px;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
        left: 0;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 80%;
        margin: 0 auto;
        top: 10px;
        left: -10px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -100px;
    }


    .btn-d-agence{
        width: 98%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }


    .info-head-left {
        background: none;
        padding: 400px 5px 20px 40px;
    }
    .info-head-right {
        width: 100%;
        position: absolute;
        top: 20%;
        min-height: 100vh;
        background-image: url(../images/bg-accueil-375_670.jpg);
        background-size: cover;
        position: relative;
    }
    .info-head-right img {
        display: none;
    }
    /* Click menu */
    .design-menu {
        font-size: 18px;
        top: 0;
        left: -30px;
    }
    .block-navClickmenu {
        display: block;
        padding: 30px;
    }
    #clickmenu {
        width: 100%;
        padding-top: 10px;
        padding-left: 50px;
    }
    .clickmenu li {
        padding: 8px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 25px;
    }
    .socialmedia {
        width: 100%;
        top: 62%;
        bottom: 0;
        left: 0;
        padding-top: 10px;
        background-color: #afafaf;
        height: 100%;
    }
    #socialmedia {
        padding: 0;
        color: #000000;
        display: block;
        position: relative;
        left: 10%;
        top: 2%;
    }
    .info-social-media {
        width: 100%;
        padding-bottom: 20px;
    }
    .info-social-media h2 {
        padding-bottom: 20px;
        font-size: 15px;
    }
    .info-social-media span {
        padding: 5px;
        font-size: 12px;
    }
    .btn-team {
        top: 85%;
        width: 100%;
    }
    #block-nous-contacter {
        min-height: 70vh;
        padding-top: 120px;
        padding-bottom: 120px;
    }
    #block-nous-contacter-autre {
        width: 100%;
        min-height: 60vh;
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .block-contact-titre {
        margin-bottom: -10px;
    }
    .btn-nous-contactez {
        width: 80%;
        padding: 10px;
    }
    .btn-nous-contactez a {
        font-size: 18px;
    }
    #ilust {
        width: 100%;
        height: 100vh;
        background-image: url(../images/bg-paralax-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    /* 
    ------------------
    animation
    ------------------
    */
    .bg-animation {
        padding: 20px;
    }
    .animation {
        top: 10px;
    }
    .pp-1 {
        height: 280px;
        width: 80%;
    }
    .pp-2 {
        height: 280px;
        width: 80%;
    }
    .pp-3 {
        height: 280px;
        width: 80%;
    }
    .pp-4 {
        height: 280px;
        width: 80%;
    }
    .pp-5 {
        height: 280px;
        width: 80%;
    }
    .pp-6 {
        height: 280px;
        width: 80%;
    }
    .pp-7 {
        height: 280px;
        width: 80%;
    }
    .pp-8 {
        height: 280px;
        width: 80%;
    }
    /* 
    =========================
    Portfolio
    =========================
    */
    #portfolio {
        width: 100%;
        height: 100vh;
    }
    .cont-header-portfolio {
        background-color: #dbddf8;
        ;
        width: 100%;
        height: 100vh;
    }
    #cont-portfolio {
        position: relative;
        bottom: -100px;
        top: 100px;
    }
    .block-cont-header-port {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 0 auto;
        justify-content: space-between;
        padding-top: 130px;
    }
    .tittle-header-port {
        width: 98%;
        margin: 0 auto
    }
    .tittle-header-port h3 {
        font-size: 25px;
    }
    .par-header-port {
        font-size: 15px;
        width: 100%;
        top: 5px;
    }
    .btn-header {
        width: 80%;
        padding: 20px;
        top: 30px;
    }
    .realisation-par-service li {
        padding: 10px;
        font-size: 16px;
    }
    #comment-portfolio {
        padding-top: 150px;
    }
}


/*
----------------------
    360px 
----------------------

*/

@media (max-width:360px) {

    /* section partenaire */

    .block-partenaire{
        width: 100%;
        padding: 20px;
    }

    .contenu-parteniare{
        gap: 10px;
    }

    .logopart{
        width:35%;
        margin: 10px;
        padding: 0;
    }

    .logopart img{
        width: 80%;
    }

    .logopart:hover{
        transform: scale(1.1);
    }

    /* 
    ------------------------------
    btn en savoir plus
    ------------------------------
    */

    .btn-ensavoirplusx {
        width: 100%;
        border-radius: 200px;
        margin: 0 auto;
        position: relative;
        top: 15px;
        left:0;
    }

    .btn-ensavoirplusx:hover .cercle-btn-plus {
        left:0;
    }


    .btn-ensavoirplusx:hover .btn-en-sav-plus {
        transform:none;
    }


    .cercle-btn-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: -120px;
    }


    .btn-en-sav-plus{
        width: 80%;
        padding: 10px 20px;
        position:absolute;
        border-radius: 20px 0 20px 0;
        height: 50px;
        transform:none;
        opacity: 1;
  
    }

    .btn-en-sav-plus a{
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn voir plus
    ------------------------------
    */


    .btn-voirplusx{
        width: 100%;
        margin: 50% auto;
        top: -50px;

    }

    .btn-voirplusx:hover .cercle-btn-v-plus {
        left: 0;
    }


    .btn-voirplusx:hover .btn-v-plus {
        transform:none;
        opacity: 1;
    }


    .cercle-btn-v-plus{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
    }


    .btn-v-plus{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-v-plus a{
        color: rgb(255, 255, 255);
        font-size: 16px;
        top: 5px;
    }



    /* 
    ------------------------------
    btn-contactez-nous
    ------------------------------
    */


    .btn-contactez-nous{
        width: 80%;
        margin: 0 auto;
        top: 2px;
        left: 2px;

    }

    .btn-contactez-nous:hover .cercle-btn-c-nous {
        left: 0;
    }


    .btn-contactez-nous:hover .btn-c-nous{
        transform: none;
        opacity: 1;
    }

    .cercle-btn-c-nous{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        margin:0;
        left: 0;
        top: 20px;
    }


    .btn-c-nous{
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        transform: none;
        opacity: 1;
        top: 20px;
    }

    .btn-c-nous a{
        font-size: 16px;
        top: 5px;
    }


    /* 
    ------------------------------
    btn-decouvrez-lagence
    ------------------------------
    */


    .btn-decouvrer-lagence{
        width: 100%;
        margin: 0 auto;
        top: 10px;
        left: 3px;

    }

    .btn-decouvrer-lagence:hover .cercle-btn-d-agence {
        left: 0;
    }


    .btn-decouvrer-lagence:hover .btn-d-agence{
        transform: none;
    }


    .cercle-btn-d-agence{
        width: 50px;
        height: 50px;
        padding: 10px;
        font-size: 25px;
        left: -150px;
    }


    .btn-d-agence{
        width: 98%;
        padding: 0;
        height: 50px;
        transform: none;
        opacity: 1;
    }

    .btn-d-agence a{
        font-size: 15px;
        position: relative;
        top: 13px;
    }


    .bg-ngenie {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngenie-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        position: relative;
    }
    .bg-nyusu {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nyusu-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

    .cont-header-noffre {
        background-image: url(../images/bg-construction-360_740.jpg);
    }
    .bg-nDigital {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ndigital-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nprint-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ncreative {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ncreative-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-contact {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-contact-415_900.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ngreen {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ngreen-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #bg-location {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-location-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #ilust {
        width: 100%;
        height: 100vh;
        background-image: url(../images/bg-paralax-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .info-head-left {
        background: none;
        padding: 500px 15px 20px 40px;
    }
    .info-head-right {
        width: 100%;
        position: absolute;
        top: 30%;
        min-height: 100vh;
        background-image: url(../images/bg-accueil-360_740.jpg);
        background-size: cover;
        position: relative;
    }
    .info-head-right img {
        display: none;
    }
    /* Click menu */
    .design-menu {
        font-size: 18px;
        top: 0;
        left: -30px;
    }
    .block-navClickmenu {
        display: block;
        padding: 30px;
    }
    #clickmenu {
        width: 100%;
        padding-top: 10px;
        padding-left: 50px;
    }
    .clickmenu li {
        padding: 8px 0 0 0;
        position: relative;
    }
    .clickmenu li a {
        font-size: 25px;
    }
    .socialmedia {
        width: 100%;
        top: 62%;
        bottom: 0;
        left: 0;
        padding-top: 10px;
        background-color: #afafaf;
        height: 100%;
    }
    #socialmedia {
        padding: 0;
        color: #000000;
        display: block;
        position: relative;
        left: 10%;
        top: 2%;
    }
    .info-social-media {
        width: 100%;
        padding-bottom: 20px;
    }
    .info-social-media h2 {
        padding-bottom: 20px;
        font-size: 15px;
    }
    .info-social-media span {
        padding: 5px;
        font-size: 12px;
    }
    .btn-team {
        top: 85%;
        width: 100%;
    }
    .pp-1 {
        height: 280px;
        width: 80%;
    }
    .pp-2 {
        height: 280px;
        width: 80%;
    }
    .pp-3 {
        height: 280px;
        width: 80%;
    }
    .pp-4 {
        height: 280px;
        width: 80%;
    }
    .pp-5 {
        height: 280px;
        width: 80%;
    }
    .pp-6 {
        height: 280px;
        width: 80%;
    }
    .pp-7 {
        height: 280px;
        width: 80%;
    }
    .pp-8 {
        height: 280px;
        width: 80%;
    }
    .btn-header {
        width: 80%;
        left: 0px;
        top: 30px;
        margin: 0 auto;
    }
    .block-cont-header-port {
        padding-top: 150px;
    }

    /* 
    =======================
    contacts
    =======================
    */

    #info-contact {
        padding-top: 20px;
    }

    .contact-nyusu{
        width: 90%;
    }

    .block-info-contact{
        width: 100%;
    }

    .info-contact-nyusu{
        gap: 10px;
        width: 100%;
        padding-bottom:50px;
        padding-left:10px;
    }

    .drapeau-nyusu{
        width: 100%;
        padding-left: 50px;
    }

    .drapeau-nyusu img{
        width: 35px;
    }

    .contact-ci{
        width: 100%;
    }

    .contact-maroc{
        width: 100%;
        padding-top: 50px;
    }

    .info-nyusu{
        width: 100%;
        display: flex;
        height: 50px;
    }

    .info-nyusu img{
        width:30px;
        top: 0px;
    }

    .info-nyusu p{
        padding-left:5px;
        font-size:14px;
    }

    .info-contact-index {
        text-align: center;
    }

    .tittle-form {
        padding: 30px 0;
    }

    .tittle-form h1 {
        font-size: 40px;
        padding-left: 20px;
    }


    #form-contact {
        width: 100%;
        margin-bottom:50px;
    }

    .form-contact {
        padding: 20px;
    }

    .checkbox {
        font-size: 14px;
        padding-left: 5px;
    }

    .type input[type="checkbox"] {
        margin-left: 5px;
        font-size: 14px;
    }

    #btn-send {
        background-color: #0000FF;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-style: narrow;
        font-size: 18px;
        margin-left: 0;
        margin-bottom: 20px;
        width:100%;
    }

    #nyusu-rx {
        width: 100%;
        position: absolute;
        margin: 0 auto;
        right: 0;
        left:15px;
        bottom:30px;
    }

    .nyusu-rx {
        width: 100%;
    }

    .nyusu-rx i {
        font-size: 35px;
    }

    .tittle-rx {
        font-size: 21px;
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    #titre-nos-services {
        font-size: 27px;
    }

}


/* 
=================================
team
=================================
*/

@media(max-width:280px) {

    .bg-ngenie {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-negnie-280_655.jpg);
        background-attachment: fixed;
        background-size: cover;
        position: relative;
    }
    .bg-nyusu {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nyusu-280_655.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

    .bg-nDigital {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ndigital-280_655.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-nprint {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-nprint-280_655.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-ncreative {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-ncreative-280_655.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    .bg-contact {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-contact-280_655.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #bg-location {
        width: 100%;
        min-height: 100vh;
        background-image: url(../images/bg-location-280_655.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    #ilust {
        width: 100%;
        height: 100vh;
        background-image: url(../images/bg-paralax-360_740.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .info-head-right {
        min-height: 100vh;
        background-image: url(../images/bg-accueil-280_655.jpg);
        background-size: cover;
        position: relative;
    }
}