/* ===========================================
   01. TABLET (<=1024px)
============================================== */
@media (max-width: 1024px){

      .topstrip {
    display: block;
  }

  .topstrip .container {
    flex-wrap: wrap;
    gap: 8px;
  }

  .topstrip small {
    font-size: 12px;
    line-height: 1.2;
  }

  .social a {
    width: 32px;
    height: 32px;
  }

  /*============nav============*/

  .row-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }


  .nav-icon {
    display: block;
    cursor: pointer;
  }

  .nav-menu {
    width: 100%;
    position: fixed;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    left: 0;
    opacity: 0;
    gap: 45px;
    transition: all .4s ease-in-out;
    top: 0;
    transform: translateY(-100%);
    height: calc(100vh - 0px);
  }

  .nav-menu.active {
    top: 0;
    z-index: -5;
    opacity: 1;
    background: #FFF;
    transform: translateY(0);
  }

  .nav-menu ul {
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin: 0;
    padding: 0;
  }

  .nav-menu li a {
    font-size: 15px;
    font-weight: 600;
    color: #000;
  }

  /*==============NAVEND==============*/

  .grid--3{
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-full-with{
    grid-template-columns: 1fr;
  }

  .description-full-with-global,
  .container-description-about {
    padding: 40px 15px 80px 15px;
  }

  .description-full-with-global,
  .description-full-with-custom{
    width: 100%;
    text-align: center;
  }

  .title-block{
    text-align: center;
  }

  .description-full-with-global .btn-hero,
  .container-description-about .btn-hero{
    justify-content: center;
    align-items: center;
  }

  .steps-general .grid--3{
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .logostrip{
    grid-template-columns: repeat(3, 1fr);
  }

  .block-procecc,
  .grid--2{
    grid-template-columns: 1fr;
  }

  .pic-emergency {
    margin-top: -25px;
  }

  .block-description{
    text-align: center;
  }

  .pic-parts img,
  .pic-quick-book picture, 
  .pic-quick-book img, 
  .pic-customer picture, 
  .pic-customer img{
    height: 350px;
  }

  .container-description-full-with{
    order: 2;
  }

  .content-process{
    order: 2;
  }
  .grid--4{
    grid-template-columns: repeat(2, 1fr);
  }

  .media-process img{
    height: 300px;
  }

  .content-process {
    padding: 30px;
  }

  .btn-cta{
    justify-content: center;
  }

  .u-list-dots{
    text-align: left;
  }

  .general-parts-container{
    gap: 35px;
  }

  .block-description-parts{
    order: 2;
  }

  .general-question-container{
    gap: 60px;
  }

  .general-footer-container{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .padding--section{
    padding: 70px 0;
  }

  .real-works{
    padding: 50px 0 70px 0;
  }

  .line{
    display: none;
  }

  .video video {
    height: 350px;
  }

  .services{
    padding: 40px 0 70px 0;
  }

  /*========================= 
  CONTACT 
  ==========================*/
  .general-hero-container{
    gap: 50px;
  }

  .contact__hero__bg,
  .contact-hero::before {
    height: 920px;
  }

  .general-contact-info{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .item-title-contacts{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

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

}

/* ===========================================
   02. MOBILE (<=768px)
============================================== */
@media (max-width: 768px){

  .logostrip{
    grid-template-columns: repeat(2, 1fr);
  }

  .issues,
  .grid--3{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .work-card picture, .work-card img {
    height: 250px;
  }

  .service__icon {
    height: 190px;
  }

  .section-foot{
    margin-top: 30px;
  }

  .description-full-with-global .btn-hero,
  .container-description-about .btn-hero{
    flex-direction: column;
  }

  .btn-hero{
    flex-direction: column;
  }

  .hero-slogan-block {
    max-width: 100%;
    padding: 70px 0 50px;
  }

  h1 {
    font-size: 36px;
    line-height: 45px;
  }

  .hero h1{
    line-height: 50px;
    font-size: 37px;
    margin-bottom: 16px;
  }

  .hero__shade {
    background: rgba(15, 30, 43, 0.75);
   }

   h2 {
    font-weight: 700;
    font-size: 30px;
    line-height: 41px;
   }

   .topstrip .container{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
   }

   .topstrip {
     padding: 12px 0;
    }

    .emergency-description {
        padding: 30px 25px;
        border: 7px solid #f5f3ee;
    }

    .section-foot{
        flex-direction: column;
        align-items: center;
    }

    #reviews .carousel {
        grid-auto-columns: 100%;
    }

    .pic-service-areas img {
        max-width: 425px;
        height: 400px;
    }

    .pic-emergency img {
        max-width: 100%;
        height: 430px;
    }

    .pic-service-areas{
        display: flex;
        justify-content: center;
    }

    .general-areas-container{
        gap: 30px;
    }

    .btns-stick{
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .footer{
      margin-bottom: 75px;
    }




}