* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  font-family: 'Segoe UI', sans-serif;
  background-color: #0f0f0f;
  color: white;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

.navbar {
  height: 10vh;
  width: 100%;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}

.logo {
  height: 180%;
}

.nav-links {
  display: flex;
  gap: 3rem;
}

.nav-links a {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 1000;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #dd4e69;
}

.cta-btn {
  background-color: #dd4e69;
  color: #ffffff;
  padding: 10px 25px;
  font-size: 16px;
  border: none;
  border-radius: 30%; /* 30% border-radius */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.cta-btn:hover {
  background-color: #c1405a;
}

.pushable {
  position: relative;
  background: transparent;
  padding: 0px;
  border: none;
  cursor: pointer;
  outline-offset: 4px;
  outline-color: #dd4e69; /* Primary color */
  transition: filter 250ms;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: inline-block; /* wrap to content width */
  width: fit-content; /* shrink-wrap */
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #a23a4f; /* darker version of primary */
  border-radius: 8px;
  filter: blur(2px);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.edge {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(
      to right,
      #b84057 0%,
      #dd4e69 8%,
      #b84057 92%,
      #9c3044 100%
  );
}

.front {
  display: block;
  position: relative;
  border-radius: 8px;
  background: #dd4e69; /* Primary */
  padding: 16px 32px;
  color: #ffffff; /* Secondary */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1rem;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.pushable:hover {
  filter: brightness(110%);
}

.pushable:hover .front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.pushable:active .front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.pushable:hover .shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.pushable:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.pushable:focus:not(:focus-visible) {
  outline: none;
}

.pushable.small {
  padding: 0; /* remove any extra spacing */
}

.pushable.small .edge,
.pushable.small .shadow {
  width: 100%;
}

.pushable.small .front {
  display: inline-block;
  padding: 4px 8px; /* top/bottom 4px, left/right 8px */
  white-space: nowrap; /* prevent wrapping */
  width: auto; /* allow it to size naturally */
}

.stats-section {
  display: flex;
  justify-content: center;
  gap: 80px;
  background-color: #111;
  padding: 50px 0;
}

.stat {
  position: relative;
  display: flex;
  align-items: center;
  font-family: 'Arial', sans-serif;
}

.number {
  font-size: 90px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px #999;
  position: relative;
  z-index: 0;
}

.label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-left: -20px;
  z-index: 1;
  line-height: 1.4;
}

.scrolling-wrapper {
  background: #111;
  overflow: hidden;
  padding: 40px 0;
}

.scroll-row {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  font-size: 70px;
  font-weight: 800;
  text-transform: uppercase;
  color: #888;
  animation: scroll-left 25s linear infinite;
}

.scroll-row.reverse {
  animation: scroll-right 25s linear infinite;
}

.scroll-row span {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1px #666;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}

.mission-section {
  position: relative;
  min-height: 100vh;
  padding: 120px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #000;
  color: #fff;
  overflow: hidden;
}

.mission-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  z-index: 0;
}

.section-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 80px;
}

.section-header h1 {
  font-size: 56px;
  margin-bottom: 10px;
}

.section-header .breadcrumb {
  font-size: 14px;
  color: #aaa;
}

.section-header .breadcrumb a {
  color: #ccc;
  text-decoration: none;
}

.section-header .breadcrumb span {
  font-weight: bold;
  color: #fff;
}

.mission-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center; /* vertical centering */
  justify-content: space-between;
  gap: 60px;
  max-width: 1400px;
  width: 100%;
}

.mission-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.subtitle {
  font-size: 12px;
  color: #aaa;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.title {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 20px;
}

.description {
  font-size: 14px;
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 480px;
}

.cards-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 10px;
}

.flip-card {
  perspective: 1000px;
  width: 260px;
  height: 260px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  box-sizing: border-box;
}

.flip-card-front {
  background: #111;
}

.flip-card-back {
  background: #dd4e69 !important;
  transform: rotateY(180deg);
  color: #fff;
  text-align: center;
}

.circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ff5e6c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  margin-bottom: 16px;
  font-size: 14px;
}

.card-sub {
  font-size: 11px;
  color: #aaa;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.card-title {
  font-size: 18px;
  color: #fff;
  margin: 0;
}

/* Section wrapper */
.offer-section {
  background: #000;
  padding: 80px 20px;
}

/* Centered max-width container */
.offer-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Top line spans the full container width */
.offer-line-full {
  border: none;
  height: 1px;
  background: #333;
  width: 100%;
  margin: 0 0 32px;
}

/* Small uppercase label */
.offer-label {
  display: block;
  font-size: 14px;
  letter-spacing: 2px;
  color: #888;
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* Big centered text */
.offer-text {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  max-width: 1900px;
  margin: 0 auto;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (min-width: 768px) {
  .offer-text {
    font-size: 4rem;
  }
}

/* Bottom line only 60% of container */
.offer-line-center {
  border: none;
  height: 1px;
  background: #333;
  width: 60%;
  margin: 32px auto 0;
}

/* —— SECTION & LAYOUT —— */
.vision-section {
  background: #000;
  color: #fff;
  padding: 120px 20px 40px; /* extra top breathing room */
  min-height: 80vh; /* full height */
  display: flex;
  flex-direction: column;
}

.vision-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}

/* —— IMAGE —— */
.vision-image {
  flex: 0 0 40%;
}

.vision-image img {
  width: 100%;
  height: auto;
}

/* —— CONTENT —— */
.vision-content {
  flex: 1;
  min-width: 0;
}

.subtitle {
  display: block;
  font-size: 17px; /* 14px ×1.2 */
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.main-title {
  font-size: 40px; /* 28px ×1.4 */
  line-height: 1.2;
  margin-bottom: 32px;
}

/* —— TABS —— */
.tabs {
  position: relative;
  display: flex;
  gap: 24px;
  border-bottom: 1px solid #333;
  margin-bottom: 32px;
  white-space: nowrap;
}

.tab {
  background: none;
  border: none;
  color: #aaa;
  font-size: 23px; /* 16px ×1.4 */
  padding: 8px 0;
  cursor: pointer;
}

.tab.active {
  color: #fff;
}

.tab-underline {
  position: absolute;
  bottom: -1px;
  height: 3px;
  background: #dd4e69;
  transition: left 0.3s, width 0.3s;
}

/* —— TAB PANES —— */
.tab-content p {
  font-size: 17px; /* 14px ×1.2 */
  line-height: 1.6;
  color: #ccc;
}

/* —— BOTTOM FOOTER TEXT —— */
.vision-footer {
  margin-top: auto; /* push to bottom */
  text-align: center;
  font-size: 14px;
  color: #555;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-top: 40px;
}

.footer {
  background: #000;
  color: #fff;
  padding: 60px 20px;
  font-family: 'Raleway', sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}

.footer-col {
  flex: 1;
  min-width: 180px;
}

.footer-logo img {
  max-width: 13rem; /* as requested before */
  display: block;
  margin-bottom: 24px;
}

/* Column headings */
.footer-col h4 {
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: #888;
}

/* Lists */
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 2rem; /* vertical gap between items */
}

.footer-col ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}

.footer-col ul li a:hover {
  color: #dd4e69;
}

/* Subscribe column */
.footer-subscribe .subscribe-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.footer-subscribe .subscribe-line a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.footer-subscribe .subscribe-icon {
  background: #dd4e69;
  padding: 4px 8px;
  border-radius: 4px;
}

.footer-subscribe .subscribe-text {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 16px;
}

/* Social icons */
.contact-icons {
  display: flex;
  gap: 16px;
}

.contact-icons a {
  color: #fff;
  font-size: 1.2rem;
}

.contact-icons a:hover {
  color: #dd4e69;
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid #333;
  margin-top: 40px;
  padding-top: 24px;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 12px;
}

.footer-bottom-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 24px;
}

.footer-bottom-nav li a {
  color: #888;
  font-size: 0.9rem;
  text-decoration: none;
}

.footer-bottom-nav li a:hover {
  color: #fff;
}

@media (max-width: 48rem) { /* Using 768px / 16px = 48rem as breakpoint */
  .about-hero .container {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem; /* Adjust gap for stacked elements (~20px) */
    padding: 0 1.25rem; /* Add some horizontal padding for smaller screens */
  }

  .about-hero .text-content {
    max-width: 100%;
  }

  .about-hero .image-content {
    display: none;
  }

  .about-hero h1 {
    font-size: 2.25rem !important; /* ~36px - Adjusted slightly for readability */
    line-height: 1.3;
  }

  .about-hero p {
      font-size: 0.9375rem; /* ~15px */
  }


  /* STATS SECTION - Responsive units */
  .stats-section {
    flex-direction: column;
    gap: 1.875rem; /* ~30px converted to rem */
    padding: 1.875rem 1.25rem; /* ~30px 20px converted to rem */
  }

  .stats-section .stat {
    width: 100%;
    justify-content: center;
  }

  .stats-section .number {
    font-size: 3.75rem; /* ~60px converted to rem */
    -webkit-text-stroke: 0.03125rem #999; /* ~0.5px converted to rem */
  }

  .stats-section .label {
    font-size: 0.75rem; /* ~12px converted to rem */
    margin-left: -0.9375rem; /* ~-15px converted to rem */
  }

  /* MISSION SECTION - Basic adjustments for mobile */
  .mission-wrapper {
      flex-direction: column;
      gap: 2.5rem; /* ~40px */
      align-items: center;
  }

  .mission-text {
      text-align: center;
      max-width: 100%;
  }

  .mission-text .description {
      margin-left: auto;
      margin-right: auto;
  }

  .cards-grid {
      grid-template-columns: 1fr; /* Stack cards in a single column */
      gap: 1.5rem; /* Adjust gap between stacked cards */
  }

  .flip-card {
      width: 100%; /* Make cards take full width of grid column */
      height: 18rem; /* Give them a fixed height or adjust as needed */
  }

  /* VISION SECTION - Basic adjustments for mobile */
  .vision-container {
      flex-direction: column;
      gap: 2.5rem; /* ~40px */
      align-items: center;
  }

  .vision-image {
      flex: 0 0 80%; /* Allow image to take more width on mobile */
      max-width: 25rem; /* Optional: cap max width to prevent giant images */
  }

  .vision-content {
      text-align: center;
  }

  .tabs {
      justify-content: center; /* Center tabs */
      gap: 1rem; /* Smaller gap for tabs */
  }

  .tab {
      font-size: 1.125rem; /* Smaller tab font */
      padding: 0.5rem 0.25rem; /* Adjust padding */
  }

  .main-title {
      font-size: 2rem; /* Smaller main title */
  }

  .tab-content p {
      font-size: 0.9375rem; /* Smaller paragraph text */
  }

  /* FOOTER - Basic adjustments for mobile */
  .footer-container {
      flex-direction: column;
      text-align: center;
      gap: 2rem; /* Adjust gap */
  }

  .footer-col {
      min-width: unset; /* Remove min-width to allow collapsing */
      width: 100%;
  }

  .footer-logo img {
      margin-left: auto;
      margin-right: auto;
  }

  .footer-subscribe .subscribe-line {
      justify-content: center; /* Center subscribe line */
  }

  .contact-icons {
      justify-content: center; /* Center social icons */
  }

  .footer-bottom-nav {
      justify-content: center; /* Center bottom nav */
  }

   .scrolling-wrapper {
    padding: 1.5rem 0; /* Adjust padding for mobile to be less tall */
  }

  .scroll-row {
    font-size: 2.5rem; /* Smaller font size for mobile (~40px) */
    gap: 2.5rem; /* Reduce gap between words for mobile */
    animation-duration: 15s; /* Make the animation faster for less text */
  }

  .scroll-row span {
    -webkit-text-stroke: 0.03125rem #666; /* Thinner stroke for smaller text (~0.5px) */
  }

  .mission-wrapper {
      flex-direction: column; /* Stack mission content vertically */
      gap: 2.5rem; /* Adjust gap between text block and cards grid */
      align-items: center; /* Center items in the column */
      padding: 0 1.25rem; /* Add horizontal padding to wrapper */
  }

  .mission-text {
      text-align: center; /* Center align text content */
      max-width: 100%; /* Allow text block to take full width */
  }

  .mission-text .description {
      margin-left: auto; /* Center description paragraph */
      margin-right: auto;
  }

  .cards-grid {
      grid-template-columns: 1fr; /* Stack cards in a single column */
      gap: 1.5rem; /* Adjust gap between stacked cards */
      width: 100%; /* Ensure grid takes full width of its container */
      justify-items: center; /* Center items within the grid columns */
  }

  .flip-card {
      width: 100%; /* Make cards take full width of the grid column */
      /* Increased height to provide more space for text */
      height: 22rem; /* ~352px (previously 18rem/~288px) */
      /* Optional: Limit max-width to prevent cards from being too wide on some devices */
      max-width: 20rem; /* ~320px */
      margin-left: auto; /* Center the card if max-width is applied */
      margin-right: auto;
  }

  /* Optional: Adjust font size for the content on the back of the card */
  .flip-card-back p {
      font-size: 0.9375rem; /* ~15px - Slightly smaller for better fit */
      line-height: 1.5; /* Ensure good readability */
  }


}