body {
  font-family: Arial, sans-serif;
  scroll-behavior: smooth;
}

header {
  z-index: 999;
}

/* NAV LINKS */
.nav-link {
  color: #333 !important;
  margin-left: 15px;
}

.nav-link:hover {
  color: #007bff !important;
}

/* ⭐ LOGO FIX — BIGGER + MORE LEFT */
/* Make LOGO bigger + push it more left */
.logo img {
  height: 93px;        /* increase size */
}

header .container {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* keeps everything left */
  gap: 40px; /* adds spacing so logo doesn’t smash into menu */
}

nav {
  margin-left: auto;  /* keeps the menu on the right */
}


/* GENERAL PAGE PADDING */
section {
  padding: 60px 0;
}

/* HERO SECTION */
#hero {
  background: url('../images/hero.jpg') no-repeat center center;
  background-size: cover;
  color: black;
  padding-top: 100px;
  transition: background-position 0.2s ease-out;
}



#hero h1 {
  font-size: 64px;
  font-weight: bold;
  color: black;
}

#hero h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: black;
}

/* BUTTON */
.btn-primary {
  background-color: #007bff;
  border: none;
}

/* FOOTER */
footer {
  background: #222;
}
.about-img {
  max-width: 50%;  /* controls the size */
  height: auto;    /* keeps aspect ratio */
  display: block;
  margin: 0 auto;  /* centers the image */
}/* ===== About Section Styling ===== */
#about .about-img {
  max-width: 90%;      /* makes the image slightly smaller */
  height: auto;
  display: block;
  margin: 0 auto;      /* centers the image in its column */
}

#about .col-md-6 p {
  font-size: 18px;     /* makes the text bigger */
  line-height: 1.8;    /* adds more space between lines */
  margin-bottom: 20px; /* adds space between paragraphs */
}
/* ===== Service Images Styling ===== */
#services .col-md-4 img {
  max-width: 100%;        /* image scales to column width */
  height: 200px;          /* makes all service images same height */
  object-fit: cover;      /* crops/adjusts image to fill box */
  margin-bottom: 15px;    /* space between image and heading */
  border-radius: 8px;     /* optional: rounded corners to match style */
}
#contact a:hover i {
  color: #007bff;
  transition: color 0.3s;
}
/* Fade-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(30px); /* starts slightly lower */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0); /* moves into place */
}