.video-bg {
  z-index: -1;
}

.navbar.sticky-top {
  z-index: 1050; /* above video and other content */
  position: sticky; /* fallback in case class fails */
  top: 0;
}

.navbar{
    background-color: #00cccc;
    color: red;
}
/* Background Video */
.video-bg {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: -1;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 0;
}

/* Dark Overlay
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

Ensure all sections stay on top */
body > *:not(video):not(.overlay) {
  position: relative;
  z-index: 1;
}

/* Darker overlay + hero styles */
.hero-section {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6)),
              url('assets/images/your-background.jpg') center/cover no-repeat;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Animation Classes */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}

.fade-in.delay-1 { animation-delay: 0.3s; }
.fade-in.delay-2 { animation-delay: 0.6s; }
.fade-in.delay-3 { animation-delay: 0.9s; }


/* Styled Hire Me Button */
.btn-hire {
  background-color: #0dfde9;
  color: #080808;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  border-radius: 50px;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
  text-decoration: none;
}

.btn-hire:hover {
  background-color: #0bd79a;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(13, 253, 253, 0.5);
}






/* Hover effect */
.nav-link:hover {
  color: #67e5ea !important;
  text-decoration: none;
  font-weight: bold;
  font-style: italic;
  
  
}
.nav-bar{
    color: #080808;
}


.nav-link{
    font-weight: light;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

/* Scroll to Top */
#scrollTopBtn {
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 1050;
  display: none;
}

/* Footer */

.footer {
  background-color: #212529;
  color: #f8f9fa;
  width: 100%;
  z-index: 1050; /* make sure it appears above video */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
}

.footer a.footer-link {
  color: #adb5bd;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer a.footer-link:hover {
  color: #0d6efd;
  padding-left: 5px;
}

.social-icon {
  font-size: 1.25rem;
  color: #adb5bd;
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-icon:hover {
  color: #ced3dc;
  transform: scale(1.2);
}

.about-section {
  background-color: transparent rgb(28, 28, 31);
}

/* Image Hover Zoom Effect */
.hover-zoom {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border-radius: 12px;
}
.hover-zoom:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 25px rgba(30, 29, 29, 0.1);
}

/* Content Box Styling */
.content-box {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.content-box:hover {
  box-shadow: 0 0 35px rgba(255, 255, 255, 0.1);
}

/* Headings & Paragraphs */
.content-box h2 {
   color: #0c0c0c;
  background-color: 0 0 0 0.25rem rgba(42, 45, 45, 0.25);
}

.content-box p {
  color: #dbe9e9;
  font-size: 1rem;
}

/* Button Styling */
.btn-light {
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
  transition: background-color  #171718;;
}
.btn-light:hover {
   background-color: #0bd79a;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(13, 253, 253, 0.5);
}

.btn-light {

  background-color: #0dfde9;
  color: #080808;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  border-radius: 50px;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
  text-decoration: none;
}



/* === Contact Section === */
/* === Contact Floating Card === */

/* === Contact Section Transparent Background === */
.contact-section {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(70px);
    
}

.contact-floating-section {
  background: transparent;
  padding-top: 400px;
  padding-bottom: 100px;
}

.contact-card {
  background: rgba(255, 255, 255, 0.683);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

/* Inputs */
.contact-card .form-control {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #444;
  color: #fff;
}

.contact-card .form-control:focus {
  border-color: #00e6e6;
  box-shadow: 0 0 0 0.25rem rgba(0, 230, 230, 0.25);
}

/* Custom Teal Button */
.btn-teal {
  background-color: #00e6e6;
  color: #121212;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 230, 230, 0.3);
  transition: all 0.3s ease;
}
.btn-teal:hover {
  background-color: #00cccc;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 230, 230, 0.4);
}

/* Google Map Styling */
.map-container {
  height: 100%;
  min-height: 320px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* === Appointment Section === */
.appointment-section {
  background: url('/path-to-your-background.jpg') no-repeat center center / cover;
  background-attachment: fixed;
  padding: 100px 0;
}

.appointment-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: #fff;
}

/* Input Styling */
.appointment-card .form-control {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid #444;
  color: #fff;
}
.appointment-card .form-control:focus {
  border-color: #00e6e6;
  box-shadow: 0 0 0 0.25rem rgba(0, 230, 230, 0.25);
}

/* Button (reuse btn-teal from contact form) */
.btn-teal {
  background-color: #00e6e6;
  color: #121212;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 230, 230, 0.3);
  transition: all 0.3s ease;
}
.btn-teal:hover {
  background-color: #00cccc;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 230, 230, 0.4);
}

   .carousel-container {
      position: relative;
      max-width: 800px;
      margin: 100px auto 0;
      border-radius: 6px;
      overflow: hidden;
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

    .carousel-item img {
      object-fit: cover;
      height: 400px;
      width: 100%;
      filter: brightness(0.9);
    }

    .carousel-caption {
      /* background-color: rgba(0, 0, 0, 0.4); */
       background: rgba(255, 255, 255, 0.05);
   box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
      border-radius: 10px;
      padding: 10px;
      backdrop-filter: blur(5px);
    }

    .footer-links {
  list-style: none;
  padding: 0;
}

.footer-link, .footer-phone {
  display: block;
  color: #f0f0f0;
  text-decoration: none;
  margin: 5px 0;
  font-weight: 500;
  transition: color 0.3s ease;
}

.footer-link:hover,
.footer-phone:hover {
  color: #ff69b4; /* Hot pink, matches your current icon color */
}

.footer-phone i {
  margin-right: 8px;
  color: #ff69b4;
}