/* Responsive for smaller screens  firsy plane */
@media (max-width: 992px) {

    /* navbar */
    header.navbar {
        padding: 20px 40px;
    }

    nav ul {
        gap: 15px;
    }

    nav ul li a {
        font-size: 16px;
    }

    .hero-section {
        flex-direction: column;
        height: auto;
        padding: 20px;
    }

    .content {
        position: relative;
        max-width: 100%;
        text-align: center;
        left: 0;
        top: 0;
    }

    .content .user-info {
        font-size: 32px;
        width: 100%;
    }

    .content div {
        max-width: 100%;
    }

    .content div h1 {
        font-size: 36px;
    }

    .plane {
        position: relative;
        width: 100%;
        max-width: 400px;
        margin: 20px auto 0;
        top: 0;
        right: 0;
    }

    /* second section form or deals */
    .booking-section-home {
        height: auto;
        /* remove fixed height */
        padding: 20px 10px;
    }

    .booking-section {
        top: 0;
        max-width: 100%;
        padding: 15px;
    }

    .trip-type,
    .class-type {
        flex-wrap: wrap;
        font-size: 16px;
    }

    .form-row {
        grid-template-columns: 1fr 1fr;
        height: auto;
        padding: 10px;
        border-radius: 12px;
    }

    .form-row input,
    .form-row label {
        font-size: 14px;
    }

    .banefit {
        flex-wrap: wrap;
        gap: 15px;
    }

    .banefit-container {
        width: 45%;
        min-width: 250px;
    }

    #flight-deals #slider-btn h3 {
        font-size: 24px;
    }

    .flight-deal-card {
        max-width: 100%;
        height: auto;
    }

    /* flynow hero */
    .flynow-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .flynow-left h1 {
        font-size: 36px;
    }

    .flynow-btn {
        font-size: 16px;
        padding: 10px 20px;
    }

    .flynow-right {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .destination-card {
        width: 160px;
    }

    .achievement-card {
        flex-direction: column;
        text-align: center;
        padding: 25px;
        gap: 25px;
    }

    .achievement-left h2 {
        font-size: 22px;
    }

    .stats {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .contact-row {
        flex-direction: column;
        gap: 15px;
    }

    .achievement-right img {
        width: 100%;
        max-width: 400px;
    }

    .swiper-slide{
        width: 100%;
    }
}

/* Mobile (<= 768px) */
@media (max-width: 768px) {
  header.navbar {
    padding: 15px 20px;
  }

  nav ul {
    display: none; /* hide nav links by default */
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 80px;
    right: 20px;
    width: 200px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 15px;
    gap: 12px;
    z-index: 99;
  }

  nav ul.show {
    display: flex; /* show links when class is toggled */
  }

  nav ul li a {
    font-size: 16px;
    padding: 8px 10px;
  }

  .three-dots {
    display: block; /* show hamburger menu */
    cursor: pointer;
    margin-left: 15px;
  }

  .login {
    display: none; /* login/signup hidden inside hamburger */
  }
}

@media (max-width: 576px) {
    .content div h1 {
        font-size: 28px;
    }

    .content div p {
        font-size: 14px;
    }

    .book-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* second section form and deals */
    .tabs button {
        width: 100%;
        font-size: 18px;
    }

    .trip-type,
    .class-type {
        flex-direction: column;
        gap: 8px;
        font-size: 14px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 15px;
    }

    .promo {
        flex-direction: column;
    }

    .banefit {
        flex-direction: column;
        gap: 10px;
    }

    .banefit-container {
        width: 100%;
        height: auto;
        padding: 15px;
    }

    .banefit-text h4 {
        font-size: 16px;
    }

    .banefit-text p {
        font-size: 14px;
    }

    #flight-deals #slider-btn {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    #flight-deals #slider-btn h3 {
        font-size: 20px;
    }

    .flight-deal-card {
        height: auto;
        padding: 15px;
    }

    .flight-text-btn {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .flight-text-btn button {
        width: 100%;
    }

    .swiper-wrapper {
        flex: 1fr;
        gap: 12px;
        width: 100%;
    }

    /* flynow hero */
    .flynow-left h1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .flynow-btn {
        width: 100%;
        padding: 12px;
    }

    .flynow-right {
        flex-direction: column;
        gap: 20px;
    }

    .destination-card {
        width: 100%;
        max-width: 280px;
        margin: auto;
    }

    .achievement-card {
        padding: 20px;
        gap: 20px;
    }

    .achievement-left h2 {
        font-size: 20px;
    }

    .stat-box {
        width: 100%;
        justify-content: center;
    }

    .achievement-right img {
        max-width: 100%;
        border-radius: 12px;
    }

    .contact-row span {
        font-size: 14px;
    }

    .contact-btn {
        width: 100%;
        text-align: center;
    }
}

/* auth */
/*  Mobile friendly modal */
@media (max-width: 480px) {
  .login-page,
  .signup-page {
    width: 90%;         /* full width mobile pe */
    padding: 20px;
    border-radius: 8px;
  }

  .login-page h1,
  .signup-page h1 {
    font-size: 20px;
  }

  .login-page input,
  .signup-page input {
    font-size: 13px;
    padding: 10px;
  }

  .login-btn,
  .signup-btn {
    font-size: 14px;
    padding: 10px;
  }
}

/*  Tablet view adjust */
@media (min-width: 481px) and (max-width: 768px) {
  .login-page,
  .signup-page {
    width: 70%;
    padding: 25px;
  }

  .login-page h1,
  .signup-page h1 {
    font-size: 22px;
  }
}