/* Base Reset */
:root {
  /* Colors */
  --color-text: #0f172a;
  --color-bg-white: #ffffff;
  --color-bg-light: #fafafa;
  --color-accent: #ffcb00;
  --color-hover-text: #555555;

  /* Typography */
  --font-primary: "Source Sans 3", sans-serif;
  --font-display: "Bebas Neue", sans-serif;
  --font-size-base: 16px;
  --font-size-mobile-menu: 18px;
  --font-weight-regular: 400;

  /* Global Headings */
}

/* Button Styles per Design System */
.btn-main {
  background-color: #ffcb00;
  color: #0f172a;
  transition: all 0.8s ease; /* Gentle transition */
  cursor: pointer;
  border: none;
  border-radius: 8px; /* Assuming 8px from contacts usage, referencing visual if needed */
}

.btn-main:hover {
  background-color: #e6b800;
  box-shadow: 0px 2px 15.6px rgba(96, 96, 96, 0.28);
}

.btn-white {
  background-color: #ffffff;
  color: #0f172a;
  transition: all 0.8s ease;
  cursor: pointer;
  border: none;
  border-radius: 8px;
}

.btn-white:hover {
  background-color: #efefef;
  box-shadow: 0px 2px 15.6px rgba(96, 96, 96, 0.28);
}

h2,
.section-title {
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 52px;
  font-style: normal;
  font-weight: 400;
  line-height: 56px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-primary);
  background-color: #f5f5f5;
  color: var(--color-text);
  padding-top: 88px;
  /* overflow-x: hidden; Moved to combined selector above */
}

@media (max-width: 768px) {
  body {
    padding-top: 66px;
  }
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* =========================================
   Global Components
   ========================================= */

/* Swiper Pagination */
.swiper-pagination {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 22px;
}

.swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  width: 14px !important;
  height: 14px !important;
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(255, 203, 0, 0.3);
  animation: pulse-halo 2s infinite;
}

@keyframes pulse-halo {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 203, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255, 203, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 203, 0, 0.3);
  }
}

@keyframes pulse-halo-svg {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 203, 0, 0.3);
    border-radius: 50%;
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 203, 0, 0.1);
    border-radius: 50%;
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 203, 0, 0.3);
    border-radius: 50%;
  }
}

/* 1. Stop iOS from inflating text size arbitrarily */
.swiper-slide, .swiper-wrapper, .swiper-container {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
/* 2. Force hardware acceleration to stop "paint" glitches */
.swiper-slide {
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* 3. Ensure checking bounds doesn't confuse the browser layout engine */
.swiper-slide p, .swiper-slide h1, .swiper-slide h2, .swiper-slide div {
    max-height: 99999px; /* Triggers correct font calculation in some older iOS versions */
}
