 <style>
    :root {
      --sand: #f7ead6;
      --blue: #0077b6;
      --deep-blue: #023e8a;
      --coral: #e76f51;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      color: #263238;
      background: #fffaf3;
    }

    .navbar {
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }

    .navbar-brand {
      font-weight: 800;
      color: var(--deep-blue) !important;
    }

.hero {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            rgba(0,0,0,0.25),
            rgba(0,0,0,0.35)
        ),
        url("/img/Background.jpg");

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    color: #ffffff;
}
    .hero h1 {
      font-size: clamp(2.8rem, 7vw, 5.8rem);
      font-weight: 900;
      line-height: 0.95;
    }

    .hero-card {
      background: rgba(255, 255, 255, 0.95);
      color: #263238;
      border-radius: 24px;
      padding: 28px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    }

    .btn-main {
      background: var(--coral);
      color: white;
      border: none;
      border-radius: 999px;
      padding: 12px 26px;
      font-weight: 700;
    }

    .btn-main:hover {
      background: #d95c40;
      color: white;
    }

    .section-title {
      font-weight: 850;
      color: var(--deep-blue);
    }

    .destination-card,
    .package-card,
    .testimonial-card {
      border: 0;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      background: white;
    }

    .destination-card:hover,
    .package-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.13);
    }

    .destination-card img {
      height: 250px;
      object-fit: cover;
    }

    .badge-soft {
      background: #e8f6ff;
      color: var(--deep-blue);
      border-radius: 999px;
      padding: 8px 14px;
      font-weight: 700;
    }

    .feature-icon {
      width: 58px;
      height: 58px;
      border-radius: 18px;
      background: var(--blue);
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      margin-bottom: 16px;
    }

    .gallery-img {
      height: 280px;
      object-fit: cover;
      border-radius: 24px;
      width: 100%;
      box-shadow: 0 14px 35px rgba(0, 0, 0, 0.1);
    }

    .cta {
      background: linear-gradient(135deg, var(--deep-blue), var(--blue));
      border-radius: 32px;
      color: white;
      padding: 56px 32px;
    }

    footer {
      background: #011627;
      color: #cfd8dc;
    }

    footer a {
      color: #cfd8dc;
      text-decoration: none;
    }

    footer a:hover {
      color: white;
    }
  </style>