/* responsive styles for extra extra large devices  */
@media screen and (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* responsive styles for  extra-large devices  */
@media screen and (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
  #banner .banner-container .banner-title {
    font-size: 64px;
  }
}

/* responsive styles for medium devices  */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .container {
    max-width: 720px;
  }
  header nav ul li .none {
    display: none;
  }

  /* banner section styles  */
  #banner .banner-container {
    max-width: 550px;
  }

  /* banner section styles  */
  #banner .banner-container .banner-title {
    font-size: 30px;
    margin-bottom: 16px;
  }

  #banner .banner-container .banner-description {
    line-height: 1.5;
    margin-bottom: 30px;
  }

  #banner .banner-container form {
    flex-wrap: wrap;
  }

  #our-popular-tour {
    justify-content: center;
  }
  #our-popular-tour .reason-for-popularity {
    width: 80%;
    max-width: 100%;
  }
  #our-popular-tour .promo-image {
    display: none;
  }
  /* your-tour-destination section styles  */
  #your-tour-destination .your-destination-places {
    grid-template-rows: repeat(5, 1fr);
  }
  .srilanka {
    grid-column: 1 / span 6;
    grid-row: 5 / span 1;
  }
  .north-america {
    grid-column: 1 / span 12;
    grid-row: 3 / span 1;
  }
  .kashmir {
    grid-column: 7 / span 6;
    grid-row: 5 / span 1;
  }
  .bangladesh {
    grid-column: 1 / span 12;
    grid-row: 2 / span 1;
  }
  .bandorban {
    grid-column: 1 / span 12;
    grid-row: 4 / span 1;
  }
  /* book-a-trip section  styles */
  #book-a-trip {
    flex-direction: column-reverse;
    margin: 80px 0;
  }

  #book-a-trip .trip-booking-steps {
    width: 100%;
  }
  #book-a-trip .booking-progress-section {
    width: 100%;
    margin-bottom: 150px;
  }

  /* why-choose-us section styles  */
  #why-choose-us .services-card .duel-card {
    flex-direction: column;
  }
  /* newsletter section styles  */
  #newsletter .newsletter-image {
    display: none;
  }
}
/* responsive styles for small devices  */
@media screen and (min-width: 576px) and (max-width: 767.98px) {
  .container {
    max-width: 540px;
  }

  .section-title {
    font-size: 20px;
  }
  .section-description {
    font-size: 14px;
  }

  /* header section styles  */
  header nav {
    flex-direction: column;
    gap: 30px;
  }

  nav .brand-info .brand-name {
    font-size: 22px;
  }
  nav ul li a {
    font-size: 16px;
  }

  #banner .banner-container {
    max-width: 350px;
  }

  /* banner section styles  */
  #banner .banner-container .banner-title {
    font-size: 22px;
    margin-bottom: 12px;
  }

  #banner .banner-container .banner-description {
    line-height: 1.3;
    margin-bottom: 25px;
  }

  #banner .banner-container form {
    flex-direction: column;
  }

  #banner .banner-container form .user-input input,
  #banner .banner-container form .primary-btn {
    width: 255px;
  }

  /* our-popular-tour section styles  */
  #our-popular-tour {
    gap: 40px;
    margin-top: 80px;
    flex-direction: column;
  }
  #our-popular-tour .reason-for-popularity {
    width: 100%;
    max-width: 100%;
  }
  #our-popular-tour .reason-for-popularity .section-title {
    font-size: 22px;
  }
  .reason-for-popularity .description .title-of-article {
    font-size: 16px;
  }
  .reason-for-popularity .description section p,
  .reason-for-popularity .description section ul li {
    font-size: 14px;
  }
  .reason-for-popularity .description section p strong {
    font-size: 15px;
  }
  #our-popular-tour .promo-image {
    width: 100%;
  }

  /* your-tour-destination section styles  */
  #your-tour-destination {
    margin-top: 80px;
  }
  #your-tour-destination .about-destination {
    max-width: 480px;
    margin-bottom: 28px;
  }
  #your-tour-destination .about-destination .section-title {
    font-size: 20px;
    margin-bottom: 16px;
  }
  #your-tour-destination .about-destination .section-description {
    font-size: 14px;
  }
  #your-tour-destination .your-destination-places {
    gap: 25px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(7, 1fr);
  }
  .maldives {
    grid-column: 1 / span 12;
    grid-row: 1 / span 1;
  }
  .indonesia {
    grid-column: 1 / span 12;
    grid-row: 2 / span 1;
  }
  .srilanka {
    grid-column: 1 / span 12;
    grid-row: 3 / span 1;
  }
  .north-america {
    grid-column: 1 / span 12;
    grid-row: 4 / span 1;
  }
  .kashmir {
    grid-column: 1 / span 12;
    grid-row: 5 / span 1;
  }
  .bangladesh {
    grid-column: 1 / span 12;
    grid-row: 6 / span 1;
  }
  .bandorban {
    grid-column: 1 / span 12;
    grid-row: 7 / span 1;
  }

  /* book-a-trip section  styles */
  #book-a-trip {
    gap: 30px;
    flex-direction: column;
    margin: 80px 0 100px;
  }

  #book-a-trip .trip-booking-steps {
    width: 100%;
  }
  #book-a-trip .trip-booking-steps .semi-title {
    font-size: 20px;
  }
  #book-a-trip .trip-booking-steps .section-title {
    margin-bottom: 32px;
  }
  .trip-booking-steps .steps .step {
    margin-bottom: 30px;
  }

  .steps .step .about-taken-step .step-title {
    font-size: 20px;
  }
  .steps .step .about-taken-step .about-step {
    font-size: 14px;
  }

  #book-a-trip .booking-progress-section {
    width: 100%;
  }
  .booking-progress-section .your-booked-trip .trip-name {
    font-size: 18px;
  }
  .booking-progress-section .your-booked-trip time,
  .booking-progress-section .your-booked-trip span {
    font-size: 14px;
  }
  .trip-outline .rome-trip .rome-name {
    font-size: 16px;
  }
  .trip-outline .rome-trip span,
  .trip-outline .rome-trip p {
    font-size: 14px;
  }

  /* why-choose-us section styles  */
  #why-choose-us {
    margin-top: 80px;
  }
  #why-choose-us .services-card .duel-card {
    flex-direction: column;
  }
  #why-choose-us .services-card .card {
    max-width: 380px;
    padding: 32px;
  }
  #why-choose-us .services-card .card .card-title {
    font-size: 20px;
  }
  #why-choose-us .services-card .card .card-text {
    font-size: 14px;
  }

  /* newsletter section styles  */
  #newsletter {
    flex-direction: column;
    margin-top: 80px;
  }
  #newsletter .newsletter-container .letter-title {
    font-size: 20px;
  }
  #newsletter .newsletter-container .letter-text {
    font-size: 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
  }
  #newsletter .newsletter-image {
    width: 100%;
  }
  #newsletter .newsletter-image .promo .website {
    font-size: 14px;
  }
  #newsletter .newsletter-image .promo .text {
    font-size: 18px;
  }

  /* footer section styles  */
  footer {
    margin-top: 80px;
    padding: 32px 0;
  }

  footer .footer-disclaimer {
    padding-bottom: 25px;
    margin-bottom: 25px;
  }
  footer .footer-disclaimer .footer-description {
    font-size: 14px;
    margin: 12px 0 20px;
  }
  footer .footer-disclaimer .social-icons {
    gap: 25px;
  }
  footer .footer-disclaimer .social-icons .fa-brands {
    font-size: 18px;
  }
  footer .copy-text {
    font-size: 14px;
  }
}
/* responsive styles for extra small devices  */
@media screen and (max-width: 575.98px) {
  .container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .section-title {
    font-size: 20px;
  }

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

  /* header section styles  */
  header .container {
    padding-top: 25px;
  }

  header nav {
    justify-content: space-around;
  }

  nav .brand-info img {
    width: 35px;
    object-fit: cover;
  }

  nav .brand-info .brand-name {
    font-size: 20px;
  }

  header nav ul {
    display: none;
  }

  header nav .menu-icon {
    display: block;
  }

  header nav .menu-icon i {
    font-size: 22px;
  }

  /* banner section styles  */
  #banner {
    padding: 50px 30px;
  }
  #banner .banner-container {
    max-width: 85%;
  }
  #banner .banner-container .banner-title {
    font-size: 22px;
    margin-bottom: 8px;
  }

  #banner .banner-container .banner-description {
    line-height: 1.3;
    margin-bottom: 20px;
  }

  #banner .banner-container form {
    flex-direction: column;
  }
  #banner .banner-container form .user-input {
    width: 100%;
  }
  #banner .banner-container form .user-input input,
  #banner .banner-container form .primary-btn {
    width: 100%;
  }

  /* our-popular-tour section style  */
  #our-popular-tour {
    gap: 40px;
    margin-top: 80px;
    flex-direction: column;
  }
  #our-popular-tour .reason-for-popularity {
    width: 100%;
    max-width: 100%;
  }
  #our-popular-tour .reason-for-popularity .section-title {
    font-size: 22px;
  }
  .reason-for-popularity .description .title-of-article {
    font-size: 16px;
  }
  .reason-for-popularity .description section p,
  .reason-for-popularity .description section ul li {
    font-size: 14px;
  }
  .reason-for-popularity .description section p strong {
    font-size: 15px;
  }
  #our-popular-tour .promo-image {
    width: 100%;
  }
  /* your-tour-destination section styles  */
  #your-tour-destination {
    margin-top: 80px;
  }
  #your-tour-destination .about-destination {
    max-width: 85%;
    margin-bottom: 28px;
  }
  #your-tour-destination .about-destination .section-title {
    font-size: 20px;
    margin-bottom: 16px;
  }
  #your-tour-destination .about-destination .section-description {
    font-size: 14px;
  }
  #your-tour-destination .your-destination-places {
    gap: 25px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(7, 1fr);
  }
  .maldives {
    grid-column: 1 / span 12;
    grid-row: 1 / span 1;
  }
  .indonesia {
    grid-column: 1 / span 12;
    grid-row: 2 / span 1;
  }
  .srilanka {
    grid-column: 1 / span 12;
    grid-row: 3 / span 1;
  }
  .north-america {
    grid-column: 1 / span 12;
    grid-row: 4 / span 1;
  }
  .kashmir {
    grid-column: 1 / span 12;
    grid-row: 5 / span 1;
  }
  .bangladesh {
    grid-column: 1 / span 12;
    grid-row: 6 / span 1;
  }
  .bandorban {
    grid-column: 1 / span 12;
    grid-row: 7 / span 1;
  }

  /* book-a-trip section  styles */
  #book-a-trip {
    flex-direction: column;
    margin: 80px 0 0;
  }

  #book-a-trip .trip-booking-steps {
    width: 100%;
  }
  #book-a-trip .trip-booking-steps .semi-title {
    font-size: 20px;
  }
  #book-a-trip .trip-booking-steps .section-title {
    margin-bottom: 32px;
  }
  .trip-booking-steps .steps .step {
    margin-bottom: 30px;
  }

  .steps .step .about-taken-step .step-title {
    font-size: 20px;
  }
  .steps .step .about-taken-step .about-step {
    font-size: 14px;
  }

  #book-a-trip .booking-progress-section {
    display: none;
  }

  /* why-choose-us section styles  */
  #why-choose-us {
    margin-top: 80px;
  }
  #why-choose-us .services-card .duel-card {
    flex-direction: column;
  }
  #why-choose-us .services-card .card {
    max-width: 100%;
    padding: 32px;
  }
  #why-choose-us .services-card .card .card-title {
    font-size: 20px;
  }
  #why-choose-us .services-card .card .card-text {
    font-size: 14px;
  }
  /* newsletter section styles  */
  #newsletter {
    flex-direction: column;
    margin-top: 80px;
  }
  #newsletter .newsletter-container {
    width: 100%;
    max-width: 475px;
  }

  #newsletter .newsletter-container .letter-title {
    font-size: 20px;
  }
  #newsletter .newsletter-container .letter-text {
    font-size: 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
  }
  #newsletter .newsletter-container form input {
    width: 100%;
  }
  #newsletter .newsletter-image {
    width: 100%;
  }
  #newsletter .newsletter-image .promo .website {
    font-size: 14px;
  }
  #newsletter .newsletter-image .promo .text {
    font-size: 18px;
  }
  /* footer section styles  */
  footer {
    margin-top: 80px;
    padding: 32px 0;
  }

  footer .footer-disclaimer {
    padding-bottom: 25px;
    margin-bottom: 25px;
  }
  footer .footer-disclaimer .footer-description {
    font-size: 14px;
    margin: 12px 0 20px;
  }
  footer .footer-disclaimer .social-icons {
    gap: 25px;
  }
  footer .footer-disclaimer .social-icons .fa-brands {
    font-size: 18px;
  }
  footer .copy-text {
    font-size: 14px;
  }
}