/* media query max-width */
@media screen and (max-width: 1800px) {
  .dropdown-number-5 {
    right: max(calc(var(--first-value) + 10%), calc(var(--second-value) + 1vw));
  }
}

@media screen and (max-width: 1640px) {
  .dropdown-number-5 {
    right: max(calc(var(--first-value) + 15%), calc(var(--second-value) + 5vw));
  }
  .dropdown-number-4 {
    right: max(calc(var(--first-value) + 10%), calc(var(--second-value) + 1vw));
  }
  .dropdown-number-3 {
    right: max(calc(var(--first-value) + 5%), calc(var(--second-value) + 7vw));
  }
  .dropdown-number-2 {
    right: max(calc(var(--first-value) + 2%), calc(var(--second-value) + 3vw));
  }
  .beach-environment img {
    transform: translateY(5em);
  }
  .beach-environment img:nth-child(1) {
    width: calc(var(--beach-environment-img-1-width) - 1.5em);
  }

  .beach-environment img:nth-child(2) {
    width: calc(var(--beach-environment-img-2-width) - 1.5em);
  }

  .beach-environment img:nth-child(3) {
    width: calc(var(--beach-environment-img-3-width) - 1.5em);
  }

  .beach-environment img:nth-child(4) {
    width: calc(var(--beach-environment-img-4-width) - 1.5em);
  }

  .beach-environment img:nth-child(5) {
    width: calc(var(--beach-environment-img-5-width) - 1.5em);
  }

  .beach-environment img:nth-child(6) {
    width: calc(var(--beach-environment-img-6-width) - 1.5em);
  }

  .beach-environment img:nth-child(7) {
    width: calc(var(--beach-environment-img-7-width) - 1.5em);
  }

  .beach-environment img:nth-child(8) {
    width: calc(var(--beach-environment-img-8-width) - 1.5em);
  }
}

@media screen and (max-width: 1530px) {
}
@media screen and (max-width: 1400px) {
}

@media screen and (max-width: 1380px) {
  #nav-desktop {
    display: none;
  }

  .hamburger-menu span {
    display: block;
  }
}
@media screen and (max-width: 1300px) {
  .modal {
    max-height: 60%;
  }
  .arrow-down {
    visibility: hidden;
  }
  .about-one {
    flex-direction: column;
  }
  .section-about {
    max-width: 100%;
  }

  .section-suggestion-form {
    max-width: 100%;
  }

  .beach-environment img:nth-child(3) {
    width: calc(var(--beach-environment-img-3-width) - 2.5em);
  }

  .beach-environment img:nth-child(4) {
    width: calc(var(--beach-environment-img-4-width) - 2.5em);
  }

  .beach-environment img:nth-child(6) {
    width: calc(var(--beach-environment-img-6-width) - 2.5em);
  }

  .beach-environment img:nth-child(7) {
    width: calc(var(--beach-environment-img-7-width) - 2.5em);
  }

  .beach-environment img:nth-child(8) {
    width: calc(var(--beach-environment-img-8-width) - 2.5em);
  }
}

@media screen and (max-width: 1080px) {
  .surf-list {
    display: none;
  }
  .surf-article img {
    width: 100%;
  }
  .surf-article {
    margin-top: 0;
    padding: 2em;
  }
  .surfing .flex-column article {
    margin-left: 0;
    flex-direction: column;
  }
  .surf-description, .img-surf {
    max-width: 100%;
  }
  .about-two {
    flex-direction: column;
  }
  .section-source {
    max-width: 100%;
    padding-top: 2em;
    padding-inline: 0;
  }
  #nav-mobile {
    width: 70vw;
  }

  .beach-environment img:nth-child(1) {
    width: calc(var(--beach-environment-img-1-width) - 1.8em);
  }

  .beach-environment img:nth-child(2) {
    top: 8em;
    width: calc(var(--beach-environment-img-2-width) - 2em);
  }

  .beach-environment img:nth-child(3) {
    top: 2em;
    width: calc(var(--beach-environment-img-3-width) - 3.5em);
  }

  .beach-environment img:nth-child(4) {
    width: calc(var(--beach-environment-img-4-width) - 3.5em);
  }

  .beach-environment img:nth-child(5) {
    left: -5em;
    top: 5em;
    width: calc(var(--beach-environment-img-5-width) - 2em);
  }

  .beach-environment img:nth-child(6) {
    width: calc(var(--beach-environment-img-6-width) - 3.5em);
  }

  .beach-environment img:nth-child(7) {
    width: calc(var(--beach-environment-img-7-width) - 3.5em);
  }

  .beach-environment img:nth-child(8) {
    width: calc(var(--beach-environment-img-8-width) - 3.5em);
  }
}

@media screen and (max-width: 900px) {
  .modal {
    padding: 0;
  }
  #social-media {
    display: flex;
    flex-direction: column;
  }
  .about-one {
    flex-direction: column;
  }
  .about-us button {
    cursor: pointer;
    color: var(--base-color);
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 1px;
    outline: none;
    border: 2px solid var(--bg-second-color);
    background-color: var(--bg-second-color);
    border-radius: 50px;
    width: 5.5em;
    height: 2.5em;
    transition: all var(--transition-04s);
    margin-top: 1.5em;
  }
  .beach-environment img:nth-child(1) {
    width: calc(var(--beach-environment-img-1-width) - 1.8em);
  }

  .beach-environment img:nth-child(2) {
    top: 15em;
    width: calc(var(--beach-environment-img-2-width) - 2em);
  }

  .beach-environment img:nth-child(3) {
    top: 4em;
    width: calc(var(--beach-environment-img-3-width) - 6.5em);
  }

  .beach-environment img:nth-child(4) {
    width: calc(var(--beach-environment-img-4-width) - 6.5em);
  }

  .beach-environment img:nth-child(5) {
    top: 15em;
    width: calc(var(--beach-environment-img-5-width) - 2em);
  }

  .beach-environment img:nth-child(6) {
    right: 5.5em;
    width: calc(var(--beach-environment-img-6-width) - 5.5em);
  }

  .beach-environment img:nth-child(7) {
    width: calc(var(--beach-environment-img-7-width) - 5.5em);
  }

  .beach-environment img:nth-child(8) {
    width: calc(var(--beach-environment-img-8-width) - 5.5em);
  }
}
@media screen and (max-width: 720px) {
  .social-media-icons {
    justify-content: space-around;
  }
  #nav-mobile {
    width: 100vw;
  }
  .social-media-icons span {
    font-size: clamp(5vw, calc(8.5vw + 50%), 10vw);
  }
  .about-us h1 {
    font-size: clamp(1em, calc(1.5em + 10%), 2em);
  }
  .beach-environment img:nth-child(1) {
    left: 1em;
    width: calc(var(--beach-environment-img-1-width) - 2em);
  }

  .beach-environment img:nth-child(2) {
    left: 2em;
    top: 20em;
    width: calc(var(--beach-environment-img-2-width) - 2em);
  }

  .beach-environment img:nth-child(3) {
    left: -5em;
    width: calc(var(--beach-environment-img-3-width) - 8.5em);
  }

  .beach-environment img:nth-child(4) {
    left: -12em;
    width: calc(var(--beach-environment-img-4-width) - 8em);
  }

  .beach-environment img:nth-child(5) {
    top: 22em;
    width: calc(var(--beach-environment-img-5-width) - 2em);
  }

  .beach-environment img:nth-child(6) {
    top: 17em;
    right: 5.5em;
    width: calc(var(--beach-environment-img-6-width) - 5.5em);
  }

  .beach-environment img:nth-child(7) {
    top: 17em;

    width: calc(var(--beach-environment-img-7-width) - 8.5em);
  }

  .beach-environment img:nth-child(8) {
    bottom: 10em;

    width: calc(var(--beach-environment-img-8-width) - 5.5em);
  }
}
@media screen and (max-width: 660px) {
  .modal {
    max-height: 65%;
  }
}
@media screen and (max-width: 630px) {
  .hamburger-menu {
    right: 2em;
  }
  .inbeach-header {
    padding-inline-start: 1em;
  }
  #nav-mobile {
    width: 100vw;
  }
  .beach-environment img:nth-child(1) {
    top: 1em;
    width: calc(var(--beach-environment-img-1-width) - 2em);
  }

  .beach-environment img:nth-child(2) {
    left: -2em;
    top: 22em;
    width: calc(var(--beach-environment-img-2-width) - 2em);
  }

  .beach-environment img:nth-child(3) {
    left: -10em;
    top: 10em;
    width: calc(var(--beach-environment-img-3-width) - 8.5em);
  }

  .beach-environment img:nth-child(4) {
    left: -15em;
    top: 10em;
    width: calc(var(--beach-environment-img-4-width) - 8em);
  }

  .beach-environment img:nth-child(5) {
    left: 20em;
    top: 18em;
    width: calc(var(--beach-environment-img-5-width) - 2em);
  }

  .beach-environment img:nth-child(6) {
    top: 10em;
    right: 7em;
    width: calc(var(--beach-environment-img-6-width) - 6.5em);
  }

  .beach-environment img:nth-child(7) {
    top: 10em;
    right: 0.5em;

    width: calc(var(--beach-environment-img-7-width) - 10.5em);
  }

  .beach-environment img:nth-child(8) {
    bottom: 10em;

    width: calc(var(--beach-environment-img-8-width) - 5.5em);
  }

  .sea-waves img:nth-child(1) {
    bottom: 5em;
  }

  .sea-waves img:nth-child(2) {
    bottom: 3em;
  }
}
@media screen and (max-width: 560px) {
  #social-media > .container {
    padding: 0;
  }
  #nav-mobile {
    width: 100vw;
  }
  .beach-environment img:nth-child(1) {
    width: calc(var(--beach-environment-img-1-width) - 2em);
  }

  .beach-environment img:nth-child(2) {
    width: calc(var(--beach-environment-img-2-width) - 2em);
  }

  .beach-environment img:nth-child(3) {
    left: -5em;
    top: 10em;
    width: calc(var(--beach-environment-img-3-width) - 8.5em);
  }

  .beach-environment img:nth-child(4) {
    left: 10em;
    top: 0em;
    width: calc(var(--beach-environment-img-4-width) - 8em);
  }

  .beach-environment img:nth-child(5) {
    left: 5em;
    top: 13em;
    width: calc(var(--beach-environment-img-5-width) - 2em);
  }

  .beach-environment img:nth-child(6) {
    display: none;
  }

  .beach-environment img:nth-child(7) {
    display: none;
  }

  .beach-environment img:nth-child(8) {
    bottom: 10em;

    width: calc(var(--beach-environment-img-8-width) - 5.5em);
  }

  .sea-waves img:nth-child(1) {
    bottom: 4em;
  }

  .sea-waves img:nth-child(2) {
    bottom: 2em;
  }
  .sea-waves img:nth-child(3) {
    bottom: -1em;
  }
  .sea-waves img:nth-child(5) {
    bottom: -2em;
  }
  .landing-page h1 {
    padding-inline: 1em;
  }
}
@media screen and (max-width: 420px) {
  .landing-page h1 {
    font-size: 1.5em;
  }
  .beach-environment img:nth-child(1) {
    left: 1em;
  }
  .beach-environment img:nth-child(3) {
    top: 1em;
    left: 1em;
    width: calc(var(--beach-environment-img-3-width) - 10.5em);
  }
  .beach-environment img:nth-child(4) {
    top: 2em;
    width: calc(var(--beach-environment-img-4-width) - 7.5em);
  }
  .beach-environment img:nth-child(8) {
    display: none;
  }
  .sea-waves img:nth-child(1) {
    bottom: 3em;
  }

  .sea-waves img:nth-child(2) {
    bottom: 1.5em;
  }

  .sea-waves img:nth-child(4) {
    bottom: 0em;
  }
}
@media screen and (max-width: 380px) {
  .beach-environment img:nth-child(1) {
    left: 10em;
  }
}
/* media query max-height */
@media screen and (max-height: 850px) {
  .beach-environment img:nth-child(6) {
    display: none;
  }
  .beach-environment img:nth-child(7) {
    display: none;
  }
}
@media screen and (max-height: 720px) {
  .beach-environment img:nth-child(1) {
    top: 3em;
    left: 1em;
    width: calc(var(--beach-environment-img-1-width) - 2.5em);
  }

  .beach-environment img:nth-child(2) {
    display: none;
  }

  .beach-environment img:nth-child(3) {
    left: 14em;
    top: -0.5em;
    width: calc(var(--beach-environment-img-3-width) - 10.5em);
  }

  .beach-environment img:nth-child(4) {
    top: 4em;
    left: 5em;
    width: calc(var(--beach-environment-img-4-width) - 6.5em);
  }

  .beach-environment img:nth-child(5) {
    left: 10em;
    top: 10em;
  }

  .beach-environment img:nth-child(6) {
    display: none;
  }

  .beach-environment img:nth-child(7) {
    right: 2em;
    width: calc(var(--beach-environment-img-7-width) - 10.5em);
  }

  .beach-environment img:nth-child(8) {
    display: none;
  }
}
@media screen and (max-height: 600px) {
  .landing-page h1 {
    top: 100px;
  }

  .beach-environment img:nth-child(1) {
    display: none;
  }
  .beach-environment img:nth-child(2) {
    top: 5em;
    display: block;
  }
  .beach-environment img:nth-child(3) {
    top: -10em;
    left: 37em;
  }
  .beach-environment img:nth-child(4) {
    top: -5em;
    left: 30em;
  }
  .beach-environment img:nth-child(7) {
    bottom: 10em;
  }

  .sea-waves img {
    display: none;
  }
}
@media screen and (max-height: 500px) {
  .beach-environment img:nth-child(5) {
    position: absolute;
    top: 8em;
    left: 45em;
    display: block;
  }
  .beach-environment img:nth-child(7) {
    display: none;
  }
}

/* max width and max height */

@media screen and (max-width: 800px) and (max-height: 600px) {
  .beach-environment img:nth-child(3) {
    left: 35em;
  }
  .beach-environment img:nth-child(4) {
    left: 25em;
  }
}
@media screen and (max-width: 1300px) and (max-height: 1080px) {
  .modal {
    max-height: 70%;
  }
  .section-about .arrow-down {
    visibility: visible;
  }
}