/* --- Universal Styles --- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F5F5DC;
    color: #333;
}

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

h1, h2, h3 {
    color: #00BFFF;
    font-weight: 600;
}

h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5em;
    position: relative;
}

h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #228B22;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* --- Floating Button --- */
.floating-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #FF4500;
    color: #fff;
    padding: 15px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 1000;
}

.floating-btn:hover {
    transform: translateY(-5px);
    background-color: #e04000;
}

/* --- Navigation Bar --- */
.navbar {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: #00BFFF;
    font-weight: 700;
    font-size: 1.8em;
    margin: 0;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-links a:hover {
    color: #00BFFF;
    transform: translateY(-2px);
}

/* --- Hero Section --- */
/* --- MODIFIED STYLES --- */

.hero-section {
    /* Set a specific height for the background to be visible */
    height: 100vh;
    /* Use grid to layer the background and the content on top of each other */
    display: grid;
    /* All direct children will occupy the same grid area (1/1) */
    grid-template-areas: "stack";
    position: relative;
    overflow: hidden; /* Ensures the images don't stretch beyond the section */
}

/* Make sure the content overlay and the content itself occupy the same grid area */
.hero-overlay,
.scrolling-background {
    grid-area: stack;
}

/* --- NEW STYLES FOR SCROLLING BACKGROUND --- */

.scrolling-background {
    width: 100%;
    height: 100%;
    /* * 1. Set your three image URLs here, separated by commas.
     * Replace 'url(image1.jpg)', 'url(image2.jpg)', etc., with your actual image paths.
     */
    background-image: 
        url('path/to/your/kenya-image-1.jpg'), 
        url('path/to/your/kenya-image-2.jpg'), 
        url('path/to/your/kenya-image-3.jpg');

    /* * 2. Initial position for the three images.
     * The percentages are (0% for image 1, 100% for image 2, 200% for image 3) to place them side-by-side.
     */
    background-position: 0% 0, 100% 0, 200% 0; 

    /* * 3. Make sure the background doesn't repeat and covers the height.
     */
    background-repeat: no-repeat;
    background-size: 
        /* Each image takes up 1/3 of the total width and 100% of the height */
        calc(100% / 3) 100%, 
        calc(100% / 3) 100%, 
        calc(100% / 3) 100%;

    /* * 4. Apply the animation for continuous horizontal scroll.
     * 20s is the duration, linear is the speed, infinite makes it loop.
     */
    animation: slide-background 20s linear infinite;
}

/* --- KEYFRAMES FOR THE ANIMATION --- */

@keyframes slide-background {
    /* Start with the first image visible (position 0) */
    0% {
        background-position: 0% 0, 100% 0, 200% 0;
    }
    /* Move all three images to the left by the width of one image (100% of the original container) */
    33.333% {
        background-position: -100% 0, 0% 0, 100% 0;
    }
    /* Continue scrolling left to show the third image */
    66.666% {
        background-position: -200% 0, -100% 0, 0% 0;
    }
    /* Reset the position to the start without a jump for a smooth loop */
    100% {
        /* This effectively moves the images back to where they started in the browser's view,
           which is one image width off-screen to the left (-300% / -200% / -100%), 
           then the animation instantly jumps back to 0% to restart the cycle. */
        background-position: -300% 0, -200% 0, -100% 0;
    }
}

/* --- Ensure the overlay remains on top and darkens the images --- */

.hero-overlay {
    background-color: rgba(0, 0, 0, 0.4); /* Darkens the background images */
    width: 100%;
    height: 100%;
    z-index: 10; /* Ensures it is on top of the scrolling background */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Make sure the text is bright and on top of the overlay */
.hero-content {
    color: white;
    text-align: center;
    z-index: 20; /* Ensures it is on top of the overlay */
}


.hero-section {
    height: 90vh;
    background: url('landscape1.jpg') no-repeat center center/cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.hero-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-content h1 {
    font-size: 4em;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
    font-size: 1.5em;
    margin-bottom: 30px;
    font-weight: 300;
}

-->

.cta-button {
    background-color: #FF4500;
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.2em;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
    background-color: #e04000;
    transform: scale(1.05);
}

/* --- Content Sections --- */
.separator {
    height: 1px;
    background-color: #228B22;
}

.content-section {
    padding: 80px 0;
}

/* --- Destinations Gallery --- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.03);
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.gallery-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 1.2em;
    font-weight: 600;
}

/* --- Services Grid --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.service-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.service-card h3 {
    font-size: 1.5em;
    margin-top: 0;
}

.service-card h3 i {
    color: #00BFFF;
    margin-right: 10px;
}

/* --- Packages Grid --- */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.package-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
}

.package-card:hover {
    transform: translateY(-10px);
}

.package-card h3 {
    font-size: 1.8em;
    margin-bottom: 10px;
}

.package-card p {
    flex-grow: 1;
    margin-bottom: 20px;
    font-weight: 300;
}

.package-button {
    background-color: #FF4500;
    color: #fff;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.package-button:hover {
    background-color: #e04000;
}

/* --- About Us Section --- */
.about-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.about-text, .about-image {
    flex: 1 1 45%;
}

.about-image img {
    width: 50%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- Footer --- */
#contact {
    background-color: #00BFFF;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.contact-info p {
    margin: 5px 0;
    font-size: 1.1em;
}

.contact-info i {
    color: #228B22;
    margin-right: 10px;
}

.social-icons a {
    color: white;
    font-size: 1.8em;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #228B22;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .hero-content h1 {
        font-size: 2.5em;
    }

    .hero-content p {
        font-size: 1.2em;
    }

    .about-content {
        flex-direction: column;
    }

    .about-text, .about-image {
        flex: 1 1 100%;
    }
}