/* --------------------------------------------------------------------------
   1. Large Desktops & Wide Screens (max-width: 1440px)
   -------------------------------------------------------------------------- */
@media (max-width: 1899px) {
  .headerArea {
    padding: 14px 0;
  }

  .logo img {
    max-width: 130px;
  }

  .container-fluid {
    padding: 0 50px;
  }

  .mainNav > ul > li > a {
    font-size: 16px;
  }

  .cta-btn {
    font-size: 16px;
    padding: 8px 18px;
  }

  .heroContentWrapper {
    top: 100px;
  }

  .hero-title {
    font-size: 48px;
    margin-bottom: 24px;
  }

  .hero-tag {
    font-size: 18px;
    padding: 5px 23px;
  }

  .hero-content p {
    font-size: 18px;
    max-width: 610px;
  }

  .heroMobile {
    right: 146px;
  }

  .heroMobile img {
    max-width: 236px;
  }

  .bubblesItem {
    max-width: 140px;
    padding-bottom: 10px;
    border-radius: 16px;
  }

  .bubbleTag {
    font-size: 14px;
    padding: 1px 5px;
  }

  .bubblesItem p {
    font-size: 12px;
  }

  .bubblesItem h6 {
    font-size: 16px;
  }

  .bubbles01 {
    left: -80px;
    bottom: 20px;
  }

  .bubbles02 {
    left: -105px;
    bottom: 170px;
  }

  .bubbles03 {
    right: -80px;
    bottom: 200px;
    max-width: 180px;
  }

  .bubblesItem li {
    font-size: 12px;
  }

  .apart_card_item {
    width: 270px;
    min-width: 270px;
    flex: 0 0 270px;
  }

  .apart_card_item .card_img_box {
    height: 200px;
  }

  .mainNav > ul {
    gap: 10px;
    padding: 10px 10px;
  }

  .reelToRoute .sectionTitle {
    max-width: 670px;
  }

  .sectionTitle h2 {
    font-size: 36px;
    line-height: 48px;
  }

  .sectionTitle {
    margin-bottom: 30px;
  }

  .stepWrapper {
    display: flex;
    gap: 40px;
    margin: 80px 0;
  }

  .stepItem p {
    font-weight: 500;
    font-size: 13px;
  }

  .stepItem {
    padding: 15px 10px 9px;
  }

  .flightline {
    top: -11px;
  }

  .reelToRoute {
    padding: 18vh 0px;
  }

  .overheadPlane {
    max-width: 250px;
  }

  .tripsGrid {
    gap: 25px;
  }

  .travelDnaPoster img {
    max-width: 180px;
  }

  .postertags {
    padding: 5px 17px;
    font-size: 14px;
  }

  .testimonialContents p {
    font-size: 16px;
    line-height: 28px;
  }

  .apart_card_item p {
    font-size: 13px;
    line-height: 20px;
  }
}

/* --------------------------------------------------------------------------
   2. Desktops & Laptops (max-width: 1199px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .mainNav > ul {
    gap: 25px;
  }

  .container-fluid {
    padding: 0 15px;
  }

  .cta-btn i {
    display: block;
  }

  .cta-btn span {
    display: none;
  }

  nav.mainNav {
    position: fixed;
    /* top: 5; */
    top: 0;
    left: 0;
    width: 82%;
    max-width: 400px;
    min-height: 100vh;
    background: var(--borderColor);
    transform: translateX(-100%);
    transition: 0.5s;
    z-index: 9;
  }
  .mobilenavBtn {
    display: block;
  }

  nav.mainNav.actived,
  nav.mainNav.active {
    transform: translateX(0%);
    transition: 0.5s;
  }

  .mainNav > ul {
    gap: 12px 18px;
    flex-wrap: wrap;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    padding-top: 80px;
  }

  .mainNav > ul > li {
    width: 100%;
  }

  .mainNav > ul > li > a {
    display: block;
    border-radius: 4px;
  }

  .headerArea {
    padding: 12px 0;
    /* background: rgba(10, 34, 48, 0.95); */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); */
  }

  .headerScrolled .mainNav > ul > li > a:hover,
  .headerScrolled .mainNav > ul > li > a.active {
    background: var(--white);
    color: var(--themeBlack);
    transition: 0.5s;
  }

  .logo {
    position: relative;
    z-index: 10;
  }

  .mobilenavBtn {
    display: block;
  }

  .header-button {
    display: flex;
    gap: 15px;
    align-items: center;
  }

  .cta-btn {
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 4px;
  }
}

/* --------------------------------------------------------------------------
   3. Tablets (Landscape) & Small Laptops (max-width: 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .hero-section {
    padding: 80px 0;
  }

  .header-wrapper {
    flex-wrap: wrap;
    gap: 15px;
  }

  .header-button {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .mainNav > ul {
    gap: 20px;
  }

  .why_choose_paid .heading_wrapper h2.process_main_title {
    font-size: 34px;
  }

  .platformContent,
  .our_platformsOuter .row:nth-child(even) .platformContent {
    flex: inherit;
    padding: 20px 15px;
    background:
      linear-gradient(var(--white), var(--white)) padding-box,
      linear-gradient(180deg, #ffffff 0%, #d8d8d8 100%) border-box;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-radius: 0 0 30px 30px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .heroMobile {
    display: none;
  }

  .platformImg {
    width: 200px;
  }

  .platformContent {
    padding: 30px 20px;
  }

  .why_choose_paid {
    padding: 20vh 0 11vh;
  }

  .flightline {
    top: 5px;
  }

  .travelDnaPoster {
    max-width: 400px;
  }

  .tesItem.tes03 {
    margin-top: 140px;
  }

  .tesContent {
    padding: 120px 30px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-image-wrapper img {
    height: 630px;
    object-fit: cover;
  }

  .hero-title {
    font-size: 40px;
    margin-bottom: 15px;
  }

  .hero-content p {
    font-size: 16px;
    max-width: 590px;
    line-height: 24px;
  }

  .heroMobile img {
    max-width: 136px;
  }

  .heroForm {
    margin: 30px auto 0;
  }

  .bubblesItem {
    width: 200px;
    max-width: 280px;
  }

  .bubbles01 {
    left: -170px;
    bottom: 10px;
  }

  .bubbles03 {
    right: -140px;
    bottom: 80px;
    max-width: 280px;
  }

  .sectionTitle h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .sectionTitle p {
    font-size: 16px;
    line-height: 26px;
  }

  .overheadPlane {
    max-width: 180px;
    top: calc(50% + 72px) !important;
    transform: translateY(-50%);
  }

  .tripsGrid {
    gap: 15px;
  }

  .tripImg {
    padding: 5px;
  }

  .stepWrapper {
    margin: 150px 0;
    gap: 15px;
  }

  .flightline {
    top: calc(50% - 18px);
    transform: translateY(-50%);
  }

  .paltfprmsItem {
    display: grid;
    align-items: flex-end;
    margin-top: 50px;
  }

  .platformContent,
  .our_platformsOuter .row:nth-child(even) .platformContent {
    padding: 30px 20px;
  }

  .platformImg {
    width: 100%;
    height: 350px;
    display: flex;
    align-items: flex-end;
  }

  .why_choose_paid {
    padding: 20vh 0 11vh;
  }

  .tripOverviewWrapper {
    padding: 20px 24px 20px;
  }

  .overviewCard {
    padding: 10px 10px;
  }

  .overviewCardsGrid .row .col-md-4,
  .bookingDashboardStats .row .col-md-4 {
    width: 100%;
  }

  .dayList {
    flex-direction: row;
    gap: 8px;
  }

  .dayList li h4 {
    font-size: 12px;
  }

  .tesItem.tes03 {
    margin-top: 180px;
  }

  .tesContent {
    padding: 100px 30px;
  }

  .travelProvider h2 {
    font-size: 32px;
  }

  .dnaSignals li {
    padding: 24px 13px;
  }
}

/* --------------------------------------------------------------------------
   4. Tablets (Portrait) & Mobile (Landscape) (max-width: 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .overheadPlane {
    max-width: 160px;
  }

  .hero-image-wrapper img {
    height: 100%;
    object-fit: cover;
  }

  .hero-content {
    top: 15px;
    transform: inherit;
    padding: 0 15px;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 30px;
    line-height: 42px;
    margin-bottom: 15px;
  }

  .hero-content p {
    font-size: 14px;
    line-height: 20px;
  }

  .heading_wrapper h2 {
    font-size: 30px;
    line-height: 40px;
  }

  .why_choose_paid {
    padding: 50px 0 10px;
    height: auto;
    height: auto;
    min-height: auto;
  }

  .why_choose_desc {
    font-size: 14px;
    margin-bottom: 25px;
  }

  .apart_sec_wrapper {
    padding: 20px 0;
  }

  .apart_sec {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
  }

  .apart_cards_track {
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: auto;
    width: 100%;
    margin: 20px 0;

    /* Hide scrollbar - Firefox */
    scrollbar-width: none;

    /* Hide scrollbar - IE & Edge (Legacy) */
    -ms-overflow-style: none;
  }

  /* Hide scrollbar - Chrome, Safari & Edge */
  .apart_cards_track::-webkit-scrollbar {
    display: none;
  }

  .apart_card_item {
    transform: none !important;
  }

  .faq_section {
    padding: 40px 0;
  }

  .faq_left_content {
    margin-bottom: 25px;
    text-align: center;
  }

  .faq_left_content .heading_wrapper {
    text-align: center !important;
  }

  .travelProvider {
    margin-top: 60px;
  }

  .travelDNA {
    padding: 60px 0;
  }

  .travelDnaPoster {
    transform: translateY(0px);
  }

  .hero-image-wrapper {
    height: 100vh;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .flightPathWrapper {
    padding-top: 130px;
  }

  .stepWrapper {
    display: grid;
    gap: 50px;
    margin: 50px 0;
  }

  .heroMobile {
    right: inherit;
    left: 50%;
    transform: translateX(-50%);
    max-width: 300px;
    width: 100%;
  }

  .heroMobile img {
    max-width: 206px;
    margin: auto;
    display: table;
  }

  .bubbles03 {
    right: -60px;
    bottom: 200px;
    max-width: 180px;
  }

  .bubbles02 {
    left: -65px;
    bottom: 200px;
  }

  .bubbles01 {
    left: -70px;
    bottom: 20px;
  }

  .reelToRoute {
    padding: 40px 0px 150px;
    overflow: visible;
  }

  .flightline {
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 170vw !important;
    max-width: max-content;
  }

  .sectionTitle h2 {
    font-size: 26px;
    line-height: 32px;
  }

  .sectionTag {
    font-size: 12px;
    padding: 7px 19px;
  }

  .sectionTitle p {
    font-size: 14px;
    line-height: 20px;
  }

  .hero-tag {
    font-size: 14px;
    padding: 5px 23px;
  }

  .tripsGrid {
    display: flex;
    gap: 25px;
    overflow-x: auto;

    /* Firefox */
    scrollbar-width: none;

    /* IE & Edge (Legacy) */
    -ms-overflow-style: none;
  }

  /* Chrome, Safari, Edge */
  .tripsGrid::-webkit-scrollbar {
    display: none;
  }

  .tripItem {
    width: 60vw;
    min-width: 60vw;
  }

  .fearture_reels {
    padding: 40px 0;
  }

  .paltfprmsItem {
    display: grid;
    margin-top: 20px;
    height: calc(100% - 20px);
  }

  .our_platformsOuter .col-md-6 {
    width: 50%;
  }

  .platformImg {
    width: 100%;
    height: 170px;
    display: flex;
    align-items: end;
  }

  .platformContent h4 {
    font-size: 15px;
    margin-bottom: 15px;
  }

  .platformContent p {
    font-size: 14px;
    line-height: 18px;
  }

  .our_platforms {
    padding: 0 0 50px;
  }

  .workspaceSec {
    padding: 50px 0;
  }

  .tripTabWrapper {
    margin-top: 50px;
  }

  .tabHead .nav-tabs {
    display: flex;
    flex-flow: nowrap;
    overflow-x: auto;
    width: 100%;
    gap: 20px;

    /* Hide scrollbar - Firefox */
    scrollbar-width: none;

    /* Hide scrollbar - IE & Edge (Legacy) */
    -ms-overflow-style: none;
  }

  /* Hide scrollbar - Chrome, Safari & Edge */
  .tabHead .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .tripTabWrapper {
    height: auto;
  }

  .overviewHeading {
    font-size: 20px;
    font-weight: 500;
  }

  .testimonialContents .sectionTitle,
  .DNAcontent .sectionTitle {
    text-align: center !important;
    margin-bottom: 10px;
  }

  .testimonialContents p {
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 30px;
  }

  .tesContent {
    position: relative;
    padding: 100px 15px;
  }

  .tesItem.tes02 {
    right: 15px;
  }

  .tesItem p {
    font-size: 12px;
    line-height: 18px;
  }

  .tesItem.tes03 {
    margin-top: 210px;
    margin-left: 30px;
  }

  .travelDNA .row {
    flex-flow: wrap-reverse;
  }

  .tag2 {
    top: -17%;
  }

  .DNAcontent p {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  .nextTripSec {
    padding: 50px 0;
    overflow: hidden;
  }

  .nextTripWrapperCard {
    border-radius: 20px;
    padding: 50px 20px 170px;
  }

  .nextTravelBtns .btnPrimary {
    width: 100%;
    max-width: 150px;
    justify-content: center;
  }

  .btnPrimary {
    padding: 15.5px 6px;
    font-size: 14px;
  }

  .nextTravelBtns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .footerArea {
    padding: 50px 0 0;
  }

  .footerArea .col-md-4 {
    width: 50%;
  }

  .footerArea .row .col-md-4:nth-child(3) .footCol,
  .footerArea .row .col-md-4:last-of-type .footCol {
    margin-top: 30px;
  }

  .travelProvider h2 {
    font-size: 22px;
  }

  .cta-btn {
    font-size: 16px;
    padding: 5px 10px;
    font-size: 20px;
    border-radius: 8px;
  }

  .tesItem {
    background: #ffffff75;
    max-width: 200px;
    padding: 10px;
    backdrop-filter: blur(8px);
  }

  .tripPoster {
    width: 690px;
    max-width: max-content;
  }

  .subcriptionHead {
    margin-top: 60px;
  }

  .copyRight {
    margin-top: 30px;
  }

  .testimonialSec {
    padding: 50px 0;
  }

  .tripSideWidgets {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
  }

  .estimatedCostCard,
  .weatherWidgetCard {
    flex: 1 1 0%;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .estimatedCostCard {
    padding: 29px 10px;
  }

  .weatherWidgetCard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }

  .nexTripContent p {
    font-size: 14px;
    line-height: 24px;
  }

  .tripOverviewWrapper {
    padding: 32px 15px 15px;
  }
}

/* --------------------------------------------------------------------------
   5. Mobile Devices (Portrait) (max-width: 575px)
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .hero-content h1 {
    font-size: 24px;
    line-height: 34px;
  }

  .why_choose_paid .heading_wrapper h2.process_main_title,
  .heading_wrapper h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .subscriptionForm {
    padding: 4px;
    border-radius: 10px;
    margin-top: 25px;
  }

  .subscriptionForm .form-control {
    padding: 8px 10px !important;
    font-size: 14px;
  }

  .subscriptionForm .btnPrimary {
    padding: 10px 18px !important;
    font-size: 14px;
    border-radius: 8px !important;
  }

  .travelProvider p {
    font-size: 14px;
  }

  .dnaSignals {
    gap: 12px;
  }

  .dnaSignals li {
    padding: 18px 15px;
  }

  .dnaSignals li h3 {
    font-size: 32px;
  }

  .postertags {
    font-size: 12px;
    padding: 5px 12px;
  }

  .travelDnaPoster {
    max-width: 320px;
    margin-top: 40px;
  }

  .tag1 {
    left: 2%;
    top: 22%;
  }

  .tag2 {
    top: -11%;
    left: 50%;
  }

  .tag3 {
    right: 2%;
    top: 20%;
  }

  .tag4 {
    left: 2%;
    bottom: 42%;
  }

  .tag5 {
    right: 2%;
    bottom: 40%;
  }

  .sectionTitle h2 {
    font-size: 22px;
    line-height: 30px;
  }

  .hero-content h1 {
    font-size: 22px;
    line-height: 30px;
  }
}

@media (max-width: 400px) {
  .bubbles03 {
    right: -30px;
    bottom: 200px;
    max-width: 160px;
  }

  .bubbles02 {
    left: -35px;
    bottom: 200px;
  }

  .bubbles01 {
    left: 0;
    bottom: 20px;
  }

  .bubblesItem ul {
    padding-left: 20px;
    display: inline-grid;
    gap: 4px;
  }

  .heroMobile {
    max-width: 300px;
  }

  .hero-content {
    padding: 0 0px;
  }

  .hero-tag {
    padding: 5px 15px;
  }
}