/* Hero spacing and responsive adjustments */

/* Adjusting the hero section spacing */
.hero {
  padding-top: 8vh;  /* Add some space at the top of the hero section */
  min-height: 100vh; /* Ensure it takes at least the full viewport height */
  height: auto;     /* Allow it to grow if content requires more space */
}

/* Ensure the hero row has proper spacing */
.hero-row {
  padding: 2rem 0;
}

/* Better vertical spacing on smaller screens */
@media (max-width: 991px) {
  .hero {
    padding-top: 6vh;
  }
  
  .hero-row {
    padding-top: 1rem;
  }
}

@media (max-width: 767px) {
  .hero {
    padding-top: 5vh;
  }
  
  .hero-row {
    padding-top: 0.5rem;
  }
}

/* Additional spacing adjustments for very small screens */
@media (max-width: 480px) {
  .hero {
    padding-top: 4vh;
  }
  
  .hero-row {
    padding-top: 0;
  }
  
  /* Improve spacing around image on small screens */
  .hero-image-container {
    margin: 0.5rem auto 1rem;
  }
}

/* Ensure images throughout the site are responsive */
.about-image,
.service-thumb,
.contact-image,
.navbar-brand img {
  max-width: 100%;
  height: auto;
}

/* Responsive Logo in navbar */
.navbar-brand img {
  max-height: 50px;
  width: auto;
}

@media (max-width: 480px) {
  .navbar-brand img {
    max-height: 40px;
  }
}

/* Ensure all sections have consistent responsive spacing */
.section-padding {
  padding: 7rem 0;
}

@media (max-width: 991px) {
  .section-padding {
    padding: 5rem 0;
  }
}

@media (max-width: 767px) {
  .section-padding {
    padding: 4rem 0;
  }
}

@media (max-width: 480px) {
  .section-padding {
    padding: 3rem 0;
  }
}