/* Style for desktop and mobile nav items */
.nav-link {
    position: relative; /* Required for positioning the underline */
    transition: color 0.3s ease; /* Smooth color change on hover */
  }
  
  /* The animated underline effect */
  .nav-link::after {
    content: ''; /* Empty content for the pseudo-element */
    position: absolute;
    width: 0; /* Start with no width */
    height: 2px; /* Thickness of the underline */
    bottom: -4px; /* Position below the text */
    left: 50%; /* Start from the center */
    background-color: #2563eb; /* Blue color matching your theme */
    transition: width 0.3s ease, left 0.3s ease; /* Animate width and position */
    transform-origin: center; /* Scale from the center */
  }
  
  /* Hover effect */
  .nav-link:hover::after {
    width: 100%; /* Expand to full width */
    left: 0; /* Shift to the left edge */
  }
  
  /* Ensure the Book Now button doesn’t get the underline */
  .nav-link.btn::after {
    display: none; /* Disable underline for buttons */
  }
  
  /* Optional: Fix mobile menu alignment */
  .mobile-menu a {
    position: relative; /* Ensure mobile links work with the effect */
  }





  /* About Section Slider Styles */
.about-slider {
    position: relative;
    min-height: 400px; /* Adjust height as needed */
    overflow: hidden;
  }
  
  .about-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    animation: slideLeftRightAbout 15s infinite;
  }
  
  /* Individual animation delays for each slide */
  .about-slide:nth-child(1) { animation-delay: 0s; }
  .about-slide:nth-child(2) { animation-delay: 5s; }
  .about-slide:nth-child(3) { animation-delay: 10s; }
  
  @keyframes slideLeftRightAbout {
    0% {
      opacity: 0;
      transform: translateX(100%);
    }
    10%, 33% {
      opacity: 1;
      transform: translateX(0);
    }
    43% {
      opacity: 0;
      transform: translateX(-100%);
    }
    100% {
      opacity: 0;
      transform: translateX(-100%);
    }
  }



      /* Hero Section Animation Styles */
      .hero-slider {
        position: relative;
        min-height: 400px; /* Increased height for better content fit */
        overflow: hidden;
      }
  
      .hero-slide {
        position: absolute;
        width: 100%;
        opacity: 0;
        transform: translateX(100%);
        animation: slideLeftRight 15s infinite;
        text-align: left; /* Align text to the left */
        padding: 20px 2px; /* Adjusted padding: more on the left */
        max-width: 70%; /* Larger text width */
      }
  
      /* Individual animation delays for each slide */
      .hero-slide:nth-child(1) { animation-delay: 0s; }
      .hero-slide:nth-child(2) { animation-delay: 5s; }
      .hero-slide:nth-child(3) { animation-delay: 10s; }
  
      @keyframes slideLeftRight {
        0% {
          opacity: 0;
          transform: translateX(100%);
        }
        10%, 33% {
          opacity: 1;
          transform: translateX(0);
        }
        43% {
          opacity: 0;
          transform: translateX(-100%);
        }
        100% {
          opacity: 0;
          transform: translateX(-100%);
        }
      }
  
      /* Smooth background gradient animation */
      .hero-bg {
        background: linear-gradient(45deg, #facc15, #60a5fa, #2563eb);
        background-size: 200% 200%;
        animation: gradientBG 15s ease infinite;
      }
  
      @keyframes gradientBG {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
  
      /* Button hover effects */
      .hero-btn {
        transition: all 0.3s ease;
      }
  
      .hero-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      }
  
      /* General Scroll-Up Animation (for other sections) */
      .scroll-up {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.6s ease-out;
      }
  
      .scroll-up.visible {
        opacity: 1;
        transform: translateY(0);
      }
  
      /* Beautiful Scroll-Up Animation for Service Cards */
      .service-card {
        opacity: 0;
        transform: translateY(60px) scale(0.95); /* Slightly scaled down initially */
        transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth, elegant curve */
      }
  
      .service-card.visible {
        opacity: 1;
        transform: translateY(0) scale(1); /* Full size and position */
      }


/* Container for the image to control overflow and positioning */
  .service-card {
    position: relative;
    overflow: hidden;
  }

  /* Image styles with smooth transitions */
  .service-card img {
    transition: all 0.5s ease;
    transform: scale(1);
  }

  /* Hover effects for images */
  .service-card:hover img {
    transform: scale(1.1); /* Slight zoom effect */
    filter: brightness(1.1); /* Brightens the image slightly */
  }

  /* Add an overlay effect */
  .service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(37, 99, 235, 0.2); /* Blue overlay with transparency */
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    pointer-events: none; /* Ensures clicks go through overlay */
  }

  .service-card:hover::before {
    opacity: 1;
  }

  /* Ensure text content stays above overlay */
  .service-card h3,
  .service-card p {
    position: relative;
    z-index: 2;
  }

  
      /* Footer Bottom Styling for Visibility */
      .footer-bottom {
        font-size: 1rem; /* Increased font size for better visibility */
        color: #ffffff; /* Ensure white text for contrast */
        opacity: 1; /* Full opacity */
        line-height: 1.5; /* Better spacing */
      }
  
      .footer-bottom a {
        color: #60a5fa; /* Brighter blue for the link */
        text-decoration: none; /* Underline for emphasis */
        transition: color 0.3s ease;
      }
  
      .footer-bottom a:hover {
        color: #c1b8e4; /* Yellow on hover for visibility */
      }
  

    