@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


html.block-viewport {
    overflow: hidden !important;
    width: 100vw !important;
    height: 100vh !important;
  }
  
  :root{
      --text: #111111;
      --spacer: 1.5rem;
      --box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.016), 0 8.7px 6.9px rgba(0, 0, 0, 0.022), 0 17.7px 14.2px rgba(0, 0, 0, 0.028), 0 36.5px 29.2px rgba(0, 0, 0, 0.034), 0 100px 80px rgba(0, 0, 0, 0.05);
      --transition: all 350ms ease-in-out;
  }

  body{
    font-family: 'Poppins', sans-serif;
  }

  /*------------------------------------------ NAV  ------------------------------------------ */

  nav {
    height: 75px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 2000;
  }
  
  nav .content {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }
  
  nav .content .logo {
    padding: 10px 0px;
  }

  nav .content .logo img {
    height: 60px;
  }
  
    @media (min-width: 992px){
      nav .content .logo {
    width: auto;
    order: 1;
      }  
    }
  
  nav .content ul.menu {
    padding: 0px;
    margin: 0px;
    list-style: none;
    align-items: stretch;
    justify-content: flex-end;
    width: 100%;
    display: none;
    order: 4;
  }
  
    @media (min-width: 992px){
        nav .content ul.menu {
        display: flex;
        align-items: center;
        order: 2;
      }
    }
  
  nav .content ul.menu > li {
    display: flex;
    align-items: center;
    position: relative;
  }
  
  nav .content ul.menu li {
    list-style: none;
  }
  
  nav .content ul.menu > li > a {
    padding: 0px 10px;
    font-size: 0.85rem;
    line-height: 0.85rem;
    font-weight: 500;
    color: black;
    display: flex;
    align-items: center;
    transition: all 350ms ease-in-out;
    text-decoration: none;

  }

  
  
  nav .content ul.menu li:last-child {
          border: 2px solid black;
          margin: 0px 10px;
          height: 40px;
          padding: 0px 25px !important;
          
      }
    

  nav .content ul.menu li:last-child a {
          color: black;

      }

    /*------------------------------------------ NAV BURGER ------------------------------------------ */
   .nav-burger__container {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: calc(var(--spacer) / 1.5);
    order: 5;
    
   }
  .nav-burger {
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .nav-burger p{
    margin-right: 1rem;
    margin-bottom: 0;
    height: 26px;
    color:white;
    text-transform: uppercase;
  }
  
  
  
  .nav-burger .burger {
    width: 26px;
    height: 26px;
    position: relative;
    margin: 0 auto;
    transform: rotate(0deg);
    transition: all 350ms ease-in-out;
    cursor: pointer;
  }

  .nav-burger .burger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 70%;
    background: white;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: var(--transition);
  }
  
  .nav-burger .burger span:nth-child(1) {
    top: 7px;
    transform-origin: left center;
  }
  
  
  .nav-burger .burger span:nth-child(2) {
    top: 14px;
    transform-origin: left center;
  }

  /*
  .nav-burger .burger.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 2px;
    left: 4px;
  }

  .nav-burger .burger.active span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  .nav-burger .burger.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 20px;
    left: 4px;
  }
  */

  /*------------------------------------------ NAV RESPONSIVE ------------------------------------------ */
  
  .nav-responsive {
    position: fixed;
    top: 0px;
    right: -100px;
    width: calc(100% - 80px);
    height: 100%;
    background-color: black;
    z-index: 9000;
    visibility: hidden;
    opacity: 0;
    transition: all 350ms ease-in-out;
    box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.016), 0 8.7px 6.9px rgba(0, 0, 0, 0.022), 0 17.7px 14.2px rgba(0, 0, 0, 0.028), 0 36.5px 29.2px rgba(0, 0, 0, 0.034), 0 100px 80px rgba(0, 0, 0, 0.05);
  }
  
    @media (min-width: 576px){
      .nav-responsive {
        width: 70%;
      }
    }

    .nav-responsive.active {
        right: 0px;
        visibility: visible;
        opacity: 1;
        width: 100%;
      }

  
  .nav-responsive .content {
    padding: var(--spacer) var(--spacer) calc(var(--spacer) * 4) var(--spacer);
    height: 100vh;
    overflow-y: auto;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .nav-responsive .content .header__nav{
    display: flex;
    justify-content: space-between;
  }
  
  .nav-responsive .content .header__nav .logo {
    display: inherit;
    text-align: center;
  }

  .nav-responsive .content .header__nav .logo img {
    height: 50px;
  }

  @media (min-width: 576px){
    .nav-responsive .content .header__nav .logo img {
        height: 80px;
    }
  }

  .nav-responsive .content .header__nav .nav-burger .burger {
    width: 26px;
    height: 26px;
    position: relative;
    margin: 0 auto;
    transform: rotate(0deg);
    transition: all 350ms ease-in-out;
    cursor: pointer;
  }

  .nav-responsive .content .header__nav .nav-burger .burger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: white;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: var(--transition);
  }
  
  .nav-responsive .content .header__nav .nav-burger .burger span:nth-child(1) {
    top: 7px;
    transform-origin: left center;
  }
  
  
  .nav-responsive .content .header__nav .nav-burger .burger span:nth-child(2) {
    top: 14px;
    transform-origin: left center;
  }

  .nav-responsive .content .header__nav  .nav-burger .burger.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 2px;
    left: 4px;
  }

  .nav-responsive .content .header__nav  .nav-burger .burger.active span:nth-child(2) {
    transform: rotate(-45deg);
    top: 20px;
    left: 4px;
  }


  
  .nav-responsive .content ul.menu {
    list-style: none;
    padding: 0px;
    margin: 0px;
  }
  
  .nav-responsive .content ul.menu li {
    margin-bottom: calc(var(--spacer) / 2);
  }

  @media (min-width: 576px){
    .nav-responsive .content ul.menu li {
        font-size: 40px;
      }
  }


  .nav-responsive .content ul.menu li a{
    text-decoration: none;
    color: white;
  }

  .nav-responsive .content .action .rs{
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .nav-responsive .content .action .rs div{
    margin-right: 10px;
  }


  /*---- SECTION ACCUEIL ----*/

.section__accueil {
  position: relative;
  overflow: hidden;

}


  .section__accueil .background__container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
 

  .section__accueil .background__container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    
  }

  .section__accueil .content__container{
    position: relative;
    width: 100%;
    padding-top: 103%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  @media (min-width: 576px){
    .section__accueil .content__container{
        padding-top: 60%;
      }
  }

  @media (min-width: 1200px){
    .section__accueil .content__container{
        padding-top: calc(100vh - 11vw - 300px);
      }
  }



  .section__accueil .content__container .subtitle h2{
    color: white;
  }


   .section__accueil .content__container .title h1{
    color: white;
    font-size: 90px;
    z-index: -1;
   }

   @media (min-width: 576px){
    .section__accueil .content__container .title h1{
        font-size: 140px;
      }
  }

  @media (min-width: 1200px){
    .section__accueil .content__container .title h1{
        font-size: 160px;
      }
  }


   .section__accueil .content__container .description{
    margin-top: 18rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 5rem;
   }

   .section__accueil .content__container .description p{
    color: white;
    font-size: 28px;
    width: 70%;
   }

   @media (min-width: 576px){
    .section__accueil .content__container .description p{
        font-size: 32px;
        width: 60%;
    }
  }

  @media (min-width: 1200px){
    .section__accueil .content__container .description p{
        font-size: 36px;
        width: 50%;
       }
  }

  .section__accueil .content__container .description .button__container{
    margin-bottom: 3rem;
  }

   .section__accueil .content__container .description .button__container a {
    color: white;
   }




    /*---- SECTION STUDIO ----*/
   
   .section__studio .scrollTitle__studio{
    background: linear-gradient(
      to right,
      rgb(37, 37, 37) 50%,
      rgb(201, 201, 201) 50%
    );
    background-size: 200% 100%;
    background-position-x: 100%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    text-align: center;
    font-size: 4rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  @media (min-width: 576px){
    .section__studio .scrollTitle{
        background-position-x: 75%;
    }
  }

  @media (min-width: 1200px){
    .section__studio .scrollTitle{
        background-position-x: 70%;
    }
  }

  .section__studio .title p{
    font-size: 25px;
   
  }
  .section__studio .content p{
    font-size: 25px;
  }


  .section__studio .wrapper__rolling {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
    height: 100%;
    padding-top: var(--spacer);
    
  }

  @media (min-width: 576px){
    .section__studio .wrapper__rolling {
       
        padding-top: calc(var(--spacer)*2);
    }
  }

  @media (min-width: 1200px){
    .section__studio .wrapper__rolling {
        
        padding-top: calc(var(--spacer)*4);
    }
  }

  .section__studio .wrapper__rolling .wrapper__rolling__1,.section__studio .wrapper__rolling .wrapper__rolling__2{
    height: 12rem;
  }

  @media (min-width: 576px){
    .section__studio .wrapper__rolling .wrapper__rolling__1,.section__studio .wrapper__rolling .wrapper__rolling__2{
        height: 100%;
    }
  }


  .section__studio .wrapper__rolling .wrapper__rolling__1 .rolling__1,.section__studio .wrapper__rolling .wrapper__rolling__2 .rolling__2{
    display: flex;
    height: 100%;
    padding-left: 0;
  } 

  .section__studio .wrapper__rolling .wrapper__rolling__1 .rolling__1{
    transform: translateX(272px);
    width: 300%;
    height: 100%;
  }

  @media (min-width: 576px){
    .section__studio .wrapper__rolling .wrapper__rolling__1 .rolling__1{
        width: 200%;
        transform: translateX(650px);
      }
  }

  @media (min-width: 1200px){
    .section__studio .wrapper__rolling .wrapper__rolling__1 .rolling__1{
        transform: translateX(1200px);
      }
  }

  .section__studio .wrapper__rolling .wrapper__rolling__2 .rolling__2{
    transform: translateX(-1000px);
    width: 300%;
    height: 100%;
  }

  @media (min-width: 576px){
    .section__studio .wrapper__rolling .wrapper__rolling__2 .rolling__2{
        width: 200%;
        transform: translateX(-1400px);
      }
  }

  @media (min-width: 1200px){
    .section__studio .wrapper__rolling .wrapper__rolling__2 .rolling__2{
        transform: translateX(-2800px);
      }
  }


  .section__studio .wrapper__rolling .rolling__item {
    margin-right: 20px;
    list-style: none;
  }


  .section__studio .wrapper__rolling .rolling__item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


   /*---- SECTION ÉQUIPE ----*/

  .section__team .scrollTitle__team{
    background: linear-gradient(
      to right,
      rgb(37, 37, 37) 50%,
      rgb(201, 201, 201) 50%
    );
    background-size: 200% 100%;
    background-position-x: 100%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    text-align: center;
    font-size: 4rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  @media (min-width: 576px){
    .section__team .scrollTitle{
        background-position-x: 75%;
    }
  }

  @media (min-width: 1200px){
    .section__team .scrollTitle{
        background-position-x: 70%;
    }
  }



  .section__team .team{
    padding-top: 8rem;
    padding-bottom: 8rem;
  }



  .section__team .team .team__members{
    padding-left: 0;
    
  }

  .section__team .team .team__members .member__container{
    list-style: none;
    border-bottom: 1px solid lightgrey;
    position: relative;
    overflow: hidden;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  @media (min-width: 1200px){

    /*.section__team .team .team__members:hover .member__container{
        border-bottom: 0px solid lightgrey;
    }*/

    .section__team .team .team__members .member__container:hover{
        overflow: visible;
      }
  }

  .section__team .team .team__members .member{
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 576px){
    .section__team .team .team__members .member{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
  }

  @media (min-width: 1200px){
    .section__team .team .team__members .member{
        position: relative;
        z-index: -2;
      }

      .section__team .team .team__members .member:hover{
        z-index: 500;
      }
  }

  .section__team .team .team__members .member p:nth-child(1){
    font-size: 25px;
    font-weight: 700;
    
  }


  @media (min-width: 576px){
    .section__team .team .team__members .member p:nth-child(1){
        font-size: 30px;
        
      }
  }

  @media (min-width: 1200px){
    .section__team .team .team__members .member p:nth-child(1){
        font-size: 45px;
        color: lightgrey;
      }

      .section__team .team .team__members li:hover .member p:nth-child(1){
        color: black
      }
  }

  .section__team .team .team__members .member p:nth-child(2){
    font-weight: 700;
  }
  
  @media (min-width: 1200px){
    .section__team .team .team__members .member p:nth-child(2){
        font-size: 45px;
        color: lightgrey;
      }

      .section__team .team .team__members li:hover .member p:nth-child(2){
        color: black
      }
  }


  @media (min-width: 1200px){
    .section__team .team .team__members  .photo{
        position: absolute;
        top: 0;
        left: 0%;
        /*transform: translate3d(-50%, -50%,0);*/
        width: 300px;
        height: 300px;
        opacity: 0;
      }

      .section__team .team .team__members  .photo img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    
      .section__team .team .team__members li:hover .photo{
        opacity: 1;
        z-index: -1;
        
      }
  }


   /*---- SECTION CLIENTS ----*/

   .section__client{
    padding: 6rem 0 6rem 0;
    background: black;
    color: white;
   }

   .section__client .scrollTitle__client{
    background: linear-gradient(
      to right,
      rgb(255, 252, 252) 50%,
      rgb(50, 49, 49) 50%
    );
    background-size: 200% 100%;
    background-position-x: 100%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    text-align: center;
    font-size: 4rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  @media (min-width: 576px){
    .section__client .scrollTitle{
        background-position-x: 75%;
    }
  }

  @media (min-width: 1200px){
    .section__client  .scrollTitle{
        background-position-x: 70%;
    }
  }

  /*--Grid--*/
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    } 

    @media (min-width: 576px){
        .grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 10px;
            grid-row-gap: 10px;
        } 
      }


    .grid__item{
        grid-column: span 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .grid__item img{
        width: 50%;
        object-fit: cover;
    }

    .grid__container{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }


    /*---- SECTION SERVICE ----*/

    .section__service{
        padding:8rem 2rem 8rem 2rem;
        
    }

    .section__service .scrollTitle__service{
        background: linear-gradient(
            to right,
            rgb(50, 49, 49) 50%,
            rgb(201, 201, 201) 50%
        );
        background-size: 200% 100%;
        background-position-x: 100%;
        color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
        font-size: 3.3rem;
        padding-bottom: 4rem;
    }

    @media (min-width: 576px){
      .section__service .scrollTitle__service{
        font-size: 4rem;
      }
    }

    .section__service .col__container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .section__service .service__container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        padding-bottom: 4rem;
    }

    @media (min-width: 1200px){
        .section__service .service__container{
            width: 50%;
        }
      }

      .section__service .service__container .img__container{
        padding-bottom: 2rem;
      }

      .section__service .service__container .img__container svg{
       width: 35px;
       height: 35px;
        object-fit: cover;
      }

      .section__service .line__container{
        padding: 3rem 0 3rem 0;
        max-width: 100vw;
        overflow: hidden;
        
        
      }

      .section__service .line__container .line{
        white-space: nowrap;
        display: flex;
      }

      .section__service .line__container .line .horizontal__loop{
        font-size: 60px;
        text-transform: uppercase;
        font-weight: 700;
        list-style: none;
        padding-right: 2rem;
       
        
      }

      @media (min-width: 576px){
        .section__service .line__container .line .horizontal__loop{
            font-size: 75px;
        }
      }

      @media (min-width: 1200px){
        .section__service .line__container .line .horizontal__loop{
            font-size: 90px;
        }
      }

    /*------------------ TPL CONTACT ------------------*/

    /*---- SECTION CONTACT ACCUEIL ----*/

    .tpl__contact .section__contact__accueil{
      background: black;
      color: white;
      
      
    }

    .tpl__contact .section__contact__accueil .title__container{
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .tpl__contact .section__contact__accueil .title__container .subtitle h2{
      font-size: 1rem;
    }


    .tpl__contact .section__contact__accueil .title__container .title h1{
      font-size: 5rem;
      text-transform: uppercase;
    }

    @media (min-width: 576px){
      .tpl__contact .section__contact__accueil .title__container .title h1{
        font-size: 10rem;
      }
    }

    @media (min-width: 1200px){
      .tpl__contact .section__contact__accueil .title__container .title h1{
        font-size: 13rem;
      }
    }


  .tpl__contact .section__localisation .map {
    transform: translateY(50%);
    opacity: 0;
    -webkit-filter: grayscale(100%); /* Pour les navigateurs Chrome, Safari, Opera */
    filter: grayscale(100%);  
  }


  .tpl__contact .section__contact__form{
    padding: 8rem 2rem 8rem 2rem;
  }

  .tpl__contact .section__contact__form .title__container .subtitle h4{
    font-size: 1rem;
  }

  .tpl__contact .section__contact__form .title__container .title .scrollTitle__form{
    background: linear-gradient(
      to right,
      rgb(50, 49, 49) 50%,
      rgb(201, 201, 201) 50%
    );
    background-size: 200% 100%;
    background-position-x: 100%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 4rem;
  }

  @media (min-width: 576px){
    .tpl__contact .section__contact__form .title__container .title .scrollTitle__form{
      font-size: 6rem;
    }
  }

  @media (min-width: 1200px){
    .tpl__contact .section__contact__form .title__container .title .scrollTitle__form{
      font-size: 8rem;
    }
  }


  /*-------- FORMULAIRE --------*/

  .section__contact__form .form__container {
    padding: calc(var(--spacer)*2) 0 calc(var(--spacer)*2) 0;
    display: flex;
    height: 100%;
    align-items: center;
  }

  @media (min-width: 1200px){
    .section__contact__form .form__container {
      padding: calc(var(--spacer)*4) 0 calc(var(--spacer)*4) 0;
    }
  }

  .section__contact__form .form__container .wpcf7 .wpcf7-form .prenom ,.section__contact__form .form__container .wpcf7 .wpcf7-form .nom ,.section__contact__form .form__container .wpcf7 .wpcf7-form .e-mail, .section__contact__form .form__container .wpcf7 .wpcf7-form .sujet, .section__contact__form .form__container .wpcf7 .wpcf7-form .message{
    padding-bottom: 1rem;
    padding-top: 1rem;
  }

  .section__contact__form .form__container .wpcf7 .wpcf7-form label{
    font-weight: 700;
  }

  .section__contact__form .form__container .wpcf7 .wpcf7-form label span{
   padding-top: 1rem;
   padding-bottom: 1rem;
  }

  .section__contact__form .form__container .wpcf7 .wpcf7-form label span .form-control{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .section__contact__form .form__container .wpcf7 .wpcf7-form label span .form-control:focus{
    color:#212529;
    background-color:#fff;
    border-color:#000000;
    outline:0;
    box-shadow:0 0 0 .25rem rgba(0, 0, 0, 0.25);
    border: none !important;
    
  }

  .section__contact__form .form__container .wpcf7 .wpcf7-form label span input{
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    width: 100%;
    
  }

  .section__contact__form .form__container .wpcf7 .wpcf7-form label span textarea{
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    
  }



.section__contact__form .form__container .wpcf7 .wpcf7-form .message{
margin-bottom: 2rem;
}
  

  .section__contact__form  .form__container .wpcf7 .wpcf7-form .message label{
    width: 100%;
  }

  .section__contact__form .form__container .wpcf7 .wpcf7-form .message label span textarea{
    width: 100%;
    height: 10rem;
  }

  .section__contact__form .form__container .wpcf7 .wpcf7-form .submit{
    margin-bottom: 2rem;
  }

  @media (min-width: 1200px){
    .section__contact__form .form__container .wpcf7 .wpcf7-form .submit{
      margin-bottom: 0rem;
    }
  }

  .section__contact__form .form__container .wpcf7 .wpcf7-form .submit button{
    border: 3px solid black;
    background: white;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    border-radius: 5px;
  }

  .section__contact__form .form__container .wpcf7 .wpcf7-form .submit button span{
    margin: 1rem 2rem 1rem 2rem;
    color: #000000 !important;
    font-weight: 700;
  }


  .section__contact__form .form__container .wpcf7 .wpcf7-form .submit .wpcf7-spinner{
    display: none;
  }


  /*-------- SkIN ALERT WP7 --------*/
  .wpcf7 form .wpcf7-response-output{
    margin-bottom: 2rem! important;
    margin-top: 0 !important;
    padding: 1rem !important;
  }
  .wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450; /* Green */
    background: #46b450;
    color: #fff;
  }
  
  .wpcf7 form.failed .wpcf7-response-output,
  .wpcf7 form.aborted .wpcf7-response-output {
    border-color: #dc3232; 
    background: #dc3232;
    color: #fff;/* Red */
  }
  
  .wpcf7 form.spam .wpcf7-response-output {
    border-color: #f56e28; 
    background: #f56e28;
    color: #fff;/*/* Orange */
  }
  
  .wpcf7 form.invalid .wpcf7-response-output,
  .wpcf7 form.unaccepted .wpcf7-response-output,
  .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ffb900;
    background: #ffb900;
    color: #fff;
    border-radius: 10px;
     /* Yellow */
  }



  .section__contact__form .information__container{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-items: start;
  }

  @media (min-width: 576px){
    .section__contact__form .information__container{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .section__contact__form .information__container .information{
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 2rem;
  }

  .section__contact__form .information__container .information svg{
    height: 24px;
    width: 24px;
  }

  @media (min-width: 1200px){
    .section__contact__form .information__container .information svg{
      height: 30px;
      width: 30px;
    }
  }

  .section__contact__form .information__container .information a{
    text-decoration: none;
    color: black;
    padding-top: 1rem;
    font-weight: 700;
  }

  @media (min-width: 1200px){
    .section__contact__form .information__container .information a{
      font-size: 25px;
    }
  }

  .section__contact__form .information__container .information p{
    margin: 0;
    padding-top: 1rem;
    font-weight: 700;

  }

  @media (min-width: 1200px){
    .section__contact__form .information__container .information p{
      font-size: 25px;
    }
  }

  .section__contact__form .information__container .information .small{
    font-size: 12px;
    padding: 0;
    font-weight: 400;
  }


  .section__contact__form .information__container #mail{
    transform: translateX(90vw);
  }

  .section__contact__form .information__container #adress{
    transform: translateY(90vh);
  }

  .section__contact__form .information__container #phone{
    transform: translateX(-90vw);
  }






      /*---- SECTION FOOTER ----*/

    .section__footer{
        background: black;
        color: white;
        padding: 8rem 2rem 2rem 2rem;
    }

    .section__footer .title__container h3{
        font-size: 1rem;
    }

    

    .section__footer .title__container a{
        font-size: 5rem;
        color: white;
        text-decoration: none;
    }

    @media (min-width: 576px){
        .section__footer .title__container a{
            font-size: 8rem;
        }
      }

      @media (min-width: 1200px){
        .section__footer .title__container a{
            font-size: 11rem;
        }
      }


      .section__footer .content__container{
        display: flex; 
        flex-direction: column;
        align-items: center;
        padding-top: 5rem;
      }

      @media (min-width: 576px){
        .section__footer .content__container{
            display: flex; 
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding-top: 5rem;
          }
      }

      .section__footer .content__container .rs__container ul{
        display: flex;
        align-items: center;
      }

      .section__footer .content__container .rs__container ul li{
        list-style: none;
      }

      .section__footer .content__container .rs__container ul li a {
        color: white;
        text-decoration: none;
        padding-right: 2rem;
        
      }