/* ==========================================================================
   mobile.css - Baniyan Tours and Travels
   Mobile and tablet only (<=991px). Loaded last, so it wins over
   style.css. Desktop is untouched by everything in this file.
   ========================================================================== */

/* ==========================================================================
   1. CTA SECTION - OVERLAPS THE FOOTER AT EVERY WIDTH
   --------------------------------------------------------------------------
   On desktop the green CTA box sits ON the footer: .inner-cta pulls it
   down 150px and .footer-inner leaves 130px of top padding to catch it.

   This file used to drop that overlap below 992px and stand the box in
   its own gap above the footer instead. It now keeps the desktop
   placement all the way down, so the box reads the same way on a phone
   as it does on a desktop.

   The pull is scaled with the breakpoints rather than left at 150px: the
   box is taller on a narrow screen (the content stacks and centres), so
   the same 150px would have buried the Book Now button in the footer.

   The footer's top padding is what sets the space BELOW the box, and two
   paddings stack there: .footer-inner, and .footer-wrapper-style-between's
   own --footer-pad-top. So the visible gap is

       footer-inner + --footer-pad-top - the CTA's overlap

   Desktop lands on 35px that way (130 + 55 - 150). Each breakpoint below
   is solved back to the same 35px, which is why these numbers are not
   round - they are derived, not chosen.
   ========================================================================== */

@media only screen and (max-width: 991px) {
  .rts-cta-area.inner-cta {
    margin-bottom: -120px;
  }

  /* 105 + 50 - 120 = 35 */
  .footer-inner {
    padding-top: 105px;
  }
}

@media only screen and (max-width: 767px) {
  .rts-cta-area.inner-cta {
    margin-bottom: -100px;
  }

  /* 85 + 50 - 100 = 35 */
  .footer-inner {
    padding-top: 85px;
  }
}

@media only screen and (max-width: 450px) {
  .rts-cta-area.inner-cta {
    margin-bottom: -80px;
  }

  /* 75 + 40 - 80 = 35; --footer-pad-top drops to 40px below 576px */
  .footer-inner {
    padding-top: 75px;
  }
}

/* ==========================================================================
   2. CENTRED HEADINGS
   --------------------------------------------------------------------------
   Headings centre up on mobile and tablet; body copy, lists and form
   fields keep their own alignment, so only the headings move.
   ========================================================================== */

@media only screen and (max-width: 991px) {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .rts-section-title .subtitle,
  .booking-intro,
  .rts-section-title {
    text-align: center;
  }

  /* Exceptions - places where a centred heading fights the content
     underneath it or the control it belongs to:

     - footer widget titles sit over left-aligned link lists
     - blog sidebar box titles sit over left-aligned lists
     - FAQ questions are buttons with a +/- marker on the right
     - form step titles carry a numbered badge on their left
     - the fare estimate heading sits over a left/right price table
     - the Major Milestone eyebrow sits over a left-aligned pull quote,
       and the quote is the whole section, so a centred label above it
       reads as belonging to something else  */
  .rts-footer-area h1,
  .rts-footer-area h2,
  .rts-footer-area h3,
  .rts-footer-area h4,
  .rts-footer-area h5,
  .rts-footer-area h6,
  .right-side-bar h1,
  .right-side-bar h2,
  .right-side-bar h3,
  .right-side-bar h4,
  .right-side-bar h5,
  .right-side-bar h6,
  .accordion-button,
  .accordion-header h3,
  .booking-form .form-block>.block-title,
  .booking-form .fare-result .fare-title,
  .about-item-wrapper .single-item .content .title,
  .single-car-list-item .content .title,
  .rts-blog-wrapper .single-blog .content .title,
  .rts-blog-wrapper .single-blog-sm .content .title,
  .rts-drives-area .drives-list li .text .title,
  .office-card .office-head .title,
  /* Both are needed: the base rule targets the subtitle directly, so
     left-aligning only the wrapper would leave the inline-block
     eyebrow still centred by the more specific of the two. */
  .rts-milestone-area .rts-section-title,
  .rts-milestone-area .rts-section-title .subtitle,
  /* Journey timeline cards: the points below the title are a bulleted
     list and stay left, so a centred title sits out of step with the
     rule and the text it heads. */
  .journey-card .title,
  /* Testimonial author: the name is an h3 and the role beneath it is a
     span, so the rule above centred the name while the role stayed
     left. Both sit in a flex row beside the round photo, which is hard
     left itself, so the block reads as left aligned everywhere below
     992px. The .author-content box is listed as well as the name so the
     role is left by rule rather than only by default. */
  .index-page .single-testimonials-item .author-area .author-content,
  .index-page .single-testimonials-item .author-area .author-content .author-name,
  .portfolio-details-area h1,
  .portfolio-details-area h2,
  .portfolio-details-area h3,
  .portfolio-details-area h4,
  .portfolio-details-area h5,
  .portfolio-details-area h6 {
    text-align: left;
  }

  /* How It Works cards centre their step title over the photo. The
     .content box is absolutely positioned at left: 40px and shrinks
     to fit, so centring the text inside it would not move anything -
     the box has to span the card first. */
  .rts-process-item-wrapper .single-process-item .content {
    left: 0;
    right: 0;
    padding: 0 24px;
    text-align: center;
  }

  /* Note: .why-choose-item and .single-category-item are NOT in the
     list above - those cards set text-align: center on the card
     itself, so their headings are meant to be centred. */

  /* .rts-section-title-area is a flex row - section title on the
     left, filter buttons on the right. Its title is a shrink-to-fit
     flex item, so `text-align: center` only centred the text inside
     that narrow box while the box itself stayed hard left. Giving
     the title full width lets the centring actually show. */
  .rts-section-title-area {
    justify-content: center;
  }

  .rts-section-title-area .rts-section-title {
    width: 100%;
  }

  /* The hero banner keeps its left alignment on mobile and tablet.
     It sits over a photo with the booking form beneath it, and a
     centred headline there reads as a floating caption rather than
     the start of the page. The h1 and h2 are caught by the rule
     above, so they have to be excluded explicitly. */
  .banner-slider-one .banner-left-content-area,
  .banner-slider-one .banner-left-content-area .banner-title,
  .banner-slider-one .banner-left-content-area .banner-subtitle,
  .banner-slider-one .banner-left-content-area .banner-desc {
    text-align: left;
  }

  /* align-items is re-stated, not just justify-content. The base rule
     sets it, but this selector is more specific and a partial override
     here would leave the row on the flex default of `stretch` - which
     is what let Know More ride higher than Book a Car instead of the
     two sitting on one line. Stretching each button to the row height
     as well keeps the two pills level whatever their labels do. */
  .banner-slider-one .banner-left-content-area .banner-btn-area {
    justify-content: flex-start;
    align-items: center;
  }

  .banner-slider-one .banner-left-content-area .banner-btn-area .rts__btn {
    align-items: center;
    align-self: center;
  }

  /* .about-main-heading releases its width and its spans' nowrap in
     style.css now, at every screen size rather than only here, so the
     phone-only copies of those rules have been dropped. */
}

@media only screen and (max-width: 575px) {

  /* Mission / Vision / Values re-centre on phones. Below 575px the
     row stacks - style.css switches the item to flex-direction:
     column with align-items: center and text-align: center - so the
     icon sits above the text and the paragraph centres. The left
     alignment above is for tablet, where the icon is still beside
     the text; keeping it here left the title out of step with its
     own centred paragraph.

     575px, not 767px: that is the width the layout actually changes
     at, so the title follows the card rather than a round number. */
  .rts-drives-area .drives-list li .text .title {
    text-align: center;
  }
}

/* ==========================================================================
   3. SECTION SPACING
   --------------------------------------------------------------------------
   A few blocks keep desktop-sized padding on small screens, which
   leaves large empty gaps once the content stacks.
   ========================================================================== */

@media only screen and (max-width: 991px) {

  /* The counter strip's own padding is 110px top and bottom and is
     not touched by the template's responsive rules (they override
     only gap and card padding). With the section below it starting
     flush, that 110px was the whole gap under the last counter. */
  .rts-counter-area-two .counter-inner {
    padding: 60px 0 40px;
  }
}

@media only screen and (max-width: 575px) {
  .rts-counter-area-two .counter-inner {
    padding: 45px 0 30px;
  }
}

/* ==========================================================================
   4. TRAVEL TIPS SECTION - TABLET ALIGNMENT
   --------------------------------------------------------------------------
   In tablet view (576px - 991px), left-align the three photos in the Travel
   Tips section under the heading paragraph. All three blog cards use a
   flex-row layout so photos sit left-aligned next to their titles.
   ========================================================================== */

@media only screen and (min-width: 576px) and (max-width: 991px) {

  .rts-blog-wrapper .single-blog,
  .rts-blog-wrapper .single-blog-sm {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 20px;
  }

  .rts-blog-wrapper .single-blog .image-area,
  .rts-blog-wrapper .single-blog-sm .image-area {
    width: 220px;
    flex: 0 0 220px;
    max-width: 220px;
    height: 160px;
  }

  .rts-blog-wrapper .single-blog .content,
  .rts-blog-wrapper .single-blog-sm .content {
    margin-top: 0;
    flex: 1;
    text-align: left;
  }
}


/* ==========================================================================
   5. BLOG CHECKLISTS - SINGLE COLUMN ON PHONES
   --------------------------------------------------------------------------
   The .feature-list checklists inside blog posts were rendering two
   items per row. At phone width each item wraps to three or four
   lines, so the two columns ended up ragged - neighbouring items
   started at different heights and the check icons never lined up.

   These rules set the layout explicitly rather than relying on the
   inherited one: display: block on the list and width: 100% on the
   items override a flex, grid or percentage-width rule alike, so the
   result is one item per row whichever of those is in play.
   ========================================================================== */

@media only screen and (max-width: 767px) {
  .portfolio-details-area .feature-list {
    display: block;
    margin: 0;
  }

  .portfolio-details-area .feature-list li {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    margin-bottom: 14px;
  }

  /* The icon carries line-height: 1 while the text runs at 1.55, so
     it sits high against the first line without a nudge. */
  .portfolio-details-area .feature-list li i {
    flex-shrink: 0;
    margin-top: 4px;
  }
}

/* ==========================================================================
   6. BLOG SIDEBAR - GAP UNDER THE ARTICLE
   --------------------------------------------------------------------------
   Once the two columns stack, the space between the end of the article
   and the first sidebar box was three separate spacings added together:

     40px  the share block's own mb--40
     48px  the row's vertical gutter (g-5)
     45px  a margin-top on .right-side-bar (35px at 575px and below)

   That is ~130px of gap for what should read as a single break. The
   sidebar's own margin is the redundant one - the row gutter already
   separates stacked columns - so it goes, and the gutter comes down
   to leave one clear gap.
   ========================================================================== */

@media only screen and (max-width: 991px) {
  .rts-blog-area.inner>.container>.row {
    --bs-gutter-y: 30px;
  }

  .right-side-bar {
    margin-top: 0;
  }
}

/* ==========================================================================
   7. GET IN TOUCH CARDS - HORIZONTAL EXPANSION ON TABLET
   --------------------------------------------------------------------------
   In tablet view (576px - 991px), the "Get in Touch" cards (.contact-wrapper)
   expand horizontally across full container width using a flex-row layout:
   the icon sits on the left with title and contact details aligned on the right.
   ========================================================================== */

@media only screen and (min-width: 576px) and (max-width: 991px) {
  .rts-contact-area2 .inner.three-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: none;
  }

  .rts-contact-area2 .inner .contact-wrapper,
  .rts-contact-area2 .inner.three-col .contact-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 26px 32px;
    gap: 24px;
    border: 1px solid rgba(85, 85, 85, 0.11) !important;
    border-radius: 16px !important;
  }

  .rts-contact-area2 .inner .contact-wrapper .icon,
  .rts-contact-area2 .inner.three-col .contact-wrapper .icon {
    margin: 0 !important;
    flex-shrink: 0;
  }

  .rts-contact-area2 .inner .contact-wrapper .contact-content,
  .rts-contact-area2 .inner.three-col .contact-wrapper .contact-content {
    flex: 1;
    min-width: 0;
  }

  .rts-contact-area2 .inner .contact-wrapper .title,
  .rts-contact-area2 .inner.three-col .contact-wrapper .title {
    font-size: 24px;
    margin-bottom: 4px;
    white-space: nowrap;
  }

  .rts-contact-area2 .inner .contact-wrapper ul,
  .rts-contact-area2 .inner.three-col .contact-wrapper ul {
    margin-bottom: 0;
    justify-content: flex-start;
  }

  .rts-contact-area2 .inner.three-col .contact-wrapper ul li a {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}




/* ==========================================================================
   7. WHY CHOOSE US - ROOM FOR THE HANGING ICON
   --------------------------------------------------------------------------
   Each card's icon badge is absolutely positioned at bottom: -35px, so it
   deliberately hangs below the card edge. Side by side on desktop that is
   fine - it drops into open space. Stacked on mobile it drops into the
   gutter instead, and g-5 (48px) is not enough for a badge that protrudes
   35px plus its own ring, so it crowded the card underneath.

   Raising the row gutter gives the badge clear air. --bs-gutter-y is the
   right lever: Bootstrap derives both the column margin and the row's
   compensating negative margin from it, so the two stay in step.
   ========================================================================== */

@media only screen and (max-width: 991px) {
  .why-choose-wrapper>.row {
    --bs-gutter-y: 95px;
  }
}

/* ==========================================================================
   8. TESTIMONIALS - THE AUTHOR LINE RAN UNDER THE QUOTE BADGE
   --------------------------------------------------------------------------
   .inner-icon is the round quote mark in the card's bottom-right corner.
   It is absolutely positioned (right: 0; bottom: 0) with an opaque grey
   panel behind it - 20px of padding plus a 60px circle, so 80px wide -
   and nothing in the flow reserves room for it. The author row is the
   last thing in the card, so on a narrow card a long role ("Former CEO,
   Child Trust, Nungambakkam") simply ran underneath the panel and was
   cut off mid-word.

   The card's own side padding already absorbs part of that 80px, so the
   panel only covers the content box by (80 - card padding). The reserve
   below is that overlap plus a few px of air, which is why the two
   breakpoints differ - the card's padding drops from 30px to 20px at
   576px, so the panel eats 10px more of the content there.

   min-width: 0 matters as much as the padding: .author-content is a flex
   item, and a flex item defaults to min-width: auto, meaning it refuses
   to shrink below its longest word and would push straight back out
   under the badge instead of wrapping.

   Everything here is scoped to .index-page (the home page's body class).
   The testimonial card markup only appears on the home page today, but
   this file is shared by every page, so the scope keeps a card dropped
   onto another page later from inheriting these numbers by surprise.
   ========================================================================== */

@media only screen and (max-width: 991px) {
  .index-page .single-testimonials-item .author-area {
    padding-right: 58px;
  }

  .index-page .single-testimonials-item .author-area .author-content {
    min-width: 0;
  }

  /* Place names run long and there is not much width left to give them,
     so let one break rather than poke out from the card. */
  .index-page .single-testimonials-item .author-area .author-content .author-name,
  .index-page .single-testimonials-item .author-area .author-content .author-role {
    overflow-wrap: break-word;
  }
}

@media only screen and (max-width: 575px) {
  .index-page .single-testimonials-item .author-area {
    padding-right: 68px;
  }
}

/* ==========================================================================
   MOBILE FOOTER CUSTOM GRID LAYOUT (Added for Banyan Tours and Travels)
   --------------------------------------------------------------------------
   In mobile view only (max-width: 575px), reorganize the footer columns:
   - Row 1: Logo area (spans full width)
   - Row 2 & 3 (left): Quick Links (spans both rows)
   - Row 2 (right): Contact Us - Call Us Now
   - Row 3 (right): Contact Us - Our Location
   - Row 4 (left): Contact Us - Send Us Email
   - Row 4 (right): Contact Us - Working Hours
   ========================================================================== */
@media only screen and (max-width: 575px) {
  /* Use CSS Grid for the footer container */
  .footer-wrapper-style-between {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 20px 20px !important;
    padding: 40px 0 20px !important;
    align-items: start !important;
  }

  /* Logo Area - spans Row 1 */
  .footer-wrapper-style-between > .single-wized:nth-child(1) {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Quick Links Column (flattened) */
  .footer-wrapper-style-between > .single-wized:nth-child(2) {
    display: contents !important;
  }

  /* Quick Links Title - Row 2, Col 1 */
  .footer-wrapper-style-between > .single-wized:nth-child(2) > .title {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    padding-top: 0 !important;
    color: var(--color-heading) !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    align-self: start !important;
  }

  /* Quick Links Body (List Container) - Row 3 / span 2, Col 1 */
  .footer-wrapper-style-between > .single-wized:nth-child(2) > .body {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 3 / span 2 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    align-self: start !important;
  }

  /* Clean up Quick Links list padding and margins */
  .footer-wrapper-style-between > .single-wized:nth-child(2) > .body ul.nav-bottom {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .footer-wrapper-style-between > .single-wized:nth-child(2) > .body ul.nav-bottom li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-wrapper-style-between > .single-wized:nth-child(2) > .body ul.nav-bottom li a {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    line-height: 1.2 !important;
  }

  /* Contact Us Column (flattened) */
  .footer-wrapper-style-between > .single-wized.get-in-touch {
    display: contents !important;
  }

  .footer-wrapper-style-between > .single-wized.get-in-touch > .body {
    display: contents !important;
  }

  .footer-wrapper-style-between > .single-wized.get-in-touch > .body > .get-touch {
    display: contents !important;
  }

  /* Contact Us Title - Row 2, Col 2 */
  .footer-wrapper-style-between > .single-wized.get-in-touch > .title {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    padding-top: 0 !important;
    color: var(--color-heading) !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    align-self: start !important;
  }

  /* Call Us Now - Row 3, Col 2 */
  .footer-wrapper-style-between > .single-wized.get-in-touch .map-area:nth-child(1) {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    align-self: start !important;
  }

  /* Our Location - Row 4, Col 2 */
  .footer-wrapper-style-between > .single-wized.get-in-touch .map-area:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 4 !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    align-self: start !important;
  }

  /* Send Us Email - Row 5, Col 1 */
  .footer-wrapper-style-between > .single-wized.get-in-touch .map-area:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 5 !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    align-self: start !important;
  }

  /* Working Hours - Row 5, Col 2 */
  .footer-wrapper-style-between > .single-wized.get-in-touch .map-area:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 5 !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    align-self: start !important;
  }

  /* Individual Contact Items styling */
  .footer-wrapper-style-between > .single-wized.get-in-touch .map-area {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .footer-wrapper-style-between .single-wized.get-in-touch .map-area .text p {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    color: var(--color-heading) !important;
  }

  .footer-wrapper-style-between .single-wized.get-in-touch .map-area .text a,
  .footer-wrapper-style-between .single-wized.get-in-touch .map-area .text .static-value {
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: var(--color-body) !important;
  }

  .footer-wrapper-style-between .single-wized.get-in-touch .map-area .text a[href^="tel:"] {
    display: block !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
    transition: 0.3s;
  }

  .footer-wrapper-style-between .single-wized.get-in-touch .map-area .text a[href*="maps"] {
    display: block !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
    transition: 0.3s;
  }

  .footer-wrapper-style-between .single-wized.get-in-touch .map-area .text a[href^="mailto:"] {
    display: block !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    transition: 0.3s;
  }

  /* Icon styles */
  .footer-wrapper-style-between .single-wized.get-in-touch .map-area .icon {
    min-width: 28px !important;
    height: 28px !important;
    line-height: 24px !important;
    border-radius: 6px !important;
    background: var(--color-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .footer-wrapper-style-between .single-wized.get-in-touch .map-area .icon svg {
    width: 13px !important;
    height: 13px !important;
    fill: var(--color-white) !important;
  }

  /* Quick Links Links */
  .footer-wrapper-style-between .single-wized:nth-child(2) .body a {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--color-body) !important;
  }
}