@media only screen and (max-width: 1240px) {
  /* BANNER */

  .navbar {
    width: 100%;
  }

  .navbar ul li {
    margin: 0 10px;
  }

  /* SERVICED CARS */

  .serviced div {
    margin-left: 0;
    margin-right: 40px;
  }

  /* OFFERED SERVICES */

  .offers {
    padding-bottom: 80px;
  }
}

@media only screen and (max-width: 920px) {
  .navbar .options {
    display: none;
  }

  .menu-wrapper {
    display: initial;
  }

  .menu {
    z-index: 4;
  }

  .menu-board {
    z-index: 3;
  }

  .textAboutUs h3 {
    font-size: 37px;
    margin-bottom: 50px;
  }

  .about-us .tile {
    width: 600px;
  }

  .offers .tile h3 {
    bottom: 70%;
  }
  
  .offers .tile .btn {
    bottom: 45%;
    opacity: 1;
  }

  .contact-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px; /* Задає більшу відстань між іконками */
  }

  .contact-info, .location, .working-hours {
    width: 80%;
  }

  .contact-info h3, .location h3, .working-hours h3 {
    font-size: x-large;
  }

  .contact-info p, .location p, .working-hours p {
    font-size: large;
  }
}

@media only screen and (max-width: 720px) {

  /* NUMBER OF CARS WE SERVICED */
  .serviced {
    width: 80%;
    margin-top: 30%;
    margin-bottom: 30%;
    display: flex;
    flex-direction: column; /* Змінюємо на column */
    align-items: center; /* Центруємо по горизонталі */
  }

  /* MAKING TILES ABOUT US SMALLER DUE TO SCREEN SIZE */

  .about-us .tile{
    width: 85%;
  }

  /* SERVICESINTRODUCTION ALSO MUST HAVE SMALLER FONT SIZE WITH SMALLER SCREENS */
  
  .servicesIntroduction h3 {
    font-size: 40px;
  }
  
  .servicesIntroduction p {
    font-size: 20px;
    margin: auto;
  }
  
}

@media only screen and (max-width: 630px) {
  .textAboutUs {
    width: 70%;
  }

  .textAboutUs h3{
    font-weight: 800;
    width: 90%;
  }

  .exampleInformation h3 {
    font-size: 50px;
  }
  
  .exampleInformation p {
    font-size: 25px;
  }
}

@media only screen and (max-width: 500px) {
  .banner .navbar .social i {
    display: none;
  }

  .textAboutUs {
    width: 80%;
  }

  .textAboutUs h3{
    font-weight: 800;
    width: 100%;
  }

  .textAboutUs p {
    font-size: large;
  }

  .exampleInformation h3 {
    font-size: 40px;
  }
}

@media only screen and (max-width: 425px) {

  .offers .tile {
    width: 95%;
  }

  .exampleInformation h3 {
    font-size: 30px;
  }
  
  .exampleInformation p {
    font-size: 15px;
  }

  .contacts .callUs h3 {
    font-size: 50px;
  }
  
  .contacts .callUs p {
    font-size: 20px;
  }

}

@media only screen and (max-width: 320px) {
  .menu-wrapper #phoneNumber {
    font-size: 15px;
  }
}