/* ------------------------------Responsive Media Query Added------------------------------ */

/* --------------------Mobile/Small Device Responsive Added-------------------- */
@media only screen and (max-width: 576px) {
  /* -----Navbar Mobile/Small Device Responsive Added----- */
  .nav-container {
    margin: 0px 20px;
  }
  .nav-logo h3 {
    font-size: 2rem;
  }
  .nav-item {
    display: none;
  }

  .fa-bars {
    display: block;
    cursor: pointer;
    color: rgb(19, 19, 24);
    font-size: 1.5rem;
  }

  /* -----Banner Section Mobile/Small Device Responsive Added----- */
  .banner-container {
    margin: 0px 20px;
    padding: 3rem 7rem;
  }

  .banner-title {
    font-size: 1.5rem;
    line-height: 1.75rem;
    margin-bottom: 0.5rem;
  }

  .banner-description {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    margin-bottom: 2rem;
  }

  .banner-inputs-container {
    flex-direction: column;
    gap: 1rem;
  }

  .banner-inputs input,
  .banner-inputs .input-anchor {
    width: 100%;
    font-size: 1rem;
  }

  .input-favicon {
    background-position: right 2rem center;
  }

  .input-anchor {
    background-position: 5rem center;
  }

  /* ----------Popular Tours Section Mobile/Small Device Responsive Added---------- */
  .popular-tours-section {
    flex-direction: column;
    margin: 0px 20px;
    gap: 1.5rem;
  }
  .popular-text-container h3 {
    font-size: 1.5rem;
    line-height: 1.75rem;
  }

  /* ----------Choose Your Destination Section Mobile/Small Device Responsive Added---------- */
  .choose-destination-section {
    margin: 0px 20px;
  }

  .choose-destination-section h3 {
    margin-top: 2rem;
    font-size: 1.5rem;
    line-height: 1.75rem;
  }

  .destination {
    margin-bottom: 2rem;
  }

  .row-1,
  .row-2,
  .row-3 {
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
  }

  /* ----------Why Choose Us Section Mobile/Small Device Responsive Added---------- */
  .why-choose-us-section {
    margin: 0px 20px;
  }
  .why-choose-us-section h3 {
    margin-top: 2rem;
    font-size: 1.5rem;
    line-height: 1.75rem;
  }
  .card-title {
    font-size: 1.25rem;
  }
  .grid-container {
    grid-template-columns: repeat(1, 1fr);
  }

  .item-3 {
    grid-column: auto;
    width: 100%;
  }

  /* ----------Deals And Discounts Section Mobile/Small Device Responsive Added---------- */
  .deals-discounts-section {
    margin: 0px 20px;
  }
  .deals-discounts-section h3 {
    margin-top: 2rem;
    font-size: 1.5rem;
    line-height: 1.75rem;
  }

  .offers-container {
    border-radius: 1rem;
    height: 80vh;
  }

  .offers-content {
    border: 2px solid rgb(243, 26, 26);
    width: 90%;
    height: auto;
    top: auto;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
  }
  .see-all-packages-container {
    margin-bottom: 2rem;
  }

  /* ----------Simple Perfect Place Section Mobile/Small Device Responsive Added---------- */
  .perfect-place-section {
    flex-direction: column;
    margin: 0px 20px;
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .perfect-place-container h3 {
    font-size: 1.5rem;
    line-height: 1.75rem;
  }

  /* ----------Newsletter Section Mobile/Small Device Responsive Added---------- */
  .newsletter-section {
    margin: 0px 20px;
    flex-direction: column;
  }
  .newsletter-container {
    width: 100%;
    margin-top: 2rem;
  }

  /* ----------Footer Section Mobile/Small Device Responsive Added---------- */
  .footer {
    margin-top: 2rem;
    padding: 50px 50px;
  }
}

/* --------------------Tablet/Medium Device Responsive Added-------------------- */
@media only screen and (min-width: 577px) and (max-width: 992px) {
  /* -----Navbar Tablet/Medium Device Responsive Added----- */
  .nav-container {
    flex-direction: column;
    gap: 50px;
    margin: 0px 20px;
  }
  .nav-links {
    gap: 40px;
  }

  /* -----Banner Section Tablet/Medium Device Responsive Added----- */
  .banner-container {
    margin: 0px 20px;
    padding: 6rem 6rem;
  }

  .banner-title {
    font-size: 3rem;
    line-height: 3.75rem;
    margin-bottom: 1rem;
  }

  .banner-inputs-container {
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .banner-inputs input,
  .banner-inputs .input-anchor {
    width: 100%;
    font-size: 1rem;
  }

  .input-favicon {
    background-position: right 2rem center;
  }

  .input-anchor {
    background-position: left 5rem center;
  }

  /* ----------Popular Tours Section Tablet/Medium Device Responsive Added---------- */
  .popular-tours-section {
    flex-direction: column;
    margin: 0px 20px;
    gap: 1.5rem;
  }
  .popular-text-container {
    align-items: center;
    width: 100%;
  }
  .popular-text-container h3 {
    font-size: 2rem;
    line-height: 3.75rem;
  }

  /* ----------Choose Your Destination Section Tablet/Mobile Device Responsive Added---------- */
  .choose-destination-section {
    margin: 0px 20px;
  }
  .choose-destination-section h3 {
    margin-top: 3rem;
    font-size: 2rem;
    line-height: 3.75rem;
  }
  .choose-destination-section img {
    height: 450px;
  }

  .row-1,
  .row-2,
  .row-3 {
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
  }

  .country-name {
    font-size: 2rem;
  }

  /* ----------Why Choose Us Section Tablet/Medium Device Responsive Added---------- */
  .why-choose-us-section {
    margin: 0px 20px;
  }
  .why-choose-us-section h3 {
    margin-top: 3rem;
    font-size: 2rem;
    line-height: 3.75rem;
  }

  /* ----------Why Choose Us Section Tablet/Medium Device Responsive Added---------- */
  .deals-discounts-section {
    margin: 0px 20px;
  }
  .deals-discounts-section h3 {
    margin-top: 3rem;
    font-size: 2rem;
    line-height: 3.75rem;
  }
  .offers-container {
    border-radius: 1rem;
  }

  /* ----------Simple Perfect Place Section Tablet/Medium Device Responsive Added---------- */
  .perfect-place-section {
    flex-direction: column;
    margin: 0px 20px;
    gap: 1.5rem;
  }
  .perfect-place-container {
    align-items: center;
    width: 100%;
  }
  .perfect-place-container h3 {
    font-size: 2rem;
    line-height: 3.75rem;
  }
  .popular-image-container {
    width: 100%;
  }

  /* ----------Newsletter Section Tablet/Medium Device Responsive Added---------- */
  .newsletter-section {
    margin: 0px 20px;
    flex-direction: column;
  }
  .newsletter-container {
    width: 100%;
    margin-top: 3rem;
  }
  .newsletter-image-container {
    width: 100%;
  }

  /* ----------Footer Section Tablet/Medium Device Responsive Added---------- */
  .footer {
    margin-top: 3rem;
    padding: 75px 50px;
  }
}