/* Responsive (Mobile/Tablet)
   Extracted from style.css to keep main stylesheet lean
*/

@media (max-width: 1200px) {
  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Blog grid: 2 columns on tablets */
  .blog-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  /*html, body { overflow-x: hidden; }*/
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
  .site-header {
    height: auto;
    min-height: 64px;
  }
    #page{
        padding-top: 85px;
    }
  .header{
      height: 85px;
  }
    .front-video-banner video{
        width: initial;
        height: 400px
    }
    #page .slider-description-wrap{
        width: 90%
    }
  .header__lang{
      display: none;
  }
  .logo-link{
      display: block;
      line-height: 0;
  }
  .navbar {
    display: none;
  }
  /*.navbar .menu {*/
  /*  display: flex;*/
  /*  flex-wrap: wrap;*/
  /*  gap: 12px;*/
  /*}*/
  .logo {
    width: 80px;
    height: auto;
  }
  /* Hide secondary header elements on small screens */
    .header__contact{
        width: initial;
    }
  .header__contact-number {
      display: none;
  }
    .header-right {
        gap: 15px;
    }
    .header__contact-icon {
        width: 24px;
        height: 24px;
    }
  .header__cta {
      margin: 0;
      padding: 10px;
      width: inherit;
  }
    .mobile-menu-button{
        display: block;
        background: url("./img/mobile-menu-icon.png") no-repeat center center;
        width: 30px;
        height: 16px;
    }
    .mobile-menu{
        position: fixed;
        width: 80%;
        top: 0;
        left: 0;
        bottom: 0;
        background: #31373f;
        color: #ffffff;
        z-index: 600;
        padding: 30px 20px 0 15px;
        display: flex;
        flex-direction: column;
        gap: 40px;
        margin-left: -80%;



        .navbar{
            display: flex;
            margin: 0;
            justify-content: start;

        }
        .navbar .menu{
            display: flex;
            flex-direction: column;
            gap: 25px;
            text-align: left;
            align-items: start;
        }
        .header__lang{
            display: block;
        }
        .header__contact-number{
            display: block;
        }
        .navbar .menu > li > a{
            text-align: left;
            color: #ffffff;
        }
        .mobile-menu-close{
            position: absolute;
            width: 30px;
            height: 30px;
            background: url("./img/menu-close.png") no-repeat center center;
            right: 10px;
        }
        .lang_wrap{
            display: flex;
            gap: 13px;
        }
        .header__lang-toggle {
            background: transparent;
            border: 1px solid #ffffff;
        }
        .header__lang-toggle a{
            color: #ffffff;
        }
        .header__lang-toggle.current {
            border: 1px solid #0e7b17;
        }
        .header__lang-toggle.current a{
            color: #0e7b17;
        }
        .header__lang:hover {
            margin: 0;
        }
        .header__contact-number a{
            color: #ffffff;
        }
    }
    .mobile-menu.open{
        margin-left: 0;
    }
    /* Blog cards: 1 column */
  .blog-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .blog-item { min-height: 240px; }
  .blog-item .blog-item-text-wrap { padding: 0 16px 16px; gap: 12px; }
  .blog-item-title { font-size: 20px; line-height: 26px; }
  .blog-item-more { font-size: 13px; }

  /* Single post */
  .single-hero { min-height: 260px; padding: 50px 0; }
  .single-hero__title { font-size: 28px; line-height: 36px; }
  .single-hero__date { font-size: 16px; }
  .single-content { padding: 50px 0 60px; }
  .single-article .entry-content { font-size: 16px; }

  /* Home banner */
  .front-video-wrap .slider-description-wrap {
    font-size: 24px;
    line-height: 33px;
    margin-top: 40px;
    text-align: right;
  }
    #page .slider-button{
        margin-top: 30px;
    }
    .stats{
        grid-template-columns: 1fr;
        padding-left: 50px;
        gap: 35px;
    }
    .stats-wrap{
        margin: 40px 0;
    }
    .about__inner{
        flex-direction: column;
    }
    .about__img{
        border-radius: 0;
    }
    .about__media{
        margin:0 -15px;
    }
    .benefits__grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .benefit-item {
        padding: 30px 15px 0;
        gap: 20px;
        height: 295px;
        background-size: cover!important;
    }
    .benefit-item__title {
        font-size: 16px;
    }
    .benefit-item__text {
        font-size: 14px;
    }
    .benefit-item__image{
        height: 70px;
    }
    .services .container {
        padding: 0;
    }
    .services__header {
        margin: 0 auto 40px;
    }
    .services__grid-inner {
        grid-template-columns: 1fr;
        gap: 23px;
    }
    .locations {
        padding: 50px 0 0;
    }
    .locations-wrap {
        width: 100%;
    }
    .locations-map{
        position: relative;
        left: 0;
        margin: 0;
    }
    .drive-form-wrap{
        min-height: initial;
        padding-top: 200px;
        background-size: auto 400px;
        background-repeat: no-repeat;
    }
    .drive-form .container{
        padding: 0;
    }
    .drive-form-body{
        position: relative;
        width: initial;
        box-sizing: border-box;
        bottom: initial;
        left: initial;
        margin: 0 20px;
        padding: 40px 20px;
    }
    .form-parts {
        grid-template-columns: 1fr;
        gap: 70px;
    }
    .form-big-title{
        width: 100%;
    }
    .drive-form {
        margin-bottom: 20px;
    }
    .customer-form {
        padding: 20px 0 25px;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    .customer-form-wrap {
        padding: 10px 0;
    }
    .customer-form-parts {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .customer-form-grid {
        grid-template-columns: 1fr;
    }
    .footer__top {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding: 0 0 40px;
    }
    .footer {
        padding: 40px 0 10px;
    }
    .footer__brand {
        margin: 10px auto 25px auto;
    }
    .footer__content {
        gap: 30px;
        grid-column: 1 / 3;
    }
    .footer__contacts{
        grid-column: 1 / 3;
    }
    .footer__tagline {
        margin: 0 20px 20px;
    }
    .footer__bottom {
        align-items: center;
        padding-top: 24px;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }
    .box-shadow{
        display: none;
        background: rgba(0, 0, 0, 0.70);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        bottom: 0;
        z-index: 550;
    }
    .box-shadow.active{
        display: block;
    }
    .services-terms-body{
        grid-template-columns: 1fr;
    }
    .page-content-wrap{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .page-top-line h1{
        font-size: 24px;
        line-height: 33px;
        width: 80%;
    }
    .content-small-title{
        font-size: 32px;
        line-height: 39px;
    }
    .page-top-line {
        height: 250px;
        align-items: center;
    }
    .page-content {
        margin: 40px 0;
    }
    .services-page-block .container{
        padding: 0 15px;
    }
    .terms-title {
        font-size: 32px;
        line-height: 39px;
        margin-bottom: 50px;
        font-weight: 500;
    }
    .services-terms {
        padding: 50px 0;
    }
    .services-terms-body {
        gap: 70px;
        padding: 0 40px 0 80px;
    }
    #faq .sp-easy-accordion
    {
        padding: 0 0;
    }
    .faq-title {
        font-size: 32px;
        line-height: 39px;
        margin-bottom: 50px;
    }
    #faq .sp-easy-accordion>.sp-ea-single>.sp-collapse>.ea-body {
        padding: 0 20px 20px 30px;
    }
    #faq .sp-easy-accordion>.sp-ea-single>.ea-header a {
        padding: 30px 0;
    }
    .services-faq {
        padding: 40px 0;
    }
    .coverage-page .container {
        padding: 0;
    }
    .directions-wrap{
        position: relative;
        top: inherit;
        right: inherit;
        width: 100%;
    }
    .directions-body {
        padding: 40px 20% 40px 40%;
        margin: 0 auto;
    }
    .coverage-map{
        height: initial;
    }
    .coverage-contact {
        flex-direction: column;
        height: initial;
        padding: 30px 15px 60px 15px;
        gap: 40px;
    }
    .coverage-contact-title {
        font-size: 32px;
        line-height: 39px;
        font-weight: bold;
        margin-bottom: 40px;
    }
    .coverage-contact-desc {
        font-size: 16px;
    }
    .process-item .process-number {
        font-size: 64px;
        line-height: 60px;
    }
    .process-item .process-title {
        color: #000000;
        font-size: 20px;
        line-height: 20px;
        gap: 10px;
    }
    .process-item.item-1{
        top:-80px;
        left: 0;
    }
    .process-item.item-2{
        top:10%;
        right: 0;
    }
    .process-item.item-4{
        top: 60%;
        right: 0;
        left: inherit;
    }
    .process-item.item-5{
        top: 80%;
        left: 0;
    }
    .process-item.item-3{
        top:30%;
        left: 0;
    }
    .process-map {
        padding-top: 0px;
        padding-bottom: 200px;
        margin-bottom: 80px;
        margin-top: 130px;
    }
    .process-item {
        width: 140px;
        padding: 0 10px 10px 10px;
    }
    .process-image{
        max-width: 120%;
        margin: 0 -10%;
    }
    .process-page{
        overflow: hidden;
    }
    .contact-page-wrap {
        grid-template-columns: 1fr;
        padding: 40px 0;
        gap: 30px;
        margin-right: 0;
    }
    .contact-page .left-block {
        padding:  10px 5px 20px 15px;
        box-shadow: none;
        margin-top: 0;
    }
    .contact-form {
        background: #e6eaf2;
        padding: 40px 50px 40px 50px;
    }
    .socials {
        gap: 13px;
        margin-top: 40px;
        margin-right: auto;
        align-items: center;
        justify-content: start;
    }
    .contact-page .right-block{
        margin: 0 -15px;
    }
    .services-card_button{
        position: absolute;
        width: 50px;
        height: 50px;
        bottom: 40px;
        left: 40px;
        background: #009148 url("./img/review-right.png") no-repeat center center;
        border-radius: 50%;
    }
    .about-page-content-wrap {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .about-page-content-wrap .content-small-title {
        margin-bottom: 20px;
    }
    .about-stats-wrap {
        padding: 30px 0 40px;
        background-size: cover ;
    }
    .about-stats-title, .our-team-title {
        font-size: 32px;
        line-height: 39px;
        margin-bottom: 20px;
    }
    .our-team .container{
        margin: 0;
        padding: 0;
    }
    .about-documents-wrap{
        grid-template-columns: 1fr;
    }
    .our-team {
        padding: 50px 0 20px;
    }
    .about-documents-title {
        font-size: 32px;
        line-height: 39px;
        margin-bottom: 20px;
    }
    .documents-images-wrap .wp-gallery {
        gap: 10px;
    }
    .services__btn {
        padding: 10px 70px;
    }
    .review {
        padding: 10px 0 30px;
        background-size: cover;
    }
    .review-wrapper {
        margin: 0 10px;
    }
    .review .strong-view.controls-type-sides-outside {
        padding: 0 10px;
    }
    .review .strong-view.controls-style-buttons3 .wpmslider-controls-direction a.wpmslider-next {
        right: -35px;
    }
    .review .strong-view.controls-style-buttons3 .wpmslider-controls-direction a.wpmslider-prev {
        left: -35px;
    }
    .documents-page-images-wrap {
        grid-template-columns: 1fr;
        gap: 50px;
        margin: 0;
    }
    .blog-page {
        padding: 50px 0 50px;
    }
    .blog-title {
        margin: 0 0 50px;
        font-size: 32px;
        line-height: 39px;
    }
    .services__card {
        height: 100vw
    }
    .about-stats-desc {
        margin: 0 5% 70px;
    }
    .contact-block-item {
        grid-template-columns: 60px 1fr;
        gap: 20px;
    }
    .contact-block-contact a{
        font-size: 22px;
    }
    .contact-block-contact {
        font-size: 20px;
        line-height: 26px;
    }
    #our-team .our-team-wrapper .flexslider .slides li{
        margin-right: 10px !important;
    }

}