h3 {
  font-weight: 600 !important; 
}

p {
  font-weight: 500;
}

.cta-footer-bl {
  background-color: #15256f !important;
}

.card-title {
    margin-bottom: var(--bs-card-title-spacer-y);
    color: var(--bs-card-title-color);
    font-weight: 700 !important;
}

/* =========================
   GLOBAL STYLES
========================= */

body {
  background-color: #f8f9fa;
  font-family: 'Montserrat', sans-serif !important;
}

header {
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

footer a:hover {
  text-decoration: underline;
  opacity: 0.85;
}

footer h5 {
  letter-spacing: 0.5px;
}

footer ul li {
  font-size: 14px;
}

/* =========================
   HERO SECTION (CONDENSED)
========================= */

.hero {
    position: relative;
    background-image: url('../images/hero-bg.jpg');
    background-size: 100%; 
    background-position: center top; 
    background-repeat: no-repeat;
    min-height: 85vh; 
    display: flex;
    align-items: center;
    text-align: center;
    color: #ffffff;
    padding: 100px 0;
    margin-top: -80px; 
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(12, 20, 58, 0.65); /* Keeps your text readable over the zoomed image */
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 30px;
}

/* =========================
   BUTTONS
========================= */

.btn-custom {
  background-color: #f3ba15;
  color: #000000;
  font-weight: bold;
  border: none;
}

.btn-custom:hover {
  background-color: #e0a00f;
  color: #000000;
}

/* =========================
   HERO FORM
========================= */

.hero-form {
  background: #ffffff;
  color: #000000;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.hero-form label,
.hero-form h4 {
  color: #000000;
  font-weight: 600;
}

/* =========================
   NAVBAR & MEGA MENU FIXES
========================= */

.navbar-collapse {
  position: relative;
}

/* Forces the mega menu to relate to the container width */
.nav-item.dropdown {
  position: static !important;
}

@media (min-width: 992px) {
  .navbar .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    pointer-events: none;
  }

  .navbar .dropdown.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Centering the Mega Menu */
  .mega-menu {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 95vw;
    max-width: 1140px;
    border: none;
    z-index: 1000;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    margin-top: 0 !important;
  }
}

/* =========================
   CONTENT SECTIONS (CONDENSED)
========================= */

.content-section {
  padding-top: 60px;    /* Reduced from 100px */
  padding-bottom: 60px; /* Reduced from 100px */
  scroll-margin-top: 90px;
}

.content-section:nth-child(even) {
  background-color: #f8f9fa;
}

/* Removed the + .content-section margin-top to prevent double-spacing */

.content-section h3 {
  margin-bottom: 30px;
}

/* =========================
   SWIPER STYLES
========================= */

.swiper {
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding-bottom: 50px; /* Space for pagination dots */
}

.services-swiper .card, 
.reviews-swiper .card {
  height: 100%;
}

.swiper-pagination {
  position: absolute;
  bottom: 0px !important; 
  width: 100%;
  text-align: center;
  z-index: 50;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #0c143a;
  opacity: 0.3;
  margin: 0 5px !important;
}

.swiper-pagination-bullet-active {
  background-color: #f3ba15;
  opacity: 1;
}

/* Ensures cards in Swiper are equal height */
.swiper-slide {
  height: auto !important;
}



/* =========================
   Modal STYLES
========================= */

.modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-header {
    background-color: #0c143a;
    color: white;
    border-radius: 15px 15px 0 0;
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Makes the 'X' white */
}