/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 60%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

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

.hero h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 10px 0 20px 0;
  font-size: 24px;
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
    line-height: 36px;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
  }
}

/* Backgrounds */

.light-background {
  --background-color: #f9f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Nav Link Underline */

.nav-link {
  transition: all 0.3;
  position: relative;
}

/* .nav-link:hover::after {
  content: "";
  height: 2px;
  width: 72%;
  background-color: aqua;
  position: absolute;
  bottom: 0px;
} */

/* Thicker underline */

/* .custom-underline {
  text-decoration: none;
  text-decoration-color: #87f6fc;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness 0.2s ease;
  color: inherit; 
}

.custom-underline:hover {
  text-decoration-thickness: 3px;
} */

/*--------------------------------------------------------------
# Work Pages
--------------------------------------------------------------*/
#work {
  padding: 10px 0;
  background: linear-gradient(to bottom, #3d79f1, #283a5a); /* Light blue to dark blue */
}

#work.work-scrolled,
#work.work-inner-pages {
  background: linear-gradient(to bottom, #0581aa, #283a5a); /* Light blue to dark blue */
  /* background: #283a5a; */
}

#work .logo {
  font-size: 30px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#work .logo a {
  color: #fff;
}

#work .logo img {
  max-height: 40px;
}

/*--------------------------------------------------------------
# about-2 Us from all pages except index.html
--------------------------------------------------------------*/

#about-2 {
  /* position: relative; */
  margin-top: 0px !important;
}

.fade-in {
  background-color: #060606;
}

/*  */

/* Fix sliders going into navbar */

/* Ensure the carousel is positioned correctly below the navbar */
.carousel {
  margin-top: 80px; /* Adjust based on your navbar height */
}

/* Prevent the carousel from overlapping */
/* .navbar {
  position: relative;
  z-index: 1050; 
} */

/* Ensure the carousel stays behind the navbar */
.carousel-inner {
  position: relative;
  z-index: 1;
}

.nav-link {
  text-decoration: none;
}

.nav-link:hover {
  text-decoration: underline;
  text-decoration-color: #87f6fc;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 4px;
  text-underline-offset: 10px;
  transition: text-decoration-color 0.25s ease, text-decoration-thickness 0.25s ease, text-underline-offset 0.25s ease;
}