@charset "UTF-8";

/* ========================= */
/* 📌 GLOBAL  */
/* ========================= */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0; 
}

html {
  font-size: 16px;
}

body {
  overflow-x: hidden;
}
.modal {
  overflow-x: visible !important;
} 

/* ========================= */
/* 📌 HEADER, LOGO, NAV  */
/* ========================= */

.nav-links ul li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #0a3d62;
  color: rgb(248, 246, 246) !important;
}

.navbar-nav {
  text-align: right;
  margin-left: .5rem;
}

/* Underline animation for nav links */
.navbar .nav-link {
  position: relative;
  color: white; /* ensure text is white */
  padding-bottom: 4px; /* spacing for underline */
  transition: color 0.3s ease;
}

.navbar .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* thickness of underline */
  background-color: #0061AA; /* underline color */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after {
  transform: scaleX(1);
  transform-origin: left;
}

#logoone {
  max-width: 60px;
}
 
/* ========================= */
/* 📌 LINKS  */
/* ========================= */

a, .icons {
  text-decoration: none !important;
  cursor: pointer;
}

a:hover, a:focus, .icons:hover, .icons:focus {
  text-decoration: none;
  cursor: pointer;
}

footer a, footer .icons {
  text-decoration: none;
  cursor: pointer;
}

.bold {
  font-weight: bold;
}

/* ========================= */
/* 📌 COLOUR  */
/* ========================= */

.dkblue {
  color: #0a3d62;
}

.dkgrnblu {
  color: #082733;
}

.bluey {
  color: #0061AA;
}

.blu-blu {
  color: #0058cb;
}

.neige {
  color: #f8f9fa;
}

.grey {
  color: #6c757d;
}

.lightblk {
  color: #141414;
}

.black {
  color: #000;
}

/* ========================= */
/* 📌 COLOUR BACKGROUND  */
/* ========================= */

.bg-dkblue {
  background-color: #0a3d62;
}

.bg-dkgrnblu {
  background-color: #082733;
}

.bg-bluey {
  background-color: #0061AA;
}

.bg-neige {
  background-color: #f8f9fa;
}

.bg-grey {
  background-color: #6c757d;
}

.bg-blu {
  background-color: #0058cb;
}

.bg-blk {
  background-color: #000;
}

/* ========================= */
/* 📌 HERO  */
/* ========================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  padding: 0;
  margin: 0;
  background: #0a3d62; /* solid fallback while image loads */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-bg,
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Background image layer */
.hero-bg {
  background: url('../images/pexels-chris-f-38966-3714198.jpg') no-repeat center center;
  background-size: cover;
  opacity: 0; /* start hidden; GSAP will fade this in */
}

/* Blue overlay layer */
.hero-overlay {
  background: #0a3d62;
  opacity: 1; /* start fully blue; GSAP will fade this down */
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
}

.background-second-div {
  position: relative;
  width: 100%;
  min-height: 70vh;
  padding: 2rem;
  background: url('../images/pexels-pixabay-326333.jpg') no-repeat center center;
  background-size: cover;
  background-attachment: scroll;
  overflow: hidden;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: start;
}

.background-second-div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 0;
}

.background-second-div * {
  position: relative;
  z-index: 1;
  color: white;
}

/* ========================= */
/* 📌 Intro on HERO  */
/* ========================= */


#about .card .row {
  display: flex;
  align-items: stretch;
}

#about .card img {
  height: 100%;
  object-fit: cover; 
  width: 100%;
  max-height: 300px;
}


/* ========================= */
/* 📌 headings, text */
/* ========================= */

.p {
  font-size: 1.5rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.h1 {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.h2 {
  font-size: 1.7rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.h3 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.h4 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.h5 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.h6 {
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.a {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  cursor: pointer;
}

ul li {
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 400;
}


/* ========================= */
/* 📌 Section - white space */ 
/* ========================= */




/* ========================= */
/* 📌 Cards  */
/* ========================= */

/* Section Title and Description */
.section-title {
  font-size: 2.5rem;
  font-family: 'Oswald', sans-serif;
  color: #062e4b;
}

.section-description {
  font-family: 'Fira Sans', sans-serif;
}

/* Card Icon */
.card-icon {
  font-size: 6rem;
  color: #0056b3;
  margin-bottom: 1rem;
}

/* Card Title */
.card-title {
  font-size: 1.75rem;
  font-family: 'Oswald', sans-serif;
  margin-bottom: 4rem;
}

/* Card List */
.card-list {
  text-align: left;
  padding-left: 1.5rem;
  list-style-type: disc;
  font-family: 'Fira Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.card-list li {
  margin-bottom: 0.5rem;
}



/* ========================= */
/* 📌 Image masonry  */
/* ========================= */

 .image-wrapper {
  width: 100%;
  height: 250px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}


.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================= */
/* 📌 Clients */ 
/* ========================= */

/* Clients Section */
#clients {
  background-color: #f8f9fa;
  padding: 3rem 0;
}

#clients .client-logo {
  max-width: 150px !important; 
  height: auto;
  filter: grayscale(100%); 
  transition: filter 0.3s ease;
}

@media (min-width: 768px) {
  #clients .client-logo {
    max-width: 200px !important;
  }
}

#clients .client-logo:hover {
  filter: grayscale(0);
  transform: scale(1.1); 
}

#clients h2 {
  color: #0058cb;
  margin-bottom: 1rem;
}

#clients p {
  color: #6c757d;
}


#emergency-service {
  position: relative;
  background: linear-gradient(to right, #000 0%, #0a3d62 30%, #0a3d62 70%, #000 100%);
  padding: 2rem 0;
}

#emergency-service h2 {
  color: #eeeff1;
  margin-bottom: 1rem;
}

#emergency-service p {
  color: #eeeff1;
  font-size: 1.2rem;
}

#about h2 {
  color: #000e1f;
  margin-bottom: 1rem;
}

.card-body {
  padding-left: 3rem;
}

/* ========================= */
/* 📌 RESPONSIVE */
/* ========================= */


/* tablet */
@media (max-width: 768px) {
  .actionTwo-link {
    width: auto;
    padding: 1.25rem;
    font-size: 1rem; 
    text-align: center; 
    display: inline-block;
  }

.text-first {
  font-size: 2rem;
}

#logoone {
  max-width: 45px;
}

.navbar-brand {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.navbar-brand .ms-2 .fw-bold {
  font-size: 1rem !important;
}

.navbar-brand .ms-2 .small {
  font-size: 0.75rem !important;
}

.background-image-div {
  text-align: center;
  justify-content: center;
}

.intro-hello {
  text-align: center !important;
}

  .d-flex.align-items-center.gap-3 {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .actionOne-link {
    width: auto;
    padding: 1.25rem;
    font-size: 1rem; 
    text-align: center; 
    display: inline-block;
  }

  .text-black {
    font-size: 0.85rem;
  }
  
}

.emergency-btn:hover {
  background-color: #0a3d62 !important;
  color: #ffffff !important;
}

/* Hide elements with data-animate attribute initially */
[data-animate] {
  opacity: 0;
}

/* Special handling for hero section */
#introduction[data-animate] {
  opacity: 0;
  transform: translateY(50px);
}