*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      scroll-behavior:smooth;
    }

    body{
      font-family:'Poppins',sans-serif;
      background:#0b1120;
      color:white;
      overflow-x:hidden;
    }

    section{
      padding:90px 8%;
    }

    /* SCROLL BAR */

    ::-webkit-scrollbar{
      width:8px;
    }

    ::-webkit-scrollbar-thumb{
      background:#00d9ff;
      border-radius:10px;
    }

    /* NAVBAR */

    nav{
      width:100%;
      position:fixed;
      top:0;
      left:0;
      z-index:999;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:18px 8%;
      transition:0.4s;
      backdrop-filter:blur(10px);
      background:rgba(0,0,0,0.3);
    }

    nav.sticky{
      background:#08101f;
      box-shadow:0 5px 20px rgba(0,0,0,0.4);
    }

    .logo{
      font-size:28px;
      font-weight:700;
      color:#00d9ff;
    }

    .nav-links{
      display:flex;
      gap:30px;
      list-style:none;
    }

    .nav-links a{
      color:white;
      text-decoration:none;
      position:relative;
      transition:0.3s;
    }

    .nav-links a::after{
      content:'';
      position:absolute;
      left:0;
      bottom:-6px;
      width:0%;
      height:2px;
      background:#00d9ff;
      transition:0.3s;
    }

    .nav-links a:hover::after{
      width:100%;
    }

    .menu-btn{
      display:none;
      font-size:28px;
      cursor:pointer;
    }

    /* HERO */

    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      background:
      linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),
      url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1800&auto=format&fit=crop');
      background-size:cover;
      background-position:center;
    }

    .hero-content h1{
      font-size:65px;
      margin-bottom:20px;
      animation:fadeDown 1s ease;
    }

    .hero-content span{
      color:#00d9ff;
    }

    .hero-content p{
      max-width:700px;
      margin:auto;
      line-height:1.8;
      margin-bottom:30px;
      animation:fadeUp 1.5s ease;
    }

    .hero-buttons{
      display:flex;
      justify-content:center;
      gap:20px;
      flex-wrap:wrap;
    }

    .btn{
      padding:14px 30px;
      border:none;
      border-radius:40px;
      font-size:16px;
      cursor:pointer;
      transition:0.4s;
      text-decoration:none;
      font-weight:600;
    }

    .primary-btn{
      background:#00d9ff;
      color:#000;
    }

    .primary-btn:hover{
      transform:translateY(-5px);
      box-shadow:0 0 20px #00d9ff;
    }

    .secondary-btn{
      border:2px solid #00d9ff;
      color:white;
    }

    .secondary-btn:hover{
      background:#00d9ff;
      color:black;
    }

    /* SECTION TITLE */

    .title{
      text-align:center;
      margin-bottom:60px;
    }

    .title h2{
      font-size:40px;
      margin-bottom:10px;
    }

    .title p{
      color:#cbd5e1;
    }

    /* DESTINATION CARDS */

    .cards{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:30px;
    }

    .card{
      background:#111827;
      border-radius:20px;
      overflow:hidden;
      transition:0.5s;
      position:relative;
    }

    .card:hover{
      transform:translateY(-10px);
      box-shadow:0 10px 30px rgba(0,217,255,0.3);
    }

    .card img{
      width:100%;
      height:250px;
      object-fit:cover;
      transition:0.5s;
    }

    .card:hover img{
      transform:scale(1.1);
    }

    .card-content{
      padding:20px;
    }

    .card-content h3{
      margin-bottom:10px;
    }

    .stars{
      color:gold;
      margin:10px 0;
    }

    /* COUNTER */

    .counter-section{
      background:#08101f;
    }

    .counter-wrapper{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
      gap:30px;
      text-align:center;
    }

    .counter-box{
      padding:40px;
      background:#111827;
      border-radius:20px;
      transition:0.4s;
    }

    .counter-box:hover{
      transform:translateY(-8px);
    }

    .counter-box i{
      font-size:45px;
      color:#00d9ff;
      margin-bottom:20px;
    }

    .counter{
      font-size:40px;
      font-weight:700;
    }

    /* SWIPER */

    .swiper{
      width:100%;
      padding-bottom:40px;
    }

    .swiper-slide{
      background:#111827;
      border-radius:20px;
      overflow:hidden;
    }

    .swiper-slide img{
      width:100%;
      height:250px;
      object-fit:cover;
    }

    .slide-content{
      padding:20px;
    }

    /* GALLERY */

    .gallery{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:20px;
    }

    .gallery img{
      width:100%;
      height:300px;
      object-fit:cover;
      border-radius:20px;
      transition:0.5s;
      cursor:pointer;
    }

    .gallery img:hover{
      transform:scale(1.05);
    }

    /* TESTIMONIAL */

    .testimonial{
      background:#111827;
      padding:30px;
      border-radius:20px;
      text-align:center;
    }

    .testimonial img{
      width:80px;
      height:80px;
      border-radius:50%;
      margin-bottom:20px;
      object-fit:cover;
    }

    /* NEWSLETTER */

    .newsletter{
      text-align:center;
      background:linear-gradient(135deg,#00d9ff,#0066ff);
      border-radius:30px;
      padding:60px 20px;
    }

    .newsletter input{
      width:300px;
      max-width:100%;
      padding:15px;
      border:none;
      border-radius:30px;
      margin-top:20px;
      outline:none;
    }

    .newsletter button{
      padding:15px 25px;
      border:none;
      border-radius:30px;
      background:black;
      color:white;
      cursor:pointer;
      margin-left:10px;
      transition:0.4s;
    }

    .newsletter button:hover{
      transform:scale(1.05);
    }

    /* FOOTER */

    footer{
      background:#020617;
      text-align:center;
      padding:30px;
      margin-top:60px;
    }

    .socials{
      margin:20px 0;
    }

    .socials i{
      margin:0 10px;
      font-size:22px;
      cursor:pointer;
      transition:0.4s;
    }

    .socials i:hover{
      color:#00d9ff;
      transform:translateY(-5px);
    }

    /* ANIMATIONS */

    @keyframes fadeDown{
      from{
        opacity:0;
        transform:translateY(-50px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

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

    /* RESPONSIVE */

    @media(max-width:900px){

      .nav-links{
        position:absolute;
        top:80px;
        right:-100%;
        width:250px;
        height:100vh;
        background:#08101f;
        flex-direction:column;
        padding:40px;
        transition:0.5s;
      }

      .nav-links.active{
        right:0;
      }

      .menu-btn{
        display:block;
      }

      .hero-content h1{
        font-size:42px;
      }
    }