*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #f0f0f0;
}

/* Newsletter Message Styles */
.newsletter-message {
  margin-top: 15px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
}

.newsletter-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.newsletter-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.newsletter-message:empty {
  display: none;
}

/* Mobile-specific improvements */
@media (max-width: 768px) {

  /* Improve text readability on mobile */
  body {
    font-size: 16px;
    /* Prevent zoom on iOS */
    line-height: 1.6;
  }

  /* Better touch targets */
  button,
  input[type="submit"],
  input[type="button"],
  a.button,
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Improve form elements */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
    /* Prevent zoom on iOS */
    padding: 12px;
    border-radius: 6px;
  }

  /* Better spacing for mobile */
  .container,
  .main-content,
  .section {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Improve image loading */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Better scrolling */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* Fix for iOS Safari viewport issues */
  @supports (-webkit-touch-callout: none) {

    .hero-background-image,
    .gallery-img,
    .card-image,
    .article-image {
      object-fit: cover;
    }
  }

  /* Improve performance */
  .hero-background-image,
  .gallery-img,
  .card-image,
  .article-image {
    will-change: transform;
  }
}

@media (max-width: 480px) {

  /* Extra small device improvements */
  body {
    font-size: 15px;
  }

  /* Smaller touch targets for very small screens */
  button,
  input[type="submit"],
  input[type="button"],
  a.button,
  .btn {
    min-height: 40px;
    min-width: 40px;
    font-size: 14px;
  }

  /* Compact form elements */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    font-size: 15px;
    padding: 10px;
  }
}

/* Prevent horizontal scroll on mobile */
html,
body {
  overflow-x: hidden;
  width: 100%;
}

/* Improve focus states for accessibility */
button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Better loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Improve button hover states on mobile */
@media (hover: none) {

  button:hover,
  a:hover,
  .btn:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Fix for Android Chrome viewport issues */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

  .hero-content,
  .about-us-content,
  .success-stories-text-content {
    transform: translateZ(0);
  }
}