body { 
      background-color: #fff; 
      font-family: "Lato", sans-serif;
    }
    h2{ font-size: 3.3rem; font-weight: 900; }
    h3{ font-size: 3.3rem; font-weight: 900; }
    h4{ font-size: 2.4rem; font-weight: 700; }
    h5{ font-size: 1.4rem; font-weight: 400; }
    a{ text-decoration: none; }
     span{
      color: #00aaff;
     }
    /* Navbar */
    .navbar { background-color: #00aaff; }
    .navbar .nav-link, .navbar-brand { color: #fff; font-weight: 500; }
    .navbar .nav-link:hover { text-decoration: underline; }

    /* Headline */
    .headline { background-color: #e6f7ff; color: #0077cc; text-align: center; padding: 10px; font-weight: 500; }

    /* Floating Contact Button */
    .floating-btn { position: fixed; left: 20px; bottom: 20px; z-index: 1050; }
    .contact-popup {
      position: fixed;
      left: 20px;
      bottom: 70px;
      display: none;
      background-color: #fff;
      border: 1px solid #00aaff;
      border-radius: 8px;
      padding: 15px;
      z-index: 1050;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    .contact-popup a { display: block; margin-bottom: 10px; color: #00aaff; }
    .contact-popup a:hover { text-decoration: underline; }

    /* Hero Text */
.carousel-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;   /* IMPORTANT */
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 15px;
}
.btn-outline-primary{
  border-color: #00aaff;
  color: #fff;
}
.pop-text{
  background-color: #fff;
}
.carousel-caption h1 {
  margin-bottom: 25px;
}
    .carousel-control-prev-icon{
      background-color: #00aaff;
      padding: 20px;
      border-radius: 10px;
    }
        .carousel-control-next-icon{
      background-color: #00aaff;
      padding: 20px;
      border-radius: 10px;
    }

    h1 {
      font-size: 4.4rem;
      font-weight: 900;
      color: #fff;
      text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
      text-align: center;
      animation: fadeInUp 1.5s ease forwards;
  
    }
     @media (max-width: 600px) {
h1 {
      font-size: 1.2rem;
       
    }
    .carousel-control-prev-icon{
      visibility: hidden!important;
    }
        .carousel-control-next-icon{
      visibility: hidden!important;
    }
        h2{ font-size: 2.3rem; font-weight: 900; }
    h4{ font-size: 1.4rem; font-weight: 700; }
    h5{ font-size: 1.1rem; font-weight: 800; }

}
    /* Cards */
    .card { 
      border: none; 
      transition: transform 0.3s ease, box-shadow 0.3s ease; 
      cursor: pointer;
      overflow: hidden;
    }
    .card:hover { transform: translateY(-10px); box-shadow: 0 15px 25px rgba(0,0,0,0.2); }
    .service-img { height: 220px; object-fit: cover; transition: transform 0.3s ease; }
    .card:hover .service-img { transform: scale(1.05); }

    /* About Image */
    .about-img { width: 100%; height: 600px;  border-radius: 8px;  }

    /* Footer */
    .footer-column h5 { color: #fff; margin-bottom: 15px; }
    .footer-column a { color: #fff; margin-bottom: 8px; display: block; }
    .footer-column a:hover { text-decoration: underline; }
    footer { background-color: #00aaff; color: #fff; padding: 40px 0; }

    /* Animations */
    @keyframes fadeInUp {
      0% { opacity: 0; transform: translateY(50px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Popup Image */


    /* Popup overlay center */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

/* Card should not hide overflow */
.popup-overlay .card {
  overflow-y: visible;
}

/* Optional: body scroll lock (recommended) */
body.popup-open {
  overflow: hidden;
}
/* Default popup width (desktop) */
.popup-overlay .container {
  max-width: auto;
    overflow-y: visible;
}

/* 📱 Mobile: make popup 50% width */
@media (max-width: 768px) {
  .popup-overlay {
    width: 50%;
    max-width: 40%;
    overflow-y: visible;
     visibility: hidden;
  }
}

/* Extra small screens safety */
@media (max-width: 480px) {
  .popup-overlay .container {
    width: 90%;
    max-width: 90%;
       overflow-y: visible;
  }
}

    @keyframes fadeIn {
      from {opacity:0; transform: scale(0.8);}
      to {opacity:1; transform: scale(1);}
    }

    /* WhatsApp Floating Button */
/* WhatsApp Floating Button - RIGHT */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50%;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  animation: whatsappPulse 2s infinite;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  background-color: #1ebe5d;
  color: #fff;
  transform: scale(1.08);
}

/* Pulse animation */
@keyframes whatsappPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* visa */
    .hero-v {
      background: linear-gradient(to right, #0099ff, #66ccff);
      color:#fff;
      padding:100px 0;
    }
    .service-card-v {
      border:none;
      border-radius:16px;
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
      transition:.4s;
    }
    .service-card-v:hover {
      transform: translateY(-10px);
    }
    .phone-box-v {
      background:#0099ff;
      color:#fff;
      padding:30px;
      border-radius:15px;
      text-align:center;
    }

    /* tour */

   .hero-s {
      background:url('img/1.png') center/cover no-repeat;
      position:relative;
      color:#fff;
      padding:120px 0;
    }
    .hero-s::before {
      content:'';
      position:absolute;
      inset:0;
      background: linear-gradient(to right, #0099ff, #66ccff);
    }
    .hero-s .container { position:relative; }
    .tour-card {
      border-radius:18px;
      overflow:hidden;
      transition:.4s;
      box-shadow:0 10px 30px rgba(0,0,0,.15);
    }
    .tour-card:hover {
      transform:scale(1.05);
    }