footer{
  background-color: #F9F7F7;
}
.newsletter-block-left{
  .newsletter-input{
    background-image: url('/assets/images/news.svg');
    padding-left: 30px;
    background-repeat: no-repeat;
    background-position-x: 5px !important;
    background-position: left center;
    outline: 0;
    border-radius: 0;
    max-width: 288px;
    width: 100%;
    border: 2px solid transparent;
    background-color: #fff;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    height: calc(2.25rem + 2px);
  }
 
  button[type="submit"] {
    // padding: 0 19px;
    color: #fff;
    background-color:#000000;
    font-family: 'Jost';
    font-weight: 600;
    font-size: 14px;
    min-width: 111px;
    border: none;
    // border-color: transparent;
    cursor: pointer;
    max-width: 111px;
    width: 100%;
  }
}
//  Start Footer 
@media (min-width: 993px){
    footer{
        background: #000000;
        color: #FFFFFF;
        .primary_title{
            font-weight: 300;
            font-size: 20px;
            line-height: 29px;
            text-transform: uppercase;
            color: #EE7D00;
            padding: 0px;
        }
        .secondary_title{
            font-weight: 300;
            font-size: 16px;
            line-height: 23px;
            text-transform: uppercase;
            color: #EE7D00;
        }
        .capitalize{
          text-transform: capitalize;
        }
        .title_mobile{
         display: none;
        }
        .paiement_ {
          padding-top: 15px;
          padding-bottom: 3px;
       }
       .card_paiement{
        padding-bottom: 8px;
       }
    }

     footer .topNav{
        background-color: #F9F7F7;
      .topnav_footer{
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 1164px;
        margin: 0 auto;
        padding: 34px 0px;

        ._col{
          flex: 1;
        .socail_media{
          display: flex;
        .icon{
            width: 38px;
            height: 38px;
            margin-right: 6px;
          }
         
          }
          .primary_title{
            margin-bottom: 8px;
          }
          .socail_media .icon svg:hover{
            transform: translateY(-5px);
            transition: .3s;
          }
         
        }
        ._col:nth-child(1) {
          flex-grow: 2;
          max-width: 407px;
       }
        ._col:nth-child(2) {
          flex-grow: 2;
          max-width: 557px;  
        }
       }
       .topnav_footer a{
        position: relative;
       }
       .topnav_footer ul{
        li{
          color: #000000;
        }
      }
       .topnav_footer a:hover::after{
        transform: scaleX(1);
        transform-origin: left;
       }
 
       .topnav_footer ul a::after {
        content: "";
        background-color: #000000;
        border-radius: 3px;
        bottom: 0;
        height: 1px;
        left: 0;
        position: absolute;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .3s ease-in-out;
        width: 100%;
      }
      .topnav_footer ul .first-num::after{
        width: 95%;
      }
     }
     
     footer > nav {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto;
        max-height: 288px;
        max-width: 1164px;
        font-size: 14px;
        padding-top: 2.1rem;
        a{
          color: #FFFFFF !important;
          position: relative;
        }
        a::after {
          content: "";
          background-color: #ffffff;
          border-radius: 3px;
          bottom: 0;
          height: 1px;
          left: 0;
          position: absolute;
          transform: scaleX(0);
          transform-origin: right;
          transition: transform .3s ease-in-out;
          width: 100%;
        }
        a:hover::after {
          transform: scaleX(1);
          transform-origin: left;
        }
        .itineraire a:after{
          content: none;
        }
        ul{
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            text-transform: uppercase;
            li{
                padding: 0 0 11px 0;
            }
            .text-{
                text-transform: capitalize;
                padding: 0;
            }
            
        }
        ._contact{
            padding-left: 23px;
            .itineraire{
              padding-bottom: 24px;
              a{
                font-weight: 500;
                text-decoration-line: underline;
                color: #EE7D00 !important;
              }

            }
        }
        ._contact::after{
            content: "";
            height: calc(73% - 15px);
            position: absolute;
            border-color: white;
            border-left-color: white;
            border-left: 1px solid #626262;
            top: 27px;
            margin-left: -23px;
        }
      }
      footer .footer-navigation ._col {
        flex: 1;
       
      }
      footer  .footer-navigation ._col:nth-child(1) {
        max-width: 354px;
        flex-grow: 2;
     }
       footer .footer-navigation ._col:nth-child(2) {
         max-width: 435px;
         flex-grow: 2;
      }
      footer .bottom_footer{
        border-top: solid 1px #515151;
        text-align: center;
        padding: 13px;
        span{
            text-transform: uppercase;
        }
      }
   }
// end

  //  Start Footer mobile
@media  (max-width:993px) {
  .topnav_footer{
    padding: 0px 16px;
    .primary_title{
      font-weight: 300;
      font-size: 20px;
      line-height: 29px;
      text-transform: uppercase;
      color: #EE7D00;
      padding: 12px 0px;
    }
    .newsletter-block-left{
      .newsletter-input{
        // max-width: 217px;
        background-color:#fff;
       }
    }
  }

    .footer-navigation{
      color: #FFFFFF;
      background: #000000;
      padding: 18px 16px;
      a{
          color: #FFFFFF;
      }
      ._col{
          .title_mobile,.primary_title,.secondary_title {
            padding-bottom: 12px !important;
           
          }
          .title_mobile{
            font-weight: 600;
            color: #fff;
          }
          .itineraire{
            padding-left: 0px !important;
            a{
              color: #EE7D00;
            }
         
          }
        }
    }
    .topnav_footer{
      .socail_media {
        position: absolute;
        position: relative;
        display: flex;
        background-color: transparent;
        z-index: 12;
        padding-bottom: 7px;
        .icon{
          padding: 0 6px;
        }
        }
    }


    .show , .title_mobile{
       color: #EE7D00;
       font-weight: 300;
       width: 100%;
       display: block;
       cursor: pointer;
       position: relative;
       font-family: 'Jost';
        font-size: 16px;
        line-height: 23px;
        text-transform: uppercase;
    }
    footer nav .links {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease-in-out;
        li{
          font-size: 14px;
            line-height: 20px;
            text-transform: uppercase;
            padding-bottom: 9px;
        }
      }   
      footer nav .links a{
        max-height: 0;
      
      }   
      
      
    footer nav .title_mobile.active + .links{
        max-height: 600px;
    }
    footer nav .show.active + .links{
        max-height: 600px;
    }
    footer nav  .title_mobile.active::after, .show.active::after {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='17' height='1' fill='none' viewBox='0 0 17 1'%3e%3cpath fill='%23fff' d='M0 0h17v1H0z'/%3e%3c/svg%3e ");        height: 2px;
        top: calc(50% - 1px);
      }
    footer nav  .title_mobile::after, .show::after {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none' viewBox='0 0 17 17'%3e%3cpath fill='%23fff' d='M16.336 7.836H9.164V.664a.664.664 0 1 0-1.328 0v7.172H.664a.664.664 0 1 0 0 1.328h7.172v7.172a.664.664 0 1 0 1.328 0V9.164h7.172a.664.664 0 1 0 0-1.328Z'/%3e%3c/svg%3e");  
        content: "";
        cursor: pointer;
        height: 17px;
        left: calc(100% - 17px);
        position: absolute;
        top: calc(50% - 10px);
        width: 17px;
      }

      footer .bottom_footer{
        padding-top: 18px;
        border-top: 1px solid  #515151;;
        p{
          text-align: center;
          font-weight: 400;
          font-size: 13px;
          line-height: 19px;
          color: #FFFFFF;
          span{
            text-transform: uppercase;
          }
        }
      }
    
}