/* =====================================================================
   Beyond Journey - site-wide spacing correction
   ---------------------------------------------------------------------
   The template ships with vertical rhythm tuned for a full-bleed
   marketing brochure, not a booking site:

       section          4.5rem top / 5rem bottom   (72 / 80px)
       .pt-14 .py-14    7rem                       (112px)
       .pt-17 .py-17    8.5rem                     (136px)
       .pt-18 .py-18    9rem                       (144px)
       .pt-19 .py-19    9.5rem                     (152px)
       .pt-20 .py-20    10rem                      (160px)
       .pb-20 .my-20    10rem                      (160px)

   A page banner using `pt-14 pb-20` therefore spends 272px on empty
   space before a word of content, and every section after it adds another
   152px between blocks. On a laptop that is most of a screen given to
   nothing, which is the "too much gap" complaint.

   This file cuts those figures by roughly a third. It does not restyle
   anything - only the amount of air - so no layout, colour or component
   changes with it. It must load LAST, and it must use !important because
   the values it corrects are themselves !important in style.css.

   The pages built on .bjl / .bjd / .bjg already zero the section rule
   inside their own scope, so they are unaffected either way.

   TO TUNE: change the numbers here, in one place, rather than page by
   page. Nothing else in the project needs to know.
   ===================================================================== */

/* the every-section default: still a clear break between blocks, without
   a whole screen of it */
/* 34px, the same figure the home page's own sections use, so a reader
   moving between pages meets one rhythm rather than two. Was 48/52. */
section {
  padding-top: 2.125rem;
  padding-bottom: 2.125rem;
}

/* the big utility spacers, mostly used by page banners */
.pt-14, .py-14 { padding-top: 4.5rem !important; }
.pt-17, .py-17 { padding-top: 5rem !important; }
.pt-18, .py-18 { padding-top: 5.25rem !important; }
.pt-19, .py-19 { padding-top: 5.5rem !important; }
.pt-20, .py-20 { padding-top: 5.75rem !important; }

/* the banner's bottom padding also carries the torn-paper shape overlay,
   so it keeps more room than the others - enough for the shape, not the
   160px it had */
.pb-20, .my-20 { padding-bottom: 6rem !important; }
.pb-19 { padding-bottom: 5.5rem !important; }
.pb-18 { padding-bottom: 5.25rem !important; }
.pb-17 { padding-bottom: 5rem !important; }
.pb-14 { padding-bottom: 4.5rem !important; }

/* section headings sat 3rem clear of their own content */
.section-title { margin-bottom: 2rem !important; }

/* phones never had room for this rhythm in the first place */
@media (max-width: 991px) {
  section { padding-top: 2.25rem; padding-bottom: 2.5rem; }
  .pt-14, .py-14, .pt-17, .py-17, .pt-18, .py-18,
  .pt-19, .py-19, .pt-20, .py-20 { padding-top: 3.25rem !important; }
  .pb-20, .my-20 { padding-bottom: 4rem !important; }
  .section-title { margin-bottom: 1.5rem !important; }
}

/* =====================================================================
   Section rhythm, second pass
   ---------------------------------------------------------------------
   The first pass brought the template's 72/80px sections down to 48/52.
   Seen on the page that was still loose: a section heading block carried
   3rem of its own margin on top of that, and .mb-6 / .mt-5 utilities
   stacked further gaps between a heading and its cards.
   ===================================================================== */
.section-title { margin-bottom: 1.5rem !important; }
.section-title.mb-6 { margin-bottom: 1.75rem !important; }
.section-title.mt-5 { margin-top: 1rem !important; }
.section-title p { margin-bottom: 0; }

/* the template's own big block spacers */
.pt-6, .py-6 { padding-top: 2.25rem !important; }
.pb-6, .py-6 { padding-bottom: 2.25rem !important; }
.pt-7, .py-7 { padding-top: 2.5rem !important; }
.pb-7, .py-7 { padding-bottom: 2.5rem !important; }
.mb-6 { margin-bottom: 1.75rem !important; }
.mt-6 { margin-top: 1.75rem !important; }

@media (max-width: 991px) {
  .section-title, .section-title.mb-6 { margin-bottom: 1.15rem !important; }
  .pt-6, .py-6, .pt-7, .py-7 { padding-top: 1.6rem !important; }
  .pb-6, .py-6, .pb-7, .py-7 { padding-bottom: 1.6rem !important; }
}

/* =====================================================================
   Section headings and card sizes
   ---------------------------------------------------------------------
   style.css sets h2 to 32px with a 0.8px negative track, which on a page
   of eight stacked sections shouts. 26px still reads as the section
   heading without dominating the cards under it.
   ===================================================================== */
.section-title h2,
.section-title-w h2,
.section-title-l h2 {
  font-size: 26px;
  line-height: 1.22;
}
.section-title h4 { font-size: 12px; letter-spacing: .1em; }
.section-title p { font-size: 13.5px; line-height: 1.65; }

/* the destination and group-departure tiles ran 240-260px tall, which is
   most of a card for a photograph and one word */
.our-team .team-image,
.team-list .team-image { height: 150px; overflow: hidden; }
.our-team .team-image img,
.team-list .team-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-list .team-content { padding: 10px 12px !important; }
.team-list .team-content h4 { font-size: 14px; }

/* group departure country tiles */
.trend-item1 .trend-image { max-height: 190px; overflow: hidden; }
.trend-item1 .trend-image > img { width: 100%; height: 190px; object-fit: cover; display: block; }
.trend-item1 .trend-content-title h3 { font-size: 16px; }

@media (max-width: 991px) {
  .section-title h2,
  .section-title-w h2,
  .section-title-l h2 { font-size: 21px; }
  .our-team .team-image,
  .team-list .team-image { height: 128px; }
  .trend-item1 .trend-image { max-height: 158px; }
  .trend-item1 .trend-image > img { height: 158px; }
}
@media (max-width: 575px) {
  .section-title h2,
  .section-title-w h2,
  .section-title-l h2 { font-size: 19px; }
}

/* =====================================================================
   Carousel edges
   ---------------------------------------------------------------------
   The sliders are built on a bootstrap .row, which carries -15px side
   margins so its columns can have padding. slick measures the track from
   that widened box, so the first and last cards were sliced in half at
   the container edge. Zeroing the row margins puts the track back inside
   the container; the columns keep their own padding, so the gap between
   cards is unchanged.
   ===================================================================== */
.banner-slider.row,
.shop-slider.row { margin-left: 0; margin-right: 0; }
.banner-slider .slick-list,
.shop-slider .slick-list { overflow: hidden; }

/* the arrows sat on top of the first and last card */
.banner-slider .slick-prev { left: -6px; z-index: 3; }
.banner-slider .slick-next { right: -6px; z-index: 3; }

/* =====================================================================
   Trending cards - three across, stacked
   ---------------------------------------------------------------------
   These were two per row with the photograph beside the links. At a
   third of the width that split leaves neither side enough room, so the
   photo moves on top and the links sit under it.
   ===================================================================== */
.trending .trend-full .trend-item2 { height: 150px; }
.trending .trend-full .trend-item2 a { display: block; height: 100%; background-size: cover; background-position: center; }
.trending .trend-full .trend-content { padding: 14px 16px 16px !important; }
.trending .trend-full .trend-content h3 { font-size: 17px; margin-bottom: 6px; }
.trending .trend-full .trend-meta { padding-bottom: 8px !important; margin-bottom: 8px !important; }
.trending .trend-full .entry-author span { font-size: 12.5px; }
.trending .trend-full .entry-author i { font-size: 10px; }

@media (max-width: 991px) {
  .trending .trend-full .trend-item2 { height: 132px; }
}

/* =====================================================================
   Privilege of Travelling With Us
   ---------------------------------------------------------------------
   Three tall columns of alternating left/right feature boxes, spread
   over most of a screen for six short claims. One even grid of six, each
   an icon over two lines, says the same thing in a third of the height.
   ===================================================================== */
.why-choose-us .feature-box {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 16px 17px !important;
  border: 1px solid #ece9e2;
  border-radius: 12px;
  background: #fff !important;
  height: 100%;
}
.why-choose-us .feature-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid !important; place-items: center;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #fdf4ec !important;
  color: #d9600d !important;
  font-size: 15px;
}
.why-choose-us .feature-icon svg,
.why-choose-us .feature-icon i { width: 15px; height: 15px; color: #d9600d; }
.why-choose-us .feature-box h5 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #17233e; }
.why-choose-us .feature-box p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #5a6377; }

/* the column stacks that held them become one even grid */
.why-choose-us .row.justify-content-center { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* The five boxes are two levels down - a col-md-4 holding a flex
   column. display:contents dissolves both wrappers so the boxes become
   direct items of the grid above; without it the row had three children,
   the middle one being the (now hidden) decorative image, which left a
   column-wide hole down the centre. */
.why-choose-us .row.justify-content-center > [class*="col-"] { display: contents !important; }
.why-choose-us .d-flex.flex-column { display: contents !important; }
.why-choose-us .d-flex.flex-column > * { margin: 0 !important; }
/* the decorative centre image that pushed the section tall */
.why-choose-us .col-md-4 > img,
.why-choose-us .why-image { display: none; }

@media (max-width: 991px) {
  .why-choose-us .row.justify-content-center { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .why-choose-us .row.justify-content-center { grid-template-columns: minmax(0, 1fr); }
}

/* the template nudged alternate boxes 45px sideways so they could weave
   around a centre image; in an even grid that just makes them overlap */
.why-choose-us .feature-box.fbox-one,
.why-choose-us .feature-box.fbox-two,
.why-choose-us .feature-box.fbox-three {
  position: static !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
}
/* the fifth box shipped with its label and text side by side */
.why-choose-us .feature-box > div:last-child { flex: 1 1 auto; min-width: 0; }
.why-choose-us .feature-box h5 { display: block; }

/* the decorative figure sat in its own column between the two stacks;
   with the boxes flattened into one grid it only leaves a hole, and its
   wrapper was still claiming a cell even with the image itself hidden */
.why-choose-us .row.justify-content-center > .col-lg-3.col-md-4 { display: none !important; }

/* Dissolve every wrapper between the row and the boxes, whatever classes
   it happens to carry, so the five boxes are the grid's only items. The
   earlier pair of class-specific rules missed one nesting level and left
   the last two boxes stranded on rows of their own. */
.why-choose-us .row.justify-content-center > div,
.why-choose-us .row.justify-content-center > div > div:not(.feature-box) {
  display: contents !important;
}
/* stated last so it beats the contents rule above */
.why-choose-us .row.justify-content-center > .col-lg-3 { display: none !important; }

/* Flex, not grid. A grid places every item in its own cell, so a stray
   empty wrapper still consumes one and pushed the last two boxes onto
   rows of their own. Flex items with zero size take no room, so the five
   boxes pack three-then-two whatever is nested around them. */
.why-choose-us .row.justify-content-center {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}
.why-choose-us .feature-box {
  flex: 0 0 calc(33.333% - 10px);
  max-width: calc(33.333% - 10px);
}
@media (max-width: 991px) {
  .why-choose-us .feature-box { flex-basis: calc(50% - 7px); max-width: calc(50% - 7px); }
}
@media (max-width: 575px) {
  .why-choose-us .feature-box { flex-basis: 100%; max-width: 100%; }
}

/* =====================================================================
   Privilege of Travelling With Us - rebuilt markup
   ---------------------------------------------------------------------
   The section is now one row of five equal cards (bj-priv), written as
   that rather than fought into shape with overrides. The old weave of
   three columns around a decorative figure, plus a fifth box stranded in
   a second row, is gone - which is why no amount of display:contents
   could make the last two pair up.
   ===================================================================== */
.bj-priv {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The <li> is the grid cell and the box is what gets seen, so the box has
   to fill the cell - otherwise a short card like "My Trip My Way" sits
   shorter than the one beside it and the row loses its baseline. */
.bj-priv__item { display: flex; }

.bj-priv__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 26px 22px 24px;
  border: 1px solid #ece9e2;
  border-radius: 14px;
  background: #fff;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1),
              box-shadow .3s cubic-bezier(.4, 0, .2, 1),
              border-color .3s cubic-bezier(.4, 0, .2, 1);
}

.bj-priv__box:hover {
  transform: translateY(-4px);
  border-color: #f3d9c0;
  box-shadow: 0 16px 30px -18px rgba(23, 35, 62, .34);
}

@media (prefers-reduced-motion: reduce) {
  .bj-priv__box, .bj-priv__box:hover { transition: none; transform: none; }
}

.bj-priv__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fdf4ec;
  color: #d9600d;
  font-size: 17px;
}

/* fontawesome.min.js rewrites <i class="fa"> into <svg> once it loads, so
   the glyph has to be addressed both ways or it stops being sized. */
.bj-priv__ico svg, .bj-priv__ico i { width: 17px; height: 17px; color: #d9600d; }

.bj-priv__txt { min-width: 0; }
.bj-priv__txt h3 {
  margin: 0 0 6px;
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 700;
  color: #17233e;
}
.bj-priv__txt p { margin: 0; font-size: 12.5px; line-height: 1.65; color: #5a6377; }

/* Five across needs the wide container. Below it the row steps down to
   three and then two - and because five divides by neither, the last card
   widens to take up the slack so no row ever ends half empty. That gap is
   what made the old 3 + 2 layout look unfinished. */
/* Three then two, on a six-track grid so the second row is two equal
   halves rather than one narrow card beside one double-wide one. Both
   rows run the full width and neither card looks like a leftover. */
@media (max-width: 1199px) {
  .bj-priv { grid-template-columns: repeat(6, 1fr); }
  .bj-priv__item { grid-column: span 2; }
  .bj-priv__item:nth-child(4),
  .bj-priv__item:nth-child(5) { grid-column: span 3; }
}

/* Two up. The odd one out widens to the full row so the grid never ends
   on a half-empty line. The nth-child resets undo the six-track spans
   above - a narrower query does not cancel a wider one on its own. */
@media (max-width: 991px) {
  .bj-priv { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bj-priv__item,
  .bj-priv__item:nth-child(4) { grid-column: auto; }
  .bj-priv__item:nth-child(5) { grid-column: span 2; }

  /* The card that spans the row turns its icon back beside the text -
     stacked, a full-width card spends most of its height on the space
     above a single line of copy. */
  .bj-priv__item:nth-child(5) .bj-priv__box {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
}

/* One up, and back to icon-beside-text: stacked, a full-width card spends
   too much height on the space above its own heading. */
@media (max-width: 575px) {
  .bj-priv { grid-template-columns: 1fr; }
  .bj-priv__item,
  .bj-priv__item:nth-child(4),
  .bj-priv__item:nth-child(5) { grid-column: auto; }
  .bj-priv__box {
    flex-direction: row;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 17px;
  }
  .bj-priv__ico { width: 40px; height: 40px; font-size: 15px; }
  .bj-priv__ico svg, .bj-priv__ico i { width: 15px; height: 15px; }
}

/* =====================================================================
   Visa Free / Visa On Arrival tabs
   ---------------------------------------------------------------------
   Two pills at half the container width read as a headline, not as a
   control. Sized to their own text instead.
   ===================================================================== */
#postsTab1 {
  width: auto !important;
  display: inline-flex !important;
  gap: 8px;
  justify-content: center;
}
#postsTab1 .nav-item { flex: 0 0 auto; }
#postsTab1 .nav-link {
  padding: 8px 22px !important;
  font-size: 13.5px;
  border-radius: 999px !important;
  white-space: nowrap;
}
.tab-wrap-center { text-align: center; }

/* =====================================================================
   Destination cards - the corners actually round
   ---------------------------------------------------------------------
   .rounded sets a radius on the card, but the photograph inside was not
   being clipped by it, so the top two corners stayed square while the
   slider's cards looked rounded. A slightly larger radius plus overflow
   makes every one of them match.
   ===================================================================== */
.team-list.rounded,
.team-list {
  border-radius: 12px !important;
  overflow: hidden;
}
.team-list .team-image { border-radius: 0; }
.trend-item1 .trend-image.rounded { border-radius: 12px !important; overflow: hidden; }

/* =====================================================================
   Section rhythm, third pass
   ---------------------------------------------------------------------
   Still loose between sections: many carry their own pt-*/pb-* on top of
   the section default, so two paddings stack at every seam.
   ===================================================================== */
section { padding-top: 2rem; padding-bottom: 2.25rem; }
.pt-6, .py-6 { padding-top: 1.5rem !important; }
.pb-6, .py-6 { padding-bottom: 1.5rem !important; }
.pt-7, .py-7 { padding-top: 1.75rem !important; }
.pb-7, .py-7 { padding-bottom: 1.75rem !important; }
.pt-4, .py-4 { padding-top: 1rem !important; }
.pb-4, .py-4 { padding-bottom: 1rem !important; }
.pt-5, .py-5 { padding-top: 1.25rem !important; }
.pb-5, .py-5 { padding-bottom: 1.25rem !important; }
.mt-5 { margin-top: 1rem !important; }
.mb-5 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: .9rem !important; }
.section-title { margin-bottom: 1.25rem !important; }
.section-title.mb-6 { margin-bottom: 1.4rem !important; }

@media (max-width: 991px) {
  section { padding-top: 1.5rem; padding-bottom: 1.6rem; }
  #postsTab1 .nav-link { padding: 7px 18px !important; font-size: 12.5px; }
}

/* =====================================================================
   Section rhythm - the sections that were still loose
   ---------------------------------------------------------------------
   Measured in the browser rather than guessed at. The generic
   `section { padding }` rule was being out-specified by each of these
   pages' own class rules, which set their padding directly:

       .bj-styles     64 / 36      .hp-packages   70 / 56
       .hp-reviews    70 / 70      .hp-faq        76 / 76
       .hp-cta        66 / 66      "Explore International"  48
       "Incredible India"  48 / 52

   Those five classes are named here so the reduction actually lands, and
   the two destination sections are reached through the .trending class
   they share.
   ===================================================================== */
.bj-styles { padding: 34px 0 22px !important; }
.hp-packages { padding: 34px 0 28px !important; }
.hp-reviews { padding: 34px 0 !important; }
.hp-faq { padding: 36px 0 !important; }
.hp-cta { padding: 34px 0 !important; }
.hp-stats { padding: 22px 0 !important; }
.trending { padding-top: 26px !important; padding-bottom: 22px !important; }
.our-team { padding-top: 12px !important; padding-bottom: 18px !important; }
/* A little more under the cards than over them: the section below is a
   flat grey band, and at 26px its edge read as welded to the card row. */
.why-choose-us { padding-top: 30px !important; padding-bottom: 46px !important; }

@media (max-width: 991px) {
  .bj-styles, .hp-packages, .hp-reviews, .hp-faq, .hp-cta { padding: 24px 0 !important; }
  .trending { padding-top: 20px !important; padding-bottom: 16px !important; }
  .why-choose-us { padding-top: 22px !important; padding-bottom: 20px !important; }
}

/* =====================================================================
   Search panel - sized for three fields, not five
   ---------------------------------------------------------------------
   The card kept the width and padding it had when it carried Duration
   and Budget as well. With three fields that leaves a lot of white card
   around very little control.
   ===================================================================== */
.hp-card {
  max-width: 900px !important;
  padding: 16px 16px 30px !important;
  border-radius: 16px !important;
}
.hp-card__title { font-size: 14px !important; margin-bottom: 10px !important; }
.hp-field { padding: 9px 14px !important; }
.hp-field__label { font-size: 10.5px !important; }
.hp-field__value { font-size: 16px !important; }
.hp-field__sub { font-size: 10.5px !important; }
.hp-search-btn {
  bottom: -20px !important;
  padding: 10px 40px !important;
  font-size: 14.5px !important;
}
/* the hero's own rule is now 26px/30px - this only holds the floor */
.hp-hero { padding-bottom: 30px !important; }

@media (max-width: 991px) {
  .hp-card { max-width: none !important; padding: 14px 14px 26px !important; }
}

/* the closing CTA - the second button is .hp-cta__outline, not another
   .nir-btn, so a sibling selector on .nir-btn never reached it */
.hp-cta__buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hp-cta__buttons .nir-btn,
.hp-cta__buttons .hp-cta__outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 26px !important; border-radius: 999px !important;
  font-size: 14px; font-weight: 700;
}
.hp-cta__buttons .nir-btn {
  background: #f5761a !important; border: 0 !important; color: #fff !important;
}
.hp-cta__buttons .nir-btn:hover { background: #d9600d !important; color: #fff !important; }
.hp-cta__buttons .hp-cta__outline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .38) !important; color: #fff !important;
}
.hp-cta__buttons .hp-cta__outline:hover { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }

/* =====================================================================
   The inner-page banner
   ---------------------------------------------------------------------
   29 pages open with the template's .breadcrumb-main strip: a title and a
   two-item breadcrumb sitting in 72px of top padding and 96px of bottom,
   263px in all. That is most of a laptop's first screen spent on two
   words the reader can already see in the tab.

   Two other things were wrong with it:

     line-height: 0.6 on the h1 - a 42px word rendered in a 25px box, so
     every descender was clipped. It looked like a font-loading fault.

     background-attachment: fixed - a parallax that iOS ignores outright
     and that judders on everything else, for a strip 150px tall.

   Now: 44px of padding either side, a 30px title (the page headings below
   are 26px), and the breadcrumb at 12.5px like the rest of the UI.
   ===================================================================== */
.breadcrumb-main {
  /* centre, not top: at 150px tall the old `background-position: top`
     showed only the sky strip of bg1.jpg and read as flat grey */
  background-position: center !important;
  padding-top: 44px !important;
  padding-bottom: 44px !important;
  background-attachment: scroll !important;
}
.breadcrumb-main .breadcrumb-outer .breadcrumb-content h1,
.breadcrumb-main .breadcrumb-outer .bread-content h1 {
  font-size: 30px !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
  letter-spacing: -.01em;
}
.breadcrumb-main .breadcrumb { margin: 0; font-size: 12.5px; }
.breadcrumb-main .breadcrumb li,
.breadcrumb-main .breadcrumb li a { font-size: 12.5px; }

@media (max-width: 767px) {
  .breadcrumb-main { padding-top: 32px !important; padding-bottom: 32px !important; }
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1,
  .breadcrumb-main .breadcrumb-outer .bread-content h1 { font-size: 24px !important; }
}

/* =====================================================================
   Category tiles on flights.html
   ---------------------------------------------------------------------
   These tiles used images/cars/cars1-5.png as their icons - car
   photographs standing in for "Senior-Friendly", "Couple Holidays" and
   the rest. The files were deleted in an earlier clean-up, so every tile
   rendered a broken-image glyph. A car was never the right picture for
   any of them anyway; they carry an icon medallion now, which needs no
   asset and cannot break again.
   ===================================================================== */
.category-item .bjcat {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(245, 118, 26, .1);
  color: var(--bjl-orange, #f5761a);
  font-size: 20px;
}
.category-item .bjcat svg { width: 20px; height: 20px; fill: currentColor; }

/* Airline mark on the flight cards. images/flights/flight_grid_3-5.png
   were airline logos and no longer exist; there are no logo assets on the
   site to put back, and inventing one carrier's mark for another airline's
   row would be worse than none. A neutral plane medallion says "flight"
   without claiming to be anybody's brand. */
.bjair {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(23, 35, 62, .07); color: #17233e;
  font-size: 14px; flex: 0 0 auto;
}
.bjair svg { width: 14px; height: 14px; fill: currentColor; }

/* =====================================================================
   The rest of the spacing scale
   ---------------------------------------------------------------------
   The steps above cover pt-4 through pt-7. Everything from pt-8 up was
   never touched, and those are the ones that hurt:

     pt-8  = 4rem   = 64px      pt-17 = 8.5rem = 136px
     pt-10 = 5rem   = 80px      pt-20 = 10rem  = 160px
     pt-14 = 7rem   = 112px

   Measured across five pages, one seam between sections was 12px and the
   next was 160px on the same screen. That is the "bahut zyada space"
   complaint, and it cannot be fixed page by page - there are 46 of them.

   These continue the curve already set above (6 = 24px, 7 = 28px) instead
   of starting a second one. Anything that genuinely needs its old height
   overrides by class, the way .breadcrumb-main and .hp-hero do.
   ===================================================================== */
.pt-8,  .py-8  { padding-top: 32px !important; }
.pb-8,  .py-8  { padding-bottom: 32px !important; }
.pt-9,  .py-9  { padding-top: 36px !important; }
.pb-9,  .py-9  { padding-bottom: 36px !important; }
.pt-10, .py-10 { padding-top: 40px !important; }
.pb-10, .py-10 { padding-bottom: 40px !important; }
.pt-14, .py-14 { padding-top: 48px !important; }
.pb-14, .py-14 { padding-bottom: 48px !important; }
.pt-17, .py-17 { padding-top: 56px !important; }
.pb-17, .py-17 { padding-bottom: 56px !important; }
.pt-18, .py-18 { padding-top: 58px !important; }
.pb-18, .py-18 { padding-bottom: 58px !important; }
.pt-19, .py-19 { padding-top: 60px !important; }
.pb-19, .py-19 { padding-bottom: 60px !important; }
.pt-20, .py-20 { padding-top: 64px !important; }
.pb-20, .py-20, .my-20 { padding-bottom: 64px !important; }

/* the same curve on the margin utilities, so a section's internal rhythm
   does not fight the padding around it */
.mt-10, .my-10 { margin-top: 32px !important; }
.mb-10, .my-10 { margin-bottom: 32px !important; }
.mb-12 { margin-bottom: 36px !important; }

@media (max-width: 767px) {
  /* phones need the rhythm, not the room */
  .pt-8, .py-8, .pt-9, .py-9, .pt-10, .py-10, .pt-14, .py-14,
  .pt-17, .py-17, .pt-18, .py-18, .pt-19, .py-19, .pt-20, .py-20 { padding-top: 30px !important; }
  .pb-8, .py-8, .pb-9, .py-9, .pb-10, .py-10, .pb-14, .py-14,
  .pb-17, .py-17, .pb-18, .py-18, .pb-19, .py-19, .pb-20, .py-20, .my-20 { padding-bottom: 30px !important; }
  .mt-10, .my-10 { margin-top: 20px !important; }
  .mb-10, .my-10, .mb-12 { margin-bottom: 20px !important; }
}

/* =====================================================================
   One heading scale
   ---------------------------------------------------------------------
   Measured across pages, the same kind of heading was 21px on hotels,
   26px on holiday packages, 28px on about and 32px in two sections of the
   same page. These set one scale for the shared .section-title pattern;
   anything with its own design (.bjd- .bjl- .bjft- .hp-) keeps its own.
   ===================================================================== */
.section-title h4, .section-title .theme1 {
  font-size: 12px !important; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  margin-bottom: 8px !important;
}
.section-title h2 { font-size: 26px !important; line-height: 1.25; letter-spacing: -.02em; }
.section-title h3 { font-size: 20px !important; }
.section-title p  { font-size: 13.5px !important; line-height: 1.7; }

/* =====================================================================
   Phone corrections
   ---------------------------------------------------------------------
   Measured in a true 390px viewport (headless clamps --window-size at
   about 500px, so these came from a 390px iframe). Four things pushed
   content past the right edge:

     .hp-stat        9px  - "530+ Packages" at 24px in a half-width cell,
                            so "Thoughtfully Curated" was clipped mid-word
     .item-slider    3px  - a Bootstrap .row's -15px side margins inside a
     .side-slider    8px    slick track, where no container padding absorbs
     .nav-arrow      8px  - a carousel arrow parked outside its own frame

   body already carries overflow-x:hidden, so none of it produced a visible
   scrollbar - it silently cut the text off instead, which is worse.

   These rules are !important because the sections they correct carry their
   own <style> blocks inside <body>, and those come after this file.
   ===================================================================== */
@media (max-width: 991px) {
  /* the stats band: two columns of a number plus two words is as much as a
     phone has room for, so the number comes down and the label wraps */
  .hp-stat {
    min-width: 0 !important;
    gap: 10px !important;
    padding: 4px 12px !important;
  }
  .hp-stat i, .hp-stat svg { flex: 0 0 auto; font-size: 18px !important; width: 18px; height: 18px; }
  .hp-stat strong { font-size: 20px !important; }
  .hp-stat span { font-size: 12px !important; line-height: 1.35 !important; }

  /* a .row inside a slick track is 30px wider than the page: its -15px side
     margins have no container padding to sit in */
  .item-slider, .side-slider,
  .slick-list .row { margin-left: 0 !important; margin-right: 0 !important; }

  /* (carousel arrows are handled below, at the tablet breakpoint - the
     class is .nav-arrow-right with one hyphen, and 1024px needs it too) */
}

@media (max-width: 575px) {
  .hp-stat { padding: 4px 8px !important; gap: 8px !important; }
  .hp-stat strong { font-size: 18px !important; }
  .hp-stat span { font-size: 11px !important; }
  .hp-stat i, .hp-stat svg { font-size: 16px !important; width: 16px; height: 16px; }
}

/* ---------------------------------------------------------------------
   Carousel arrows, phone and tablet
   ---------------------------------------------------------------------
   .nav-arrow-left/-right sit at -20px and .banner-slider .slick-next at
   -6px, hanging outside their frame on purpose. On a desktop the page
   gutter absorbs that; at 1024px and below there is no gutter left, so
   they were the last thing pushing the document past its own width
   (flights.html, 8px, at 360 / 390 / 1024).

   Inside the frame they are also simply easier to hit with a thumb.
   --------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .nav-arrow-left { left: 2px !important; }
  .nav-arrow-right { right: 2px !important; }
  .banner-slider .slick-next { right: 2px !important; }
  .banner-slider .slick-prev { left: 2px !important; }
  .slick-slider .slick-next { right: 2px !important; }
  .slick-slider .slick-prev { left: 2px !important; }
}

/* =====================================================================
   Two cards a row on a phone
   ---------------------------------------------------------------------
   Measured at 390px, before this rule:

       flights.html          24,137px   30.2 phone screens
       index.html            22,987px   28.7
       about.html            14,306px   17.9
       hotels.html           14,098px   17.6
       holiday-packages.html 13,317px   16.6

   Thirty screens to reach the footer. The cause is not padding - it is
   that every card section is built on `col-lg-3 col-md-6 col-sm-12`, and
   below 576px that last class gives each card the full width. Eight cards
   become eight full-height blocks stacked nose to tail: bj-trending alone
   is 2,936px, one section three and a half screens tall.

   Two across halves every one of them. At 390px a card is about 172px
   wide, which is what a phone card is on any travel app you have used -
   enough for a photograph, a name and a line, and the type below steps
   down to suit it.

   Scoped to the sections that actually hold cards. A blanket
   `[class*="col-"]` rule would take forms, prose and section headings
   with it.
   ===================================================================== */
@media (max-width: 575px) {
  /* `:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"])` matters. Several of these sections wrap their
     card row in a full-width `.col-lg-12`, and the first version of this
     rule halved that wrapper - one 189px column holding a whole slider. But
     `[class*="-12"]` then also caught `col-sm-12`, which IS a card, and put
     index.html straight back to 28 screens. col-lg-12 / col-md-12 / col-12
     are wrappers; col-sm-12 is a card that happens to be full width on a
     phone, which is the very thing being changed here. */
  .bj-trending > .container > .row > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]),
  .bj-styles > .container > .row > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]),
  .bj-destinations > .container > .row > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]),
  .bj-themes > .container > .row > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]),
  .bj-services > .container > .row > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]),
  .bj-preview > .container > .row > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]),
  .bj-styles > .container > .row > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]),
  .our-team > .container > .row > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]),

  /* the template pages nest their cards one level deeper, inside that
     wrapper. `:not(.slick-initialized)` leaves real carousels alone - they
     already show one card at a time and cost no height. */
  .trending .row:not(.slick-initialized) > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 12px !important;
  }

  /* the gutters the halved columns sit in */
  .bj-trending > .container > .row,
  .bj-styles > .container > .row,
  .bj-destinations > .container > .row,
  .bj-themes > .container > .row,
  .bj-services > .container > .row,
  .bj-preview > .container > .row,
  .bj-styles > .container > .row,
  .trending .row:not(.slick-initialized),
  .our-team > .container > .row { margin-left: -6px !important; margin-right: -6px !important; }

  /* type at 172px: the headline still leads, the blurb still reads, and
     neither runs to five words a line */
  .bj-trending [class*="col-"] h3, .bj-trending [class*="col-"] h4,
  .bj-destinations [class*="col-"] h3, .bj-destinations [class*="col-"] h4,
  .bj-themes [class*="col-"] h3, .bj-themes [class*="col-"] h4,
  .bj-services [class*="col-"] h3, .bj-services [class*="col-"] h4,
  .bj-preview [class*="col-"] h3, .bj-preview [class*="col-"] h4,
  .bj-styles [class*="col-"] h4,
  .trending .trend-box h3, .trending .trend-box h4, .trending .trend-box h5 {
    font-size: 13.5px !important; line-height: 1.3 !important;
  }
  .bj-trending [class*="col-"] p, .bj-destinations [class*="col-"] p,
  .bj-themes [class*="col-"] p, .bj-services [class*="col-"] p,
  .bj-preview [class*="col-"] p, .bj-styles [class*="col-"] p,
  .trending .trend-box p {
    font-size: 11.5px !important; line-height: 1.5 !important;
  }

  /* the picture on a half-width card does not need to be as tall as it was
     when it had the whole screen */
  .trending .trend-image img, .trending .trend-item1 img,
  .bj-themes img, .bj-destinations img { max-height: 132px; object-fit: cover; }

  /* CSS-grid card sets that also collapsed to one column */
  .hp-pack-grid, .bj-recent__grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

/* =====================================================================
   Swipe rails for the browse-many sets
   ---------------------------------------------------------------------
   Two across halved the card sections, but a set of eight is still four
   rows of vertical scrolling on a phone, and these are sets people SCAN
   rather than compare - "which destinations do you do", "what kinds of
   trip are there". A phone answers that better sideways.

   So the largest browse sets become one swipeable row: eight cards go
   from about 1,300px of page to about 300px, and the card that is half
   off the right edge is what tells you there are more. It is the pattern
   every travel app uses for exactly this, and it is why the section
   headings above them still say what the set is.

   Comparison sets are deliberately left as a 2-up grid - trending
   packages carry a price and a rating, and prices are meant to be seen
   side by side rather than one at a time.

   `overflow-x: auto` on the row clips its own children, so none of this
   adds horizontal scroll to the page itself.
   ===================================================================== */
@media (max-width: 575px) {
  .bj-styles > .container > .row,
  .bj-destinations > .container > .row,
  .bj-themes > .container > .row,
  .bj-services > .container > .row,
  .trending .row:not(.slick-initialized) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 12px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* the rail runs to the screen edge so the last card is not boxed in,
       but its first card still lines up with the heading above it */
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding-left: 12px;
    padding-right: 12px;
    scrollbar-width: none;
  }
  .bj-styles > .container > .row::-webkit-scrollbar,
  .bj-destinations > .container > .row::-webkit-scrollbar,
  .bj-themes > .container > .row::-webkit-scrollbar,
  .bj-services > .container > .row::-webkit-scrollbar,
  .trending .row:not(.slick-initialized)::-webkit-scrollbar { display: none; }

  /* 64%, so a slice of the next card is always visible - that sliver is
     the only affordance a rail has */
  .bj-styles > .container > .row > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]),
  .bj-destinations > .container > .row > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]),
  .bj-themes > .container > .row > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]),
  .bj-services > .container > .row > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]),
  .trending .row:not(.slick-initialized) > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]) {
    flex: 0 0 64% !important;
    max-width: 64% !important;
    scroll-snap-align: start;
    margin-bottom: 0 !important;
  }

  /* the price line on a trending card was wrapping "Starting from" onto
     two lines and crowding the button beside it */
  .bj-trending [class*="col-"] .price-from,
  .bj-trending [class*="col-"] small { font-size: 10.5px !important; }
}

/* Two things inside `.trending` are also a `.row` and must NOT be rails:

   - a card's own inner row: the photo column beside the text column on a
     destination card (.trend-full). As a rail its two columns became two
     64% slots and the text was clipped at the card's edge (hotels.html at
     390px). The extra class in the selector keeps this above the rail
     rule whatever the order.
   - a row given `.bj-norail`. The hotel-group logo grid is twelve small
     tiles that want the 2-up grid, and with `justify-content: center` a
     rail parked its first tile 1,200px off the left edge. This puts such
     a row back to the 2-up layout above. It deliberately has the SAME
     specificity as the rail rule and simply comes later, so page
     stylesheets that already out-rank the rail (holiday-packages.html's
     .bjhd grid) keep doing so. */
@media (max-width: 575px) {
  .trending .trend-full .row:not(.slick-initialized) {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible;
    scroll-snap-type: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0;
  }
  .trending .trend-full .row:not(.slick-initialized) > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
    scroll-snap-align: none;
  }

  .trending .row.bj-norail {
    flex-wrap: wrap !important;
    overflow: visible;
    scroll-snap-type: none;
    margin-left: -6px !important;
    margin-right: -6px !important;
    padding: 0;
  }
  .trending .row.bj-norail > [class*="col-"]:not([class~="col-lg-12"]):not([class~="col-md-12"]):not([class~="col-xl-12"]):not([class~="col-12"]) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 12px !important;
    scroll-snap-align: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bj-styles > .container > .row,
  .bj-destinations > .container > .row,
  .bj-themes > .container > .row,
  .bj-services > .container > .row,
  .trending .row:not(.slick-initialized) { scroll-snap-type: none; }
}