body {
    font-family: 'Poppins', sans-serif; 
    background-color: #e9e9e9; 
    padding-top: 60px; /* Tambahkan padding agar konten tidak tertutup navbar */
}
nav {
    position: fixed;
    top: 0px;
    width: 98%;
    z-index: 1000; /* Pastikan navbar tetap di atas elemen lainnya */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Tambahan opsional untuk efek */
    background-color: inherit; /* Agar warna tetap sama dengan elemen awal */
    font-family: 'Futura', sans-serif;
    padding: 10px;
    font-weight: bold;
    
}
  
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 960px;
    margin: 0 auto;
    padding: inherit;
}
  
.logo {
    display: flex;
    align-items: center;
}
  
.logo img {
    height: 40px;
    margin-right: 10px;
}
  
.book-now {
    background-color: #115B33;
    color: white;
    border: none;
    padding: 10px 10px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 15px; /* Ditambahkan font-size */
}
  
.book-now img {
    height: 20px;
    margin-right: 10px;
}
.book-now a{
    color: inherit; /* Warna tulisan mengikuti elemen induk */
    text-decoration: none; /* Menghilangkan garis bawah */
}

.book-now a:hover {
    color: white; /* Warna tulisan saat hover (opsional) */
  }
  
.book-now:hover {
    background-color: Black;
}
  
.menu img {
    height: 30px;
}

/* Hero section container */
          .hero {
            display: flex; /* Use flexbox for alignment */
            font-family: 'Futura', sans-serif;
            flex-direction: column; /* Stack items vertically */
            align-items: center; /* Center items horizontally */
            justify-content: center; /* Center items vertically */
            text-align: center; /* Center text inside the section */
            color: white; /* White text color */
            height: 130vh; /* Full viewport height */
            margin-top: -30px;
            background: url('images/90.png') no-repeat center center/cover;
        }

        /* Hero title styling */
        .hero h1 {
            font-size: 30px;
            margin-bottom: 44px;
            font-weight: bold;
            color: black;
            margin-top: -140px;
        }

        /* Container for feature items */
        .features {
            display: flex; /* Use flexbox for alignment */
            flex-wrap: wrap; /* Allow items to wrap to the next line */
            gap: 10px; /* Add spacing between items */
            justify-content: center; /* Center items in the container */
            margin-bottom: 20px; /* Spacing below the features */
        }

        /* Individual feature box */
        .feature-box {
            display: flex; /* Use flexbox for alignment */
            align-items: center; /* Vertically align content */
            background-color: white; /* White background for boxes */
            color: #115B33; /* Green text color */
            border-radius: 20px; /* Rounded corners */
            padding: 0px 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        }

        /* Icon inside feature box */
        .feature-box i {
            color: #115B33; /* Green color for icons */
            margin-right: 10px; /* Spacing between icon and text */
            font-size: 1.2rem; /* Slightly larger icon size */
        }

        /* Button container */
        .buttons {
            display: flex; /* Use flexbox for alignment */
            gap: 15px; /* Add spacing between buttons */
        }

        /* Button styling */
        .button {
            background-color: #115B33; /* White button background */
            color: White; /* Green text color */
            border: 3px solid rgb(174, 175, 172); /* White border */
            border-radius: 21px; /* Rounded corners */
            padding: 10px 30px; /* Add spacing inside the button */
            text-decoration: none; /* Remove underline from links */
            font-size: 1rem; /* Standard font size */
            font-weight: bold; /* Bold text for buttons */
            transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
            margin-top: 40px;
        }

        /* Button hover effect */
        .button:hover {
            background-color: #f5f5f5; /* Light gray background on hover */
            color: #115B33; /* Keep green text color */
        }

        /* Focus effect for accessibility */
        .button:focus {
            outline: none; /* Remove default focus outline */
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8); /* Add white focus ring */
        }

        /* About Us Section */
        .about {
            background-color: #ffffff;
            padding: 60px 20px;
            text-align: center;
        }

        .about h2 {
            font-size: 2.5rem;
            color: #115B33;
            margin-bottom: 20px;
        }

        .about p {
            font-size: 1.1rem;
            color: #333;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto 40px;
        }

        .about img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
        }

        /* Profil Section */
        .profil {
            background-color: #f9f9f9;
            background: url('images/h.png') no-repeat center center/cover;
        }

        .profil .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .profil-content {
            text-align: left;
        }

        .profil-content img.logo-profil {
            max-width: 120px;
            margin-bottom: -20px;
        }

        .profil-grid {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 10px;
            padding: 20px;
        }

        .profil-item {

            text-align: left;
        }

        .profil-item h3 {
            color: #115B33;
            margin-bottom: 15px;
        }

        .profil-item p {
            font-size: 1.1rem;
            color: black;
        }

        .profil-item img {
            max-width: 60px;
        }   


                /* our fllet Best Activities Section */
                .our-fleet {
                    position: relative;
                    width: 100%;
                    max-width: 1350px; /* Sesuaikan dengan lebar yang diinginkan */
                    margin: auto;
                    overflow: hidden;
                    padding-top: 20px;    
                    padding-bottom: 20px;
                    background-image: url('images/h.png');
                }
        
                .carousel-container {
                    width: 100%;
                }
        
                .carousel-image {
                    display: flex; /* Mengatur elemen sebagai flex container */
                    justify-content: center; /* Memusatkan secara horizontal */
                    align-items: center; /* Memusatkan secara vertikal */
                    gap: 10px; /* Jarak antara elemen (opsional) */
                    margin-top: 10px; /* Jarak atas (opsional) */
        
                }
        
                .carousel-image img {
                    max-width: 50px; /* Atur lebar maksimum gambar sesuai kebutuhan */
                    height: auto; /* Tinggi disesuaikan secara proporsional */

                }
        
                .info-box {
                    display: flex;
                    color: black;
                    border-radius: 5px; /* Sudut membulat (opsional) */
                    background-color: #f0f0f0; /* Warna background */
                    padding: 15px;
                    border-radius: 5px;
                    align-items: center; /* Sejajarkan ikon dan teks */
                }
                .info-box img {
                    margin-right: 10px;
                }
                
                .carousel-container h2{
                    width: 100%;
                    text-align: center;
                    color: #115B33;
                    font-size: 25px;
                }
        
                .carousel {
                    display: flex;
                    transition: transform 0.5s ease;
                }
        
                .carousel-item {
                    min-width: 100%; 
                    box-sizing: border-box;
                    text-align: center;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                    border: 1px solid #ddd;
                    margin: 10px;
                    background-color: white;
                }
        
                .carousel-item img  {
                    width: 300px; 
                    height: 200px; 
                    object-fit: cover; 
                    border-radius: 5px; 
                }
        
                .carousel img {
                    width: 70%; 
                    height: auto;
                    justify-content: space-around;
                    margin-top: 20px;
                }
        
                .carousel-item h3 {
                    font-size: 1.5em; 
                    margin: 10px 0;
                }
        
                .carousel-item p {
                    font-size: 1em; 
                    color: #555;
                }
        
                .prev, .next {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    color: white;
                    border: none;
                    padding: 10px;
                    cursor: pointer;
                    z-index: 10;
                    background-color: #115B33; 
                    border-radius: 50%; 
                    width: 60px; 
                    height: 60px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
        
                .prev {
                    left: 10px;
                }
        
                .next {
                    right: 10px;
                }
        
                @media (max-width: 768px) {
                    .carousel-item h3 {
                        font-size: 1.2em; 
                    }
                    .carousel-item img {
                        width: 60%; 
                        height: auto;
                    }
                    .carousel-item p {
                        font-size: 0.9em; 
                    }
                }
        
                /* Best Activities Section */
                .best-activities {
                    text-align: center; 
                    padding: 4px 0px; 
                    background-color: #ffffff; 
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
                    border-radius: 8px;
                    background-image: url('images/h.png');
                }
        
                .activities-container {
                    display: flex; 
                    overflow-x: auto;
                }
        
                .activity-card {
                    background-color: #f9f9f9; 
                    border-radius: 8px; 
                    margin: 10px; 
                    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); 
                    transition: transform 0.3s; 
                }
        
                .activity-card h3 {
                    color: #555; 
                    margin-top: 0; 
                    margin-bottom: 0px;
                }
        
                .activity-card:hover {
                    transform: scale(1.05); 
                }
        
                .activity-card img {
                    height: 200px; 
                    object-fit: cover; 
                    border-radius: 5px; 
                    margin-bottom: 10px; 
                    max-width: 500px;
                }
        
                .activity-card p {
                    display: none;
                }
        
                h2 {
                    color: #115B33; 
                }
        
                h3 {
                    color: #555; 
                }
        
                /* style testimoni */
                .komentar {
                    background-color: #f8f8f8;
                    padding: 1px 0;
                    background: url('images/h.png') no-repeat center center/cover;

                }
        
                .komentar h2 {
                    text-align: center;
                    margin-bottom: 30px;
                }
        
                .testimoni-slider {
                    display: flex;
                    overflow-x: auto;
                }
        
                .testimoni {
                    background-color: #fff;
                    padding: 30px;
                    margin: 0 15px;
                    border-radius: 10px;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                    min-width: 300px; 
                }
        
                .nama {
                    text-align: right;
                    font-weight: bold;
                }
        
                .button-wrapper {
                    margin: 10px;   
                }
        
                .nav-button img {
                    width: 23px; 
                    vertical-align: middle; 
                }
                .hero-features {
                    list-style: none;
                    padding: 0;
                    margin: 0 0 20px 0; 
                    text-align: center;
                }
        
                .hero-features li {
                    margin-bottom: 8px; 
                    display: inline-block; 
                    padding: 8px 12px;
                    background-color: rgba(255, 255, 255, 0.8); 
                    border-radius: 20px; 
                    font-size: 14px; 
                }
        
                .hero-features li i {
                    margin-right: 10px; 
                    color: green; 
                }
        
                #hubungi {
                    background-color: #f8f8f8; 
                    padding: 40px 0; 
                    text-align: center; 
                    background: url('images/h.png') no-repeat center center/cover;

                }
        
                #hubungi .container {
                    max-width: 800px; 
                    margin: 0 auto;
                    padding: 0 20px; 
                }
        
                #hubungi h2 {
                    font-size: 25px; 
                    margin-bottom: 20px; 
                    color: #115B33;
                }
                
                #hubungi .contact-info{
                    margin-top: 20px;
                }
                #hubungi .contact-info a {
                    display: block;
                    font-size: 1.2em; 
                    color: #333; 
                    text-decoration: none; 
                    transition: color 0.3s ease; 
                    margin-bottom: 20px;
                }
        
                #hubungi .contact-info a:hover {
                    color: #007bff; 
                }
        
                #hubungi .contact-info i {
                    margin-right: 10px; 
                }
        
                .see-more-button {
                    display: block; 
                    margin: 20px auto; 
                    padding: 10px 20px;
                    background-color: #115B33; 
                    color: white; 
                    border: none;
                    border-radius: 5px; 
                    cursor: pointer;
                    text-decoration: none; 
                }

                .popup {
                    position: fixed;
                    top: 60px;
                    left: 0;
                    width: 100%;
                    display: flex;
                    justify-content: center; /* Pusatkan horizontal */
                    align-items: center; /* Pusatkan vertikal */
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                    transition: transform 2s ease-in-out; /* Ubah menjadi 0.5s atau lebih besar */
                    z-index: 1000; 
                    background-color: #115B33;
                  }

                  .popup.active {
                    display: block; /* Menampilkan menu saat pop-up aktif */
                    opacity: 1;
                  }
                  
                  
                  .popup ul {
                    background-color: #115B33;
                    padding: 20px;
                    border-radius: 0px;
                    list-style: none;
                    width: 100%; 
                    text-align: left;
                    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Tambahkan shadow di atas */
                  }
                  
                  
                  .popup li {
                    margin-bottom: 10px;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Garis pemisah */
                    padding-bottom: 10px; /* Tambahkan padding bawah */
                  }
                  
                  .popup a {
                    text-decoration: none;
                    color: white;
                    font-weight: bold;
                  }