:root {
  --primary: #ec6e00;   /* Primary color */
  --secondary: #4c4b4c; /* Secondary color */
}

/* Global resets & typography */
body {
  font-family: "Nunito", sans-serif;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth; /* For smooth anchor scrolling */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* 1) Only add top padding for non-hero sections */
section {
  padding-top: 70px;
}
#hero {
  padding-top: 0; /* Remove top padding on the hero section */
}

/* NAVBAR */
.navbar {
  background-color: #fff;  /* White navbar background */
  transition: background-color 0.3s ease-in-out;
}

.navbar-brand .logo-text {
  color: var(--primary);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-link {
  color: var(--secondary) !important;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--primary) !important;
}

/* On scroll, show subtle shadow (no color change) */
.scrolled-nav {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* CAROUSEL (Hero) */
/* 2) Each carousel item now fills the viewport minus 70px (navbar height) */
#heroCarousel .carousel-item {
  height: calc(100vh - 70px); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}




/* 3) We can make sure the container within slides is centered properly */
.carousel-container {
  height: 100%; /* Match the parent’s (carousel-item) height */
  display: flex; 
  align-items: center;
  justify-content: center;
}

/* Limit hero text width for better readability */
.carousel-container .container {
  max-width: 700px;
}

/* ABOUT SECTION */
.about-section img {
  max-width: 100%;
  height: auto;
}

/* SERVICES SECTION */
.services-section {
  background-color: var(--secondary);
  color: #ffffff;
}

.service-box {
  background-color: #fff;
  color: var(--secondary);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* CONTACT SECTION */
.contact-section {
  background-color: #f9f9f9;
}

/* FOOTER */
.footer-section {
  background-color: var(--secondary);
}

/* SECTION TITLES */
.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  margin-bottom: 2rem;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 992px) {
  /* If needed, more space for the nav on smaller screens */
  section:not(#hero) {
    padding-top: 100px;
  }
  #heroCarousel .carousel-item {
    height: calc(100vh - 60px); /* maybe less nav height on mobile */
  }
}

html {
  scroll-padding-top: 50px; /* or whatever your navbar height + spacing is */
}