/* Global Typography Settings */
body, html {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: #333;
}

h1, h2, h3, h4, h5, h6, .site-title, .section-title {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  letter-spacing: 0.5px;
  font-weight: 700;
}

p {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  letter-spacing: 0.1px;
}

/* Container consistency */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Consistent section padding */
.main-section {
  padding: 60px 0;
}

@media (max-width: 768px) {
  .main-section {
      padding: 40px 0;
  }
}

/* Consistent section title styling */
.section-title {
  text-align: center;
  font-size: 2.1rem;
  font-weight: bold;
  position: relative;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.section-title .section-underline {
  display: block;
  margin: 12px auto 0 auto;
  width: 60px;
  height: 5px;
  background: transparent;
  border-radius: 2px;
  content: '';
}

/* --- Animation Classes --- */
.animated {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(.6,.2,.1,1), transform 0.7s cubic-bezier(.6,.2,.1,1);
  will-change: opacity, transform;
}

.animated.fade-in {
  opacity: 1 !important;
  transform: none !important;
}

.animated-fast {
  transition-duration: 0.4s;
}

/* Slider specific (home) */
.slider-fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(.6,.2,.1,1), transform 0.8s cubic-bezier(.6,.2,.1,1);
}

.slider-fade-in.visible {
  opacity: 1;
  transform: none;
}

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden; /* Only hide horizontal overflow if you have no horizontal scroll needs */
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: border-box; /* Ensures consistent sizing throughout your site */
}

@media (max-width: 600px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

}
@media (max-width: 600px) {
  .aboutus-section,
  .whychooseus-section,
  .contactus-section,
  .footer-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}