/* Mobile (portrait and landscape) */
@media (max-width: 599px) {

  /* styles for small devices like phones */
  header {
    height: 59px;
    padding: 16px;
  }

  header img {
    height: 26px;
  }

  .toggle-button {
    height: 44px;
    font-size: 18px;
  }

  main {
    margin-top: 59px;
    /* pushes content below header */
    min-height: calc(100dvh - 59px);
  }

  .coming-soon-title {
    font-size: 9.6vw;
    margin-bottom: 64px;
  }

  .countdown-wrapper {
    padding: 0px;
  }

  .countdown {
    padding: 0px;
  }

  .divider {
    height: 72px;
  }

  .mobile-contact-heading {
    display: block;
    font-size: 32px;
  }

  .contact-inner {
    flex-direction: column;
    padding-top: 70px;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 70px;
  }

  .contact-left {
    display: none;
  }

  .contact-right {
    width: 100%;
  }

  .contact-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .qr-block {
    margin-top: 1.5rem;
  }

  .contact-right {
    padding: 16px;
  }

  .contact-us {
    padding-right: 0px;
    padding-left: 0px;
  }

  .form-row {
    flex-direction: column;
  }

  .form-row .form-group {
    width: 100%;
  }

  .success-title {
    font-size: 20px;
  }

  .success-description {
    font-size: 14px;
  }
}

/* Tablet (portrait and small landscape) */
@media (min-width: 600px) and (max-width: 1024px) {

  /* styles for tablets */
  header {
    height: 88px;
    padding: 0 32px;
  }

  header img {
    height: 37px;
  }

  main {
    margin-top: 88px;
    /* pushes content below header */
    min-height: calc(100dvh - 88px);
  }

  .coming-soon-title {
    font-size: clamp(56px, 9vw, 96px);
    margin-bottom: 130px;
  }

  .divider {
    height: 96px;
  }

  .mobile-contact-heading {
    display: block;
  }

  .contact-inner {
    flex-direction: column;
    padding-top: 70px;
    padding-bottom: 70px;
    gap: 2rem;
  }

  .contact-left {
    display: none;
  }

  .contact-right {
    width: 100%;
  }
}

/* Small Desktop or large tablet landscape */
@media (min-width: 1025px) and (max-width: 1199px) {

  /* styles for small desktops */
  .contact-inner {
    padding-top: 108px;
    padding-bottom: 108px;
  }
}

/* Desktop and up */
@media (min-width: 1200px) {
  /* styles for desktops and larger screens */
}

/* Portrait only */
@media (orientation: portrait) {
  /* vertical layout adjustments */
}

/* Landscape only */
@media (orientation: landscape) {
  /* horizontal layout adjustments */
}

@media (hover: hover) {
  .toggle-button:hover {
    box-shadow: 0px 0px 16.7px 0px #8D9FFFB2;
    backdrop-filter: blur(4px);
  }

  .send-button:hover {
    background: linear-gradient(45deg, #7237BF 96.31%, #B37BF7 106.63%);
  }
}

@media (hover: none) {
  .toggle-button:active {
    box-shadow: 0px 0px 16.7px 0px #8D9FFFB2;
    color: #AA87D9;
  }

  .send-button:active {
    background: #442173;
  }
}