/*======================================================================
  Royal Home Decors — HOMEPAGE PREMIUM SKIN
  ----------------------------------------------------------------------
  Loaded only by index.html, and every rule is scoped to
  `.page-wrapper.home-premium`, so nothing here can reach the inner
  pages (about / services / products / contact / the six service pages).

  Purpose is purely visual: take the flat white homepage and give it the
  blue-and-white, curved-band, rounded-card look of the brand flyer —
  soft gradients, ornamental dividers, premium spacing, subtle shadows.
  No markup, copy or behaviour is changed by this file.

  Layout of this file
    01  Design tokens
    02  Typography & base polish
    03  Shared pieces (badges, ornaments, buttons, cards)
    04  Header
    05  Hero
    06  About
    07  Services band
    08  Gallery
    09  Work process band
    10  Reviews band
    11  CTA
    12  Blog
    13  Footer
    14  Floating actions
    15  Responsive
======================================================================*/

/*----------------------------------------------------------------------
  01 — DESIGN TOKENS
  A single blue ramp drives every section, so the palette stays honest.
  --primary-color from the theme is already #124185; these extend it
  rather than replace it.
----------------------------------------------------------------------*/
.page-wrapper.home-premium {
  /* Blues */
  --rhd-navy-deep: #0a2a5e;
  --rhd-navy: #123f80;
  --rhd-blue: #1b56ad;
  --rhd-blue-soft: #4b7fd0;

  /* Tints — backgrounds and hairlines */
  --rhd-tint-05: #f7fafe;
  --rhd-tint-10: #eef4fc;
  --rhd-tint-20: #e2ecf9;
  --rhd-line: #d8e5f6;

  /* Ink */
  --rhd-ink: #10233f;
  --rhd-ink-soft: #4d6280;

  /* Elevation — low-spread, blue-tinted so shadows read as depth, not dirt */
  --rhd-shadow-sm: 0 6px 18px rgba(16, 47, 96, 0.07);
  --rhd-shadow-md: 0 16px 40px rgba(16, 47, 96, 0.10);
  --rhd-shadow-lg: 0 28px 70px rgba(16, 47, 96, 0.16);

  /* Curvature */
  --rhd-radius-sm: 12px;
  --rhd-radius: 20px;
  --rhd-radius-lg: 28px;
  --rhd-band: 64px;

  background: #ffffff;
}

/*----------------------------------------------------------------------
  02 — TYPOGRAPHY & BASE POLISH
  The theme fakes weight with `text-shadow: 2px 0 <colour>` on h1/h2 and
  asks for weight 900 from families that ship up to 700. Both smear the
  letterforms. Real weights + clean tracking is most of the "premium".
----------------------------------------------------------------------*/
.home-premium h1,
.home-premium .h1,
.home-premium h2,
.home-premium .h2,
.home-premium h3,
.home-premium .h3,
.home-premium h4,
.home-premium .h4,
.home-premium h5,
.home-premium .h5,
.home-premium h6,
.home-premium .h6,
.home-premium .big-text,
.home-premium .rotate-hero,
.home-premium .heading {
  text-shadow: none !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.home-premium h2,
.home-premium .h2 {
  color: var(--rhd-navy);
  line-height: 1.15;
}

.home-premium h3,
.home-premium h4,
.home-premium h5,
.home-premium h6 {
  color: var(--rhd-ink);
}

.home-premium p {
  color: var(--rhd-ink-soft);
}

/* Smooth every colour/soft-shadow change on interactive pieces. */
.home-premium a,
.home-premium .theme-btn,
.home-premium .blog-item,
.home-premium .timeline-images .content,
.home-premium .carousel-caption,
.home-premium .hero-content {
  transition: color 0.35s ease, background-color 0.35s ease,
    border-color 0.35s ease, box-shadow 0.45s ease, transform 0.45s ease;
}

/*----------------------------------------------------------------------
  03 — SHARED PIECES
----------------------------------------------------------------------*/

/* Sub-title -> the flyer's rounded badge ("COMPLETE HOME DECOR SOLUTIONS",
   "OUR PREMIUM PRODUCTS"). One rule re-skins every eyebrow on the page. */
.home-premium .sub-title,
.home-premium .section-title .sub-title,
.home-premium.page-wrapper .sub-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 22px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%);
  color: #ffffff;
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: var(--rhd-shadow-sm);
}

/* Small diamond ornament inside the badge, echoing the flyer's dividers. */
.home-premium .sub-title::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.85);
}

/* Heading ornament: a short gradient rule under every section title. */
.home-premium .section-title h2::after,
.home-premium .interior-area .text-center h2::after {
  content: '';
  display: block;
  width: 74px;
  height: 4px;
  margin-top: 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--rhd-navy) 0%, var(--rhd-blue-soft) 100%);
}

/* Centred headings keep the badge on its own line above and centre the rule. */
.home-premium .interior-area .text-center h2 {
  position: relative;
  display: block;
}

.home-premium .interior-area .text-center h2::after {
  margin-left: auto;
  margin-right: auto;
}

.home-premium .interior-area .text-center .sub-title {
  margin-bottom: 18px;
}

/* Primary button -> navy block with a gradient sheen and a lift on hover.
   Square corners, matching the buttons on the inner pages. */
.home-premium .theme-btn,
.home-premium a.theme-btn,
.home-premium .section-heading .button a,
.home-premium .primary-readmore {
  padding: 15px 34px;
  border-radius: 0;
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%) !important;
  color: #ffffff !important;
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(18, 63, 128, 0.24);
}

.home-premium .theme-btn:hover,
.home-premium a.theme-btn:hover,
.home-premium .section-heading .button a:hover {
  background: linear-gradient(135deg, var(--rhd-blue) 0%, var(--rhd-navy-deep) 100%) !important;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(18, 63, 128, 0.32);
}

/* Arrow link ("View Service" / "Read More") in brand navy. Colour only-the
   label keeps the theme's default weight and tracking so these read exactly
   like the "Read More" links on the products page, which apply no typographic
   override of their own (pages-premium.css, section 05). */
.home-premium .hero-btn,
.home-premium .hero-content .hero-btn,
.home-premium .hero-content .btn-icon .fa,
.home-premium .carousel-caption .hero-btn,
.home-premium .carousel-caption .btn-icon .fa {
  color: var(--rhd-navy) !important;
}

.home-premium .btn-icon .circle {
  border-color: var(--rhd-navy) !important;
}

.home-premium .btn-icon .dot,
.home-premium .btn-icon .line {
  background: var(--rhd-navy) !important;
}

.home-premium .hero-btn:hover,
.home-premium a.hero-btn:hover .btn-icon .fa {
  color: var(--rhd-blue) !important;
}

.home-premium a.hero-btn:hover .btn-icon .circle {
  border-color: var(--rhd-blue) !important;
}

.home-premium a.hero-btn:hover .btn-icon .dot,
.home-premium a.hero-btn:hover .btn-icon .line {
  background: var(--rhd-blue) !important;
}

/* Slider dots / carousel indicators -> the active one stretches into a pill. */
.home-premium .carousel-indicators [data-bs-target] {
  width: 9px;
  height: 9px;
  border-radius: 100px;
  border: 1px solid var(--rhd-blue-soft) !important;
  background: transparent;
  opacity: 1;
  transition: width 0.35s ease, background-color 0.35s ease;
}

.home-premium .carousel-indicators button.active {
  width: 30px;
  border-color: var(--rhd-navy) !important;
  background: linear-gradient(90deg, var(--rhd-navy), var(--rhd-blue)) !important;
}

.home-premium .testimonials-slider .slick-dots li {
  border-color: rgba(255, 255, 255, 0.55);
}

.home-premium .testimonials-slider .slick-dots li.slick-active {
  background: #ffffff;
  border-color: #ffffff;
}

/* Carousel prev/next -> soft rounded squares instead of hard white blocks. */
.home-premium .carousel-buttons button {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #ffffff !important;
  border: 1px solid var(--rhd-line);
  box-shadow: var(--rhd-shadow-sm);
}

.home-premium .carousel-buttons button i,
.home-premium .service-area .carousel-buttons button i,
.home-premium .interior-area .carousel-buttons button i {
  color: var(--rhd-navy) !important;
}

.home-premium .carousel-buttons button:hover {
  background: linear-gradient(135deg, var(--rhd-navy), var(--rhd-blue)) !important;
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(18, 63, 128, 0.28);
}

.home-premium .carousel-buttons button:hover i {
  color: #ffffff !important;
}

/* Star rating in the brand blue, a touch larger than the theme default. */
.home-premium .fa-star {
  color: #f0c14b;
}

.home-premium .fa-star:before {
  font-size: 16px;
}

/*----------------------------------------------------------------------
  04 — HEADER
  Kept identical to the inner pages (see about-premium.css section 03):
  flat white bar, hairline underneath, plain colour-flip on hover. No
  blur, no shadow, no growing underline — the home menu should not look
  different from every other page's.
----------------------------------------------------------------------*/
.home-premium .main-header .header-upper {
  background: #ffffff !important;
  border-bottom-color: var(--rhd-line) !important;
}

.home-premium .main-menu .navbar-collapse > .navigation > li > a {
  color: var(--rhd-ink) !important;
}

.home-premium .main-menu .navbar-collapse > .navigation > li > a:hover {
  color: var(--rhd-navy) !important;
}

.home-premium .main-menu .navbar-collapse li li a {
  color: var(--rhd-ink) !important;
}

.home-premium .main-menu .navbar-collapse li li a:hover {
  color: var(--rhd-navy) !important;
}

.home-premium .main-menu .navbar-collapse li li {
  border-top-color: var(--rhd-line) !important;
}

@media only screen and (max-width: 991px) {
  .home-premium .main-menu .navbar-collapse li {
    border-top-color: var(--rhd-line) !important;
  }

  .home-premium .main-menu .navbar-collapse > ul > li:last-child {
    border-bottom-color: var(--rhd-line) !important;
  }

  .home-premium .main-menu .navbar-collapse li.dropdown .dropdown-btn {
    border-left-color: var(--rhd-line) !important;
  }
}

/*----------------------------------------------------------------------
  05 — HERO
  Pale blue gradient wash, a dot-grid ornament top-left (the flyer's
  corner motif) and a white arc along the bottom that sweeps into the
  white About section below — the flyer's signature curve.
----------------------------------------------------------------------*/
.home-premium .hero-area {
  position: relative;
  background: linear-gradient(170deg, #ffffff 0%, var(--rhd-tint-10) 45%, var(--rhd-tint-20) 100%) !important;
  /* Deep enough that the arc below clears the slider dots. The theme pushes
     the dots 64px past the slide with a negative margin, so the gap works out
     as (this padding − the arc's height − ~68px). */
  padding-bottom: 172px !important;
  overflow-x: clip;
}

/* Dot grid, top-left. Decorative only, so it is hidden from the a11y tree
   by being a pseudo-element with no content. */
.home-premium .hero-area::before {
  content: '';
  position: absolute;
  top: 34px;
  left: 26px;
  width: 150px;
  height: 120px;
  background-image: radial-gradient(circle, rgba(18, 63, 128, 0.22) 1.7px, transparent 1.7px);
  background-size: 17px 17px;
  pointer-events: none;
  z-index: 0;
}

/* The sweeping white arc into the next section. Its height is also how far
   it rises at the centre — where the dots sit — so it stays shallow. */
.home-premium .hero-area::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -1px;
  height: 62px;
  background: #ffffff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
  z-index: 1;
}

.home-premium .hero-area .container {
  position: relative;
  z-index: 2;
}

/* Rotated side word -> a soft blue gradient fill so it reads as a
   watermark behind the image rather than a slab of black. */
.home-premium .rotate-hero {
  color: transparent !important;
  background: linear-gradient(180deg, var(--rhd-navy) 0%, rgba(75, 127, 208, 0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* Banner media -> rounded, softly shadowed. `overflow: hidden` is what makes
   the radius bite on the <video> slides as well as the <img> ones. */
.home-premium .hero-area .bg-img {
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--rhd-shadow-lg);
}

.home-premium .hero-img {
  border-radius: 0;
  display: block;
}

/* Overlay card -> white, rounded, with a navy accent bar across the top. */
.home-premium .hero-content {
  background: rgba(255, 255, 255, 0.97) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(216, 229, 246, 0.9) !important;
  border-radius: var(--rhd-radius) !important;
  padding: 34px 30px 30px !important;
  box-shadow: var(--rhd-shadow-lg) !important;
  overflow: hidden;
}

.home-premium .hero-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--rhd-navy) 0%, var(--rhd-blue-soft) 100%);
}

.home-premium .hero-content h6,
.home-premium .hero-area h6 {
  color: var(--rhd-ink) !important;
  font-family: var(--heading-font);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
}

/* The theme pushes the button 96px below the copy, which reads as a gap
   rather than a card. Bring it back into the same block of space. */
.home-premium .hero-content .hero-btn {
  margin-top: 26px !important;
  margin-right: 0 !important;
}

.home-premium .carousel-indicators {
  z-index: 3;
}

/*----------------------------------------------------------------------
  06 — ABOUT
  White, with a faint blue glow behind the panels and rounded imagery.
----------------------------------------------------------------------*/
.home-premium .about-area {
  position: relative;
  background:
   white;
  padding-top: 40px !important;
}

.home-premium .about-area .nav-tabs .nav-item .big-image,
.home-premium .about-area .nav-tabs .nav-item .small-image,
.home-premium .about-area .big-image,
.home-premium .about-area .small-image {
  border-radius: 0;
  box-shadow: var(--rhd-shadow-md);
}

/* ----------------------------------------------------------------------
   PANEL PHOTOS - SAME WIDTH WHATEVER SHAPE THE PHOTO IS

   The open panel's photo is width:100% / max-width:570px / fixed height
   inside a flex row, so the wrapper it sits in gets measured from the
   file's own ratio multiplied by that height. WHO WE ARE and OUR VISION
   use landscape shots (1280x960), which work out wider than the cap and
   settle on it. OUR MISSION uses a portrait shot (1045x1280), which works
   out to ~506px - so that one panel opened ~64px narrower than the pair
   either side of it.

   Declaring the ratio here takes the file out of that measurement: all
   three panels now measure 4:3 against their height, run past the cap and
   stop there. Used width and height are both already definite, so this
   only changes the measuring, never how the photo is drawn - object-fit:
   cover still crops the portrait shot to fill the frame.
---------------------------------------------------------------------- */
.home-premium .about-area .nav-tabs .nav-item .big-image,
.home-premium .about-area .nav-tabs .nav-item .small-image {
  aspect-ratio: 4 / 3;
}

/* Vertical label chip beside the photo. */
.home-premium .about-area .p-rotate {
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%) !important;
  color: #ffffff !important;
  border-radius: 100px;
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  box-shadow: var(--rhd-shadow-sm);
}

/* The big panel number sits on the photo: outline it so the image stays
   readable underneath instead of being blocked by solid white. */
.home-premium .about-content .number,
.home-premium.page-wrapper .about-content .number {
  color: rgba(255, 255, 255, 0.16) !important;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85);
  text-shadow: none !important;
}

.home-premium .about-area .h4-rotate {
  color: var(--rhd-navy) !important;
  letter-spacing: 0.06em;
  /* Title case, not caps: the copy is typed "2 - Our Mission" and the
     transform only guarantees each word keeps its capital. */
  text-transform: capitalize;
}

.home-premium .about-area .text p {
  color: var(--rhd-ink-soft);
  line-height: 1.85;
}

/* ----------------------------------------------------------------------
   STACKED PANELS - CLOSER TOGETHER ON PHONES

   Below 768px the three panels stop being tabs and stack, each one
   running text then photograph. The theme separates them with 64px,
   which was set for the desktop rhythm and reads as a hole on a phone:
   the panel's own heading is the first thing after the gap, so it looks
   like the heading has been pushed a long way down from the photograph
   above it.

   34px matches the padding the sections either side of this one use at
   this width, so the panels sit apart by the same measure as everything
   else on the page rather than by more than twice it.
---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .home-premium .about-area .nav-tabs .nav-item:not(:last-child) {
    margin-bottom: 34px;
  }
}

/*----------------------------------------------------------------------
  07 — SERVICES BAND
  First of the curved tinted bands. Rounded on all four corners so the
  white page shows through at the edges, exactly like the flyer's
  product panel.
----------------------------------------------------------------------*/
.home-premium .service-area {
  position: relative;
  background:
    radial-gradient(760px 320px at 12% 0%, rgba(255, 255, 255, 0.95) 0%, transparent 62%),
    linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
  border-radius: 0;
  margin: 0 0px;
  padding-top: 74px !important;
  padding-bottom: 74px !important;
  overflow: hidden;
}

/* Faint dot-grid corner, mirroring the hero's. */
.home-premium .service-area::before {
  content: '';
  position: absolute;
  right: 30px;
  top: 30px;
  width: 140px;
  height: 110px;
  background-image: radial-gradient(circle, rgba(18, 63, 128, 0.16) 1.6px, transparent 1.6px);
  background-size: 17px 17px;
  pointer-events: none;
}

.home-premium .service-area h2,
.home-premium .service-area .section-title h2 {
  color: var(--rhd-navy) !important;
}

.home-premium .service-area .carousel-item img {
  border-radius: 0;
  box-shadow: var(--rhd-shadow-md);
}

/* Caption sits straight on the band — no card behind it — with the title
   straddling the photo's bottom edge. */
.home-premium .service-area .carousel-caption {
  /* Relative (not static) so z-index applies and the title paints over the
     photo — but Bootstrap's .carousel-caption ships left/right/bottom offsets
     meant for absolute positioning, and relative honours them too. Left at
     15% pushed the whole caption off-centre, so they are zeroed here. */
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
  margin-top: 0 !important;
  padding: 0 16px !important;
  background: none;
  border: none;
  box-shadow: none;
}

/* Half the title on the photo, half below it. The overlap is set in `em`, so
   it stays exactly half at every breakpoint: .big-text has line-height 1.2,
   which makes half its line box 0.6em whatever the font-size resolves to. */
.home-premium .service-area .big-text {
  color: var(--rhd-navy) !important;
  letter-spacing: 0.01em;
  margin-top: -0.6em;
}

.home-premium .service-area .carousel-caption p {
  color: var(--rhd-ink-soft) !important;
}

/* Bottom arrow -> round gradient button.
   Deliberately unshadowed: the arrow is the last thing in the slide, and
   Bootstrap clips .carousel-inner with overflow:hidden right at its baseline.
   A downward shadow gets sliced off there and reads as a hard-edged grey
   rectangle under the button rather than a halo. */
.home-premium .service-area .right-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-top: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%) !important;
  color: #ffffff !important;
  font-size: 17px;
  box-shadow: none;
  transition: transform 0.35s ease, background-color 0.35s ease;
}

.home-premium .service-area .carousel-caption a:hover .right-arrow {
  transform: translateY(-4px);
  background: linear-gradient(135deg, var(--rhd-blue) 0%, var(--rhd-navy-deep) 100%) !important;
  box-shadow: none;
}

/*----------------------------------------------------------------------
  08 — GALLERY (Interior area)
  White section between two tinted bands; tiles get the rounded-card
  treatment and the hover panel becomes a soft white card.
----------------------------------------------------------------------*/
.home-premium .interior-area {
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(27, 86, 173, 0.05) 0%, transparent 70%),
    #ffffff !important;
  padding-top: 60px !important;
}

.home-premium .interior-area .carousel-item img {
  border-radius: 0;
  box-shadow: var(--rhd-shadow-sm);
}

.home-premium .interior-area .carousel-caption {
  background: rgba(255, 255, 255, 0.97) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--rhd-line);
  border-radius: var(--rhd-radius);
  box-shadow: var(--rhd-shadow-lg);
}

.home-premium .interior-area .carousel-caption h5 {
  color: var(--rhd-navy) !important;
  line-height: 1.35;
}

.home-premium .interior-area .carousel-caption p {
  color: var(--rhd-ink-soft) !important;
}

/* Category chip inside the hover card: smaller than the section badges. */
.home-premium .interior-area .carousel-caption .sub-title {
  padding: 5px 16px;
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* The theme draws a rule before this label; the badge replaces it. */
.home-premium .interior-area .carousel-caption .sub-title:before {
  content: '';
  width: 6px;
  height: 6px;
  margin: 0;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.85);
}

/* Filter tabs -> pill switches. As pills they need air between them; the
   theme's underline tabs sat flush against each other by design. */
.home-premium .interior-area ul.nav-pills.tab-style-one {
  gap: 14px;
  flex-wrap: wrap;
}

.home-premium .interior-area .tab-style-one .nav-link,
.home-premium .project-filter .nav-link {
  padding: 9px 24px;
  border-radius: 100px;
  border: 1px solid var(--rhd-line);
  color: var(--rhd-ink-soft) !important;
  font-family: var(--body-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #ffffff;
}

.home-premium .interior-area .tab-style-one .nav-link.active,
.home-premium .interior-area .nav-pills .nav-link.active,
.home-premium .project-filter .nav-item.current .nav-link {
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%) !important;
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(18, 63, 128, 0.22);
}

/*----------------------------------------------------------------------
  09 — WORK PROCESS BAND
  Second curved tinted band.
----------------------------------------------------------------------*/
.home-premium .timeline-area {
  position: relative;
  background:
    radial-gradient(700px 300px at 88% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 60%),
    linear-gradient(160deg, var(--rhd-tint-20) 0%, var(--rhd-tint-05) 100%) !important;
  border-radius: 0;
  margin: 0 0px;
  padding-top: 74px !important;
  padding-bottom: 74px !important;
  overflow: hidden;
}

.home-premium .timeline-area .timeline-images img {
  border-radius: 0;
  box-shadow: var(--rhd-shadow-md);
}

.home-premium .timeline-area .timeline-images .content {
  background: rgba(255, 255, 255, 0.97) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(216, 229, 246, 0.9);
  border-radius: var(--rhd-radius);
  box-shadow: var(--rhd-shadow-lg) !important;
  overflow: hidden;
}

.home-premium .timeline-area .timeline-images .content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--rhd-navy) 0%, var(--rhd-blue-soft) 100%);
}

.home-premium .timeline-images .content .title,
.home-premium .timeline-images .slick-current .content .h5 {
  color: var(--rhd-navy) !important;
  letter-spacing: 0.08em;
}

.home-premium .timeline-images .description {
  color: var(--rhd-ink-soft) !important;
}

/* Step numbers: muted until active, then brand navy. */
.home-premium .timeline-item .icon.h2,
.home-premium.page-wrapper .timeline-item .icon.h2 {
  color: rgba(18, 63, 128, 0.28) !important;
  text-shadow: none !important;
  transition: color 0.4s ease;
}

.home-premium .timeline-item.slick-current .icon.h2,
.home-premium.page-wrapper .timeline-item.slick-current .icon.h2 {
  color: var(--rhd-navy) !important;
  text-shadow: none !important;
}

.home-premium .timeline-item.slick-current .icon:after {
  background: linear-gradient(90deg, var(--rhd-navy), transparent);
}

/*----------------------------------------------------------------------
  10 — REVIEWS BAND
  The one deep-navy band on the page. It carries the brand colour at
  full strength and gives the long white page a rhythm — white, tint,
  white, tint, navy.
----------------------------------------------------------------------*/
.home-premium .reviews-area {
  position: relative;
  background:radial-gradient(760px 320px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%), linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
   
  border-radius: 0;
  margin: 0 0px;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  overflow: hidden;
}

/* Oversized quotation mark, set very low in opacity. */
.home-premium .reviews-area::before {
  content: '\201C';
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--heading-font);
  font-size: 300px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.home-premium .reviews-area .testimonial-item .author-text,
.home-premium.page-wrapper .reviews-area .testimonial-item .author-text {
  color: rgba(255, 255, 255, 0.94) !important;
  font-family: var(--heading-font);
  font-style: italic;
  font-size: 24px;
  line-height: 1.7;
  font-weight: 500;
}

.home-premium .reviews-area h5,
.home-premium.page-wrapper .reviews-area h5 {
  color: #ffffff !important;
  letter-spacing: 0.06em;
}

.home-premium .reviews-area .designations,
.home-premium.page-wrapper .reviews-area .designations {
  color: rgba(255, 255, 255, 0.62) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
}

/* Portrait gets a white ring + halo so it lifts off the navy. */
.home-premium .reviews-area .testi-img {
  border: 5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 60px rgba(4, 20, 46, 0.45);
}

/*----------------------------------------------------------------------
  11 — CTA
  Left to the base theme (style.css) and the markup's own inline
  background — no premium overrides on this band.
----------------------------------------------------------------------*/

/*----------------------------------------------------------------------
  12 — BLOG
  Three rounded, elevated cards with a blue meta row.
----------------------------------------------------------------------*/
.home-premium .blog-area {
  background:
  radial-gradient(760px 320px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%), linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
  padding-top: 60px !important;
}

.home-premium .blog-home .blog-item,
.home-premium .blog-home .blog-item.black-30-bg,
.home-premium .blog-home .blog-item.black-120-bg {
  background: #ffffff !important;
  border: 1px solid var(--rhd-line);
  border-radius: var(--rhd-radius);
  padding: 30px 26px 32px;
  box-shadow: var(--rhd-shadow-sm);
  overflow: hidden;
}

.home-premium .blog-home .blog-item:hover {
  transform: translateY(-8px);
  border-color: rgba(27, 86, 173, 0.35);
  box-shadow: var(--rhd-shadow-lg);
}

.home-premium .blog-home .blog-item h6 a,
.home-premium .blog-home .blog-item.black-120-bg h6 a {
  color: var(--rhd-navy) !important;
  font-size: 19px;
  line-height: 1.45;
}

/* The card copy is centred, so the rule under the title reads as an
   ornament rather than a full-width divider. */
.home-premium .blog-home .blog-item hr {
  width: 64px;
  border-top: 2px solid var(--rhd-line);
  border-radius: 2px;
  opacity: 1;
  margin: 16px auto;
}

.home-premium .blog-home .blog-item .image img {
  border-radius: 0;
  box-shadow: var(--rhd-shadow-sm);
}

.home-premium .blog-home .blog-item .blog-meta li,
.home-premium .blog-home .blog-item > .content > span {
  color: var(--rhd-ink-soft);
  font-size: 13px;
  letter-spacing: 0.03em;
}

.home-premium .blog-home .blog-item i {
  color: var(--rhd-blue);
  margin-right: 6px;
}

.home-premium .blog-home .blog-item p {
  color: var(--rhd-ink-soft);
}

/*----------------------------------------------------------------------
  13 — FOOTER
  Deep navy with a curved top, closing the page the way the flyer's
  blue band closes the poster.
----------------------------------------------------------------------*/
.home-premium .main-footer {
  position: relative;
  background:
    radial-gradient(800px 360px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
    linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  border-top: none !important;
  border-radius: var(--rhd-band) var(--rhd-band) 0 0;
  margin-top: 40px;
  padding-top: 84px !important;
}

.home-premium .footer-top h2,
.home-premium.page-wrapper .footer-top h2 {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: none !important;
  line-height: 1.35;
}

.home-premium .footer-top .white,
.home-premium .footer-top h2 .white,
.home-premium.page-wrapper .footer-top h2 .white {
  color: #ffffff !important;
  text-shadow: none !important;
}

.home-premium .footer-bottom,
.home-premium .footer-bottom .info p,
.home-premium .copyright-area,
.home-premium.page-wrapper .footer-bottom,
.home-premium.page-wrapper .footer-bottom .info p,
.home-premium.page-wrapper .copyright-area {
  color: rgba(255, 255, 255, 0.72) !important;
}

.home-premium .footer-bottom a,
.home-premium.page-wrapper .footer-bottom a {
  color: rgba(255, 255, 255, 0.86) !important;
}

.home-premium .footer-bottom a:hover,
.home-premium.page-wrapper .footer-bottom a:hover {
  color: #ffffff !important;
}

.home-premium .copyright-area a,
.home-premium .copyright-area a:hover,
.home-premium.page-wrapper .copyright-area a {
  color: #ffffff !important;
}

.home-premium .footer-bottom .h4-rotate,
.home-premium.page-wrapper .footer-bottom .h4-rotate {
  color: rgba(255, 255, 255, 0.28) !important;
  text-shadow: none !important;
}

.home-premium .footer-bottom-text:has(.to-top) {
  border-right-color: rgba(255, 255, 255, 0.22) !important;
}

.home-premium .to-top p,
.home-premium.page-wrapper .to-top p {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  letter-spacing: 0.14em;
  font-size: 12px;
}

/* Socials -> circular outline buttons that fill on hover. */
.home-premium .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff !important;
  transition: background-color 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}

.home-premium .footer-social a:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--rhd-navy) !important;
  transform: translateY(-3px);
}

.home-premium .footer-social i {
  margin-left: 0;
}

/*----------------------------------------------------------------------
  14 — FLOATING ACTIONS
----------------------------------------------------------------------*/
.home-premium .floating-cta .fcta-btn {
  box-shadow: 0 12px 28px rgba(16, 47, 96, 0.3);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.home-premium .floating-cta .fcta-btn:hover {
  transform: translateY(-4px) scale(1.05);
}

.home-premium .floating-cta .call-btn {
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%);
  color: #ffffff;
}

.home-premium .scroll-top {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(16, 47, 96, 0.3);
}

.home-premium .preloader {
  background: linear-gradient(160deg, #ffffff 0%, var(--rhd-tint-10) 100%) !important;
}

/*----------------------------------------------------------------------
  15 — RESPONSIVE
  Curves, ornaments and card padding all scale down; below the tablet
  break the bands go edge-to-edge with a smaller radius so no horizontal
  space is wasted on narrow screens.
----------------------------------------------------------------------*/
@media only screen and (max-width: 1199px) {
  .page-wrapper.home-premium {
    --rhd-band: 52px;
  }

  .home-premium .reviews-area .testimonial-item .author-text {
    font-size: 21px;
  }
}

@media only screen and (max-width: 991px) {
  .page-wrapper.home-premium {
    --rhd-band: 40px;
    --rhd-radius-lg: 22px;
  }

  .home-premium .hero-area {
    padding-bottom: 148px !important;
  }

  .home-premium .hero-area::after {
    height: 48px;
  }

  .home-premium .hero-area::before {
    width: 110px;
    height: 88px;
  }

  .home-premium .service-area,
  .home-premium .timeline-area,
  .home-premium .reviews-area {
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  .home-premium .service-area::before {
    display: none;
  }

  .home-premium .service-area .carousel-caption {
    padding: 0 24px !important;
  }

  .home-premium .reviews-area::before {
    font-size: 210px;
    top: -32px;
  }

  .home-premium .main-footer {
    padding-top: 62px !important;
  }

  /* Tips & Ideas: the cards are col-lg-4, so below 992px they stack full width
     and the bootstrap row leaves no vertical space between them. Give the
     stacked cards a gap on tablet and mobile. */
  .home-premium .blog-home .row > .item {
    margin-bottom: 30px;
  }

  .home-premium .blog-home .row > .item:last-child {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 767px) {
  .page-wrapper.home-premium {
    --rhd-band: 30px;
    --rhd-radius: 16px;
    --rhd-radius-lg: 18px;
  }

  .home-premium .hero-area::before {
    display: none;
  }

  .home-premium .hero-area {
    padding-bottom: 132px !important;
  }

  .home-premium .hero-area::after {
    height: 36px;
  }

  .home-premium .hero-content {
    padding: 26px 22px 24px !important;
  }

  .home-premium .hero-content h6,
  .home-premium .hero-area h6 {
    font-size: 17px;
  }

  .home-premium .service-area,
  .home-premium .timeline-area,
  .home-premium .reviews-area {
    margin-left: 8px;
    margin-right: 8px;
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  .home-premium .reviews-area::before {
    font-size: 150px;
    top: -22px;
  }

  .home-premium .reviews-area .testimonial-item .author-text {
    font-size: 18px;
  }

  .home-premium .reviews-area .testi-img {
    border-width: 4px;
  }

  .home-premium .blog-home .blog-item {
    padding: 24px 20px 26px;
  }

  .home-premium .blog-home .row > .item {
    margin-bottom: 24px;
  }

  .home-premium .section-title h2::after,
  .home-premium .interior-area .text-center h2::after {
    width: 56px;
    height: 3px;
    margin-top: 14px;
  }

  .home-premium .sub-title,
  .home-premium .section-title .sub-title {
    font-size: 11px;
    padding: 6px 16px;
    letter-spacing: 0.12em;
  }

  /* Tighter gap once the three pills start wrapping. */
  .home-premium .interior-area ul.nav-pills.tab-style-one {
    gap: 10px;
  }
}

/* Below 576px the theme centres the Work Process and Tips & Ideas titles.
   The ornament under them has to follow, or it hangs off to the left. */
@media only screen and (max-width: 576px) {
  .home-premium .timeline-area .section-title h2::after,
  .home-premium .blog-home .section-title h2::after {
    margin-left: auto;
    margin-right: auto;
  }

  /* The col-sm-6 title and "More Articles" button stack here-space them. */
  .home-premium .blog-home .section-heading > .section-title {
    margin-bottom: 22px;
  }
}

@media only screen and (max-width: 479px) {
  .page-wrapper.home-premium {
    --rhd-band: 22px;
  }

  .home-premium .service-area,
  .home-premium .timeline-area,
  .home-premium .reviews-area {
    margin-left: 0;
    margin-right: 0;
  }

  .home-premium .theme-btn,
  .home-premium a.theme-btn {
    padding: 13px 26px;
    font-size: 13px;
  }
}

/* Everything decorative here is either a gradient or a transform; users who
   ask for less motion keep the look and lose the movement. */
@media (prefers-reduced-motion: reduce) {
  .home-premium .theme-btn,
  .home-premium .blog-home .blog-item,
  .home-premium .service-area .right-arrow,
  .home-premium .floating-cta .fcta-btn,
  .home-premium .footer-social a {
    transition: none;
  }

  .home-premium .theme-btn:hover,
  .home-premium .blog-home .blog-item:hover,
  .home-premium .service-area .carousel-caption a:hover .right-arrow,
  .home-premium .floating-cta .fcta-btn:hover,
  .home-premium .footer-social a:hover {
    transform: none;
  }
}


.quote-icon{
    display: none;
}


.reviews-area{
    padding:120px 0;
    background:#fff;
}

.testimonial-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    /* Gap down to the cards. Was 60px, which read as a hole once the row
       above it was just a heading and two arrows. */
    margin-bottom:24px;
}

.sub-title{
    color:#c59b6d;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:2px;
}

.testimonial-heading h2{
    font-size:54px;
    line-height:1.2;
    margin-top:10px;
    color:#0d2341;
}

.testimonial-nav button{
    width:45px;
    height:45px;
    border:1px solid #d8e5f6;
    border-radius: 10px;
    background:white;
    color:#123f80;
    margin-left:10px;
    transition:.3s;
}

.testimonial-nav button:hover{
    background:#123f80;
    color: WHITE;
}

.testimonial-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.testimonial-card{
    position:relative;
    background:radial-gradient(700px 300px at 88% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 60%), linear-gradient(160deg, var(--rhd-tint-20) 0%, var(--rhd-tint-05) 100%) !important;
    padding:35px;
    border:1px solid #ececec;
    overflow:hidden;
}

.testimonial-card::before{
    content:"";
    position:absolute;
    right:-120px;
    top:-120px;
    width:350px;
    height:350px;
    border-radius:50%;
  
}

.quote{
    position:absolute;
    right:35px;
    top:30px;
    font-size:60px;
    color:#e8e2dc;
}

/* The 60px quote mark is an ornament sitting behind the card's top-right
   corner. On a phone the card is narrow enough that it lands on top of
   the reviewer's name instead of behind clear space, so it comes off.
   Scoped to the testimonial card, and to phones - it still reads as
   intended from 768px up. */
@media only screen and (max-width: 767px) {
    .testimonial-card .quote{
        display:none;
    }
}

.client{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:25px;
}

.client img{
    width:90px;
    height:90px;
    object-fit:cover;
}

.client h4{
    margin:0;
    color:#0d2341;
    /* Was inheriting the global h4 scale - 34-38px, which is display type
       for a section heading, not a name inside a card. The theme's h4 also
       ships -2px tracking for that size; at 20px it closes the word gaps,
       so it is reset here. */
    font-size:20px;
    line-height:1.3;
    letter-spacing:normal;
}

.client span{
    color:#777;
}

.stars{
    color:#c59b6d;
    margin-top:10px;
}

.testimonial-card p{
    margin-top:20px;
    line-height:1.8;
    color:#555;
}

@media(max-width:991px){

.testimonial-top{
    flex-direction:column;
    align-items:flex-start;
    gap:25px;
}

.testimonial-row{
    grid-template-columns:1fr;
}

.testimonial-heading h2{
    font-size:38px;
}

}


/* Left on phones. The heading carries .text-center, but everything under
   it in this section already runs from the left edge - the rule beneath
   it, the two arrows, then the card - so a centred heading was the only
   thing in the column not lining up with the rest. It stays centred from
   768px up, where the block is wide enough for that to read. */
@media only screen and (max-width: 767px) {
    .home-premium .reviews-area .testimonial-top .text-center {
        text-align: left !important;
    }
}

.testimonial-slider {
    margin: 0 -15px;
}

.testimonial-slider .slick-slide {
    padding: 0 15px;
}

.testimonial-card {
    margin: 10px 0;
}

/*----------------------------------------------------------------------
  RESPONSIVE — RADIAL WASH SCALING
  Every section background here is a fixed-pixel radial highlight sitting
  on a flat colour or linear tint. At 1440px a 900px radial is a soft
  corner glow covering ~60% of the band; at 390px that same 900px radial
  covers the whole section and reads as a full gradient. Nothing about
  the desktop rules changes — these blocks just shrink the radial in
  proportion to the viewport so tablet and mobile show the same subtle
  wash the desktop does.
----------------------------------------------------------------------*/
@media only screen and (max-width: 991px) {
  .home-premium .service-area {
    background-image:
      radial-gradient(465px 196px at 12% 0%, rgba(255, 255, 255, 0.95) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
  }

  .home-premium .timeline-area {
    background-image:
      radial-gradient(430px 184px at 88% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 60%),
      linear-gradient(160deg, var(--rhd-tint-20) 0%, var(--rhd-tint-05) 100%) !important;
  }

  .home-premium .interior-area {
    background-image:
      radial-gradient(550px 245px at 50% 0%, rgba(27, 86, 173, 0.05) 0%, transparent 70%) !important;
  }

  .home-premium .blog-area {
    background-image:
      radial-gradient(550px 245px at 50% 100%, rgba(27, 86, 173, 0.05) 0%, transparent 70%) !important;
  }

  .home-premium .main-footer {
    background-image:
      radial-gradient(490px 220px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  }

  .testimonial-card {
    background-image:
      radial-gradient(430px 184px at 88% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 60%),
      linear-gradient(160deg, var(--rhd-tint-20) 0%, var(--rhd-tint-05) 100%) !important;
  }
}

@media only screen and (max-width: 767px) {
  .home-premium .service-area {
    background-image:
      radial-gradient(250px 107px at 12% 0%, rgba(255, 255, 255, 0.95) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
  }

  .home-premium .timeline-area {
    background-image:
      radial-gradient(230px 100px at 88% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 60%),
      linear-gradient(160deg, var(--rhd-tint-20) 0%, var(--rhd-tint-05) 100%) !important;
  }

  .home-premium .interior-area {
    background-image:
      radial-gradient(300px 133px at 50% 0%, rgba(27, 86, 173, 0.05) 0%, transparent 70%) !important;
  }

  .home-premium .blog-area {
    background-image:
      radial-gradient(300px 133px at 50% 100%, rgba(27, 86, 173, 0.05) 0%, transparent 70%) !important;
  }

  .home-premium .main-footer {
    background-image:
      radial-gradient(265px 120px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  }

  .testimonial-card {
    background-image:
      radial-gradient(230px 100px at 88% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 60%),
      linear-gradient(160deg, var(--rhd-tint-20) 0%, var(--rhd-tint-05) 100%) !important;
  }
}


/*----------------------------------------------------------------------
  BUTTON HOVER
  Every filled button inverts on hover: white panel, navy label. Repeated
  per theme file because the resting-state rules carry !important and
  these sheets load after style.css.
----------------------------------------------------------------------*/
.home-premium .theme-btn:hover,
.home-premium a.theme-btn:hover,
.home-premium .section-heading .button a:hover,
.home-premium .primary-readmore:hover,
.home-premium .btn-white-bg:hover,
.home-premium button.btn-white-bg:hover,
.home-premium .cta-area .btn-white-bg:hover {
  background: #ffffff !important;
  border-color: var(--rhd-navy) !important;
  color: var(--rhd-navy) !important;
}








/*----------------------------------------------------------------------
  SUCCESS STORY — ZEBRONICS
  The case study from the deck's "Success Stories - Zebronics" slide.

  This band is a curved navy feature, not a flat white section, and that
  is the point of the design rather than a decoration.

  The home page runs on an alternating rhythm: a white section, then a
  rounded tinted band with side margins (see .timeline-area and the
  footer, both on var(--rhd-band)). Earlier passes at this section sat
  flat and white between the white gallery above and the tinted band
  below, so it had no weight and read as unfinished no matter how the
  contents were arranged. Giving it the page's own band shape in deep
  navy fixes that: it contrasts with the white above and the pale tint
  below, and a flagship case study is exactly the thing that earns the
  page's only dark band.

  Inside, the arrangement is the split panel — photograph one side, the
  four points in a quadrant split by a hairline cross the other. Still
  not cards: nothing has a border, fill, radius or shadow of its own
  except the photograph, which takes the same soft shadow the gallery and
  work-process images use.

  Height is set by the write-up alone. The photograph is stretched to
  whatever height that comes to (grid `align-items: stretch` plus an
  absolutely positioned img), so it never adds height of its own and
  there is no dead space beside it. Trim the copy and the whole band
  shortens with it.

  Quadrant rows are auto, not `1fr 1fr`. Equal fr rows would both take the
  height of the taller one, and row two (two three-item lists) is a good
  deal taller than row one (two short paragraphs), which left dead space
  under the first row. The horizontal rule is therefore drawn on the
  second row's cells rather than pinned at 50%, so it lands on the seam
  whatever the rows measure.
----------------------------------------------------------------------*/
.home-premium .zeb-area {
  position: relative;
  overflow: hidden;
  margin: 0 0px;
  border-radius: 0;
  background:
    radial-gradient(720px 340px at 88% 6%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
    linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%);
}

.home-premium .zeb-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0 64px;
  align-items: stretch;
}

/*  The photograph  */
/* Square corners, as everywhere else in this skin — the rounding on this
   page belongs to the bands, not to the pictures inside them. The image
   is taken out of flow so the column can stretch to the write-up's
   height without the picture ever pushing it taller. */
.home-premium .zeb-media {
  position: relative;
  min-height: 380px;
  margin: 0;
  overflow: hidden;
  box-shadow: var(--rhd-shadow-lg);
}

.home-premium .zeb-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 0%;
  display: block;
}

/*  The write-up  */
/* The eyebrow badge is a navy gradient everywhere else, which disappears
   on a navy band. Same shape and size, inverted. */
.home-premium .zeb-body .sub-title {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
  color: #ffffff;
}

.home-premium .zeb-body h2 {
  margin: 0 0 10px;
  font-size: clamp(32px, 3.1vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.home-premium .zeb-where {
  display: block;
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/*  The quadrant  */
.home-premium .zeb-quad {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 32px;
}

/* The vertical rule spans the whole quadrant. The horizontal one is
   drawn on the second row's cells rather than as a pseudo-element at
   50%, because with auto rows the seam is no longer at the half-way
   mark — this way it lands on the join whatever the rows measure. */
.home-premium .zeb-quad::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

/* Inner gutters only, so the outer edges stay open against the band. */
.home-premium .zeb-cell {
  padding: 20px 32px 0;
}

.home-premium .zeb-cell:nth-child(odd) {
  padding-left: 0;
}

.home-premium .zeb-cell:nth-child(even) {
  padding-right: 0;
}

/* Just enough clearance to keep the rule off the paragraph above it. */
.home-premium .zeb-cell:nth-child(1),
.home-premium .zeb-cell:nth-child(2) {
  padding-top: 0;
  padding-bottom: 30px;
}

.home-premium .zeb-cell:nth-child(3),
.home-premium .zeb-cell:nth-child(4) {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* The four sub-headings are h5s, so they take the theme's own h5 scale
   (28 / 24 / 22px) exactly like every other sub-heading on the site.
   Only the case and the colour are set here. */
.home-premium .zeb-key {
  margin: 0 0 12px;
  text-transform: uppercase;
  color: #ffffff;
}

.home-premium .zeb-val {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.home-premium .zeb-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dashes rather than bullets — bullets inside a quadrant start to pull
   each cell back towards looking like a tile. */
.home-premium .zeb-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.home-premium .zeb-list li + li {
  margin-top: 7px;
}

.home-premium .zeb-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 11px;
  height: 1px;
  background: var(--rhd-blue-soft);
}

.home-premium .zeb-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  transition: gap 0.4s ease, border-color 0.4s ease;
}

.home-premium .zeb-cta:hover {
  gap: 14px;
  border-bottom-color: #ffffff;
  color: #ffffff;
}

/*  Responsive  */
@media only screen and (max-width: 1399px) {
  .home-premium .zeb-grid {
    gap: 0 48px;
  }

  /* Horizontal only — the vertical rhythm is set by the base rules, so
     narrowing the gutters here must not reintroduce a bottom gap. */
  .home-premium .zeb-cell {
    padding-left: 26px;
    padding-right: 26px;
  }

  .home-premium .zeb-cell:nth-child(odd) {
    padding-left: 0;
  }

  .home-premium .zeb-cell:nth-child(even) {
    padding-right: 0;
  }
}

@media only screen and (max-width: 1199px) {
  .home-premium .zeb-grid {
    gap: 0 36px;
  }

  .home-premium .zeb-media {
    min-height: 340px;
  }

  .home-premium .zeb-quad {
    margin-top: 26px;
  }

  .home-premium .zeb-val,
  .home-premium .zeb-list li {
    font-size: 14px;
  }
}

/* Tablet keeps the split. It used to drop at 991px, which put the
   photograph in a band across the top and ran the write-up underneath -
   but a 720px container still has room for two columns, and stacking
   there made the band far taller than it needed to be. The gutter and
   the cell padding come in so the quadrant's two columns still hold a
   readable measure at that width; everything else is inherited from the
   desktop rules, so the section reads the same way, just narrower. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .home-premium .zeb-grid {
    gap: 0 28px;
  }

  .home-premium .zeb-cell {
    padding-left: 18px;
    padding-right: 18px;
  }

  .home-premium .zeb-cell:nth-child(odd) {
    padding-left: 0;
  }

  .home-premium .zeb-cell:nth-child(even) {
    padding-right: 0;
  }

  /* Stretched to the write-up's height by the base rules, so it only
     needs a floor here - the fixed height that the stacked band used
     would stop it filling its column. */
  .home-premium .zeb-media {
    min-height: 300px;
    height: auto;
  }
}

/* Below 768px the split drops: the photograph becomes a band across the
   top and the write-up runs full width. The quadrant survives, because
   four short points still read well two-up. */
@media only screen and (max-width: 767px) {
  .home-premium .zeb-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .home-premium .zeb-media {
    min-height: 0;
  }
  .home-premium .zeb-media img {
    position: absolute;
    inset: 0;
    width: 100%;

    object-fit: cover;
    object-position: center ;
    display: block;
}
}

/* One column: the vertical rule has nothing to divide, so the seams
   between all four points are drawn on the cells instead. */
@media only screen and (max-width: 767px) {
  .home-premium .zeb-grid {
    gap: 28px;
  }

  .home-premium .zeb-media {
    height: 210px;
  }
  .home-premium .zeb-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    
    object-fit: cover;
    object-position: center;
    display: block;
}

  .home-premium .zeb-quad {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
  }

  .home-premium .zeb-quad::before {
    display: none;
  }

  .home-premium .zeb-cell,
  .home-premium .zeb-cell:nth-child(odd),
  .home-premium .zeb-cell:nth-child(even),
  .home-premium .zeb-cell:nth-child(1),
  .home-premium .zeb-cell:nth-child(2),
  .home-premium .zeb-cell:nth-child(3),
  .home-premium .zeb-cell:nth-child(4) {
    padding: 20px 0;
  }

  .home-premium .zeb-cell:first-child {
    padding-top: 0;
  }

  .home-premium .zeb-cell:last-child {
    padding-bottom: 0;
  }

  .home-premium .zeb-cell + .zeb-cell {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .home-premium .zeb-key {
    margin-bottom: 10px;
  }

  .home-premium .zeb-where {
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .home-premium .zeb-cta {
    margin-top: 26px;
  }
}



/*----------------------------------------------------------------------
  FIRST 5 MEMBERS — GIVEAWAY
  The offer from the deck's "First 5 Members" slide.

  A split: the offer stands on the left — what it is, what you win, and
  the one button that enters you — while the right holds the three moves
  as a ruled list. Reading it that way separates the pitch from the
  instructions, so neither has to carry both jobs.

  The content forks at the first move: you do the Instagram route OR the
  Google review route, then both converge on sending a screenshot. That
  fork is shown as two lettered routes hung off a short vertical rule
  under step one, which marks them as branches of that step rather than
  as steps of their own — the numbering stays 01, 02, 03 and does not
  pretend there are four.

  Not cards: no route or step has a border, fill, radius or shadow. The
  only rules are the seams between the three steps and the short vertical
  one holding the two routes.
----------------------------------------------------------------------*/
.home-premium .win-area {
  position: relative;
  background:
  white;
}

.home-premium .win-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0 80px;
  align-items: start;
}

/*  Left — the offer  */
.home-premium .win-offer h2 {
  margin: 0 0 16px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.home-premium .win-lead {
  margin: 0 0 14px;
  max-width: 40ch;
}

/* The prize, pulled out of the sentence so the left column has one thing
   to look at rather than a paragraph. */
.home-premium .win-prize {
  display: block;
  margin-bottom: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--rhd-line);
  font-family: var(--heading-font);
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.25;
  color: var(--rhd-navy);
}

.home-premium .win-note {
  margin: 18px 0 0;
  max-width: 40ch;
  font-size: 12px;
  line-height: 1.7;
  color: var(--rhd-ink-soft);
}

/*  Right — the three moves  */
.home-premium .win-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-premium .win-step {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 0 22px;
  padding: 28px 0;
}

.home-premium .win-step:first-child {
  padding-top: 0;
}

.home-premium .win-step:last-child {
  padding-bottom: 0;
}

.home-premium .win-step + .win-step {
  border-top: 1px solid var(--rhd-line);
}

/* Plain numeral, no chip or node — the rules already carry the
   structure, and a circle on every row would crowd it. Set large enough
   to anchor the row on its own; the gutter column above is sized to fit
   it, so the two move together. */
.home-premium .win-num {
  font-family: var(--heading-font);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--rhd-navy);
  opacity: 0.4;
}

/* h5, so the step headings take the theme's own sub-heading scale
   (28 / 24 / 22px) like every other sub-heading on the site. Black, as
   the service names are — the theme's default h5 colour is navy, so it
   has to be set. */
.home-premium .win-title {
  margin: 0 0 10px;
  text-transform: uppercase;
  color: #000000;
}

.home-premium .win-text {
  margin: 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--rhd-ink-soft);
}

/*  The fork  */
/* Hung off a short vertical rule so the two routes read as branches of
   step one rather than as steps in their own right. */
/* The two routes run side by side, so they read as alternatives at a
   glance rather than as one after the other. The grid gap is zero and
   the gutter is made of the routes' own padding instead, which leaves
   the divider sitting centred between them. */
.home-premium .win-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
  padding-left: 22px;
  border-left: 1px solid var(--rhd-line);
}

.home-premium .win-route:first-child {
  padding-right: 34px;
}

.home-premium .win-route + .win-route {
  padding-left: 34px;
  border-left: 1px solid var(--rhd-line);
}

.home-premium .win-route-key {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rhd-navy);
}

.home-premium .win-route-key i {
  font-size: 15px;
}

/* The A / B markers. Letters, not numbers, so they cannot be mistaken
   for a fourth and fifth step. */
.home-premium .win-letter {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--rhd-tint-20);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--rhd-navy);
}

.home-premium .win-route p {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--rhd-ink-soft);
}

.home-premium .win-link {
  color: var(--rhd-navy);
  font-weight: 600;
  border-bottom: 1px solid var(--rhd-line);
  transition: border-color 0.4s ease;
}

.home-premium .win-link:hover {
  border-bottom-color: var(--rhd-navy);
  color: var(--rhd-navy);
}

/*  Responsive  */
@media only screen and (max-width: 1399px) {
  .home-premium .win-split {
    gap: 0 56px;
  }
}

@media only screen and (max-width: 1199px) {
  .home-premium .win-split {
    gap: 0 40px;
  }

  .home-premium .win-step {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0 18px;
    padding: 24px 0;
  }

  .home-premium .win-num {
    font-size: 32px;
  }

  .home-premium .win-text,
  .home-premium .win-route p {
    font-size: 14px;
  }
}

/* One column below 992px: the offer sits above the steps. */
@media only screen and (max-width: 991px) {
  .home-premium .win-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .home-premium .win-lead,
  .home-premium .win-note {
    max-width: none;
  }
}

@media only screen and (max-width: 767px) {
  .home-premium .win-split {
    gap: 34px;
  }

  .home-premium .win-prize {
    margin-bottom: 24px;
    padding-top: 18px;
  }

  .home-premium .win-step {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 14px;
    padding: 22px 0;
  }

  .home-premium .win-num {
    font-size: 27px;
  }

  .home-premium .win-title {
    margin-bottom: 8px;
  }

  /* Two routes side by side will not hold a readable measure on a phone,
     so they stack and the divider between them turns horizontal. */
  .home-premium .win-routes {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 14px;
    padding-left: 16px;
  }

  .home-premium .win-route:first-child {
    padding-right: 0;
  }

  .home-premium .win-route + .win-route {
    margin-top: 18px;
    padding-top: 18px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rhd-line);
  }
}









/*----------------------------------------------------------------------
  WHY CHOOSE US
  The four reasons from the deck's "Why Choose Royal Home Decors?" slide.

  Not cards: the four points sit in a quadrant divided by one continuous
  cross of hairlines. The distinction is the whole point of the layout —
  no point has a border of its own, a fill, a corner radius or a shadow;
  there are exactly two rules on the page and they run edge to edge
  through all four. Each point's outer edges are flush with the container
  for the same reason, so nothing reads as a boxed-off tile.

  The cross is placed at 50%, which is only true because the grid rows
  are `1fr 1fr` — equal fr rows in an auto-height grid all take the height
  of the tallest, so the horizontal rule always lands on the seam. Change
  the row sizing and the rule stops lining up.

  The section head is asymmetric — headline left, lead right, aligned on
  their bottoms — because every other band on this page is centred, and
  four short reasons under a centred head looked like a feature grid.

  Underlined titles are carried over from the slide, where each reason is
  underlined; the rule darkens on hover rather than moving anything.
----------------------------------------------------------------------*/
.home-premium .why-area {
  position: relative;
  background: #ffffff;
}

.home-premium .why-head {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 0 72px;
  align-items: end;
  margin-bottom: 64px;
}

.home-premium .why-head h2 {
  margin: 0;
  font-size: clamp(32px, 3.3vw, 50px);
  line-height: 1.13;
  letter-spacing: -0.01em;
}

.home-premium .why-lead {
  margin: 0;
  max-width: 48ch;
}

/*  The quadrant  */
.home-premium .why-matrix {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
}

/* The two rules. Full bleed across the block, not per-point borders. */
.home-premium .why-matrix::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--rhd-line);
}

.home-premium .why-matrix::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--rhd-line);
}

/* Inner gutters only — the outer edges stay flush with the container so
   the four points never close into boxes. */
.home-premium .why-point {
  padding: 48px 64px;
}

.home-premium .why-point:nth-child(odd) {
  padding-left: 0;
}

.home-premium .why-point:nth-child(even) {
  padding-right: 0;
}

.home-premium .why-point:nth-child(1),
.home-premium .why-point:nth-child(2) {
  padding-top: 0;
}

.home-premium .why-point:nth-child(3),
.home-premium .why-point:nth-child(4) {
  padding-bottom: 0;
}

/* Index and its rule, set as one editorial eyebrow. The rule grows on
   hover, which is the only thing in the block that moves. */
.home-premium .why-num {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--rhd-navy);
}

.home-premium .why-num::after {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--rhd-navy);
  opacity: 0.4;
  transition: width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.45s ease;
}

.home-premium .why-point:hover .why-num::after {
  width: 76px;
  opacity: 1;
}

/* Uppercase h5 with the slide's underline. inline-block keeps the rule
   the width of the block rather than the column. */
.home-premium .why-title {
  display: inline-block;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--rhd-tint-20);
  text-transform: uppercase;
  color: black;
  transition: border-color 0.45s ease;
}

.home-premium .why-point:hover .why-title {
  border-bottom-color: var(--rhd-navy);
}

.home-premium .why-text {
  max-width: 40ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

/*  Responsive  */
@media only screen and (max-width: 1199px) {
  .home-premium .why-head {
    gap: 0 44px;
    margin-bottom: 52px;
  }

  .home-premium .why-point {
    padding: 40px 44px;
  }
}

/* One column below 992px. The cross goes with the two columns, and the
   seams between points are drawn as rules on the points themselves. */
@media only screen and (max-width: 991px) {
  .home-premium .why-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 44px;
  }

  .home-premium .why-lead {
    max-width: none;
  }

  .home-premium .why-matrix {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .home-premium .why-matrix::before,
  .home-premium .why-matrix::after {
    display: none;
  }

  .home-premium .why-point,
  .home-premium .why-point:nth-child(odd),
  .home-premium .why-point:nth-child(even),
  .home-premium .why-point:nth-child(1),
  .home-premium .why-point:nth-child(2),
  .home-premium .why-point:nth-child(3),
  .home-premium .why-point:nth-child(4) {
    padding: 38px 0;
  }

  .home-premium .why-point:first-child {
    padding-top: 0;
  }

  .home-premium .why-point:last-child {
    padding-bottom: 0;
  }

  .home-premium .why-point + .why-point {
    border-top: 1px solid var(--rhd-line);
  }

  .home-premium .why-text {
    max-width: 56ch;
  }
}

@media only screen and (max-width: 767px) {
  .home-premium .why-head {
    margin-bottom: 34px;
  }

  .home-premium .why-point,
  .home-premium .why-point:nth-child(odd),
  .home-premium .why-point:nth-child(even),
  .home-premium .why-point:nth-child(1),
  .home-premium .why-point:nth-child(2),
  .home-premium .why-point:nth-child(3),
  .home-premium .why-point:nth-child(4) {
    padding: 30px 0;
  }

  .home-premium .why-point:first-child {
    padding-top: 0;
  }

  .home-premium .why-point:last-child {
    padding-bottom: 0;
  }

  .home-premium .why-num {
    gap: 12px;
    margin-bottom: 16px;
    font-size: 11px;
  }

  .home-premium .why-num::after {
    width: 30px;
  }

  .home-premium .why-title {
    margin-bottom: 16px;
    padding-bottom: 10px;
  }

  .home-premium .why-text {
    font-size: 14px;
  }
}





/*----------------------------------------------------------------------
  RECENT SUCCESS STORY
  The six jobs from the deck's "Recent Success Story" slide, shown one at
  a time on a slick carousel.

  The point of the carousel here is height: six projects cost one slide
  of it, and adding a seventh costs nothing. The earlier passes at this
  section laid all six out at once and the block kept growing.

  Each slide is a split — the index and the count on the left, the
  project on the right — except the actors' slide, which drops its three
  photographs into the right-hand side instead of a line of detail. Same
  frame, different contents, so the carousel does not jump in height when
  it reaches that one: .work-stage carries a min-height that the photo
  slide sets and the text slides sit inside.

  Not cards: the slide has no border, fill, radius or shadow. What reads
  as structure is one vertical hairline between the two halves and the
  rule under the controls.

  THE PHOTOGRAPHS
  Candid phone shots in mixed aspect ratios, hung as a justified row: a
  common height, natural widths, no crop. These are pictures of
  identifiable people and a fixed frame would have cut someone out of the
  two-person shot.

  Init is at the foot of index.html — fade, arrows and dots on, autoplay
  off, because a project list is read at the reader's pace.
----------------------------------------------------------------------*/
.home-premium .work-area {
  position: relative;
  background: #ffffff;
}

/* Heading left, arrows top right, sharing a row above the track. The two
   are aligned on their bottoms so the arrows sit on the paragraph's last
   line rather than floating level with the h2. */
.home-premium .work-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 40px;
  align-items: end;
  margin-bottom: 30px;
}

.home-premium .work-head {
  margin-bottom: 0;
  text-align: left;
}

.home-premium .work-lead {
  max-width: 62ch;
  margin: 16px 0 0;
}

/* Until slick initialises, every slide is in the flow. Hiding all but
   the first stops the six stacking on top of each other on a slow load. */
.home-premium .work-slider:not(.slick-initialized) .work-slide + .work-slide {
  display: none;
}

.home-premium .work-slide {
  outline: none;
}

/* The frame both kinds of slide sit in. min-height is what keeps the
   carousel from changing height between a text slide and the photo one. */
.home-premium .work-stage {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) auto;
  gap: 0 56px;
  align-items: center;
  min-height: 264px;
  padding: 8px 0;
}

/*  Left — where the slide sits in the set  */
.home-premium .work-count {
  font-family: var(--heading-font);
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rhd-tint-20);
  -webkit-text-stroke: 1.5px var(--rhd-blue-soft);
  -webkit-text-fill-color: transparent;
}

.home-premium .work-of {
  display: block;
  margin-top: 12px;
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rhd-ink-soft);
}

/*  Right — the project  */
.home-premium .work-body {
  padding-left: 56px;
  border-left: 1px solid var(--rhd-line);
}

.home-premium .work-name {
  margin: 0 0 12px;
  text-transform: uppercase;
  color: var(--rhd-navy);
}

.home-premium .work-meta {
  display: block;
  max-width: 46ch;
  font-family: var(--body-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rhd-ink-soft);
}

/* One line of description under the detail. Body face at body size, so it
   reads as a sentence rather than as a third label. */
.home-premium .work-note {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--rhd-ink-soft);
}

/*  The photo slide  */
/* The pictures are the stage's third column, not something stacked under
   the project name — so they sit against the right edge of the slide and
   the text keeps the middle. A slide with no pictures simply has no third
   column, and `auto` collapses it to nothing. */
.home-premium .work-shots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Same square tile on every slide, so the right-hand column is the same
   shape whichever project is showing. Cropped rather than fitted, for the
   same reason as the gallery below: a common size and an even gutter can
   only both hold if the pictures share a shape. */
.home-premium .work-shots img {
  width: 176px;
  aspect-ratio: 1;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center 32%;
  box-shadow: 0 14px 34px rgba(16, 47, 96, 0.14);
}

/*  Controls  */
/* The arrows are real buttons in the markup, so slick never builds
   controls of its own. No dots: with six slides they were a second
   counter, and the outlined figure on each slide already says where you
   are in the set.  */
.home-premium .work-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
}

/* Same shape and states as .carousel-buttons button elsewhere on the site:
   a 46px soft rounded square, white, hairline border, navy glyph, filling
   to the navy-to-blue gradient on hover. */
.home-premium .work-arrow {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rhd-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(16, 47, 96, 0.07);
  color: var(--rhd-navy);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.4s ease, border-color 0.4s ease,
              box-shadow 0.4s ease, color 0.4s ease;
}

.home-premium .work-arrow:hover {
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%);
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(18, 63, 128, 0.28);
  color: #ffffff;
}

.home-premium .work-arrow:focus-visible {
  outline: 2px solid var(--rhd-blue);
  outline-offset: 3px;
}


/*  Responsive  */
@media only screen and (max-width: 1199px) {
  .home-premium .work-stage {
    grid-template-columns: 195px minmax(0, 1fr) auto;
    gap: 0 40px;
    min-height: 236px;
  }

  .home-premium .work-body {
    padding-left: 40px;
  }

  .home-premium .work-count {
    font-size: 72px;
  }

  .home-premium .work-shots img {
    width: 142px;
  }
}

/* The count moves above the project below 992px — a 160px column beside
   it costs more width than the type can spare. */
@media only screen and (max-width: 991px) {
  .home-premium .work-top {
    margin-bottom: 24px;
  }

  .home-premium .work-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-height: 300px;
    align-items: start;
  }

  /* One column, so the pictures fall under the project rather than
     beside it, and line up with the type on the left. */
  .home-premium .work-shots {
    justify-content: flex-start;
  }

  .home-premium .work-body {
    padding-left: 0;
    border-left: 0;
  }

  .home-premium .work-count {
    font-size: 60px;
  }

  .home-premium .work-of {
    display: inline;
    margin: 0 0 0 12px;
  }
}

@media only screen and (max-width: 767px) {
  .home-premium .work-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }

  .home-premium .work-stage {
    min-height: 330px;
  }

  .home-premium .work-count {
    font-size: 50px;
  }

  .home-premium .work-meta {
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .home-premium .work-shots {
    gap: 10px;
  }

  .home-premium .work-shots img {
    width: calc(33.333% - 7px);
  }

  .home-premium .work-nav {
    padding-bottom: 0;
  }

  .home-premium .work-arrow {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
}


/*----------------------------------------------------------------------
  INTERIOR GALLERY ON SMALL SCREENS
  Below 992px the theme rebuilds this gallery into a different design:
  the caption drops out of the picture and becomes a full-width block
  underneath it, the photograph is re-cropped to 4/3 and capped at
  300px, and the prev/next arrows are hidden. See "Interior Gallery -
  layout fixes" in style.css for why that block exists.

  The client asked for the desktop design at every width, so the three
  differences are put back here:

      the caption is an overlay card again, floating over the picture
      the picture is square again, under the same height cap as desktop
      the arrows come back, and the filter pills sit left of them

  Not put back: the three-tile slide. Each .carousel-item holds one
  tile, and at 390px the desktop 25/50/25 split would leave ~95px
  slivers either side of a ~200px middle tile with a text card in it.
  One picture per slide, carrying the desktop card, is the same design
  at a workable size.

  The card's fill and radius are not restated - the rule further up
  this file already paints it at every width.
----------------------------------------------------------------------*/
@media only screen and (max-width: 991px) {

  /* Overlay card again. The three selectors mirror the ones in
     style.css that made it static - same shape, so these win by
     loading later. */
  .home-premium .interior-area .carousel-caption,
  .home-premium .interior-area .carousel-item .interior-act:first-child .carousel-caption,
  .home-premium .interior-area .carousel-item .interior-act:last-child .carousel-caption {
    position: absolute;
    right: 16px;
    bottom: 8%;
    left: auto;
    width: -webkit-fit-content;
    width: fit-content;
    /* 350px is the desktop card. On a phone it takes what is left after
       a 16px margin either side instead of overflowing the picture. */
    max-width: min(350px, calc(100% - 32px));
    margin: 0;
    padding: 22px 20px 24px;
    text-align: left;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  /* Square picture under the same cap as desktop, rather than the 4/3
     crop the small-screen block applies. */
  .home-premium .interior-area .carousel-item img {
    aspect-ratio: 1 / 1;
    max-height: 600px;
    max-height: min(600px, calc(100vh - 30px));
    object-fit: cover;
  }

  /* Arrows back, and the pills left of them as on desktop - centred
     pills would collide with the arrows, which are positioned against
     the right edge of this row. */
  .home-premium .interior-area .nav-item:has(.nav-link.active) .carousel-buttons {
    display: inline;
  }

  .home-premium .interior-area .nav-pills {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
  }
}
@media only screen and (max-width: 1024px){
 .home-premium .interior-area .carousel-item img {
    aspect-ratio: 1 / 1;
    max-height: 600px;
    max-height: min(600px, calc(100vh - 67px)) !important;
    object-fit: cover;
  }
}

/* Below 768px the pills row has to leave room for the arrows on one
   line. Three pills at the desktop size plus two 48px arrows do not fit
   a 390px screen, so the pills are set a little tighter here rather
   than wrapping to a second line and leaving the arrows floating
   beside a half-empty row. */
@media only screen and (max-width: 767px) {
  .home-premium .interior-area ul.nav-pills.tab-style-one {
    max-width: calc(100% - 112px);
    flex-wrap: nowrap;
  }

  .home-premium .interior-area .tab-style-one .nav-link {
    padding: 9px 15px;
    font-size: 11px !important;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .home-premium .interior-area .carousel-caption {
    padding: 18px 16px 20px;
  }
}


/*----------------------------------------------------------------------
  FREE CONSULTATION CTA - WHATSAPP BUTTON
  The section routes enquiries through WhatsApp rather than the email
  form (which stays in the markup, hidden). One pill button in place of
  the input + submit row, sized to match the section's other buttons.
----------------------------------------------------------------------*/
.home-premium .cta-area .cta-whatsapp {
  display: flex;
  justify-content: center;
}

.home-premium .cta-area .cta-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.4px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.home-premium .cta-area .cta-wa-btn .fa-whatsapp {
  font-size: 24px;
  line-height: 1;
}

.home-premium .cta-area .cta-wa-btn:hover {
  transform: translateY(-2px);
}

@media only screen and (max-width: 767px) {
  .home-premium .cta-area .cta-whatsapp.mt-40 {
    margin-top: 24px !important;
  }
}


/*----------------------------------------------------------------------
  OUR UNITS
  The gallery row carries mb-30 on every column, so the section's own
  60px bottom padding stacked with it to ~90px of dead space above the
  footer. Padding drops to 24px, leaving the column margin to do the
  spacing.
----------------------------------------------------------------------*/
.home-premium .units-area {
  padding-bottom: 0px;
}

@media only screen and (max-width: 991px) {
  .home-premium .units-area {
    padding-bottom: 0px;
  }
}


/*----------------------------------------------------------------------
  TESTIMONIALS - EQUAL CARD HEIGHT
  The six reviews run from one line to a full paragraph, so side by side
  the cards ended at different depths. Slick lays its slides out as
  floats, which size to their content and cannot stretch - so the track
  becomes a flex row and every wrapper below it passes the full height
  down to the card. .slick-slide needs height:auto to drop the fixed
  height slick writes onto it.
----------------------------------------------------------------------*/
.testimonial-slider .slick-track {
  display: flex !important;
  align-items: stretch;
}

.testimonial-slider .slick-slide {
  height: auto !important;
  display: flex !important;
}

/* The unclassed wrapper each slide carries in the markup. */
.testimonial-slider .slick-slide > div {
  display: flex;
  width: 100%;
}

.testimonial-slider .testimonial-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Pushes the quote to fill whatever height is left, so the card's inner
   spacing stays even instead of pooling at the bottom of the longer ones. */
.testimonial-slider .testimonial-card p {
  flex: 1 1 auto;
  margin-bottom: 0;
}


/*----------------------------------------------------------------------
  WHO WE ARE / MISSION / VISION - EQUAL OPEN-PANEL WIDTH
  The theme gives every .nav-link 15px of padding either side, then zeroes
  padding-left on the first item and padding-right on the last so the row
  sits flush with the container. That leaves the MIDDLE item - OUR MISSION -
  as the only one paying for padding twice: 30px against the other two
  panels' 15px, so its open panel came out 15px narrower than OUR VISION's
  and its copy wrapped a line earlier.

  Dropping the right padding while it is open mirrors what the last item
  already does, so all three open to the same width. Written as
  :not(:first-child):not(:last-child) rather than nth-child(2) so it still
  holds if a panel is ever added or reordered.

  The left padding goes the same way. WHO WE ARE, being first, never pays
  for one, so MISSION and VISION were still opening 15px narrower than it
  and their copy wrapped earlier. Only the OPEN panel loses it, so the
  closed strips keep their spacing in the row.
----------------------------------------------------------------------*/
.home-premium .about-area .nav-tabs li:not(:first-child):not(:last-child) .nav-link.active {
  padding-right: 0 !important;
}

.home-premium .about-area .nav-tabs li:not(:first-child) .nav-link.active {
  padding-left: 0 !important;
}


/*----------------------------------------------------------------------
  OUR UNITS - CENTRED LAST TILE ON TABLET
  Between 768px and 991px the columns are col-md-6, so the three units
  wrap 2 + 1 and the third one was left hanging against the left edge of
  the row. Auto side margins on that odd tile centre it under the pair
  above. Only the last child is touched, so a fourth unit would fill the
  second row and the rule stops applying to a complete row.
----------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .home-premium .units-area .row > [class*="col-"]:last-child:nth-child(odd) {
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .home-premium .about-area .nav-tabs li:not(:first-child) .nav-link.active {
        padding-left: 5px !important;
    }
}