/* 1200 PIXELS */

@media (max-width: 75rem) {
  .features-container {
    gap: 3rem;
    overflow: auto;
    white-space: nowrap;
    margin: 10rem 0rem;
  }

  .feature-box {
    overflow: visible;
    transform: translateX(1rem);
  }

  .feature-img-box {
    height: 24rem;
    width: 24rem;

    border-radius: 50%;
  }

  .img-1 {
    transform: translate(-17%, -20%);
  }

  .img-2 {
    transform: translate(0%, -15%);
  }

  .img-3 {
    transform: translate(-42%, -25%);
    scale: 0.7;
  }

  .img-4 {
    transform: translate(-30%, -15%);
  }

  .img-5 {
    transform: translate(2%, -6%);
    scale: 1.1;
  }

  .overlay-text {
    font-size: 1.6rem;
    top: 33%;
    white-space: normal;
  }
}

/* 1024 PIXELS */

@media (max-width: 66em) {
  .nav-link:link,
  .nav-link:visited {
    font-size: 1.6rem;
  }

  .background-img {
    height: 50rem;
  }

  .contact-container {
    width: 90%;
  }
}

@media (max-width: 62em) {
  .nav-link:link,
  .nav-link:visited {
    font-size: 1.5rem;
  }

  .nav-container {
    gap: 25%;
  }
}

/* /////////////////////////////
865px 
/////////////////////////////*/

@media (max-width: 52em) {
  .container .section-container {
    width: 90%;
  }

  /* MOBILE */

  .btn-mobile-nav {
    display: block;
    z-index: 3;
  }

  .hero-img {
    z-index: 2;
  }

  .nav-list {
    flex-direction: column;
    gap: 4.8rem;
  }

  .nav-list-box {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100vh;

    background-color: rgba(37, 137, 252);

    display: flex;
    align-items: center;
    justify-content: center;

    /* HIDE NAVIGATION VISUALLY*/
    opacity: 0;

    /* UNACCESSIBLE TO MOUSE AND KEYBOARD */
    pointer-events: none;

    /* HIDE FROM SCREEN READERS */
    visibility: hidden;

    transform: translateX(100%);
    transition: all 0.3s ease-in;
  }

  .nav-open .nav-list-box {
    opacity: 100%;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-open .icon-mobile-nav[name="close"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu"] {
    display: none;
  }

  .contact-container {
    grid-template-columns: 2fr 2fr !important;
  }
}

@media (max-width: 48em) {
  .background-img {
    height: 36rem;
  }

  .user--1 {
    top: 5%;
    scale: 1.3;
  }
  .user--2 {
    top: 11%;
    scale: 1.3;
  }
  .user--3 {
    top: 13%;
    left: 10%;
    scale: 1.3;
  }
}

/* /////////////////////////////
720px 
/////////////////////////////*/

@media (max-width: 45em) {
  .mobile-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .my-btn:link,
  .my-btn:visited {
    font-size: 1.4rem;
  }

  .hero-title {
    font-size: 4.6rem;
  }
  .hero-subtitle {
    font-size: 1.4rem;
  }

  .section-subtitle {
    font-size: 3.8rem;
  }

  .my-btn-primary:link,
  .my-btn-primary:visited {
    font-size: 1.4rem;
  }

  .section-description {
    font-size: 1.4rem;
  }

  .feature-text {
    font-size: 1.4rem;
  }

  .background-img {
    height: 31rem;
  }

  .user--1 {
    scale: 1.3;
  }
  .user--2 {
    scale: 1.3;
  }
  .user--3 {
    top: 22%;
    left: 10%;
    scale: 1.3;
  }

  .pricing-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pricing-plan--starter {
    justify-self: center;
  }

  .vac-description-3 {
    align-items: center;
    padding-top: 5rem;
  }
}

@media (max-width: 767px) {
  .vac-img-container {
    height: auto;
  }
  .vacination-img {
    scale: 1;
    transform: translateY(0);
  }
}

/* /////////////////////////////
608px 
/////////////////////////////*/

@media (max-width: 38em) {
  .section-hero {
    margin-bottom: 19rem;
  }

  .hero-box {
    grid-template-columns: 1fr;
    row-gap: 5rem;
  }

  .hero-text-box {
    text-align: center;
  }

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

  .hero-img-box {
    padding: 0;
  }

  .section-box {
    grid-template-columns: 1fr;
  }

  .feature-card-box {
    grid-template-columns: 1fr;
    row-gap: 6rem;
    max-width: 80%;
  }

  .section-img-box {
    grid-row: 2;
  }

  /* 
  How it works
  */

  .section-box {
    /* padding: 0 4.4rem; */
    row-gap: 4rem;
  }
  /* .container .section-container {
    text-align: center;
  } */

  .container .section-container {
    display: flex;
    flex-direction: column;
    margin: 3rem auto;
  }

  .section-title,
  .section-subtitle,
  .section-description {
    text-align: center;
  }

  .my-btn-primary:link,
  .my-btn-primary:visited {
    align-self: center;
  }

  .img-big {
    width: 90%;
    margin-left: 6%;
  }

  .pet-tag-img {
    margin-top: 5%;
  }

  .store-box {
    display: flex;
    justify-content: center;
  }

  .contact-container {
    grid-template-columns: 1fr !important;
  }

  .form-img {
    grid-row: 1 / 2;
  }
}

/* 425 PIXELS */

@media (max-width: 27em) {
  .section-hero {
    margin-bottom: 10rem;
  }

  .hero-title {
    font-size: 3.6rem;
  }

  .hero-btn {
    display: none;
  }

  .hero-store {
    display: block;
  }

  .last-overlay {
    font-size: 1.4rem;
  }

  .section-box {
    padding: 0 1.4rem;
  }

  .background-img {
    height: 20rem;
  }

  .users-box {
    height: 30rem;
  }

  .user--1 {
    top: 10%;
    right: 5%;
    scale: 1.5;
  }

  .user--2 {
    top: 15%;
    left: 40%;
    scale: 1.5;
  }

  .user--3 {
    top: 20%;
    left: 5%;
    scale: 1.5;
  }

  .user:hover {
    scale: 2;
  }

  .cta-section {
    padding-top: 0;
  }

  .footer-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    padding: 8rem 3.6rem 0 3.6rem;
    gap: 3.6rem;
    text-align: center;
  }

  .social {
    align-items: center;
    grid-column: 1 / span 4;
    grid-row: 2 / 3;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .contacts,
  .account {
    grid-column: span 2;
  }

  .footer-text,
  .footer-link {
    font-size: 1.2rem;
  }

  .logo-footer {
    align-self: center;
  }

  .address {
    width: 100%;
  }

  .copyright {
    padding-bottom: 0;
    height: 0;
  }

  .social-icons-box {
    gap: 4.4rem;
  }

  .social-box {
    gap: 5.4rem;
  }

  .socialize {
    object-position: -5rem;
  }

  .pricing-plan--starter {
    padding: 1.6rem;
  }

  .pricing-plan--complete {
    padding: 1.6rem;
  }

  .btn--plan,
  .btn--plan:link,
  .btn--plan:visited {
    font-size: 1.4rem;
  }

  .list-item {
    font-size: 1.4rem;
  }

  .one-sentence-text {
    width: 80%;
    font-size: 1.8rem;
  }

  .my-container .section-container {
    align-self: center;
    justify-self: center;
    width: 100%;
  }

  .one-sentence-container {
    background-position: 20%;
  }
}

@media (max-width: 20em) {
  .section-hero {
    padding-top: 6rem;
  }

  .store-img {
    width: 13rem;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-text-box {
    padding: 1.8rem;
  }

  .socialize {
    object-position: -4rem;
  }
}