/* ==========================================================================
   home.css - Baniyan Tours and Travels
   Homepage-only overrides. Loaded after style.css in index.html.
   Site-wide rules (logo sizing, CTA band) stay in style.css.
   ========================================================================== */

/* ==== Banner: reduced height, content vertically centred ====
   The template pushed the content down with a 209px top padding and
   left whatever remained as bottom space - so the two were never
   equal. Centring the content instead makes the gap above and below
   identical by construction, whatever the content height.

   Safe to flex here: the background slider and the pagination dots
   are both absolutely positioned, so .container is the only child
   actually in flow. It needs width: 100% because a flex item does
   not grow on the main axis by default.
   Tweak --banner-h to adjust the overall height. */
:root {
  --banner-h: 640px;
  --banner-pad-y: 30px;
}

/* min-height rather than height: the banner is exactly --banner-h
   whenever the content fits, but grows instead of clipping if it
   ever does not. .banner-slider-one has overflow: hidden, so a hard
   height would silently cut the booking form off at the bottom. */
.banner-slider-one {
  height: auto;
  min-height: var(--banner-h);
  display: flex;
  align-items: center;
}

.banner-slider-one > .container {
  width: 100%;
}

/* Each button's pill is inline-block, so it sizes to its own label -
   "Book a Car" and "Know More" came out different widths sitting
   side by side. A shared min-width evens them up.
   .rts__btn__txt-two is the hover label: it is absolutely positioned
   with no left/right, so it would stay pinned at the padding edge
   while the resting label centred. Pinning it to both edges lets it
   centre with the other one. */
.banner-slider-one .banner-left-content-area .banner-btn-area .rts__btn .rts__btn__wrap {
  min-width: 170px;
  text-align: center;
}

.banner-slider-one .banner-left-content-area .banner-btn-area .rts__btn .rts__btn__wrap .rts__btn__txt-two {
  left: 0;
  right: 0;
}

.rts-banner-wrapper-area {
  padding-top: var(--banner-pad-y);
  padding-bottom: var(--banner-pad-y);
}

/* The booking form is the taller column, so it sets the row height.
   Bootstrap rows default to align-items: stretch, which left the
   headline/buttons pinned to the top of their column and dumped all
   the slack underneath them - so the gap below the text read as much
   bigger than the gap above it, even though the block as a whole was
   centred. Centring the columns against each other evens it out. */
.rts-banner-wrapper-area > .row {
  align-items: center;
}

@media (max-width: 1200px) {
  /* The title drops to 60px here, so the content needs less room. */
  :root {
    --banner-h: 560px;
  }
}

@media (max-width: 991px) {
  /* style.css lets the banner grow with its content below 991px and
     swaps to symmetrical padding. home.css loads later, so those
     rules have to be restored here or the fixed height wins. */
  .banner-slider-one {
    height: auto;
  }

  .rts-banner-wrapper-area {
    padding: 80px 0;
  }
}

/* ==== Tablet: shorter banner, matched buttons ==== */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* The banner is content-sized here (min-height does not apply once
     height goes auto above), so its padding is the only height lever -
     80px top and bottom was desktop-scale on a 768px screen. */
  .rts-banner-wrapper-area {
    padding: 45px 0;
  }

  .banner-slider-one .banner-left-content-area .banner-title {
    margin-bottom: 16px;
  }

  .banner-slider-one .banner-left-content-area .banner-desc {
    margin-bottom: 28px;
  }

  /* No button overrides here on purpose. The buttons inherit the same
     rules desktop uses - pills sized to their content with a shared
     170px floor, and the 20px gap from style.css - so tablet matches
     desktop exactly. An earlier `flex: 1 1 0` split made each button
     take half the row, which stretched them well past their desktop
     size; sizing to content is what keeps the two views identical. */
}

/* ==== Hero sub-heading + description ====
   Text styling only - does not alter the banner layout. */
.banner-slider-one .banner-left-content-area .banner-title {
  margin-bottom: 20px;
}

.banner-slider-one .banner-left-content-area .banner-subtitle {
  color: var(--color-white);
  font-size: 22px;
  font-weight: var(--f-medium);
  line-height: 1.45;
  max-width: 560px;
  margin-bottom: 14px;
}

.banner-slider-one .banner-left-content-area .banner-desc {
  color: var(--color-gray);
  font-size: 16px;
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 35px;
}

/* ==== About Us photo ====
   padding-right: 0 evens the gap up with the About page's Our Story block.
   Both rows run a 60px Bootstrap gutter (set in style.css), but this
   wrapper also carried 30px of its own - left over from a template layout
   that put a second image there - so the photo stopped 90px short of the
   text instead of 60px. */
.rts-about-area .about-letf-image-area {
  width: 100%;
  max-width: 100%;
  padding-right: 0;
}

/* ==== About Us photo: covers the frame, and no one gets cropped out ====
   Two things are being asked of one frame. The photo has to be the same
   height as the text beside it and fill that frame edge to edge, and it is
   a group shot - 1376x768, everyone shoulder to shoulder, faces running
   from 14% to 89% of the width - against a frame that is 623x512 at 1440px
   and 435x618 at 1024px. Covering the original meant cutting the people on
   both ends out of the picture, whatever the crop position.

   tems-tall.webp is that shot on a 1376x1600 canvas: the ceiling above
   them is stretched to the new top edge, blurred, and crossfaded into the
   real one, and a short band of bare floor is stretched below - it reads
   as a taller hall. Nearly all the added height goes above the group, not
   under it: ceiling is what a tall frame should fill with, empty floor
   just reads as a gap. The canvas is narrower than any frame this layout
   produces, so `cover` takes its crop out of that fabricated space and
   never off the sides. Rebuild it with
   assets/images/about/originals/build-team-tall.php, run from the project
   root, if the photo is ever replaced. */
@media only screen and (min-width: 992px) {
  .rts-about-area .about-letf-image-area {
    display: flex;
    flex-direction: column;
  }

  /* flex-basis 0 keeps the photo out of the row's height calculation, so
     the TEXT sets the height and the frame matches it exactly. */
  .rts-about-area .about-letf-image-area .about-image-area {
    flex: 1 1 0;
    height: auto;
  }
}

.rts-about-area .about-letf-image-area .about-image-area {
  height: auto;
}

/* The template's orange wash is a ::before on this frame, and being
   absolutely positioned it paints over the photo. Left alone: a 20%
   orange film over a room full of faces reads as a colour cast rather
   than a treatment. Drop this rule to bring it back. */
.rts-about-area .about-letf-image-area .about-image-area::before {
  display: none;
}

.rts-about-area .about-letf-image-area .about-image-area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 74%, not centre. The real photo sits at rows 712-1480 of the 1600px
     canvas, and at 1440px the frame shows a 71% slice of it - centred, that
     slice ran past the photo's bottom edge and left a band of empty floor
     under the group. 74% puts the bottom of the slice on the bottom of the
     photo, so the height that has to be filled goes into ceiling instead. */
  object-position: center 74%;
}

/* ==== Stacked layout: a taller photo ====
   Left to its own shape the banner came out 330x184 on a phone - a thin
   strip, with the group too small to make out. These give the frame a real
   height and let `cover` fill it; the crop is vertical, off the canvas's
   fabricated ceiling and floor, so no one is lost off the sides.

   84% here rather than the 74% desktop uses: these frames are much wider
   than they are tall, so the visible slice of the canvas is a short band -
   it has to sit low to hold the group, or their feet drop out of shot. */
@media only screen and (max-width: 991px) {
  :root {
    --about-img-h-stacked: 440px;
  }

  .rts-about-area .about-letf-image-area .about-image-area {
    height: var(--about-img-h-stacked);
  }

  .rts-about-area .about-letf-image-area .about-image-area img {
    object-position: center 84%;
  }
}

@media only screen and (max-width: 767px) {
  :root {
    --about-img-h-stacked: 380px;
  }
}

@media only screen and (max-width: 575px) {
  :root {
    --about-img-h-stacked: 320px;
  }
}

/* ==== About Us: the "Happy Trips" plate ====
   It was sized for a full-height photo and read as the loudest thing in
   the section - 48px figure on 24px/45px padding. These bring it back to
   a caption on the image. The white notch squares are keyed to the
   plate's 20px corner radius rather than its size, so they still meet the
   frame cleanly. */
.rts-about-area .about-letf-image-area .about-counter-area .inner {
  padding: 14px 28px;
}

.rts-about-area .about-letf-image-area .about-counter-area .inner .counter-no {
  font-size: 34px;
  margin-bottom: 4px;
}

.rts-about-area .about-letf-image-area .about-counter-area .inner .counter-no .count-plus {
  bottom: 4px;
}

.rts-about-area .about-letf-image-area .about-counter-area .inner p {
  font-size: 15px;
}

/* The About Us feature pair used to be equalised here. It moved to
   style.css so about.html's "Our Story" block - the same markup, and it
   does not load this file - gets it too. */

/* ==== Car category cards: equal height ====
   Cards were content-sized, so longer names ("Tempo Traveller") made
   them taller than short ones ("SUV"). Making each slide a flex
   container lets every card stretch to the tallest in the row. */
.rts-category-wrapper .swiper-slide {
  height: auto;
  display: flex;
}

.rts-category-wrapper .single-category-item {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Titles can wrap in a narrow slide, so give them breathing room
   (the base style uses line-height: 1, which collides when wrapped). */
.rts-category-wrapper .single-category-item .content .title {
  line-height: 1.25;
}

/* The icon SVGs ship at different intrinsic sizes (36x23 up to 78x39),
   so they rendered at different scales. Give every image an identical
   box; object-fit: contain scales each one down to fit without
   distorting it. Tweak --cat-icon-w / --cat-icon-h to resize. */
:root {
  --cat-icon-w: 46px;
  --cat-icon-h: 28px;
}

.rts-category-wrapper .single-category-item .icon img {
  width: var(--cat-icon-w);
  height: var(--cat-icon-h);
  object-fit: contain;
  object-position: center;
}

/* ==== Travel Tips: match left card to the right column ====
   Left is one large card, right is two stacked cards. The left card
   should end level with them - driven by the right column, not by
   the left image's own aspect ratio.

   The key is `flex: 1 1 0` with `min-height: 0` on .image-area. A
   zero flex-basis means the image contributes nothing to the card's
   natural height, so the row is sized by the RIGHT column. The left
   card then stretches to that height and the image grows into
   whatever space is left over - shrinking below its natural height
   when it has to. With `flex: 1 0 auto` (grow only) the tall image
   pushed the left column past the right one instead.
   Only applies from lg up - below that the columns stack. */
@media only screen and (min-width: 992px) {
  .rts-blog-wrapper > .row > .col-lg-6:first-child {
    display: flex;
  }

  .rts-blog-wrapper > .row > .col-lg-6:first-child > .single-blog {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .rts-blog-wrapper > .row > .col-lg-6:first-child > .single-blog .image-area {
    flex: 1 1 0;
    min-height: 0;
  }

  /* The img sits inside an <a>, which is inline and would stop the
     height cascading through. Make it a full-height block so the
     photo actually fills the grown .image-area. */
  .rts-blog-wrapper > .row > .col-lg-6:first-child > .single-blog .image-area > a {
    display: block;
    height: 100%;
  }
}



@media only screen and (max-width: 768px) {
    .rts-banner-wrapper-area .banner-left-content-area .banner-btn-area {
        display: block !important;
        flex-wrap: wrap;
        gap: 18px 20px;
    }
}
/* ==== Testimonials: smaller author photos ====
   The base style only rounds these off, so they rendered at their
   natural 54x54. Setting both dimensions with object-fit: cover
   keeps them perfectly circular whatever photo is dropped in.
   Tweak --testimonial-avatar to resize. */
:root {
  --testimonial-avatar: 44px;
}

.single-testimonials-item .author-area .author-thumb img {
  width: var(--testimonial-avatar);
  height: var(--testimonial-avatar);
  object-fit: cover;
  object-position: center;
}

/* ==== Why Choose Us: reduce top space ====
   Most sections on this page use rts-section-gapBottom (bottom
   padding only), so the gap between two sections is 120px. This one
   uses rts-section-gap, which adds another 120px on top - and with
   the video and brand blocks now commented out, that stacked up to
   a 240px gap under How It Works. Dropping the top padding restores
   the page's normal rhythm. Tweak --why-choose-pt to add space back. */
:root {
  --why-choose-pt: 0px;
  --why-choose-pb: 150px;
}

.rts-why-choose-area {
  padding-top: var(--why-choose-pt);
  padding-bottom: var(--why-choose-pb);
}

/* Tablet view only (768px - 991px).
   60px was measured from the CARD's bottom edge, but the badge hangs 35px
   below that and carries a 5px ring, so only about 20px of it was actually
   visible under the last row - the badges sat almost on the testimonial
   band that follows. 110px puts roughly 70px of clear space under them,
   which is what the gap reads as everywhere else. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .rts-why-choose-area {
    padding-bottom: 110px !important;
  }
}

@media only screen and (max-width: 767px) {
  :root {
    --why-choose-pb: 90px;
  }
}

/* ==== How It Works: card height ====
   The photos are 3:2, so at their natural aspect they render short in a
   one-third column. A fixed frame with object-fit: cover sets the height
   without distorting them - 480px was taller than the step titles needed,
   so the three cards read as a wall of photo.
   Tweak --process-img-h to resize. */
:root {
  --process-img-h: 380px;
}

.rts-process-item-wrapper .single-process-item .image-area {
  height: var(--process-img-h);
}

.rts-process-item-wrapper .single-process-item .image-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* These step down with the desktop value rather than past it - 420px was
   set against the old 480px and would now make the cards TALLER on a
   tablet than on a desktop. */
@media only screen and (max-width: 991px) {
  :root {
    --process-img-h: 340px;
  }
}

@media only screen and (max-width: 575px) {
  :root {
    --process-img-h: 300px;
  }
}

/* ==== Service card badge icon ====
   The arrow link was replaced by a non-clickable icon matching each
   service, so neutralise the hover state and cursor it inherited
   from .link-icon. Tweak --service-icon-size to resize. */
:root {
  --service-icon-size: 24px;
}

.rts-car-list-area .single-car-list-item .inner .link-icon {
  cursor: default;
}

.rts-car-list-area .single-car-list-item .inner .link-icon:hover {
  background: var(--color-primary);
}

.rts-car-list-area .single-car-list-item .inner .link-icon i {
  color: var(--color-white);
  font-size: var(--service-icon-size);
  line-height: 1;
}

/* ==== Service card text: equal card heights ====
   Isotope lays these out with fitRows and positions each card
   absolutely, so a card cannot stretch to match its neighbours.
   Instead, reserve a fixed number of lines for the title and the
   description - every card then measures the same height.
   All six images are 3:2, so the image half already matches.

   Title reserve is 1 line: at col-lg-4 every service name fits on
   one line (the longest, "Corporate Travel Services", clears the
   ~288px of card content width). A 2-line reserve left a whole
   empty line of dead space above each paragraph. */
:root {
  --service-title-lines: 1;
  --service-title-lh: 1.3;
  --service-desc-lines: 3;
  --service-desc-lh: 1.6;
}

.rts-car-list-area .single-car-list-item .content .title {
  font-size: 20px;
  line-height: var(--service-title-lh);
  min-height: calc(20px * var(--service-title-lh) * var(--service-title-lines));
  margin-bottom: 0;
}

/* The card's icon badge is absolutely positioned bottom-right, so
   reserve space for it and keep the text clear of the notch. */
/* The 55px reserve below the text came down to 24px. It was sized to clear
   the badge vertically, but the badge sits in the card's bottom-RIGHT
   corner and max-width: 88% already keeps the text out of that corner
   horizontally - so most of those 55px were only padding the card out with
   empty space. 24px keeps the last line off the badge's top edge. */
.rts-car-list-area .single-car-list-item .content .desc {
  font-size: 15px;
  line-height: var(--service-desc-lh);
  min-height: calc(15px * var(--service-desc-lh) * var(--service-desc-lines));
  margin: 6px 0 0;
  padding-bottom: 24px;
  max-width: 88%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* Two wider columns - text wraps less, so reserve fewer lines. */
  :root {
    --service-desc-lines: 2;
  }
}

/* Three columns inside a 960px container leaves each card about 230px of
   text width - narrow enough that "Corporate Travel Services" takes two
   lines and its description takes four, while the other five cards take
   one and three. That difference is what left the cards at unequal
   heights, so the reserve grows to the worst case at this width. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  :root {
    --service-title-lines: 2;
    --service-desc-lines: 4;
  }
}

/* Both pages now lay these out as a plain Bootstrap row, so the columns
   stretch to the tallest card and each card simply fills its column - real
   equal heights, whatever the text does.

   service.html could not do this while Isotope was running: it positions
   every card absolutely, so a card can only be as tall as its own content
   and no amount of stretching reaches it. Isotope was only ever there for
   the service filter buttons, which are commented out on that page, so the
   `main-isotop` hook came off its wrapper and the row lays out normally.
   The line reserve above stays as a floor - harmless now that the cards
   stretch, and still doing the work on any layout that cannot. */
.index-page .rts-car-list-area .single-car-list-item,
.service-page .rts-car-list-area .single-car-list-item {
  height: 100%;
}

@media only screen and (max-width: 767px) {
  /* Single column here, so cards no longer sit beside each other and
     the line reserve has nothing left to equalise - it was only
     padding the card out with empty space below the text. Dropped
     entirely so each card ends where its own content ends.

     padding-bottom still has to clear the icon badge, which is
     absolutely positioned at the card's bottom-right and stands
     70px tall (50px circle + 20px offset). Narrowing the text keeps
     its last line away from the badge, so the padding can come down
     without the two colliding. */
  .rts-car-list-area .single-car-list-item .content {
    margin-top: 24px;
  }

  .rts-car-list-area .single-car-list-item .content .desc {
    min-height: 0;
    max-width: 76%;
    padding-bottom: 34px;
  }
}

/* ==== Responsive ==== */
@media only screen and (max-width: 991px) {
  .banner-slider-one .banner-left-content-area .banner-subtitle {
    font-size: 18px;
  }
}

/* ==== Travel Tips arrow button: disable hover background color change ==== */
.rts-blog-wrapper .single-blog .image-area .inner .link-icon:hover,
.rts-blog-wrapper .single-blog-sm .image-area .inner .link-icon:hover {
  background: var(--color-primary);
}


/* ==========================================================================
   Homepage buttons and form controls

   The plain green-to-brown .rts__btn rules that used to live here are now
   site-wide in style.css, along with both --color-green and --color-brown.
   What stays here is what is specific to this page: the banner pair below,
   and the two form buttons further down.
   ========================================================================== */

/* ==== Banner buttons ====
   The site-wide button rules do not reach the banner. style.css styles those
   two buttons through a five- and six-class chain
   (.rts-banner-wrapper-area .banner-left-content-area .banner-btn-area
   .rts__btn .rts__btn__wrap.two), which outweighs a shorter selector no
   matter how late this file loads - so "Book a Car" was still running on
   --color-primary and "Know More" was still the template's transparent
   outline. Both are repeated here on the full chain to outrank it.

   Book a Car keeps the pair the normal way round, green to brown... */
.index-page .rts-banner-wrapper-area .banner-left-content-area .banner-btn-area .rts__btn .rts__btn__wrap,
.index-page .rts-banner-wrapper-area .banner-left-content-area .banner-btn-area .rts__btn .rts__btn__icon {
  background: var(--color-green);
  border: 1px solid var(--color-green);
  color: var(--color-white);
}

.index-page .rts-banner-wrapper-area .banner-left-content-area .banner-btn-area .rts__btn:hover .rts__btn__wrap,
.index-page .rts-banner-wrapper-area .banner-left-content-area .banner-btn-area .rts__btn:hover .rts__btn__icon {
  background: var(--color-brown);
  border-color: var(--color-brown);
  color: var(--color-white);
}

/* ...and Know More runs it the other way, brown to green, so the two are
   never the same colour at the same time. */
.index-page .rts-banner-wrapper-area .banner-left-content-area .banner-btn-area .rts__btn .rts__btn__wrap.two,
.index-page .rts-banner-wrapper-area .banner-left-content-area .banner-btn-area .rts__btn .rts__btn__icon.two {
  background: var(--color-brown);
  border: 1px solid var(--color-brown);
  color: var(--color-white);
}

.index-page .rts-banner-wrapper-area .banner-left-content-area .banner-btn-area .rts__btn:hover .rts__btn__wrap.two,
.index-page .rts-banner-wrapper-area .banner-left-content-area .banner-btn-area .rts__btn:hover .rts__btn__icon.two {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-white);
}

/* Contact form submit. The base button hides an oversized circle below
   itself and sweeps it up on hover; recolouring that circle is what turns
   the button brown, so the sweep animation is kept rather than overridden. */
.index-page .rts-btn-send {
  background: var(--color-green);
  color: var(--color-white);
}

.index-page .rts-btn-send::before {
  background: var(--color-brown);
}

.index-page .rts-btn-send:hover {
  color: var(--color-white);
}

/* Booking form's round search button. */
.index-page .rts-banner-wrapper-area .banner-right-form-area .search-btn {
  background: var(--color-green);
}

.index-page .rts-banner-wrapper-area .banner-right-form-area .search-btn:hover {
  background: var(--color-brown);
}


/* ==========================================================================
   Card fills: green at rest, logo brown on hover
   Applies to the three card sections - Our Car Categories, Our Services and
   Why Choose Us - which all shipped with the template's grey (--color-gray)
   fill. Same green/brown pair as the buttons above, so the whole homepage
   moves between the two brand tones together.

   All the text inside these cards was set against a light grey background,
   so each rule that fills a card also has to recolour its title and
   description or they end up dark-on-dark.
   ========================================================================== */

/* ==== Our Car Categories ==== */
.index-page .rts-category-wrapper .single-category-item {
  background: var(--color-green);
}

/* The template only turned these white on hover, because at rest they sat on
   grey. They now start white and stay white through the hover. */
.index-page .rts-category-wrapper .single-category-item .content .title,
.index-page .rts-category-wrapper .single-category-item .content .title a,
.index-page .rts-category-wrapper .single-category-item .content .sub-title {
  color: var(--color-white);
}

/* The icon tile keeps the white fill it already had - the category SVGs are
   dark line art and would disappear into a green or brown card.

   The base stylesheet turns this card --color-primary on hover, so the hover
   has to be overridden as well as the resting state. */
.index-page .rts-category-wrapper .single-category-item:hover {
  background: var(--color-brown);
}

/* ==== Our Services ====
   service.html's "What We Offer" is the same section with the same cards,
   and it already loads this file, so it is matched here rather than
   duplicated - .service-page is on that page's body. */
.index-page .rts-car-list-area .single-car-list-item,
.service-page .rts-car-list-area .single-car-list-item {
  background: var(--color-green);
  transition: background 0.3s ease;
}

/* No geometry overrides here on purpose. The card's shape - its 16px
   corner, the photo's 10px, the 20px notch the badge sits in, and the two
   pseudo-elements that curve the card's edge into that notch - is the
   template's own, and matches the card in the reference demo. Only the
   colours below are ours. Earlier attempts to re-cut those corners are
   what left the notch reading as a flat white block rather than the
   scooped corner the demo has. */

.index-page .rts-car-list-area .single-car-list-item .content .title,
.index-page .rts-car-list-area .single-car-list-item .content .desc,
.service-page .rts-car-list-area .single-car-list-item .content .title,
.service-page .rts-car-list-area .single-car-list-item .content .desc {
  color: var(--color-white);
}

.index-page .rts-car-list-area .single-car-list-item:hover,
.service-page .rts-car-list-area .single-car-list-item:hover {
  background: var(--color-brown);
}

/* The two pseudo-elements are back on. They are what scoops the card's
   corner around the badge in the reference demo: each is a transparent box
   whose white box-shadow curves the card's edge into the badge's panel.
   Switching them off is what flattened our notch into a plain white block.
   They stay white because they represent the page behind the card, exactly
   as on the demo - the card's own colour is the only thing that is ours. */

/* The round service badge sits in a white notch cut out of the card's
   bottom-right corner. The badge itself follows the card so it does not
   stay dark green against a brown fill. */
.index-page .rts-car-list-area .single-car-list-item:hover .inner .link-icon,
.index-page .rts-car-list-area .single-car-list-item:hover .inner .link-icon:hover,
.service-page .rts-car-list-area .single-car-list-item:hover .inner .link-icon,
.service-page .rts-car-list-area .single-car-list-item:hover .inner .link-icon:hover {
  background: var(--color-brown);
}

/* The services grid holds an odd number of cards, so the final row is left
   with a single card sitting hard against the left edge. Auto side margins
   centre it inside its own flex line - Bootstrap 5 wraps .row, and auto
   margins on a flex item resolve per line, so only the orphan moves.

   The :nth-child guard is what keeps this from breaking when a card is
   added later: it fires only when the last card actually starts a fresh
   line (every 3rd column on desktop, every 2nd on tablet). With an even
   card count the last card shares its line and is left alone. Below 768px
   each card is already full width, so there is no free space to centre. */
@media only screen and (min-width: 992px) {
  .index-page .rts-car-list-area .portfolio-feed > [class*="col-"]:nth-child(3n + 1):last-child,
  .service-page .rts-car-list-area .portfolio-feed > [class*="col-"]:nth-child(3n + 1):last-child {
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .index-page .rts-car-list-area .portfolio-feed > [class*="col-"]:nth-child(2n + 1):last-child,
  .service-page .rts-car-list-area .portfolio-feed > [class*="col-"]:nth-child(2n + 1):last-child {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==== Why Choose Us ==== */
.index-page .why-choose-wrapper .why-choose-item {
  background: var(--color-green);
  transition: background 0.3s ease;
}

.index-page .why-choose-wrapper .why-choose-item .content .title,
.index-page .why-choose-wrapper .why-choose-item .content .desc {
  color: var(--color-white);
}

.index-page .why-choose-wrapper .why-choose-item:hover {
  background: var(--color-brown);
}

/* The icon circle overhangs the card's bottom edge and its two side shapes
   fake the curve where the card wraps around it. All three are white to
   match the section behind the card, not the card itself, so they are left
   alone - the notch reads the same way against green and brown. */

/* The four generic why-1..4 SVGs were replaced with Font Awesome glyphs that
   match each heading (car-wrench, steering-wheel, badge-dollar, clock).

   The SVGs were 60x60 inside 11px of padding, so the circle measured 82px
   and the notch below the card is cut for exactly that. A glyph has no
   intrinsic size and would have collapsed the circle, so the 82px is now
   set explicitly and the icon centred in it - the notch geometry is
   unchanged. Tweak --why-icon-size / --why-glyph-size to resize. */
:root {
  --why-icon-size: 82px;
  --why-glyph-size: 34px;
}

/* The circle is filled rather than left white. The template's white came
   from the section behind the card, so the half of it that hangs below the
   card edge disappeared into the page and only the top half read as round.
   A filled badge reads as a full circle against both the card above it and
   the white section below it, and the glyph goes white to sit on it.

   The two flange shapes stay white - those really are the section showing
   through, and they are what curves the card's edge around the badge. */
.index-page .why-choose-wrapper .why-choose-item .icon {
  width: var(--why-icon-size);
  height: var(--why-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-green);
  transition: background 0.3s ease;

  /* The badge now runs the same green-to-brown as the card it sits on, so
     for the top half - the part overlapping the card - the two are the same
     colour and the circle would read as a semicircle floating on the white
     below. This white ring keeps its outline: it is invisible against the
     page and draws a clean edge against the card, which is the separation
     the template's flange shapes used to provide. */
  box-shadow: 0 0 0 5px var(--color-white);
}

.index-page .why-choose-wrapper .why-choose-item .icon i {
  font-size: var(--why-glyph-size);
  line-height: 1;
  color: var(--color-white);
}

.index-page .why-choose-wrapper .why-choose-item:hover .icon {
  background: var(--color-brown);
}

/* The two flange shapes have to go, and they are what was flattening the
   badge's sides.

   Each one is a white block sitting at the card's bottom edge with a
   `box-shadow: 30px 0 0 0` copy offset inwards, so the pair reach roughly
   34px into an 82px circle from either side. They are z-index: -1, but the
   circle sets z-index: 1 and position: absolute, so it establishes its own
   stacking context - and a negative-z-index descendant paints ON TOP of
   that ancestor's background, only below its content. While everything was
   white the overlap was invisible; over a filled badge the two shapes carve
   a white bite out of its left and right sides.

   Their job was to curve the card's edge into a circle the same colour as
   the page. A filled badge does not need that - it simply overlaps the
   card's straight bottom edge, which the card's 73px of bottom padding
   already leaves room for. */
.index-page .why-choose-wrapper .why-choose-item .icon .bottom-left-shape,
.index-page .why-choose-wrapper .why-choose-item .icon .bottom-right-shape {
  display: none;
}

/* ==== Travel Tips ====
   Both card sizes - the large left card and the two stacked ones - shipped
   as white panels with a grey hairline border, so the border goes with the
   fill or it draws a grey line around a green card. */
.index-page .rts-blog-wrapper .single-blog,
.index-page .rts-blog-wrapper .single-blog-sm {
  background: var(--color-green);
  border-color: var(--color-green);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.index-page .rts-blog-wrapper .single-blog:hover,
.index-page .rts-blog-wrapper .single-blog-sm:hover {
  background: var(--color-brown);
  border-color: var(--color-brown);
}

.index-page .rts-blog-wrapper .single-blog .content .date,
.index-page .rts-blog-wrapper .single-blog .content .title a,
.index-page .rts-blog-wrapper .single-blog-sm .content .date,
.index-page .rts-blog-wrapper .single-blog-sm .content .title a {
  color: var(--color-white);
}

/* Unlike the service cards, this notch is cut out of the photo rather than
   out of the card's outer corner - the .inner panel and the two box-shadows
   on the arrow button are the card showing through the image. They were
   white to match a white card, so all three have to track the fill through
   the hover or a white L stays stamped on the photo. */
.index-page .rts-blog-wrapper .single-blog .image-area .inner,
.index-page .rts-blog-wrapper .single-blog-sm .image-area .inner {
  background: var(--color-green);
}

.index-page .rts-blog-wrapper .single-blog .image-area .inner .link-icon::before,
.index-page .rts-blog-wrapper .single-blog .image-area .inner .link-icon::after,
.index-page .rts-blog-wrapper .single-blog-sm .image-area .inner .link-icon::before,
.index-page .rts-blog-wrapper .single-blog-sm .image-area .inner .link-icon::after {
  box-shadow: 16px 0 0 0 var(--color-green);
}

.index-page .rts-blog-wrapper .single-blog:hover .image-area .inner,
.index-page .rts-blog-wrapper .single-blog-sm:hover .image-area .inner {
  background: var(--color-brown);
}

.index-page .rts-blog-wrapper .single-blog:hover .image-area .inner .link-icon::before,
.index-page .rts-blog-wrapper .single-blog:hover .image-area .inner .link-icon::after,
.index-page .rts-blog-wrapper .single-blog-sm:hover .image-area .inner .link-icon::before,
.index-page .rts-blog-wrapper .single-blog-sm:hover .image-area .inner .link-icon::after {
  box-shadow: 16px 0 0 0 var(--color-brown);
}

/* The arrow button was --color-primary, which is now the same value as
   --color-green - it would have vanished into the card. It carries the
   opposite tone instead and swaps with the card on hover, so the white
   arrow inside it stays readable either way. */
.index-page .rts-blog-wrapper .single-blog .image-area .inner .link-icon,
.index-page .rts-blog-wrapper .single-blog .image-area .inner .link-icon:hover,
.index-page .rts-blog-wrapper .single-blog-sm .image-area .inner .link-icon,
.index-page .rts-blog-wrapper .single-blog-sm .image-area .inner .link-icon:hover {
  background: var(--color-brown);
}

.index-page .rts-blog-wrapper .single-blog:hover .image-area .inner .link-icon,
.index-page .rts-blog-wrapper .single-blog:hover .image-area .inner .link-icon:hover,
.index-page .rts-blog-wrapper .single-blog-sm:hover .image-area .inner .link-icon,
.index-page .rts-blog-wrapper .single-blog-sm:hover .image-area .inner .link-icon:hover {
  background: var(--color-green);
}


/* ==== Why Choose Us: room for the badge between the two rows (992-1199) ====
   At this width the cards drop from four across to two, so there is now a
   second row underneath. The badge hangs 35px below its card (bottom: -35px)
   and carries a 5px white ring, and the row's g-5 gutter is only 48px - so
   the top row's badges were landing on the cards beneath them.

   Raising the row gutter clears them: 90px leaves the badge about 50px of
   air before the next card starts. --bs-gutter-y is the right lever, as
   Bootstrap applies it as the columns' top margin. The x gutter is
   untouched, so the two columns keep their existing side spacing. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .index-page .why-choose-wrapper > .row {
    --bs-gutter-y: 90px;
  }
}


/* ==== Banner content column: wider at 1024px ====
   The banner row was built for two columns - copy on the left, the booking
   form on the right - and the form is commented out. So col-lg-6 leaves the
   text using half the banner while the other half sits empty. That is what
   squeezed the headline into three lines and left the two buttons fighting
   for room at this width.

   .banner-content-col is on that column in index.html purely as a hook for
   this rule. 75% here rather than the full width: the car in the background
   photo sits to the right, and the copy running the whole way across would
   read over it. Desktop keeps col-xl-6 in case the form ever comes back. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .index-page .rts-banner-wrapper-area .row > .banner-content-col {
    width: 75%;
    max-width: 75%;
    flex: 0 0 75%;
  }
}


/* ==== Testimonials: equal-height cards ====
   Swiper gives every slide the height of its own content, so a two-line
   quote produced a visibly shorter card than a four-line one sitting beside
   it. Making each slide a flex container lets the card stretch to the
   tallest in the row, the same treatment the category slider already uses.

   The quote takes the slack (flex: 1) rather than the card padding, so the
   author sits on the card's bottom edge in every one of them - otherwise
   the names would float at different heights and the row would still read
   as uneven. */
.index-page .rts-testimonials-item-slider .swiper-slide {
  height: auto;
  display: flex;
}

.index-page .rts-testimonials-item-slider .single-testimonials-item {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.index-page .rts-testimonials-item-slider .single-testimonials-item .desc {
  flex: 1 1 auto;
}

/* The author line now carries a name, a company and a city, so the theme's
   24px name loomed over the quote it belongs to and pushed the longer roles
   onto a second line. Shrinking both keeps the card's emphasis on what the
   customer actually said. */
.index-page .rts-testimonials-item-slider .single-testimonials-item .author-area .author-content .author-name {
  font-size: 18px;
}

.index-page .rts-testimonials-item-slider .single-testimonials-item .author-area .author-content .author-role {
  font-size: 14px;
}

/* The avatar is a flex item next to the name and role. When a role runs long
   (a title plus a company plus a city), the row squeezes the photo's width
   while object-fit holds its height, so the circle flattens into an oval.
   Locking flex-shrink keeps it a circle no matter how long the role gets. */
.single-testimonials-item .author-area .author-thumb {
  flex-shrink: 0;
}

.single-testimonials-item .author-area .author-thumb img {
  flex-shrink: 0;
  border-radius: 50%;
}

/* Quote text: 18px down to 17px, so the longer customer quotes sit better
   against the shrunk author line below them. */
.single-testimonials-item .desc {
  font-size: 17px;
}