/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

  .hero-content {

    grid-template-columns:
      1fr;

    gap:
      35px;

  }


  .hero-card {

    min-height:
      350px;

  }


  .feature-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .method-layout {

    grid-template-columns:
      1fr;

  }


  .cta-box {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .slot-grid {

    grid-template-columns:
      repeat(3, 1fr);

  }

}


@media (max-width: 760px) {

  .container {

    width:
      min(
        calc(100% - 28px),
        var(--container)
      );

  }


  .nav-container {

    min-height:
      68px;

  }


  .menu-toggle {

    display:
      block;

  }


  .main-nav {

    display:
      none;

    position:
      absolute;

    top:
      68px;

    left:
      0;

    right:
      0;

    flex-direction:
      column;

    align-items:
      stretch;

    padding:
      12px;

    background:
      white;

    border-bottom:
      1px solid var(--border);

    box-shadow:
      0 15px 30px
      rgba(0,0,0,.08);

  }


  .main-nav.show {

    display:
      flex;

  }


  .main-nav a {

    padding:
      12px;

  }


  .main-nav .nav-booking {

    margin-left:
      0;

    text-align:
      center;

  }


  .hero-content {

    min-height:
      auto;

    padding:
      55px 0;

  }


  .hero h1 {

    font-size:
      52px;

  }


  .hero-text > p {

    font-size:
      13px;

  }


  .hero-buttons {

    flex-direction:
      column;

  }


  .hero-buttons .btn {

    width:
      100%;

  }


  .hero-card {

    min-height:
      330px;

    padding:
      30px;

  }


  .hero-card h2 {

    font-size:
      37px;

  }


  .quick-section {

    margin-top:
      -20px;

  }


  .quick-card {

    align-items:
      flex-start;

    flex-wrap:
      wrap;

  }


  .quick-text {

    min-width:
      calc(100% - 70px);

  }


  .quick-card .btn {

    width:
      100%;

  }


  .section {

    padding:
      70px 0;

  }


  .section-heading h2,
  .method-content h2 {

    font-size:
      38px;

  }


  .feature-grid {

    grid-template-columns:
      1fr;

  }


  .method-preview {

    padding:
      70px 0;

  }


  .method-image {

    min-height:
      320px;

  }


  .method-placeholder {

    min-height:
      270px;

  }


  .cta-box {

    padding:
      30px;

  }


  .cta-box h2 {

    font-size:
      31px;

  }


  .cta-actions {

    width:
      100%;

    flex-direction:
      column;

  }


  .cta-actions .btn {

    width:
      100%;

  }


  .footer-grid {

    grid-template-columns:
      1fr;

    gap:
      30px;

  }


  .form-grid {

    grid-template-columns:
      1fr;

  }


  .form-group.full {

    grid-column:
      auto;

  }


  .slot-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .page-hero {

    padding:
      55px 0;

  }


  .page-hero h1 {

    font-size:
      43px;

  }

}


@media (max-width: 420px) {

  .logo strong {

    font-size:
      17px;

  }


  .logo small {

    font-size:
      8px;

  }


  .logo-symbol {

    width:
      37px;

    height:
      37px;

  }


  .hero h1 {

    font-size:
      45px;

  }


  .slot-grid {

    grid-template-columns:
      1fr 1fr;

  }

}