/* =============================================================================
   Template fixes — small, scoped corrections the purchased template needs once it
   holds real data. Loaded after style.css. Every rule names the section it fixes,
   so nothing here can reach another part of the site. Add new fixes as their own
   commented block; never restyle the template here.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Blog card photos: one height per row (owner, 2026-09-17)
   -----------------------------------------------------------------------------
   style.css (.blog-card .blog-img-wrap .blog-img img, ~line 9035) gives the photo
   only a MIN-height (280px; 250px below 1200px) and width 100%, so the height
   follows each photo's shape. The template's demo photos all share one shape;
   real guide covers do not (square 1200x1200 next to 864x576), so the cards in
   "Travel Tips & Inspirations" and "More Travel Guides" came out uneven.

   Fix: the same numbers as a fixed height. object-fit: cover is already set by
   the template, so the photo crops instead of stretching. Breakpoints and values
   are the template's own.
   Scoped to the two card rows; the Travel guides list (.home1-blog-page) shows
   one wide card per row and keeps the template rule. */
.home1-blog-section .blog-card .blog-img-wrap .blog-img img,
.home1-recommended-section .blog-card .blog-img-wrap .blog-img img {
  height: 280px;
}
@media (max-width: 1199px) {
  .home1-blog-section .blog-card .blog-img-wrap .blog-img img,
  .home1-recommended-section .blog-card .blog-img-wrap .blog-img img {
    height: 250px;
  }
}

/* -----------------------------------------------------------------------------
   2. Banner quick search: one box + Search (owner, 2026-09-17)
   -----------------------------------------------------------------------------
   Section 11 went from 3 fields to 1 (see the comment at the top of
   section-11-search-filter.blade.php). style.css lays .filter-input out as a
   4-column grid (31% 24.5% 24.5% 14%), which would leave the one box in a third
   of the row. These rules apply only to forms with the "quick-search" class.
   Colours, fonts, the dropdown panel and its rows are the template's own
   (.custom-select-wrap / .option-list-destination); only what a typed text box
   and link rows need is added. */
.filter-wrapper .filter-input.quick-search {
  grid-template-columns: 1fr 200px;
}
@media (max-width: 767px) {
  .filter-wrapper .filter-input.quick-search {
    grid-template-columns: 1fr;
  }
}
.filter-wrapper .filter-input.quick-search .single-search-box {
  cursor: text;
}
.filter-wrapper .filter-input.quick-search .quick-search-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 0;
  cursor: text;
}
.filter-wrapper .filter-input.quick-search .quick-search-field input {
  border: 0;
  outline: 0;
  padding: 0;
  background-color: transparent;
  color: var(--title-color);
  font-family: var(--font-poppins);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  width: 100%;
}
.filter-wrapper .filter-input.quick-search .quick-search-field input::placeholder {
  color: var(--title-color);
  opacity: 0.75;
}
.filter-wrapper .filter-input.quick-search .quick-search-field input::-webkit-search-cancel-button {
  cursor: pointer;
}
.filter-wrapper .filter-input.quick-search .quick-search-field span {
  color: var(--text-color);
  font-family: var(--font-poppins);
  font-size: 13px;
  line-height: 1;
}
@media (max-width: 576px) {
  .filter-wrapper .filter-input.quick-search .quick-search-field input {
    font-size: 15px;
  }
}
/* The panel spans the whole box, not the template's 320px minimum. */
.filter-wrapper .filter-input.quick-search .single-search-box .custom-select-wrap {
  min-width: 100%;
  max-height: 340px;
}
/* style.css gives every row display:flex, which beats the hidden attribute. */
.filter-wrapper .filter-input.quick-search .custom-select-wrap li[hidden],
.filter-wrapper .filter-input.quick-search .custom-select-wrap [hidden] {
  display: none !important;
}
.filter-wrapper .filter-input.quick-search .custom-select-wrap .option-list-destination li {
  padding: 0;
  margin-bottom: 0;
}
.filter-wrapper .filter-input.quick-search .custom-select-wrap .quick-search-link {
  display: block;
  width: 100%;
  padding: 10px 20px;
}
.filter-wrapper .filter-input.quick-search .custom-select-wrap .quick-search-link .destination {
  display: block;
}
.filter-wrapper .filter-input.quick-search .custom-select-wrap .option-list-destination li .destination .ui-title {
  max-width: 100%;
}
/* Keyboard highlight looks like the template's hover. */
.filter-wrapper .filter-input.quick-search .custom-select-wrap .option-list-destination li.is-active {
  background: rgba(211, 211, 211, 0.231372549);
}
.filter-wrapper .filter-input.quick-search .custom-select-wrap .option-list-destination li.is-active::before {
  opacity: 1;
}
.filter-wrapper .filter-input.quick-search .quick-search-empty {
  margin: 0;
  padding: 10px 20px;
  color: var(--text-color);
  font-family: var(--font-poppins);
  font-size: 14px;
}

/* -----------------------------------------------------------------------------
   3. Tour cards: short description + old price beside "Starting From"
      (owner, 2026-09-17)
   -----------------------------------------------------------------------------
   style.css leaves a 60px gap under the location/duration line
   (.location-and-duration margin-bottom). The cards now put the tour summary
   there (section-14-tour-packages, tours-results, detail-related), clamped to
   2 lines with a 2-line minimum so every card in a row keeps the same height.
   The gap above it shrinks only when a summary follows (:has), so a card
   without one looks exactly as the template drew it. */
.package-card .package-content .location-and-duration:has(+ .package-summary) {
  margin-bottom: 15px;
}
.package-card .package-content .package-summary {
  color: var(--text-color);
  font-family: var(--font-poppins);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  min-height: 44px;
  margin-bottom: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The struck-out old price now sits in the small "Starting From" label, not in
   the 25px price line where it made "AED 310 299/per person" wrap. */
.package-card .package-content .btn-and-price-area .price-area span del {
  margin-left: 4px;
  color: var(--text-color);
}
/* Tour list page, 1-column list view: style.css shows the inclusions list
   (.package-info) there, which already fills the space, so the summary hides
   when that list is present. The grid view hides the list, so the summary shows. */
.home1-tour-package-page .list-grid-product-wrap.column-1-wrapper .package-card .package-content .package-info + .package-summary {
  display: none;
}
/* Tour list page, grid view: the hidden inclusions list sits between the
   duration line and the summary, so the "+ .package-summary" rule above does
   not match. Close the same gap there (not in the 1-column list view, where
   that list is visible and keeps the template's spacing). */
.home1-tour-package-page .list-grid-product-wrap:not(.column-1-wrapper) .package-card .package-content .location-and-duration:has(+ .package-info + .package-summary) {
  margin-bottom: 15px;
}

/* -----------------------------------------------------------------------------
   4. Booking request page (template-booking, owner 2026-09-17)
   -----------------------------------------------------------------------------
   checkout.html has no hint text and no dropdown, so style.css has no rule for
   either. The departure-time <select> is turned into a nice-select by
   custom.js; it is given the exact box of the template's .form-inner input
   (height 60px, 5px radius, 1px border, 15px Poppins 500), so every field in the
   form looks the same. Scoped to .home1-checkout-page. */
.home1-checkout-page .booking-field-note {
  display: block;
  margin-top: 8px;
  color: var(--text-color);
  font-family: var(--font-poppins);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
.home1-checkout-page .form-inner .nice-select {
  float: none;
  width: 100%;
  height: 60px;
  line-height: 58px;
  padding: 0 40px 0 20px;
  border-radius: 5px;
  border: 1px solid var(--borders-color);
  color: var(--title-color);
  font-family: var(--font-poppins);
  font-size: 15px;
  font-weight: 500;
}
.home1-checkout-page .form-inner .nice-select .list {
  width: 100%;
}
.home1-checkout-page .form-inner .nice-select.disabled {
  color: var(--text-color);
}
@media (max-width: 576px) {
  .home1-checkout-page .form-inner .nice-select {
    height: 55px;
    line-height: 53px;
  }
}
.home1-checkout-page .order-sum-area .cart-footer .pricing-area .booking-field-note {
  margin-top: 12px;
}
.home1-checkout-page .booking-option-list {
  display: grid;
  gap: 10px;
}
.home1-checkout-page .booking-option {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 14px 18px;
  border: 1px solid var(--borders-color);
  border-radius: 5px;
  cursor: pointer;
}
.home1-checkout-page .booking-option input {
  width: auto;
  height: auto;
}

/* -----------------------------------------------------------------------------
   5. Banner quick search: the slim one-line bar (owner, 2026-09-19)
   -----------------------------------------------------------------------------
   The card was 224px tall on desktop and 360px on a phone: tabs on their own
   line, a 60px field carrying a second line of hint text, a 200px button and
   30px/35px padding. Same parts, one line:
     - the tabs move to the LEFT of the search bar (grid: auto 1fr), and the
       moving text line keeps the full width underneath;
     - padding 30/35 -> 14/16, field 60 -> 52, button 200 -> 150;
     - tabs get smaller text and padding.
   Below 992px it goes back to stacking, because a phone has no room for a row.
   Scoped to .quick-search-wrap, which only section 11 uses. */
.filter-wrapper .quick-search-wrap {
  padding: 14px 16px;
}
.filter-wrapper .quick-search-wrap .quick-search-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.filter-wrapper .quick-search-wrap .quick-search-row .filter-input-wrap {
  flex: 1;
  min-width: 0;
}
.filter-wrapper .quick-search-wrap .filter-item-list {
  margin-bottom: 0;
  gap: 8px;
}
.filter-wrapper .quick-search-wrap .filter-item-list .single-item {
  padding: 8px 14px;
  font-size: 14px;
  gap: 6px;
}
.filter-wrapper .quick-search-wrap .filter-item-list .single-item svg {
  width: 18px;
  height: 18px;
}
.filter-wrapper .quick-search-wrap .filter-bottom-text-slider {
  min-height: 24px;
}
.filter-wrapper .quick-search-wrap .filter-input.quick-search {
  grid-template-columns: 1fr 150px;
  gap: 12px;
}
.filter-wrapper .quick-search-wrap .filter-input.quick-search .single-search-box {
  height: 52px;
  padding: 6px 16px;
}
.filter-wrapper .quick-search-wrap .filter-input.quick-search .quick-search-field input {
  font-size: 15px;
}
.filter-wrapper .quick-search-wrap .filter-input.quick-search .primary-btn1 {
  padding: 15px 18px;
}
/* The dropdown hangs off the field, so it follows the shorter field. */
.filter-wrapper .quick-search-wrap .filter-input.quick-search .single-search-box .custom-select-wrap {
  top: 57px;
}
@media (max-width: 991px) {
  .filter-wrapper .quick-search-wrap {
    padding: 16px 14px;
  }
  .filter-wrapper .quick-search-wrap .quick-search-row {
    display: block;
  }
  .filter-wrapper .quick-search-wrap .filter-item-list {
    justify-content: center;
  }
  .filter-wrapper .quick-search-wrap .filter-input.quick-search {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 991px) {
  /* Phone: the row stacks, so the savings come from the gaps instead. */
  .filter-wrapper .quick-search-wrap .quick-search-row {
    margin-bottom: 8px;
  }
  .filter-wrapper .quick-search-wrap .filter-item-list {
    margin-bottom: 10px;
    gap: 6px;
  }
  .filter-wrapper .quick-search-wrap .filter-input.quick-search {
    gap: 8px;
  }
  .filter-wrapper .quick-search-wrap .filter-bottom-text-slider .swiper-slide p {
    font-size: 13px;
    line-height: 20px;
  }
}

/* ---------------------------------------------------------------------------
   6. The meeting-point line in the tour sidebar (swap day, 2026-09-20).

   detail-overview-close prints tours.pickup_details under the fact list when the
   field is filled. The template has no class for a note inside .package-pricing-card,
   and an unstyled <p> there inherits the card's large body size and sits flush
   against the ticks above it. This matches the fact list it follows: same muted
   colour, one step smaller, with the space the list items have between them.
   --------------------------------------------------------------------------- */
.package-pricing-card .pricing-pickup-note {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color, #5c5c5c);
}

/* ---------------------------------------------------------------------------
   7. The party-rule warning on the booking form (swap day, 2026-09-20).

   The guest rule line under the traveller boxes turns red while the boxes break
   it. The state is set by the quote endpoint's answer, not by a second copy of
   the rule in JavaScript, so the line can never contradict the server.
   --------------------------------------------------------------------------- */
.booking-field-note.is-warning {
    color: #b42318;
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   8. The price options block on the tour page (swap day, 2026-09-20).

   detail-pricing.blade.php restores the option/price table the retired tour page
   carried; the purchased template has no block for it, so the card around the
   template's own .cart-table is defined here. Everything inside the card is the
   template's markup — only the frame is new, and it borrows the Features block's
   spacing so the two sections read as one page.
   --------------------------------------------------------------------------- */
.package-pricing-lead {
    margin: 0 0 24px;
    max-width: 640px;
}

.package-option-card {
    height: 100%;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: #fff;
}

/* The default option is the one most people take, so it is marked, not just listed. */
.package-option-card.is-recommended {
    border-color: var(--primary-color1, #0a6d6a);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.package-option-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.package-option-head strong {
    font-size: 20px;
    line-height: 1.3;
}

.package-option-flag {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--primary-color1, #0a6d6a);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}

.package-option-note {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
}

/* The template's cart table is built for a 3-column basket. Two columns of prices
   need the second one right-aligned and the row padding tightened, nothing else. */
.package-option-table {
    width: 100%;
    margin-bottom: 18px;
}

.package-option-table th,
.package-option-table td {
    padding: 10px 0;
    vertical-align: middle;
}

.package-option-table thead th {
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}

.package-option-table th:last-child,
.package-option-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.package-option-table td del {
    opacity: 0.55;
    margin-right: 4px;
}

.package-option-table td small {
    font-size: 12px;
    opacity: 0.7;
}

.package-option-includes {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.package-option-includes li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 8px;
    font-size: 15px;
}

.package-option-includes svg {
    flex: 0 0 auto;
    margin-top: 4px;
    fill: var(--primary-color1, #0a6d6a);
}

/* Below 768px the template stacks .cart-table rows into label/value pairs using the
   data-label attributes, which is exactly what this table wants on a phone. */
@media (max-width: 767px) {
    .package-option-table thead {
        display: none;
    }

    .package-option-table tr {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .package-option-table td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 4px 0;
        text-align: left;
    }

    .package-option-table td:last-child {
        text-align: right;
    }

    .package-option-table td::before {
        content: attr(data-label);
        font-size: 13px;
        opacity: 0.7;
    }
}

/* ---------------------------------------------------------------------------
   9. The "Good to know" block on the tour page (swap day, 2026-09-20).

   detail-additional-info.blade.php now prints the tour's own cancellation and
   safety text, which is admin-authored rich text — paragraphs and lists, not the
   one-line items the template's .items-list was built for. This gives that prose
   the page's body rhythm and keeps list bullets from hanging outside the column.
   --------------------------------------------------------------------------- */
.additional-info-text {
    font-size: 15px;
    line-height: 1.7;
}

.additional-info-text p {
    margin-bottom: 12px;
}

.additional-info-text p:last-child,
.additional-info-text ul:last-child,
.additional-info-text ol:last-child {
    margin-bottom: 0;
}

.additional-info-text ul,
.additional-info-text ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.additional-info-text li {
    margin-bottom: 6px;
}

/* ---------------------------------------------------------------------------
   10. The reassurance line above the tour list (swap day, 2026-09-20).

   One line between the sort bar and the cards. Quiet on purpose: it is a fact,
   not a banner, and it must not compete with the tour photos underneath.
   --------------------------------------------------------------------------- */
.package-grid-assurance {
    margin: -6px 0 22px;
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   11. The two booking status pages (swap day, 2026-09-20).

   /booking-status and the signed confirmation page were the last public pages on
   the retired design. They are now built from the template's checkout wrappers;
   what is defined here is only what the template has no class for — the success
   mark, the reference card, the fact lists, the three steps and the progress
   timeline. Everything else is .checkout-form-wrapper, .form-inner and .primary-btn1.
   --------------------------------------------------------------------------- */
.booking-confirmed-card {
    padding: 40px;
    text-align: center;
}

.booking-confirmed-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: rgba(16, 137, 62, 0.1);
}

.booking-confirmed-mark svg {
    fill: #10893e;
}

.booking-confirmed-card h1 {
    margin-bottom: 10px;
    font-size: 34px;
    line-height: 1.25;
}

.booking-reference-card {
    margin: 28px auto 0;
    max-width: 420px;
    padding: 20px;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.booking-reference-card span,
.booking-reference-card small {
    display: block;
    font-size: 13px;
    opacity: 0.75;
}

.booking-reference-card strong {
    display: block;
    margin: 6px 0;
    font-size: 26px;
    letter-spacing: 0.04em;
}

/* The facts of a request. One column on a phone, two from 576px up. */
.booking-fact-list {
    display: grid;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.booking-fact-list li {
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.03);
}

.booking-fact-list small {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    opacity: 0.75;
}

.booking-fact-list strong {
    font-size: 16px;
    line-height: 1.5;
}

@media (min-width: 576px) {
    .booking-fact-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-fact-list.two {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.booking-step-list {
    display: grid;
    gap: 18px;
    margin-top: 32px;
    text-align: left;
}

@media (min-width: 768px) {
    .booking-step-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.booking-step-list article {
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.booking-step-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--primary-color1, #0a6d6a);
    color: #fff;
    font-style: normal;
    font-weight: 600;
}

.booking-step-list h2 {
    margin-bottom: 6px;
    font-size: 18px;
}

.booking-step-list p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.booking-confirmed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 32px;
}

.booking-result-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.booking-status-pill {
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--primary-color1, #0a6d6a);
    color: #fff;
    font-size: 13px;
}

.booking-timeline {
    margin-top: 28px;
}

.booking-timeline h3 {
    margin-bottom: 14px;
    font-size: 18px;
}

.booking-timeline-entry {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}

.booking-timeline-entry i {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--primary-color1, #0a6d6a);
}

.booking-timeline-entry small {
    display: block;
    font-size: 13px;
    opacity: 0.75;
}

.booking-timeline-entry p {
    margin: 6px 0 0;
    font-size: 15px;
}

.booking-result-empty {
    text-align: center;
}

.booking-result-empty h2 {
    margin-bottom: 8px;
    font-size: 24px;
}

/* The "Request received" line above the thank-you. Small and quiet: the heading is
   the message, this only tells the reader which of the two booking pages they are on. */
.booking-confirmed-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color1, #0a6d6a);
}

/* ---------------------------------------------------------------------------
   12. The company tagline (client, 2026-09-23; made the hero line 2026-09-24).

   "Arabian Explore — Where Every Journey Becomes a Story!" It started as a quiet
   20px line under the headline. The client asked for it to carry real weight, and
   for the template's supporting sentence beneath it to go, so it is now the only
   thing under the headline and is set to be read.

   WHAT MAKES IT STAND OUT, and why each choice is free:

   - A DIFFERENT TYPEFACE. The page already downloads two Google families, Plus
     Jakarta Sans and Poppins, both with their italics (see the font request in
     style.css). The body and the old tagline are upright Poppins; the headline is
     Plus Jakarta Sans. Setting the tagline in Plus Jakarta Sans ITALIC gives it a
     voice of its own without a single extra byte over the network.
   - SIZE. 32px against the headline's 65px: clearly second, clearly not small print.
   - THE BRAND NAME IN GOLD. #FFE100 is the template's own accent, already used for
     the "Sale" badges, so no new colour enters the palette. Upright and bold against
     the italic, so the eye lands on the name first.
   - A SHORT GOLD RULE UNDERNEATH. It closes the line and separates it from the
     search bar below, which is what the removed sentence used to do by being there.
   - A TEXT SHADOW. The video behind it is only dimmed by rgba(0,0,0,.2), and the
     Dubai and mosque clips both have bright skies. White italic at 32px over a pale
     sky is the one place this could fail to be readable, so the shadow is not
     decoration — it is what keeps the line legible whatever frame is on screen.

   The footer copy of the tagline is deliberately NOT changed: there it sits under
   the company name as a quiet subtitle, which is the right weight for a footer.
   --------------------------------------------------------------------------- */
.home1-banner-section .banner-content .banner-tagline {
    display: block;
    margin: 22px 0 0;
    font-family: var(--font-plusJakartaSans);
    font-style: italic;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.home1-banner-section .banner-content .banner-tagline-brand {
    font-style: normal;
    font-weight: 700;
    color: #ffe100;
}

.home1-banner-section .banner-content .banner-tagline::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 20px auto 0;
    border-radius: 3px;
    background: #ffe100;
}

@media (max-width: 1199px) {
    .home1-banner-section .banner-content .banner-tagline {
        font-size: 26px;
        margin-top: 18px;
    }

    .home1-banner-section .banner-content .banner-tagline::after {
        margin-top: 16px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section .banner-content .banner-tagline {
        font-size: 20px;
        margin-top: 14px;
        line-height: 1.4;
    }

    .home1-banner-section .banner-content .banner-tagline::after {
        width: 56px;
        margin-top: 14px;
    }
}

/* The footer keeps the quiet version: a subtitle under the company name. */
.footer-logo-and-addition-info .address-area .footer-tagline {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   13. The "We Accept" card strip (client feedback item 7, 2026-09-23).

   The template sized these logos with `.payment-method-list li a img`, and every
   logo was wrapped in `<a href="#">` — a link that goes nowhere. The anchors were
   removed, which also silently killed the sizing rule: the images fell back to
   their natural size, so the template's 52x28 files and the new 104x56 ones were
   drawn at two different scales in the same row.

   This is the template's own rule, re-aimed at the image itself. Same 52x28 box,
   same object-fit, so the strip looks exactly as the template drew it whatever
   size the source file happens to be.
   --------------------------------------------------------------------------- */
.footer-section .payment-method-area .payment-method-list li img {
    width: 52px;
    height: 28px;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
   14. The three Tripadvisor awards on one line (client feedback, 2026-09-23).

   style.css gives .about-awards a 60px gap and each badge a fixed width:203px.
   Two badges fitted; the third wrapped onto a second line the moment the 2024
   award was added — 3×203 + 2×60 = 729px in a column that is only 590px wide.
   Measured in a browser at 1440 and at 390; it wrapped at both.

   The badges are allowed to share the row instead: each takes at most a third of
   the space, and keeps its own proportions because the height follows the width.
   Nothing is stretched and nothing is cropped. The footer row and the row beside
   the reviews already fitted three, and are not touched.
   --------------------------------------------------------------------------- */
.home1-about-section .about-image-area .about-awards {
    flex-wrap: nowrap;
    gap: 24px;
}

.home1-about-section .about-image-area .about-awards img {
    width: auto;
    max-width: calc((100% - 48px) / 3);
    height: auto;
}

@media (max-width: 767px) {
    .home1-about-section .about-image-area .about-awards {
        gap: 12px;
    }

    .home1-about-section .about-image-area .about-awards img {
        max-width: calc((100% - 24px) / 3);
    }
}

/* ---------------------------------------------------------------------------
   15. How far the search bar sits over the hero video (client, 2026-09-23).

   The client asked for more of the video to be visible: the search bar should
   overlap it by about 20%, not sit almost entirely on top of it.

   Measured before the change, with the bar 129px tall on a desktop:
       1440  100px over the video  = 78% of the bar
       1024  110px                 = 85%
        390  140px of a 285px bar  = 49%

   The template's own rule is a negative margin at three breakpoints (-100, -110,
   -140), so all three are answered here. The new numbers are 20% of the bar's
   real height at that width — 129px on a desktop, 285px on a phone, where the
   fields stack.

   Keep these in step with the bar's height. If the bar ever gains or loses a row,
   re-measure and change the number; a percentage cannot be used because a
   percentage margin in CSS is a share of the WIDTH, not the height.
   --------------------------------------------------------------------------- */
.filter-wrapper {
    margin-top: -26px;
}

@media (max-width: 1399px) {
    .filter-wrapper {
        margin-top: -26px;
    }
}

@media (max-width: 991px) {
    .filter-wrapper {
        margin-top: -57px;
    }
}

/* ---------------------------------------------------------------------------
   16. No sideways scrolling on phones (go-live check, 2026-10-01).

   Found by checking all 57 public pages at 390px on the imported live data.
   Three were wider than the screen, so a thumb could drag them sideways:

       /about                                  16px   template scroll-in animations
       /blogs                                  15px   (wow fadeIn*) start the element
                                                      off to the side, and a row
                                                      column sits 2px past the edge
       /tour/2-parks-in-yas-island-abu-dhabi    7px   the "Select <option name>"
                                                      price button

   The page rule uses CLIP, not HIDDEN, on purpose. overflow-x: hidden on body
   can make the body its own scroll container, and then position: sticky stops
   working — the tour page's section bar (.home1-inner-page-navigation-wrap)
   relies on sticky. clip never creates a scroll container. Measured with the
   rule in place: that bar still travels from 793px to 0 and holds there.

   The button rule is for any long label, not just this tour: the label is the
   price option's name, which the owner types in admin, and "Select 2 Parks in
   Yas Island Abu Dhabi" is 360px at a width where the card holds 316. The
   template sets its label to one line; on phones it may now wrap to two.
   Desktop is untouched — the media query stops at 575px.
   --------------------------------------------------------------------------- */
html,
body {
    overflow-x: clip;
}

@media (max-width: 575px) {
    .primary-btn1 {
        max-width: 100%;
    }

    .primary-btn1 span {
        white-space: normal;
        text-align: center;
    }
}