/* =============================================================
   Site CSS — fonts, custom classes, animations, slider tweaks
   (everything else is handled by Tailwind v4 Play CDN)
   ============================================================= */

/* ---------- Font faces (mirror app/globals.css) ---------- */
@font-face {
  font-family: "Gilda";
  src: url("../font/GildaDisplay-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Mont";
  src: url("../font/Montserrat-Light.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Mont-bold";
  src: url("../font/Montserrat-Bold.ttf") format("truetype");
  font-display: swap;
}

/* The original components reference these as plain class names */
.Gilda      { font-family: "Gilda"; }
.Mont       { font-family: "Mont"; font-weight: 500; }
.Mont-bold  { font-family: "Mont-bold"; font-weight: 700; }

body, html {
  margin: 0;
  padding: 0;
  font-family: "Mont", "ulm-regular", Arial, sans-serif;
  box-sizing: border-box;
}
body { overflow-x: hidden; }
html { overflow-x: hidden; scroll-behavior: smooth; }

/* ---------- Pulse animation (used on Configuration CTA) ---------- */
.pulse { animation: pulse-animation 2s infinite; }
@keyframes pulse-animation {
  0%   { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); }
  100% { box-shadow: 0 0 0 20px rgba(0, 0, 0, 0); }
}

/* ---------- Header separator (replaces inline SVG component) ---------- */
.nav-sep {
  display: inline-block;
  width: 1px;
  height: 19px;
  background: linear-gradient(
    to bottom,
    #AD812D 0%,
    #AD812D 5%,
    #B38833 16%,
    #C39D45 32%,
    #CFAB52 40%,
    #B78D2E 100%
  );
  opacity: 0.2;
}

/* ---------- Lifestyle stepped slider (from <style jsx global>) ---------- */
/* Scoped to .lifestyle-section so other Swipers stay normal */
.lifestyle-section .stepped-slide .slide-inner {
  height: 370px;
  transition: all 0.5s ease-in-out;
  filter: none;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.lifestyle-section .swiper-slide-next + .swiper-slide + .swiper-slide .slide-inner {
  height: 270px !important;
  filter: grayscale(0%);
}

.lifestyle-section .swiper-slide-next .slide-inner {
  height: 450px !important;
  opacity: 1;
  filter: grayscale(0%);
}

.lifestyle-section .swiper-slide-active .slide-inner {
  height: 510px !important;
  opacity: 1;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
  filter: grayscale(0%);
}

.lifestyle-section .swiper-wrapper {
  align-items: center;
}

/* Banner Swiper height fix (inside flex container) */
.banner-swiper { height: 100%; }


.d-none{
  display: none !important;
}


.tagline{
  top: 0;
 font-weight: 600;
 color: #fff;

}