/* ==========================================================================
   Front Page — Specific Styles
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────────────
   Full-viewport hero sitting behind the fixed transparent navbar.
   The overlay darkens the image so white text reads cleanly.
   ────────────────────────────────────────────────────────────────────────── */
.fp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.fp-hero__overlay {
  /* position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(26, 26, 46, 0.75) 0%,
      rgba(26, 26, 46, 0.45) 100%); */
}

.fp-hero__content {
  position: relative;
  z-index: 1;
  padding-top: var(--navbar-height);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.fp-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.fp-hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0 auto 2rem;
  max-width: 560px;
}

.fp-hero__cta {
  padding: 0.85rem 2.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 50px;
  border: 2px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
}

.fp-hero__cta::after {
  content: " →";
  margin-left: 1rem;
}

/* ── Section label — moved to theme.css (shared across all pages) ────────── */

.fp-testimonials__heading {
  margin-bottom: 1rem;
}

/* ── Category Cards ──────────────────────────────────────────────────────────
   Image card with title below the image.
   ────────────────────────────────────────────────────────────────────────── */
.fp-categories-swiper {
  padding-bottom: 0 !important;
  position: relative;
  gap: 3px;
}

.fp-cat-card {
  display: block;
  text-decoration: none;
  color: inherit;
  /* border-radius: var(--border-radius); */
  overflow: hidden;
  position: relative;
}

.fp-cat-card__image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.fp-cat-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.fp-cat-card:hover .fp-cat-card__image img {
  transform: scale(1.06);
}

.fp-cat-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--color-border);
}

.fp-cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 26, 46, 0.55) 0%, transparent 55%);
  transition: opacity var(--transition);
}

/* Title overlaid at the bottom of the image */
.fp-cat-card__title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: #0000003B;
  /* background: rgba(255, 255, 255, 0.72); */
  /* backdrop-filter: blur(6px); */
  /* -webkit-backdrop-filter: blur(6px); */
}

.fp-cat-card__name {
  font-family: "Gothic A1";
  font-weight: 200;
  /* font-style: "Regular"; */
  font-size: 24px;
  /* leading-trim: NONE; */
  letter-spacing: 0%;

  margin-bottom: 0;
  /* color: var(--color-primary); */
  color: white;
  /* text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em; */
}

/* ── Swiper arrow override (shared by categories & brands) ───────────────── */
.fp-swiper-btn {
  background: transparent;
  width: 60px;
  height: 60px;
  /* border-radius: 50%; */
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); */
  top: 50%;
  /* transform: translateY(-50%); */
  border: none;
  cursor: pointer;
}

.fp-swiper-btn:hover {
  /* background: var(--color-secondary); */
}

.fp-swiper-btn::after {
  font-size: 14px !important;
  font-weight: 700;
  color: var(--color-primary);
  transition: color var(--transition);
}

.fp-swiper-btn:hover {}

/* Categories swiper: larger, white arrows */
.fp-categories-swiper .fp-swiper-btn {
  width: 88px;
  height: 88px;
}

.fp-categories-swiper .fp-swiper-btn::after {
  font-size: 28px !important;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.home .fp-categories-swiper {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* Swiper navigation position fix so buttons sit outside the slides */
.fp-categories-swiper,
.fp-brands-swiper {
  margin-left: 52px !important;
  margin-right: 52px !important;
}

/* ── Brands slider ───────────────────────────────────────────────────────────
   Logos displayed in grayscale, full colour on hover.
   ────────────────────────────────────────────────────────────────────────── */
.fp-brands__heading {
  font-family: "Gothic A1";
  font-weight: 400;
  font-size: 27px;
  line-height: 125%;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}


.fp-brands-swiper .swiper-button-prev {
  left: -52px;
}

.fp-brands-swiper .swiper-button-next {
  right: -52px;
}

.fp-brands-button-prev,
.fp-brands-button-next {
  position: absolute;
  top: 70%;
  transform: translateY(-50%);
  z-index: 10;
}

.fp-brands-button-prev {
  left: 0;
}

.fp-brands-button-next {
  right: 0;
}

.fp-brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--color-border);
  min-height: 130px;
}

.fp-brand-logo {
  max-height: 100px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: none;
  transition: filter 0.4s ease;
  display: block;
  margin: 0 auto;
}

.fp-brand-item:hover .fp-brand-logo {
  filter: grayscale(0%) opacity(1);
}

.fp-brand-name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-text-light);
  display: block;
  text-align: center;
}

/* ── Core Values icons ──────────────────────────────────────────────────────── */
.fp-core-value__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* ── Who We Serve section ───────────────────────────────────────────────────── */
.fp-who-we-serve__wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

.fp-who-we-serve__bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;
  background: #D9D9D933;
  border-radius: 10px;
  z-index: 0;
}

.fp-who-we-serve__image {
  position: relative;
  z-index: 1;
  flex: 0 0 62%;
}

.fp-who-we-serve__image img {
  width: 100%;
  max-height: 650px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.fp-who-we-serve__text {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 2.5rem 2.5rem 2.5rem 3rem;
}

.fp-who-we-serve__btn {
  border-radius: 50px;
  padding: 0.85rem 2.5rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  border: 1px solid #000;
}

@media (max-width: 991.98px) {
  .fp-who-we-serve__wrapper {
    flex-direction: column;
  }

  .fp-who-we-serve__bg {
    width: 100%;
    top: 50%;
    border-radius: 0 0 10px 10px;
  }

  .fp-who-we-serve__image {
    flex: none;
    width: 100%;
  }

  .fp-who-we-serve__text {
    padding: 2rem 1.5rem;
  }
}

/* ── Testimonials section ────────────────────────────────────────────────────
   Static customizer image on the right; only the carousel slides.
   Dots only — no navigation arrows.
   ────────────────────────────────────────────────────────────────────────── */

/* Outer layout: carousel left, image right — both stretch to same height */
.fp-testimonials__layout {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 500px;
}

/* Step the min-height down as the viewport narrows */
@media (max-width: 1399.98px) {
  .fp-testimonials__layout {
    min-height: 420px;
  }
}

@media (max-width: 1199.98px) {
  .fp-testimonials__layout {
    min-height: 380px;
  }
}

.fp-testimonials__image-col {
  flex: 0 0 50%;
  order: 1;
  position: relative;
  overflow: hidden;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.fp-testimonials__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fp-testimonials__content-col {
  flex: 1;
  min-width: 0;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #d9d9d9;
}

/* The content column is sized by the layout's align-items: stretch (do NOT set
   height:100% here — the layout's height comes from min-height, so a percentage
   can't resolve and would collapse the column to its text height instead).
   The chain below fills that stretched height down to the card body. */
.fp-testimonials__content,
.fp-testimonials-swiper,
.fp-testimonials-swiper .swiper-wrapper {
  height: 100%;
}

/* height:auto + flex wrapper stretch makes each slide fill the wrapper height */
.fp-testimonials-swiper .swiper-slide {
  height: auto;
}

/* Card body — natural content height drives the row height */
.fp-testimonial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fp-testimonial-card__body {
  background-color: #D9D9D9;
  padding: 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* Quote sign sits flush at the top of the column */
.fp-testimonial-card__body svg {
  flex: 0 0 auto;
}

/* When no image is set, round all corners */
.fp-testimonials__layout:not(:has(.fp-testimonials__image-col)) .fp-testimonial-card__body {
  border-radius: 10px;
}

@media (max-width: 991.98px) {
  .fp-testimonials__layout {
    flex-direction: column;
    min-height: 0;
  }

  .fp-testimonials__image-col {
    order: 0;
    flex: none;
    height: 280px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0;
  }

  .fp-testimonial-card__body {
    padding: 2rem 1.5rem;
    border-top-left-radius: 0;
    border-bottom-right-radius: 10px;
  }
}

.fp-testimonials__label {
  font-family: "Gothic A1";
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  line-height: 111%;
  letter-spacing: 0%;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.fp-testimonials__heading {
  font-family: 'Gothic A1';
  font-weight: 200;
  font-size: 27px;
  line-height: 125%;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}



.fp-testimonials__heading strong,
.fp-testimonials__black {
  font-family: "ITC Avant Garde Gothic Pro", var(--font-heading);
  font-weight: 700;
  font-size: 27px;
  line-height: 125%;
}

.fp-testimonials__desc {
  /* color: var(--color-text-light); */
  line-height: 1.3;
  font-size: 13px;
}

/* Testimonial card */
.fp-testimonial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* .fp-testimonial-card__stars {
    color: var(--color-secondary);
    font-size: 1rem;
    display: flex;
    gap: 0.2rem;
} */


.fp-testimonial-card__body svg {
  transform: scale(2);
  margin-bottom: 2rem;
}

.fp-testimonial-card__quote {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
  border: none;
  padding: 0;
  margin: 0;
}

.fp-testimonial-card__quote p {
  margin-bottom: 0;
}

.fp-testimonial-card__name {
  font-family: var(--font-heading);
  font-size: 19px;
  color: var(--color-primary);
}

.fp-testimonial-card__role {
  font-size: 0.8rem;
}

/* Avatar circle */
.fp-testimonial-card__avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.fp-testimonial-card__avatar img {
  width: 52px;
  height: 52px;
  object-fit: cover;
}

.fp-testimonial-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #ffffff;
  font-size: 1.25rem;
  font-family: var(--font-heading);
}

/* Swiper testimonials wrapper — extra bottom room for dots */
.fp-testimonials-swiper {
  /* padding-bottom: 3rem !important; */
}

.fp-testimonials-pagination {
  bottom: -25px !important;
}

.fp-testimonials-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: transparent;
  border: 1px solid black;
  opacity: 1;
  border-radius: 4px;
}

.fp-testimonials-pagination .swiper-pagination-bullet-active {
  border: 1px solid grey;
  background: transparent;
}

/* ── Scroll Snap ─────────────────────────────────────────────────────────────
   Snap each front-page section into view on scroll.
   `proximity` avoids forcing a snap when the user is mid-section.
   `scroll-padding-top` offsets the fixed navbar so section headings
   aren't hidden beneath it.
   ────────────────────────────────────────────────────────────────────────── */
/* Scroll snap disabled — interferes with AOS scroll detection */
/* html {
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--navbar-height);
}

.fp-hero,
.fp-categories,
.fp-content,
.fp-brands,
.fp-testimonials {
  scroll-snap-align: start;
} */

/* ── Footer — 4-column widget layout ─────────────────────────────────────────
   Each column gets equal width. Widgets inside inherit footer colours.
   ────────────────────────────────────────────────────────────────────────── */
.site-footer .widget {
  background: transparent;
  padding: 0;
  margin-bottom: 0;
  /* color: rgba(255, 255, 255, 0.75); */
}

.site-footer .widget a {
  /* color: rgba(255, 255, 255, 0.75); */
  text-decoration: none;
  transition: color var(--transition);
}

.site-footer .widget a:hover {
  color: var(--color-secondary);
}

.site-footer .widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer .widget ul li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* .site-footer .widget p {
    font-size: 0.9rem;
    /* color: rgba(255, 255, 255, 0.65); */
}

*/ .site-footer .footer-heading {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Logo in footer widget */
.site-footer .custom-logo {
  max-height: 50px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}