/* ========== Global Styles ========== */
body {
  font-family: 'Roboto', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #222;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== Navbar ========== */
.navbar-dark .navbar-nav .nav-link {
  color: #ddd;
  transition: 0.3s;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
  color: #ffc107;
}

/* ========== Hero / Inner Hero ========== */
.hero, .inner-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 70vh;
  padding: 100px 0;
  position: relative;
}
.hero::before, .inner-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
}
.hero .container, .inner-hero .container {
  position: relative;
  z-index: 2;
}

/* ========== Buttons ========== */
.btn-primary {
  background-color: #0277bd;
  border: none;
}
.btn-primary:hover {
  background-color: #015b8a;
}
.btn-warning {
  font-weight: 600;
}

/* ========== Sections ========== */
section {
  padding: 60px 0;
}
.bg-light {
  background-color: #f9f9f9 !important;
}
.text-white {
  color: #fff !important;
}

/* Background video layout */
.hero { 
  position: relative; 
  min-height: 60vh;             /* tweak as needed */
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;         /* keep links in front clickable */
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* fill the section */
}

/* Optional: dim video for text contrast */
.hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);  /* adjust darkness */
}

/* Keep content above video */
.hero .container { z-index: 1; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }       /* falls back to poster image */
}


/* ========== Service Boxes / Cards ========== */
.service-box, .p-4.bg-light, .p-4.bg-white {
  transition: transform 0.3s, box-shadow 0.3s;
}
.service-box:hover, .p-4.bg-light:hover, .p-4.bg-white:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

/* ========== Clients ========== */
.grayscale {
  filter: grayscale(100%);
  opacity: 0.8;
  transition: 0.3s;
}
.grayscale:hover {
  filter: none;
  opacity: 1;
}

/* ========== Footer ========== */
footer {
  font-size: 0.9rem;
}
footer a.btn {
  margin-top: 10px;
}

/* ========== Forms ========== */
form .form-control {
  border-radius: 4px;
  border: 1px solid #ccc;
}
form .btn-primary {
  background-color: #0277bd;
  border: none;
}
form .btn-primary:hover {
  background-color: #015b8a;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .hero, .inner-hero {
    padding: 80px 0;
  }
  h1.display-5, h1.display-4 {
    font-size: 2rem;
  }
}