@media screen and (max-width: 1260px) {
   .banner .wrapper .right{max-width: 100% !important; left: 0 !important;}
}
@media screen and (max-width: 900px) {
   .contact ul{display: none !important}
   .banner .wrapper .left{max-width: 100% !important}
   .banner .wrapper .right video{width: 100%}
   .navigation-header li{  margin: 5px 3em !important;}
   .main-content .wrapper .right{left: 0 !important;}
}

@media screen and (max-width: 750px) {
   .newsletter h3{width: 100% !important}
   .newsletter p{width: 100% !important}
   .newsletter{padding: 2em !important;}
   footer .nav-section h3, footer .contact-section h3{text-align: center !important;}
   footer .logo-section{margin: 1em 0 !important;}
   footer{padding: 0 !important}
   .btn-blue{display: block; width: 66%; margin: 0 auto;}
}
@media screen and (max-width: 550px) {
   .pin-col-2{width: 100% !important}
   .navigation-header li {
      display: block !important;
      width: 100% !important;
      padding: 0 10px;
      margin: 5px 0 !important;
   }
   .page-content{overflow-x: auto;}
   .of-container{min-width: 500px !important}
   .header-area{
      padding-bottom: 0px !important;
   }
   .header-area .social-medias ul{display: none !important}
   .burgerMenu{display: block !important; padding-top: 8px;}
   .burgerMenu i{    font-size: 3em;}
   .navigation-header{margin-top: 1em !important;}
   .pin-headnav-cont{display: none}
   .page-header{height: 100px !important}
   .page-header h1 {
      font-size: 2em !important;
      margin-top: 10px !important;
   }

   .header-area .logo{text-align: left !important; }
   .header-area .wrapper{margin-top: -6em !important}
}

@media screen and (max-width: 450px) {
   .services-content .service-list ul li{text-align: center !important;
    width: 100% !important;}
    .services-content .service-list ul li h4{width: 100% !important}
    footer .nav-section, footer .contact-section{ margin-right: 0 !important}
    .header-area .logo{max-width: none !important;}
}