/* Tablet Landscape (max-width: 1200px) */
@media only screen and (max-width: 75em) {
  /* styles */
}

/* Big Desktop (min-width: 1800px) */
@media only screen and (min-width: 112.5em) {
  /* styles */
}

/* Tablet Portrait (max-width: 900px) */
@media only screen and (max-width: 56.25em) {
  /*=============================*/
  /*=======SERVICES SECTION=========*/
  /*=============================*/

  .service__box {
    height: 16.6rem;
    width: 30.6rem;
  }

  /*=============================*/
  /*=======LOGOS SECTION==*/
  /*=============================*/

  .desclaimer-text {
    font-size: 0.9rem;
  }

  /*=============================*/
  /*=======STATES PROOF SECTION==*/
  /*=============================*/

  .stats-proof__item {
    gap: 1.6rem;
  }

  .stats-proof__number {
    font-size: 3.6rem;
  }

  .stats-proof__divider {
    width: 2px;
    height: 5.5rem;
  }

  .stats-proof__label {
    font-size: 2rem;
  }

  /*=============================*/
  /*=======TEAM SECTION==*/
  /*=============================*/

  .team-section__tagline {
    font-size: 5.2rem;
  }

  /*=============================*/
  /*=======EXPERTS SECTION==*/
  /*=============================*/

  .experts {
    height: auto;
    padding: 8rem 2rem;
    flex-direction: column;
    text-align: left;
  }

  .experts__wrapper {
    flex-direction: column;
    gap: 5rem;
    align-items: center;
    justify-content: center;
  }

  .experts__left-box {
    margin-right: 0;
    flex: 1;
  }

  .expertise__box-wrapper {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2.4rem;
    /* overflow-x: auto;  */
  }

  .expertise-box {
    min-width: 24.2rem;
    /* flex-shrink: 0; */
  }

  .experts__right-box {
    flex: 1;
    max-width: 50rem;
  }

  .experts__img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /*=============================*/
  /*=======Car WASH SECTION==*/
  /*=============================*/

  .wash-section__heading {
    font-size: 4rem;
  }
}

/* Phone (max-width: 600px) */
@media only screen and (max-width: 37.5em) {
  /* Header */

  .header__nav-list {
    gap: 3rem;
    padding: 3.2rem;
  }

  .nav__time {
    font-size: 1.2rem;
  }
  .header__social-icon {
    height: 2.4rem;
    width: 2.4rem;
  }

  /*=============================*/
  /*HERO SECTION*/
  /*=============================*/

  .hero__text-box {
    color: var(--color-white);
    position: absolute;
    top: 65%;
    left: 37%;
    transform: translate(-50%, -50%);
  }

  /*=============================*/
  /*SERVICE SECTION*/
  /*=============================*/

  .services {
    margin-top: 8rem;
    position: relative;
  }

  .service__gear-1 {
    height: 10%;
    opacity: 40%;
    position: absolute;
    top: -5%;
    left: 4%;
  }

  .service__gear-2 {
    height: 10%;
    opacity: 40%;
    position: absolute;
    bottom: -7%;
    right: 4%;
  }

  .service__box {
    height: 13.6rem;
    width: 20.6rem;
  }

  .service__box {
    height: 16.6rem;
    width: 36.6rem !important;
  }

  .service__box-items {
    padding: 2rem 2rem;
  }

  .service__box-icon {
    height: 5rem;
    margin-bottom: 2rem;
  }

  .service__box-time {
    font-size: 0.8rem;
    padding-bottom: 0.6rem;
  }

  .service__box-description {
    font-size: 1rem;
    line-height: 1.4;
  }

  /*=============================*/
  /*BRAND LOGOS SECTION*/
  /*=============================*/

  .brands__logos-section {
    height: 80rem;
    background-color: var(--color-primary-light);
    padding-top: 8.2rem;
    margin-top: 12rem;
  }

  .brand__logo-box {
    width: 12rem;
    height: 8rem;
  }

  .desclaimer-text {
    font-size: 1rem;
    line-height: 1.6;
    padding: 10rem 0;
    color: var(--color-white);
  }

  /*=============================*/
  /*STATE PROOF SECTION*/
  /*=============================*/

  .stats-proof {
    margin-top: 8rem;
  }

  .stats-proof__item {
    gap: 0.8rem;
  }

  .stats-proof__number {
    font-size: 6.2rem;
  }

  .stats-proof__divider {
    height: 4rem;
  }

  .stats-proof__label {
    font-size: 2rem;
  }

  /* State proof image section */

  .state-proof__img-box {
    position: relative;
    min-height: 35rem;
  }

  .stats-proof__image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Image 1 */
  .stats-proof__image--1 {
    background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ),
      url("img/state-proof-sec-img-1--bw-min.jpg");
  }

  /* Image 2 */
  .stats-proof__image--2 {
    background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.4)
      ),
      url("img/state-proof-sec-img-2--bw-min.jpg");
    background-position: top;
  }

  .state-proof__img-tag {
    font-size: 3.2rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5000;
  }

  /*=============================*/
  /*TEAM SECTION*/
  /*=============================*/

  .team-section {
    margin-top: 12rem;
  }

  .team-section__tagline {
    font-size: 3.2rem !important;
    padding: 4rem;
    margin-top: 8rem;
  }

  .team-section__tagline-img {
    height: 150%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-30%, -50%);
    /* transform: rotate(2deg); */
  }

  /*=============================*/
  /*FEATURES SECTION*/
  /*=============================*/

  .feature-section__description {
    font-size: 1.4rem;
    line-height: 1.6;
    padding-bottom: 3.2rem;
  }

  .feature-section__list {
    gap: 1.6rem;
  }

  .feature-section__list-item {
    gap: 1.4rem;
  }

  .feature-section__list-item--description {
    font-size: 1.6rem;
    font-weight: 500;
  }

  .feature-section__list-item--icon {
    height: 2rem;
  }

  .feature-section__img-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .feature-section__img {
    width: 90%;
    background-size: cover;
    border-radius: 1rem;
  }

  /*=============================*/
  /*EXPERTS SECTION*/
  /*=============================*/

  .experts {
    margin-top: 12rem;

    height: 62vh;
    background: url("img/experts-sec--bw-min.jpg") center center / cover
      no-repeat;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .experts__heading-secondary {
    font-size: 2.8rem;
    padding-top: 5rem;
  }

  .experts__wrapper {
    display: flex;
    /* flex-direction: column; */
    min-height: 100%;
    gap: 6rem;
  }

  /* .experts__left-box {
    flex: 0 0 40%;
    z-index: 0;
    margin-top: 0;
    margin-bottom: 0;
  } */

  .expertise__box-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  .expertise-box {
    height: 14.5rem;
    width: 35.2rem;
    padding: 3rem 2.5rem;
  }

  .expertise__box-description {
    font-size: 1.6rem;
    line-height: 1.4;
    padding-top: 1.4rem;
  }

  .experts__right-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .experts__img {
    width: 90%;
    height: 80%;
    object-fit: cover;
    border-radius: 1rem;
    justify-items: center;
    align-items: center;
  }

  /*=============================*/
  /*CAR WASH SECTION*/
  /*=============================*/

  .wash-section__heading {
    font-size: 2rem;
    font-weight: lighter;
    padding: 4rem;
    margin-bottom: 3.2rem;
  }

  .car-wash-timing {
    font-size: 0.8rem;
    padding: 5px 10px;
    margin-bottom: 1.2rem;
  }

  /*=============================*/
  /*FOOTER SECTION*/
  /*=============================*/

  .footer {
    padding-top: 12rem;
    padding-bottom: 3rem;
  }

  .footer__nav-col {
    gap: 2rem;
  }

  .footer__nav {
    gap: 2rem;
  }

  .footer__heading {
    font-size: 2.4rem;
    font-weight: 500;
  }

  .footer__nav-item {
    font-size: 1.8rem !important;
  }

  .footer__service-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 120%;
  }

  .footer__service-hours {
    font-size: 1.4rem;
  }

  .socail-links-box {
    gap: 1.6rem;
  }

  .footer__social-icon {
    height: 4rem;
    width: 4rem;
  }

  /*=============================*/
  /*=======FOOTER BOTTOM=========*/
  /*=============================*/

  .footer-bottom {
    padding: 5px 20px;
    margin-top: 4.2rem;
    padding-top: 2.9rem;
    font-size: 1rem;
  }

  /* for state froof section */
  .grid--3-cols {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 0;
    row-gap: 4rem !important;
  }

  .stats-proof__item {
    flex-direction: column;
  }

  .stats-proof__divider {
    display: none;
  }
}

/* extras */

@media only screen and (max-width: 375px) {
  .hero__section {
    height: 100vh;
  }
  .service__gear-1 {
    height: 10%;
    top: -5%;
  }

  .service__gear-2 {
    height: 10%;
    bottom: -9%;
    right: 2%;
  }
  .stats-proof__item {
    flex-direction: column;
  }

  .stats-proof__divider {
    display: none;
  }

  .feature-section__list-item--icon {
    height: 3.2rem;
  }

  .grid--3-cols {
    row-gap: 4rem !important;
    column-gap: 1rem;
  }

  .grid--3-cols {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 0;
    row-gap: 3.2rem;
  }

  .heading-secondary {
    font-size: 2.8rem;
  }

  .grid--3-cols-ph {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 3rem;
  }

  .grid--2-cols {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 7.2rem;
  }

  .expertise-box {
    height: 20.5rem;
    width: 26.2rem;
    padding: 4rem 4rem;
  }

  .expertise__box-description {
    font-size: 1.6rem;
    line-height: 1.4;
    padding-top: 2.4rem;
  }

  .footer-bottom {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 400px) {
  .grid--3-cols-ph {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 3rem;
  }
}

@media only screen and (max-width: 500px) {
  .heading-primary {
    font-size: 3.6rem !important;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0px;
  }
  .grid--3-cols-ph {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 3rem;
  }

  .experts {
    height: 100%;
  }
}

@media only screen and (max-width: 670px) {
  /*=============================*/
  /*EXPERTS SECTION*/
  /*=============================*/

  /* .experts {
    margin-top: 0rem;
    height: 100vh;
    background: url("img/experts-sec--bw-min.jpg") center center / cover
      no-repeat;
    display: flex;
    align-items: center;
  } */

  .experts__wrapper {
    display: flex;
    /* flex-direction: column; */
    min-height: 100%;
    gap: 6rem;
  }

  .expertise__box-wrapper {
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    gap: 2rem;
    justify-content: center;
    align-items: center;
  }
}

@media only screen and (max-width: 500px) {
  .team-section__tagline {
    font-size: 2.6rem !important;
  }
}

@media only screen and (max-width: 1000px) {
  .grid--3-cols {
    column-gap: 2.2rem;
  }

  .service__box {
    height: 16.6rem;
    width: 30.6rem;
  }
  .team-section__tagline {
    font-size: 5rem;
  }
}

@media only screen and (max-width: 800px) {
  .service__box {
    height: 16.6rem;
    width: 26.6rem;
  }
}

@media only screen and (max-width: 700px) {
  .service__box {
    height: 16.6rem;
    width: 22.6rem;
  }

  .service__box-items {
    padding: 3.2rem 3rem;
  }

  .heading-tertiary {
    font-size: 1.4rem;
  }
}