/* Apply Manrope as the default font for the entire document */
html,
body {
  font-family: "Manrope", Geneva, Verdana, sans-serif;
  font-optical-sizing: auto;
}

/* Skip to main content link for keyboard users */
.skip-to-content {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: #e0c696;
  color: #143852;
  text-decoration: none;
  font-weight: bold;
}
.skip-to-content:focus {
  left: 0;
  top: 0;
}

/* Logo styling */
.logo-text {
  letter-spacing: 3.2px;
  font-size: 32px; /* Default size for mobile */
}

/* Media query for tablets and desktop */
@media (min-width: 768px) {
  .logo-text {
    font-size: 32px; /* Larger size for bigger screens */
  }
}

/* Specific text sizes according to requirements */
.menu-text {
  font-size: 18px; /* Font size for menu options */
}

.hero-title {
  font-size: 32px; /* Size for mobile */
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 40px; /* Size for hero banner H1 title */
  }
}

.hero-description {
  font-size: 24px; /* Size for mobile */
  color: #f3f3f3;
}

.card-description {
  font-size: 24px;
  font-weight: 600;
}

.button-text {
  font-size: 18px; /* Button text size */
}

.section-title {
  font-size: 32px; /* Size for mobile */
}

/* Custom styles that can't be achieved with Tailwind */
.hero-section {
  min-height: 500px;
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

.founder-journey-card {
  border-radius: 16px; /* Equivalent to var(--sds-size-radius-400) */
  border: 2px solid #1438521a; /* Converted rgba(20, 56, 82, 0.10) to hex with alpha */
  background: rgba(20, 56, 82, 0.03);
  width: 100%;
  max-width: 317px;
  margin: 0 auto;
}

/* Styles for FAQs */
.faq-toggle:hover {
  background-color: rgba(20, 56, 82, 0.05);
}

.faq-content {
  border-top: none !important;
  background-color: rgba(20, 56, 82, 0.02);
  padding-top: 0;
}

/* Desktop hero styles */
@media (min-width: 768px) {
  .hero-bg-image {
    position: absolute;
    top: 0;
    left: 300px;
    width: 100%;
    height: 100%;
    background-image: url("../images/Hero-banner.webp");
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    z-index: 0;
  }

  .curved-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background-color: #143852;
    border-radius: 0 300px 300px 0;
    z-index: 1;
  }
}

/* Mobile hero styles */
@media (max-width: 767px) {
  .hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        0deg,
        rgba(20, 56, 82, 0.8) 0%,
        rgba(20, 56, 82, 0.6) 100%
      ),
      url("../images/Hero-banner.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }

  .curved-bg {
    display: none; /* Hide curved background on mobile */
  }

  .hero-cta-button {
    width: 100%;
    text-align: center;
  }
}

/* Mobile styles */
@media (max-width: 767px) {
  /* Make buttons full width on mobile */
  .mobile-full-width {
    width: 100%;
    display: block;
    text-align: center;
  }

  /* Center text on mobile except for hero, FAQs and footer */
  .mobile-text-center p {
    text-align: center;
  }

  .mobile-text-center h2,
  .mobile-text-center h3,
  .mobile-text-center h4 {
    text-align: center;
  }
}