/* Mobile responsiveness fixes */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

@media (max-width: 767px) {
  /* Fix header top bar */
  .bg-dark.py-1.text-white .container {
    flex-direction: column;
    align-items: center;
    padding: 5px;
  }
  
  .bg-dark.py-1.text-white .container > div {
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
  }
  
  /* Fix footer newsletter form */
  #newsletter-form .input-group {
    flex-wrap: wrap;
  }
  
  #newsletter-form .form-control {
    border-radius: 4px !important;
    margin-bottom: 5px;
  }
  
  #newsletter-form .btn {
    border-radius: 4px !important;
    width: 100%;
  }
  
  /* Fix social icons spacing */
  .social-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  /* Fix navbar issues */
  .navbar .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .navbar-brand img {
    max-height: 35px;
    width: auto;
  }
  
  .navbar-collapse {
    max-width: 100%;
  }
  
  .navbar-nav {
    width: 100%;
  }
  
  .navbar .btn {
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
  
  /* Ensure content fits within viewport */
  .container {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    max-width: 100%;
  }
  
  /* Fix oversized elements */
  img, video, iframe, svg, canvas, object {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
  
  /* Adjust table display for mobile */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  
  /* Fix any elements that might be causing overflow */
  .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }
  
  /* Ensure columns don't overflow */
  [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  /* Fix for carousel items */
  .carousel-item {
    height: auto !important;
  }
  
  /* Footer specific fixes */
  footer .row {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  footer [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  footer .footer-link {
    display: inline-block;
    padding: 8px;
    margin: 2px;
  }
  
  /* Fix for hero section */
  .hero {
    height: auto !important;
    min-height: 400px !important;
  }
  
  /* Adjust font sizes for mobile */
  h1 {
    font-size: 1.8rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  h3 {
    font-size: 1.3rem !important;
  }
  
  /* Fix padding for sections */
  .section {
    padding: 40px 0 !important;
  }
  
  /* Fix for any absolute positioned elements */
  .position-absolute {
    position: relative !important;
  }
  
  /* Fix for any fixed width elements */
  .fixed-width {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* Fix for specific screen sizes */
@media (max-width: 576px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  /* Further reduce font sizes */
  h1 {
    font-size: 1.6rem !important;
  }
  
  h2 {
    font-size: 1.4rem !important;
  }
  
  /* Adjust button sizes */
  .btn {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
  }
}

/* Fix for iPhone 5/SE and other small screens */
@media (max-width: 320px) {
  h1 {
    font-size: 1.4rem !important;
  }
  
  h2 {
    font-size: 1.2rem !important;
  }
  
  p {
    font-size: 0.9rem;
  }
  
  .btn {
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
  }
}