/* HTML Typography Styles - Using semantic HTML elements */
h1 {
  font-family: 'Mona Sans', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  font-stretch: expanded;
  margin: 0;
  color: #FFFFFF;
}

h2 {
  font-family: 'Mona Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  font-stretch: expanded;
  margin: 0;
  color: #FFFFFF;
}

h3 {
  font-family: 'Mona Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  font-stretch: expanded;
  margin: 0;
  color: #FFFFFF;
}

h4 {
  font-family: 'Mona Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: expanded;
  margin: 0;
  color: #FFFFFF;
}

h5 {
  font-family: 'Mona Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  font-stretch: expanded;
  color: #FFFFFF;
}

h6 {
  font-family: 'Mona Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  font-stretch: expanded;
  color: #FFFFFF;
}

p {
  font-family: 'Mona Sans', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
  color: #FFFFFF;
}

p.large {
  font-size: 1.25rem;
  line-height: 1.5;
}

p.small {
  font-size: 0.875rem;
}

/* Contact Input Styles - Specific overrides for form elements */
.contact-input,
input.contact-input,
textarea.contact-input {
  font-family: 'Mona Sans', sans-serif !important;
  font-weight: 400;
  color: #FFFFFF;
}

/* Ensure placeholder text also uses the correct font */
.contact-input::placeholder,
input.contact-input::placeholder,
textarea.contact-input::placeholder {
  font-family: 'Mona Sans', sans-serif !important;
  font-weight: 400;
  opacity: 0.7;
}

/* Legal Pages Typography Container */
.legal-container {
  width: 50%;
  min-width: 300px;
  margin: 0 auto;
}

/* Account Deletion Mobile Styles */
@media (max-width: 768px) {
  .content-section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .content-section h1 {
    width: calc(100% - 40px) !important;
    padding: 0 !important;
    margin: 0 auto !important;
    min-width: auto !important;
    box-sizing: border-box !important;
  }

  .deletion-container {
    width: 100% !important;
    padding: 0 20px !important;
    min-width: auto !important;
    box-sizing: border-box !important;
  }

  .deletion-container,
  .deletion-container p,
  .deletion-container.large,
  .legal-container,
  .legal-container.large {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  .legal-container,
  .content-section h2 {
    width: calc(100% - 40px) !important;
    padding: 0 !important;
    margin: 0 auto !important;
    min-width: auto !important;
    box-sizing: border-box !important;
  }

  .content-section h2 {
    font-size: 2rem !important;
  }

  .legal-container em,
  .legal-container strong {
    font-size: 1.1rem !important;
  }

  .deletion-input-wrapper {
    width: 100% !important;
    padding: 0 20px !important;
    min-width: auto !important;
    box-sizing: border-box !important;
  }

  .deletion-input {
    font-size: 1rem !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* About Us Mobile Fixes */
  .content-section h1 {
    font-size: 2.2rem !important;
  }

  .team-cards-row {
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  .team-card {
    border-radius: 30px !important;
    flex: 0 0 70px !important;
    width: 100% !important;
    transition: flex-basis 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.6s ease-out !important;
  }

  .team-card-active {
    flex: 0 0 calc(100vw - 40px) !important;
  }

  .team-card-info {
    align-items: center !important;
    padding: 16px !important;
  }

  .team-card-info h3 {
    text-align: center !important;
  }

  .team-card-active .team-card-info h3 {
    font-size: 1.25rem !important;
  }

  .core-values-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  .partners-section-wrapper {
    height: 70px !important;
    margin: 0 20px !important;
    width: calc(100vw - 40px) !important;
  }

  .partner-item img {
    height: 24px !important;
  }

  .partner-item h4 {
    font-size: 1rem !important;
  }

  .glowing-title {
    width: 100% !important;
    min-width: auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .glowing-title-circle {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .glowing-title-text {
    font-size: 2.2rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  .glowing-title-desc {
    font-size: 1rem !important;
    text-align: center !important;
  }

  /* Footer Mobile Fixes */
  .site-footer {
    height: auto !important;
    min-height: auto !important;
    border-radius: 30px !important;
  }

  .footer-columns {
    padding: 250px 40px 20px 40px !important;
    gap: 40px 20px !important;
  }

  .footer-col-company {
    width: calc(50% - 10px) !important;
    margin-right: 0 !important;
    min-width: auto !important;
  }

  .footer-col-products {
    width: calc(50% - 10px) !important;
    min-width: auto !important;
  }

  .footer-col-socials {
    width: 100% !important;
    margin-left: 0 !important;
    min-width: auto !important;
  }

  .footer-socials-grid {
    grid-template-columns: repeat(2, auto) !important;
  }

  .footer-bottom-bar {
    padding: 0px 20px 40px 20px !important;
  }

  .footer-bottom-content {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .footer-copyright,
  .footer-legal-link,
  .footer-legal-dot {
    font-size: 0.70rem !important;
    white-space: nowrap !important;
  }

  .footer-glow {
    width: 200px !important;
    height: 200px !important;
    top: -80px !important;
    filter: blur(70px) !important;
    opacity: 0.8 !important;
  }

  .footer-glow-left {
    left: -30px !important;
  }

  .footer-glow-center {
    top: -40px !important;
  }

  .footer-glow-right {
    right: -30px !important;
  }
}