@media (max-width: 767px) and (orientation: portrait) {
  header{
    position: fixed;
    top:0;
  }
  nav{

  }
  nav > ul{
    position: fixed;
    top: 0;
    width: 100%;
    justify-content: space-evenly;
  }
  nav > ul > li > a .mobile-icon{
    display: inline;
  }
  nav > ul > li > a .link-text{
    display: none;
  }
  #hero{
    height: auto;
  }
  .hero-content{
    width: 100%;
  }
  .hero-content-back{
    flex-direction: column;
    position: relative;
    min-height: 100vh;
    height: auto;
    border-radius: unset;
  }
  .hero-content-back .big-head{
    width: 100%;
    position: relative;
    min-height: 100vh;
    justify-content: space-evenly;
  }
  .hero-content-back .big-head h1{
    font-size: 70px;
  }
  .hero-content-back .big-head h2{
    font-size: 36px;
    margin-top: 30px;
  }
  .big-head-text{
    min-height: 35%;
    font-size: 2.1vh;
    text-align: justify;
  }
  .big-some-info{
    width: 100%;
    padding-bottom: 20px;
  }
  .hero-content-back .fancy-link{
    font-size: 22px;
  }
  .big-some-info-line{
    padding: 20px 20px 10px 20px;
  }
  .big-some-info-line-head{
    gap: unset;
  }
  .big-some-info-line-head img{
    width: 33%;
  }
  .big-some-info-line h2{
    font-size: 34px;
  }
  .big-some-info-line p{
    font-size: 2vh;
    text-align: justify;
  }
  .big-some-info-line .call-us{
    font-size: 30px;
  }

/* ABOUT */
  #about{
    padding: 30px 10px;
  }
  .head{
    flex-direction: column;
    width: 100%;
    margin: 0;
  }
  .head-logo{
    min-width: unset;
    width: 100%;
  }
  .head-text{
    width: 100%;
  }
  .head-text h2{
    padding: 0 10px 20px 10px;
  }
  .more{
    flex-direction: column;
    margin-top: 20px;
  }
  .more-item{
    width: 100%;
    min-width: unset;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .more-item h2{
    min-height: unset;
    font-size: 36px;
  }
  .more-item-icon{
    width: 100%;
  }
  .more-item-icon>svg{
    width: 100px;
    height: 100px;
  }
  .more-item-icon>svg>path{
    transform: scale(0.1, 0.1);
  }
  .more-item-text{
    width: 100%;
    text-align: justify;
  }
  .more-item-text p{
    padding: 0 20px;
  }

/* PRODUCTS */
  #products{
    height: auto;
  }
  #products>h2{
    margin-top: 20px;
  }
  .product-list{
    flex-direction: column;
    flex-wrap: nowrap;
    height: auto;
    justify-content: unset;
    gap: 25px;
  }
  .product-item{
    width: 100%;
    max-height: 75vh;
  }


/* CONTACTS */
  #contacts{
    padding: 30px 10px;
    flex-direction: column;
    height: auto;
  }
  #contacts .text-info h2{
    margin-top: 30px;
  }
  .text-info{
    width: 100%;
    gap: 20px;
  }
  #contacts .text-info>div{
    width: 100%;
  }
  .contacts-text{
    font-size: 34px;
  }
  .place-map{
    width: 95%;
    height: auto;
    padding: 0 10px 20px 10px;
  }

/* FOOTER */
  footer{

  }
  .footer-content{

  }
  .company-info{
    flex-direction: column;
    gap: 30px;
  }
  .off-info{
    width: 100%;
  }
  .important-info{
    width: 100%;
  }
  .working-hours{
    width: 100%;
  }
}


@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-content-back{
    flex-direction: column;
    height: auto;
  }
  .hero-content-back .big-head{
    width: 100%;
    padding-bottom: 20px;
  }
  .big-head-text{
    font-size: 1.5vw;
    margin-top: 0;
    min-height: unset;
  }
  .big-some-info{
    width: 100%;
  }
  .hero-content-back .fancy-link{
    margin-bottom: 20px;
  }
  .big-some-info-line h2{
    font-size: 40px;
    align-self: center;
  }
  .more-item{
    min-height: unset;
    height: auto;
  }
  .product-item{
    width: 49%;
    max-height: 46%;
    margin-top: 20px;
  }
  #contacts{
    flex-direction: column;
    height: 45%;
    gap: 20px;
  }
  .text-info{
    width: 100%;
    height: 50%;
    min-height: 60vh;
  }
  .place-map{
    width: 100%;
    height: 50%;
    min-height: unset;
    padding: 0
  }
  .place-map iframe{
    padding: 0 20px 20px 20px;
    width: calc(100% - 40px);
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
  .hero-content-back{
    flex-direction: column;
    height: auto;
  }
  .hero-content-back .big-head{
    width: 100%;
    padding-bottom: 20px;
  }
  .big-head-text{
    font-size: 1.5vw;
    margin-top: 0;
  }
  .big-some-info{
    width: 100%;
  }
  .hero-content-back .fancy-link{
    margin-bottom: 20px;
  }
  #hero{
    height: auto;
  }
  .big-some-info-line h2{
    font-size: 40px;
    align-self: center;
  }
  .more-item{
    min-height: unset;
    height: auto;
  }
  #products{
    height: auto;
  }
  .product-item{
    width: 49%;
    max-height: 46%;
  }
  #contacts{
    flex-direction: column;
    height: 45%;
  }
  .text-info{
    width: 100%;
    height: 50%;
    min-height: unset;
  }
  .place-map{
    width: 94%;
    height: 50%;
    min-height: unset;
  }
}