/* ============================================================
   FlightsFareSolutions — Responsive Breakpoints
   Mobile-first with min-width breakpoints
   ============================================================ */


@media screen and (min-width: 320px) and (max-width: 768px) { 
    /* STYLES HERE */
	
	.top-bar {
		display: none;
	}
	.navbar__logo img {
		height: 50px;
	}
	.navbar__hamburger {
		margin-right: 40px !important;
	}
	
	.form-group {
		width: 100%;
		margin-bottom: 20px;
	}
	.ContactForm {
		display: block;
	}
	.contact-form {
		padding: 20px 10px;
	}
	.contact-info__card {
		padding: 20px 10px;
	}
	.contact-info__icon {
		display: none;
	}
	
}


/* ============================================================
   MOBILE (0 – 767px)
   ============================================================ */
@media (max-width: 767px) {
  /* --- Navbar --- */
  .navbar__menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 360px;
    height: 100vh;
    background: rgba(22, 19, 45, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: flex-start;
    padding: 50px 20px 30px;
    gap: var(--space-md);
    transition: right var(--transition-base);
    z-index: calc(var(--z-navbar) - 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
  }

  .navbar__menu.active {
    right: 0;
  }

  .navbar__hamburger {
    display: flex;
  }

  .navbar__link {
    font-size: var(--fs-body);
    padding: var(--space-sm) 0;
    width: 100%;
  }

  .navbar__cta {
    margin-left: 0;
    margin-top: var(--space-md);
    width: 100%;
    text-align: center;
  }

  .navbar__cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Mobile menu overlay */
  .navbar__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-navbar) - 2);
  }

  .navbar__overlay.active {
    display: block;
  }

  /* --- Hero --- */
  .hero {
    min-height: auto;
    padding-bottom: var(--space-4xl);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: calc(var(--navbar-height) + var(--space-2xl));
    gap: var(--space-xl);
  }

  .hero__content {
    text-align: center;
    padding-block: var(--space-xl);
  }

  .hero__label {
    margin-inline: auto;
  }

  .hero__subtitle {
    margin-inline: auto;
  }

  .hero__cta {
    justify-content: center;
  }

  .hero__stats-strip {
    justify-content: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
  }

  .hero__stat {
    text-align: center;
  }

  .hero__visual {
    display: none;
  }

  .hero::after {
    height: 100px;
  }

  /* --- Stats --- */
  .stats { margin-top: -40px; }

  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .stats__card {
    padding: var(--space-lg) var(--space-md);
  }

  .stats__number {
    font-size: var(--fs-h3);
  }

  /* --- Solutions --- */
  .solutions__grid {
    grid-template-columns: 1fr;
  }

  /* --- Destinations --- */
  .destinations__grid {
    grid-template-columns: 1fr;
  }

  .destination-card {
    height: 280px;
  }

  /* --- Blog --- */
  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* --- Testimonials --- */
  .testimonial-card {
    flex: 0 0 300px;
  }

  /* --- Booking --- */
  .booking__inner {
    grid-template-columns: 1fr;
  }

  .booking__form {
    grid-template-columns: 1fr;
  }

  .booking__form-container {
    padding: var(--space-xl);
  }

  /* --- Footer --- */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer__bottom-links {
    justify-content: center;
  }

  /* --- Page Header --- */
  .page-header {
    padding: calc(var(--navbar-height) + var(--space-2xl)) 0 var(--space-2xl);
  }

  /* --- About --- */
  .about-story {
    grid-template-columns: 1fr;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .timeline::before {
    left: 20px;
  }

  .timeline__item {
    grid-template-columns: 1fr;
    padding-left: 50px;
  }

  .timeline__item:nth-child(odd) .timeline__content,
  .timeline__item:nth-child(even) .timeline__content {
    grid-column: 1;
    text-align: left;
  }

  .timeline__dot {
    left: 20px;
  }

  /* --- Contact --- */
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* --- Grids --- */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  /* --- Legal --- */
  .legal-content {
    grid-template-columns: 1fr;
  }

  .legal-sidebar {
    position: static;
    max-height: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-xl);
  }

  .legal-sidebar__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .legal-sidebar__link {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-xs) var(--space-sm);
  }

  .legal-sidebar__link:hover,
  .legal-sidebar__link.active {
    border-left-color: transparent;
    border-bottom-color: var(--clr-sky);
  }

  /* --- Dest Grid --- */
  .dest-grid {
    grid-template-columns: 1fr;
  }

  .dest-card {
    height: 260px;
  }

  /* --- Blog Featured --- */
  .blog-featured {
    grid-template-columns: 1fr;
  }

  .blog-featured__image-wrap {
    min-height: 200px;
  }

  /* --- Services Grid --- */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* --- FAQ --- */
  .faq__question {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--fs-small);
  }

  /* --- Section spacing --- */
  .section {
    padding-block: clamp(3rem, 6vw, 6rem);
  }

  .section__header {
    margin-bottom: var(--space-2xl);
  }
}

/* ============================================================
   TABLET (768px – 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  /* --- Navbar --- */
  .navbar__menu {
    gap: var(--space-md);
  }

  .navbar__link {
    font-size: var(--fs-xs);
  }

  /* --- Hero --- */
  .hero__inner {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-xl);
  }

  .hero__dashboard-container {
    max-width: 380px;
  }
  .hero__floating-badge--1 {
    top: 5%;
    left: -10px;
  }
  .hero__floating-badge--2 {
    bottom: 10%;
    right: -10px;
  }
  .hero__floating-badge--3 {
    top: 50%;
    left: -20px;
  }

  /* --- Stats --- */
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }

  .stats__card {
    padding: var(--space-lg);
  }

  /* --- Solutions --- */
  .solutions__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Destinations --- */
  .destinations__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Blog --- */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin-inline: auto;
  }

  /* --- Booking --- */
  .booking__inner {
    grid-template-columns: 1fr;
  }

  /* --- Footer --- */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  /* --- Grids --- */
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* --- Dest Grid --- */
  .dest-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- About --- */
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Services --- */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Blog Featured --- */
  .blog-featured__image-wrap {
    min-height: 280px;
  }
}

/* ============================================================
   LARGE TABLET / SMALL DESKTOP (1025px – 1200px)
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1200px) {
  .navbar__link {
    font-size: var(--fs-xs);
  }

  .navbar__menu {
    gap: var(--space-md);
  }

  .hero__dashboard-container {
    max-width: 440px;
  }

  .dest-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   DESKTOP (1025px+)
   ============================================================ */
@media (min-width: 1025px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================ */
@media (hover: none) {
  .solution-card:hover,
  .destination-card:hover,
  .dest-card:hover,
  .blog-card:hover,
  .service-card:hover,
  .testimonial-card:hover {
    transform: none;
  }

  .destination-card:hover .destination-card__image,
  .blog-card:hover .blog-card__image,
  .dest-card:hover .dest-card__img {
    transform: none;
  }

  .destination-card__cta {
    opacity: 1;
    transform: translateY(0);
  }

  .magnetic-btn {
    transform: none !important;
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .navbar,
  .back-to-top,
  .scroll-progress,
  .loader,
  .hero__visual,
  .hero__particles,
  .footer__socials {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .hero {
    min-height: auto;
    background: none;
    color: #000;
    padding: 2rem 0;
  }

  .hero__title,
  .hero__subtitle {
    color: #000;
  }
}