/* ==========================================================================
   Yadgar Travel - modern theme layer
   Loaded AFTER style.css so it wins on every shared selector.
   Palette is sampled from the brand logo: navy #1C3262 + gold #D5AE36.
   ========================================================================== */

:root {
  --y-navy:        #1C3262;
  --y-navy-deep:   #142850;
  --y-navy-soft:   #2A477F;
  --y-gold:        #D5AE36;
  --y-gold-light:  #E8C860;
  --y-gold-dark:   #B28B36;
  --y-cream:       #FDF9EE;
  --y-ink:         #1A1E27;
  --y-muted:       #6B7280;
  --y-line:        rgba(28, 50, 98, .10);

  --y-shadow-sm: 0 2px 10px rgba(20, 40, 80, .07);
  --y-shadow:    0 10px 30px rgba(20, 40, 80, .10);
  --y-shadow-lg: 0 22px 50px rgba(20, 40, 80, .18);

  --y-radius:    18px;
  --y-radius-sm: 12px;
  --y-ease:      cubic-bezier(.22, .61, .36, 1);
}

html { scroll-behavior: smooth; }

body {
  color: var(--y-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  /* The left/right scroll-reveals below translate elements horizontally before
     they animate in, which would otherwise push the page wider than the
     viewport and create a horizontal scrollbar on phones. */
  overflow-x: hidden;
}
/* `clip` does the same job without turning body into a scroll container, so
   position: sticky keeps working. Falls back to hidden above. */
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

/* ---------- Typography ------------------------------------------------- */

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4 {
  color: var(--y-navy);
  font-weight: 700;
  letter-spacing: -.015em;
}

.text-primary   { color: var(--y-gold) !important; }
.text-secondary { color: var(--y-navy) !important; }
.bg-primary     { background-color: var(--y-gold) !important; }
.bg-secondary   { background-color: var(--y-navy) !important; }
.bg-dark        { background-color: var(--y-navy-deep) !important; }

/* Section heading: small gold eyebrow + rule, then the real title. */
.y-head { text-align: center; margin-bottom: 3rem; }
.y-head .y-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--y-gold);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.y-head .y-eyebrow::before,
.y-head .y-eyebrow::after {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--y-gold);
  opacity: .65;
}
.y-head h2,
.y-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0; }
.y-head p  { color: var(--y-muted); max-width: 620px; margin: .9rem auto 0; }

/* ---------- Buttons ---------------------------------------------------- */

.btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .25s var(--y-ease), box-shadow .25s var(--y-ease),
              background-color .25s var(--y-ease), color .25s var(--y-ease);
}

.btn-primary {
  background: linear-gradient(135deg, var(--y-gold) 0%, var(--y-gold-dark) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(213, 174, 54, .30);
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--y-navy-soft) 0%, var(--y-navy) 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(28, 50, 98, .32);
}

.btn-outline-primary {
  border: 2px solid var(--y-gold);
  color: var(--y-gold);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--y-gold);
  border-color: var(--y-gold);
  color: #fff;
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--y-navy);
  border-color: var(--y-navy);
}
.btn-dark:hover {
  background: var(--y-gold);
  border-color: var(--y-gold);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Topbar + navbar -------------------------------------------- */

.container-fluid.bg-light.pt-3 {
  background: var(--y-navy) !important;
  padding-bottom: .5rem;
}
.container-fluid.bg-light.pt-3 p,
.container-fluid.bg-light.pt-3 i { color: rgba(255, 255, 255, .82) !important; }
.container-fluid.bg-light.pt-3 a.text-primary { color: var(--y-gold) !important; }
.container-fluid.bg-light.pt-3 a.text-primary:hover { color: #fff !important; }

.nav-bar .navbar {
  border-radius: 0 0 var(--y-radius) var(--y-radius);
  box-shadow: var(--y-shadow) !important;
  transition: box-shadow .3s var(--y-ease), background-color .3s var(--y-ease);
}

.navbar-light .navbar-nav .nav-link {
  position: relative;
  color: var(--y-navy);
  font-weight: 600;
  padding: 1.15rem .8rem;
  font-size: .95rem;
  /* A menu label must never break mid-item - "Hajj 2027" was wrapping onto a
     second line and throwing the whole row out of alignment. */
  white-space: nowrap;
  transition: color .25s var(--y-ease);
}

@media (min-width: 992px) and (max-width: 1299.98px) {
  .navbar-light .navbar-nav .nav-link { padding: 1.15rem .55rem; font-size: .88rem; }
}
/* Gold underline grows from the centre on hover / active. */
.navbar-light .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .7rem;
  width: 0;
  height: 2px;
  background: var(--y-gold);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .3s var(--y-ease);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active { color: var(--y-gold); }
.navbar-light .navbar-nav .nav-link:hover::after,
.navbar-light .navbar-nav .nav-link.active::after { width: calc(100% - 1.9rem); }

.headerlogo, .logo { transition: transform .35s var(--y-ease); }
.navbar-brand:hover .headerlogo { transform: scale(1.04); }

/* ---------- Hero carousel ---------------------------------------------- */

.carousel-item { position: relative; }
/* Light scrim only - just enough for the caption to stay readable without
   dulling the photograph. */
.carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10, 22, 45, .42) 0%, rgba(10, 22, 45, .10) 65%),
    linear-gradient(180deg, rgba(10, 22, 45, .22) 0%, rgba(10, 22, 45, .34) 100%);
}
.carousel-item img {
  height: clamp(420px, 78vh, 760px);
  object-fit: cover;
}
/* Slow drift keeps a static banner photo feeling alive. */
.carousel-item.active img { animation: yKenBurns 14s ease-out forwards; }
@keyframes yKenBurns {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.carousel-caption { z-index: 2; }
.carousel-item.active .carousel-caption h4 { animation: yUp .8s .25s var(--y-ease) both; }
.carousel-item.active .carousel-caption h1 { animation: yUp .8s .45s var(--y-ease) both; }
.carousel-item.active .carousel-caption .btn { animation: yUp .8s .65s var(--y-ease) both; }
@keyframes yUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.carousel-caption h4 { color: var(--y-gold) !important; letter-spacing: 4px; }
.carousel-caption h1 { text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }

/* Hero prev / next.
   Bootstrap gives these controls opacity:.5 and a 15%-wide hit area, which on
   a photograph left them as faint grey blobs. They are full opacity here, with
   a frosted disc that only needs to be wide enough to hold the chevron. */
.y-hero__nav {
  z-index: 3;
  width: auto;
  padding: 0 clamp(.75rem, 3vw, 2.5rem);
  opacity: 1;
}
.y-hero__nav:hover, .y-hero__nav:focus { opacity: 1; }

.y-hero__nav-btn {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(20, 40, 80, .45);
  border: 1.5px solid rgba(255, 255, 255, .55);
  color: #fff;
  font-size: 1.05rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: background-color .28s var(--y-ease), border-color .28s var(--y-ease),
              color .28s var(--y-ease), transform .28s var(--y-ease);
}
.y-hero__nav:hover .y-hero__nav-btn {
  background: var(--y-gold);
  border-color: var(--y-gold);
  color: #fff;
  transform: scale(1.08);
}
.y-hero__nav:active .y-hero__nav-btn { transform: scale(.96); }

/* Keyboard focus needs a visible ring of its own. */
.y-hero__nav:focus-visible .y-hero__nav-btn {
  outline: 3px solid var(--y-gold);
  outline-offset: 3px;
}

/* ---------- Inner page header ------------------------------------------ */

/* The overlay and sizing stay fixed; only the photograph changes. The layout
   sets --y-page-banner from the image uploaded in Admin > App Settings, and
   without one the theme's own image is used. */
.page-header {
  background: linear-gradient(rgba(20, 40, 80, .78), rgba(20, 40, 80, .88)),
              var(--y-page-banner, url(../img/carousel-2.jpg)) center center / cover no-repeat;
  position: relative;
}
.page-header h3 { color: #fff !important; animation: yUp .7s var(--y-ease) both; }
.page-header .d-inline-flex { animation: yUp .7s .15s var(--y-ease) both; }
.page-header .d-inline-flex a:hover { color: var(--y-gold) !important; }

/* Enquiry form band. Same overlay and sizing always; the photograph comes from
   --y-form-banner, set by the layout from Admin > App Settings, and falls back
   to the theme image when nothing is uploaded. */
.bg-registration {
  background: linear-gradient(rgba(20, 40, 80, .84), rgba(20, 40, 80, .92)),
              var(--y-form-banner, url(../img/carousel-1.jpg)) center center / cover no-repeat;
}

/* ---------- Card system ------------------------------------------------ */

.y-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--y-line);
  border-radius: var(--y-radius);
  overflow: hidden;
  box-shadow: var(--y-shadow-sm);
  transition: transform .4s var(--y-ease), box-shadow .4s var(--y-ease),
              border-color .4s var(--y-ease);
}
.y-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--y-shadow-lg);
  border-color: rgba(213, 174, 54, .45);
}

.y-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--y-cream);
}
.y-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--y-ease);
}
.y-card:hover .y-card__media img { transform: scale(1.08); }
.y-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20, 40, 80, .75) 100%);
  opacity: .85;
  transition: opacity .4s var(--y-ease);
}
.y-card:hover .y-card__media::after { opacity: 1; }

/* Poster / product artwork must never be cropped AND must not sit in a
   letterbox. Instead of forcing an aspect-ratio and letting `contain` leave
   white bars, the box takes the image's own shape - so the picture meets all
   four card edges with no gap and nothing is cut off. */
.y-card__media--contain {
  background: #fff;
  aspect-ratio: auto;
  height: auto;
}
.y-card__media--contain img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  object-fit: fill;   /* box already matches the image, nothing to fit */
}
.y-card__media--contain::after { display: none; }
.y-card:hover .y-card__media--contain img { transform: scale(1.03); }

.y-card__badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: var(--y-gold);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: .35rem .8rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(213, 174, 54, .4);
}

.y-card__price {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 2;
  background: rgba(255, 255, 255, .95);
  color: var(--y-navy);
  font-weight: 800;
  padding: .4rem .85rem;
  border-radius: 999px;
  box-shadow: var(--y-shadow-sm);
}

.y-card__body { padding: 1.4rem 1.4rem 1.5rem; flex: 1 1 auto; }
.y-card__title {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--y-navy);
  margin-bottom: .45rem;
  transition: color .25s var(--y-ease);
}
.y-card:hover .y-card__title { color: var(--y-gold-dark); }
.y-card__text {
  color: var(--y-muted);
  font-size: .93rem;
  line-height: 1.65;
  margin: 0;
}
.y-card__foot {
  padding: 0 1.4rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* Clamp helpers so uneven copy still yields an even grid. */
.y-clamp-1, .y-clamp-2, .y-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.y-clamp-1 { -webkit-line-clamp: 1; }
.y-clamp-2 { -webkit-line-clamp: 2; }
.y-clamp-3 { -webkit-line-clamp: 3; }

/* ---------- Template card classes, modernised -------------------------- */

.destination-item {
  border-radius: var(--y-radius);
  overflow: hidden;
  box-shadow: var(--y-shadow-sm);
  transition: transform .4s var(--y-ease), box-shadow .4s var(--y-ease);
}
.destination-item:hover { transform: translateY(-8px); box-shadow: var(--y-shadow-lg); }
.destination-item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.destination-item:hover img { transform: scale(1.07); }

.destination-overlay {
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(20, 40, 80, .12) 40%, rgba(20, 40, 80, .88) 100%);
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding: 1.6rem;
  opacity: 1;
  transition: background .4s var(--y-ease);
}
.destination-item:hover .destination-overlay {
  background: linear-gradient(180deg, rgba(28, 50, 98, .55) 0%, rgba(20, 40, 80, .92) 100%);
}
.destination-overlay h5 {
  font-size: 1.15rem;
  margin-bottom: .2rem;
  transform: translateY(6px);
  transition: transform .4s var(--y-ease);
}
.destination-item:hover .destination-overlay h5 { transform: translateY(0); }
.destination-overlay span { color: var(--y-gold); font-weight: 600; font-size: .88rem; }

.service-card {
  border-radius: var(--y-radius) !important;
  border: 1px solid var(--y-line) !important;
  box-shadow: var(--y-shadow-sm) !important;
  transition: transform .4s var(--y-ease), box-shadow .4s var(--y-ease) !important;
}
.service-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--y-shadow-lg) !important;
}
.service-title { color: var(--y-navy) !important; }

.team-item {
  border-radius: var(--y-radius);
  box-shadow: var(--y-shadow-sm);
  transition: transform .4s var(--y-ease), box-shadow .4s var(--y-ease);
}
.team-item:hover { transform: translateY(-8px); box-shadow: var(--y-shadow-lg); }

/* ---------- Testimonials ------------------------------------------------ */
/* The template pulled the card up over the avatar with a negative margin,
   which cropped the top of the face. The avatar is laid out inside the card
   instead, so it is always fully visible and every card is the same height. */

.y-testimonial {
  position: relative;
  height: 100%;
  margin: 0 12px;
  padding: 58px 1.6rem 1.7rem; /* clears the avatar that overlaps the top */
  background: #fff;
  border: 1px solid var(--y-line);
  border-radius: var(--y-radius);
  box-shadow: var(--y-shadow-sm);
  text-align: center;
  transition: transform .4s var(--y-ease), box-shadow .4s var(--y-ease);
}
.y-testimonial:hover { transform: translateY(-6px); box-shadow: var(--y-shadow-lg); }

/* The selector is deliberately specific: Owl Carousel ships
   `.owl-carousel .owl-item img { width: 100% }`, which would stretch the
   avatar into a wide ellipse. */
.y-testimonial__avatar,
.owl-carousel .owl-item img.y-testimonial__avatar {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 92px;
  max-width: 92px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--y-cream);
  border: 4px solid #fff;
  box-shadow: var(--y-shadow);
  display: block;
}

.y-testimonial__quote {
  position: absolute;
  top: 16px; left: 22px;
  font-family: Georgia, serif;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--y-gold);
  opacity: .22;
  pointer-events: none;
}

.y-testimonial__text {
  color: var(--y-muted);
  font-size: .95rem;
  line-height: 1.75;
  margin-bottom: 1.1rem;
  min-height: 5.25em;            /* keeps short and long quotes aligned */
}
.y-testimonial__name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--y-navy);
  margin: 0;
}
.y-testimonial__role {
  display: block;
  font-size: .82rem;
  color: var(--y-gold-dark);
  margin-top: .15rem;
}

/* Owl needs equal-height stage items for the cards to line up. */
.testimonial-carousel .owl-stage { display: flex; }
.testimonial-carousel .owl-item { display: flex; height: auto; }
.testimonial-carousel .owl-item > div { width: 100%; }

/* The avatar sits above the card, outside its box. Owl's stage clips overflow,
   which sliced the bottom off every card, so the clipping moves up to the
   carousel root and the stage is allowed to overflow. The padding gives the
   avatar somewhere to sit and the cards room for their shadow. */
.testimonial-carousel { overflow: hidden; padding: 52px 0 20px; }
.testimonial-carousel .owl-stage-outer { overflow: visible; }

/* ---------- Rich admin content (long description + FAQ) ----------------- */
/* Styles whatever the admin writes in the editor. An <h3> is treated as a FAQ
   question and gets a gold marker, so a description and a FAQ list can live
   in the same field without needing separate columns. */

.y-rich {
  color: var(--y-ink);
  font-size: 1rem;
  line-height: 1.85;
}
.y-rich > *:first-child { margin-top: 0; }
.y-rich > *:last-child  { margin-bottom: 0; }

.y-rich p { color: var(--y-muted); margin-bottom: 1.1rem; }

.y-rich h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  color: var(--y-navy);
  margin: 2.2rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid rgba(213, 174, 54, .35);
}

/* FAQ question */
.y-rich h3 {
  position: relative;
  font-size: 1.08rem;
  color: var(--y-navy);
  margin: 1.9rem 0 .5rem;
  padding-left: 1.9rem;
}
.y-rich h3::before {
  content: "\f059";                 /* question circle */
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: .08em;
  color: var(--y-gold);
  font-size: .95em;
}
/* The answer sitting directly under a question. */
.y-rich h3 + p { padding-left: 1.9rem; margin-bottom: 1.3rem; }

.y-rich h4 { font-size: 1rem; color: var(--y-navy); margin: 1.4rem 0 .4rem; }

.y-rich ul, .y-rich ol { color: var(--y-muted); padding-left: 1.3rem; margin-bottom: 1.2rem; }
.y-rich li { margin-bottom: .45rem; }
.y-rich ul { list-style: none; padding-left: 0; }
.y-rich ul > li {
  position: relative;
  padding-left: 1.7rem;
}
.y-rich ul > li::before {
  content: "\f00c";                 /* check */
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: .12em;
  color: var(--y-gold);
  font-size: .82em;
}

.y-rich a { color: var(--y-gold-dark); font-weight: 600; }
.y-rich a:hover { color: var(--y-navy); }

.y-rich blockquote {
  margin: 1.4rem 0;
  padding: .9rem 1.2rem;
  border-left: 4px solid var(--y-gold);
  background: var(--y-cream);
  border-radius: 0 var(--y-radius-sm) var(--y-radius-sm) 0;
  color: var(--y-navy);
}

.y-rich table {
  width: 100%;
  margin-bottom: 1.3rem;
  border-collapse: collapse;
}
.y-rich th, .y-rich td {
  border: 1px solid var(--y-line);
  padding: .6rem .8rem;
  text-align: left;
}
.y-rich th { background: var(--y-navy); color: #fff; font-weight: 600; }

/* Panel the rich content sits in on a service page. */
.y-rich-panel {
  background: #fff;
  border: 1px solid var(--y-line);
  border-radius: var(--y-radius);
  box-shadow: var(--y-shadow-sm);
  padding: clamp(1.4rem, 3vw, 2.6rem);
}

/* ---------- Store ------------------------------------------------------- */

.y-price {
  font-weight: 800;
  color: var(--y-navy);
}
.y-price-was {
  margin-left: .45rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--y-muted);
  text-decoration: line-through;
}

/* Stacked buttons in a card footer (Add to cart + View details). */
.y-card__foot--stack {
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
}

/* The image fills the frame edge to edge - no inner padding, no letterbox. */
.y-product-figure {
  position: relative;
  background: #fff;
  border: 1px solid var(--y-line);
  border-radius: var(--y-radius);
  box-shadow: var(--y-shadow);
  overflow: hidden;
  line-height: 0;
}
.y-product-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Cart popup -------------------------------------------------- */

.y-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 40, 80, .55);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 1rem;
}
.y-cart-box {
  background: #fff;
  border-radius: var(--y-radius);
  box-shadow: var(--y-shadow-lg);
  padding: 1.6rem;
  width: 100%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
}
.y-cart-line {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--y-line);
}
.y-cart-line:last-child { border-bottom: 0; }
.y-cart-line img {
  width: 48px; height: 48px;
  object-fit: contain;
  background: var(--y-cream);
  border-radius: 8px;
  flex: 0 0 48px;
}
.y-cart-line__text { display: flex; flex-direction: column; min-width: 0; }
.y-cart-line__text strong {
  font-size: .9rem;
  color: var(--y-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.y-cart-line__text span { font-size: .8rem; color: var(--y-muted); }

/* ---------- Forms ------------------------------------------------------ */

.form-control, .custom-select {
  border: 1px solid var(--y-line);
  border-radius: var(--y-radius-sm);
  transition: border-color .25s var(--y-ease), box-shadow .25s var(--y-ease);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--y-gold);
  box-shadow: 0 0 0 .2rem rgba(213, 174, 54, .18);
}
.card-header.bg-primary { background: linear-gradient(135deg, var(--y-navy) 0%, var(--y-navy-soft) 100%) !important; }
.card-header.bg-primary h1 { color: #fff !important; }

/* ---------- Scroll reveal ---------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--y-ease), transform .7s var(--y-ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"]  { transform: scale(.94); }

/* Stagger children inside a grid row. */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s var(--y-ease), transform .6s var(--y-ease);
}
[data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: .05s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: .13s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: .21s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: .29s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: .37s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: .45s; }
[data-reveal-stagger].is-visible > *:nth-child(n+7) { transition-delay: .5s; }

/* ---------- Floating actions ------------------------------------------- */

.y-fab {
  position: fixed;
  right: 22px;
  z-index: 1030;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 1.15rem;
  text-decoration: none;
  box-shadow: var(--y-shadow);
  transition: transform .3s var(--y-ease), opacity .3s var(--y-ease),
              visibility .3s var(--y-ease);
}
.y-fab:hover { transform: translateY(-4px) scale(1.06); color: #fff; }

.y-fab--whatsapp { bottom: 22px; background: #25D366; }
.y-fab--whatsapp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: yPulse 2.2s ease-out infinite;
}
@keyframes yPulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}

.y-fab--top {
  bottom: 86px;
  background: var(--y-navy);
  opacity: 0;
  visibility: hidden;
}
.y-fab--top.is-visible { opacity: 1; visibility: visible; }

/* ---------- Footer ----------------------------------------------------- */

.y-footer {
  position: relative;
  background:
    radial-gradient(800px 380px at 8% 0%, rgba(213, 174, 54, .12), transparent 62%),
    linear-gradient(170deg, var(--y-navy) 0%, var(--y-navy-deep) 100%);
  color: rgba(255, 255, 255, .72);
  padding: 4.5rem 0 0;
  margin-top: 0;
}
/* Thin gold rule across the very top of the footer. */
.y-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--y-gold) 0%, var(--y-gold-dark) 50%, var(--y-gold) 100%);
}

/* The brand logo is a JPG with a white background, so it is placed on a white
   chip on purpose rather than left as a bare rectangle on the navy. */
.y-footer__logo {
  display: inline-block;
  background: #fff;
  padding: .7rem 1rem;
  border-radius: var(--y-radius-sm);
  margin-bottom: 1.2rem;
  line-height: 0;
  transition: transform .3s var(--y-ease);
}
.y-footer__logo:hover { transform: translateY(-2px); }
.y-footer__logo img {
  width: 180px;
  height: auto;
  max-height: 64px;
  object-fit: contain;   /* never crop the wordmark */
  display: block;
}

.y-footer__wordmark {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}

.y-footer__about {
  font-size: .92rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .66);
  margin-bottom: 0;
  max-width: 34ch;
}

.y-footer__heading {
  position: relative;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  padding-bottom: .7rem;
}
.y-footer__heading::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 2px;
  background: var(--y-gold);
  border-radius: 2px;
}

.y-footer__links { list-style: none; padding: 0; margin: 0; }
.y-footer__links li { margin-bottom: .6rem; }
.y-footer__links a {
  position: relative;
  color: rgba(255, 255, 255, .7);
  font-size: .93rem;
  text-decoration: none;
  padding-left: 1rem;
  display: inline-block;
  transition: color .25s var(--y-ease), padding-left .25s var(--y-ease);
}
.y-footer__links a::before {
  content: "\f105";                     /* angle-right */
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--y-gold);
  opacity: .8;
}
.y-footer__links a:hover { color: var(--y-gold); padding-left: 1.35rem; }

.y-footer__contact { list-style: none; padding: 0; margin: 0 0 .5rem; }
.y-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: .85rem;
  font-size: .93rem;
  line-height: 1.6;
}
.y-footer__contact i {
  color: var(--y-gold);
  margin-top: .25rem;
  flex: 0 0 16px;
  font-size: .9rem;
}
.y-footer__contact a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.y-footer__contact a:hover { color: var(--y-gold); }

.y-footer__socials { display: flex; flex-wrap: wrap; gap: .55rem; }
.y-footer__socials a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .8);
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .25s var(--y-ease), border-color .25s var(--y-ease),
              color .25s var(--y-ease), transform .25s var(--y-ease);
}
.y-footer__socials a:hover {
  background: var(--y-gold);
  border-color: var(--y-gold);
  color: #fff;
  transform: translateY(-3px);
}

.y-footer__bar {
  margin-top: 3.5rem;
  padding: 1.3rem 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .18);
  font-size: .87rem;
  color: rgba(255, 255, 255, .6);
}
.y-footer__bar a { color: var(--y-gold); text-decoration: none; }
.y-footer__bar a:hover { color: #fff; }

@media (max-width: 767.98px) {
  .y-footer { padding-top: 3rem; text-align: center; }
  .y-footer__heading::after { left: 50%; transform: translateX(-50%); }
  .y-footer__links a { padding-left: 0; }
  .y-footer__links a::before { display: none; }
  .y-footer__links a:hover { padding-left: 0; }
  .y-footer__contact li { justify-content: center; text-align: left; }
  .y-footer__socials { justify-content: center; }
  .y-footer__about { margin-left: auto; margin-right: auto; }
}

/* ---------- Error pages ------------------------------------------------ */

.y-error {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
  text-align: center;
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(213, 174, 54, .16), transparent 62%),
    linear-gradient(180deg, var(--y-navy) 0%, var(--y-navy-deep) 100%);
  color: #fff;
}
.y-error__inner { max-width: 620px; width: 100%; }
.y-error__logo {
  max-width: 190px;
  margin-bottom: 2rem;
  padding: .6rem .9rem;
  background: #fff;
  border-radius: var(--y-radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

/* Error pages load only this stylesheet - no Bootstrap - so the buttons
   below are defined from scratch rather than reusing .btn utilities. */
.y-error__btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--y-ease), box-shadow .25s var(--y-ease),
              background-color .25s var(--y-ease), color .25s var(--y-ease);
}
.y-error__btn:hover { transform: translateY(-2px); text-decoration: none; }

.y-error__btn--solid {
  background: linear-gradient(135deg, var(--y-gold) 0%, var(--y-gold-dark) 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(213, 174, 54, .32);
}
.y-error__btn--solid:hover { color: #fff; box-shadow: 0 12px 26px rgba(213, 174, 54, .45); }

.y-error__btn--ghost {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  background: transparent;
}
.y-error__btn--ghost:hover {
  border-color: var(--y-gold);
  color: var(--y-gold);
}
.y-error__code {
  font-size: clamp(5.5rem, 20vw, 10rem);
  font-weight: 800;
  line-height: .9;
  margin: 0;
  background: linear-gradient(135deg, var(--y-gold-light), var(--y-gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: yUp .7s var(--y-ease) both;
}
.y-error__title {
  color: #fff !important;
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  margin: 1rem 0 .6rem;
  animation: yUp .7s .12s var(--y-ease) both;
}
.y-error__text {
  color: rgba(255, 255, 255, .74);
  margin-bottom: 2rem;
  animation: yUp .7s .22s var(--y-ease) both;
}
.y-error__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  animation: yUp .7s .32s var(--y-ease) both;
}
.y-error__plane {
  font-size: 2rem;
  color: var(--y-gold);
  margin-bottom: 1rem;
  animation: yFly 3.4s ease-in-out infinite;
}
@keyframes yFly {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(14px, -12px) rotate(8deg); }
}
.y-error__links {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  justify-content: center;
}
.y-error__links a {
  color: rgba(255, 255, 255, .72);
  font-size: .9rem;
  text-decoration: none;
  transition: color .25s var(--y-ease);
}
.y-error__links a:hover { color: var(--y-gold); }

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 991.98px) {
  .nav-bar .navbar { border-radius: 0; }
  .navbar-light .navbar-nav .nav-link { padding: .7rem .25rem; }
  .navbar-light .navbar-nav .nav-link::after { display: none; }
  .carousel-item img { height: clamp(320px, 52vh, 460px); }

  /* Smaller discs tucked closer to the edge so they clear the caption. */
  .y-hero__nav { padding: 0 .5rem; }
  .y-hero__nav-btn { width: 42px; height: 42px; font-size: .9rem; }

  /* Slide-in from the side reads poorly on a narrow screen and needs width
     the phone does not have - fall back to the vertical reveal. */
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(28px); }
}

@media (max-width: 575.98px) {
  .y-card__body, .y-card__foot { padding-left: 1.1rem; padding-right: 1.1rem; }
  .y-fab { right: 14px; width: 46px; height: 46px; }
  .y-head { margin-bottom: 2rem; }
}

/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}