@charset "utf-8";
/* CSS Document */
body, html {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    .half-screen {
      height: 75vh;
      overflow: hidden;
    }

    .carousel-item {
      height: 100%;
      position: relative;
    }

    .carousel-item img {
      object-fit: cover;
      height: 100%;
      width: 100%;
    }

    .carousel-caption {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      bottom: auto;
      width: 100%;
      padding: 0;
      text-align: center;
    }

    .overlay-bg {
      background-color: rgba(0, 0, 0, 0);
      display: inline-block;
      padding: 20px 30px;
      border-radius: 0px;
      animation: fadeInUp 1.2s ease-out;
	  
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .navbar-custom {
      transition: background-color 0.3s ease;
    }

    .navbar-toggler:focus {
      box-shadow: none;
    }

    @media (max-width: 991.98px) {
      .navbar-collapse {
        background-color: #e11a1a !important;
      }
    }
	
	@media (max-width: 767.98px) {
  .half-screen {
    height: 50vh !important;
  }
  
      .carousel-caption {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      bottom: auto;
      width: 100%;
      padding: 0;
      text-align: center;
    }
}


.navbar-custom {
  background-color: transparent;
  transition: background-color 0.4s ease;
}

.navbar-scrolled {
  background-color: #ffca00 !important;
}




.fade-slide {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  /* Delay will be set dynamically via JS */
}

.fade-slide.visible {
  opacity: 1;
  transform: translateY(0);
}