/* ----- Colors ----- */
:root {
  --primary-blue: #003366;
  --secondary-navy: #01274d;
  --neutral-light: #f8f9fa;
  --neutral-dark: #333;
  --beige: #d6c6a1;
}

/* ----- Body ----- */
body {
  font-family: 'Roboto', sans-serif;
  scroll-behavior: smooth;
  color: var(--neutral-dark);
}

/* ----- Navbar ----- */

.navbar {
  background-color: #fff !important;
  transition: all 0.3s ease;
  box-shadow: none;
}

.navbar.scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* subtle shadow on scroll */
}

.navbar a {
  color: #222 !important; /* dark gray text for contrast */
  font-weight: 600;
  transition: color 0.2s ease;
}

.navbar a:hover {
  color: var(--secondary-navy) !important; /* blue accent on hover */
}

.navbar-brand img {
  height: 60px; /* default for desktop */
}

@media (max-width: 768px) {
  .navbar-brand img {
    height: 45px; /* smaller on mobile */
  }
}
/* ----- Hero Section ----- */
#hero { height: 60vh; background-color: var(--secondary-navy); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; padding: 0 20px; } #hero h1 { font-size: 3rem; margin-bottom: 1rem; font-weight: 800; animation: fadeInDown 1s ease; } #hero p { font-size: 1.5rem; margin-bottom: 2rem; font-weight: 600; animation: fadeInUp 1.2s ease; } #hero .btn-primary { background-color: white; color: var(--primary-blue); border: none; font-weight: 600; padding: 0.75rem 2rem; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: background 0.3s, transform 0.3s; } #hero .btn-primary:hover { background-color: #e9e2d4; transform: translateY(-2px); }


/* Animations */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ----- Sections ----- */

/* About Us section */
#about {
  background-color: #f5f7fa; /* soft gray-blue */
  padding: 80px 0;
}

/* Services section */
#services {
  background-color: #ffffff; /* clean white */
  padding: 80px 0;
}

/* Section headings */
section h2 {
  text-align: center;
  margin-bottom: 50px;
  font-weight: 600;
  color: var(--secondary-navy);
}

/* ----- Services ----- */

.service-box {
  text-align: center;
  padding: 30px 20px;
  border-radius: 12px;
  background-color: var(--neutral-light);
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
}

/* Remove background circle from icon */
.service-box i {
  background-color: transparent; /* removed blue circle */
  color: var(--primary-blue); /* icon color */
  width: auto;
  height: auto;
  line-height: normal;
  border-radius: 0;
  margin-bottom: 20px;
  font-size: 2rem; /* make icon slightly larger */
  transition: color 0.3s, transform 0.3s;
}

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

.service-box:hover i {
  color: var(--secondary-navy);
  transform: rotate(10deg);
}

/* ----- Flex layout for 3 boxes per row ----- */
#services .row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

#services .col-md-4 {
  flex: 0 0 calc(33.333% - 1rem); /* 3 per row with gap accounted for */
  display: flex;
}



/* ----- Gallery ----- */

#gallery {
  width: 100%;
  background-color: #f8f9fa; /* soft light grey-blue */
  padding: 60px 0;           /* adds space above/below */
}

/* wrapper gives us 85-90% width centered on page */
.gallery-wrapper {
  width: 88%;          /* adjust between 85–90% */
  margin: 0 auto;      /* centers it */
}

.gallery-img {
  width: 100%;
  height: 350px;       /* adjust as needed */
  object-fit: cover;   /* avoid weird stretching */
  border-radius: 8px;
  display: block;

  transition: transform 0.3s ease;
}

.gallery-img:hover {
  transform: scale(1.04);
}



/* ----- Contact Form ----- */
#contact form .form-control {
  margin-bottom: 20px;
}
#contact button {
  background-color: var(--primary-blue);
  border: none;
}
#contact button:hover {
  background-color: var(--secondary-navy);
}

/* ----- Responsive Map ----- */
.map-location {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.map-location iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;
  border: 0;
}

#contact.bg-light {
  background-color: #ffffff !important;
}
/* ----- Footer ----- */
footer {
  width: 100%;
  background-color: var(--secondary-navy);
  color: white;
  text-align: center;
  padding: 30px 20px;
  box-sizing: border-box; /* ensures padding doesn’t break width */
}