hiking.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mafoy africa Safaris | Luxury Safari Experience</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f8f8f8;
            color: #333;
            line-height: 1.6;
        }

        /* Header Section */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            color: #ffffff; /* White text */
            background-color: #007bff; /* Blue background for the header */
            width: 100%; /* Ensure the blue color covers the entire width */
            position: relative; /* Positioning for menu button inside header */
        }

        /* Logo */
        .logo {
            display: flex;
            align-items: center;
            color: #333; /* Black color for logo text */
            background-color: #ffffff; /* White background for logo in mobile view */
            padding: 10px 20px;
            border-radius: 5px;
        }

        .logo img {
            width: 50px;
            margin-right: 10px;
        }

        .logo span {
            font-size: 1.4rem;
            font-weight: bold;
        }

        /* Mobile Menu Button */
        .menu-btn {
            display: flex;
            cursor: pointer;
            flex-direction: column;
            gap: 5px;
            position: absolute; /* Position absolutely inside the header */
            right: 20px; /* Align the button to the right inside the header */
            background-color: transparent; /* No background for the button itself */
            padding: 10px; /* Add padding to make button area clickable */
        }

        .menu-btn div {
            width: 30px;
            height: 4px;
            background-color: #ffffff; /* White color for mobile menu lines */
        }

        /* Mobile Navigation */
        .mobile-nav {
            display: none;
            flex-direction: column;
            background-color: #fff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
        }

        .mobile-nav.active {
            display: flex;
        }

        .mobile-nav ul {
            list-style: none;
            width: 100%;
            padding: 0;
        }

        .mobile-nav ul li {
            width: 100%;
        }

        .mobile-nav ul li a {
            display: block;
            text-align: center;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #333;
            padding: 15px;
            border-bottom: 1px solid #ddd;
            transition: background-color 0.3s, color 0.3s;
        }

        .mobile-nav ul li a:hover {
            background-color: #f4f4f4;
            color: #007bff; /* Blue color on hover */
        }

        /* Desktop View */
        @media (min-width: 769px) {
            header {
                padding: 10px 5%;
                display: flex;
                justify-content: space-between; /* Align logo and menu at opposite ends */
                align-items: center;
            }

            .menu-btn {
                display: none;
            }

            /* Hide Menu Text in desktop view */
            .menu-text {
                display: none;
            }

            /* Align the navigation to the right */
            header nav {
                margin-left: auto; /* Push navigation to the right */
            }

            header nav ul {
                display: flex;
                list-style: none;
                gap: 20px;
            }

            header nav ul li {
                position: relative;
            }

            header nav ul li a {
                text-decoration: none;
                color: #ffffff; /* White text for navigation items */
                font-weight: 600;
                transition: color 0.3s;
            }

            header nav ul li a:hover {
                color: #e6a400; /* Gold color on hover */
            }

            /* Dropdown Styling */
            .dropdown {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                background-color: white;
                min-width: 200px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
                z-index: 1000;
            }

            /* Show the dropdown when hovering over the parent */
            header nav ul li:hover .dropdown {
                display: block;
            }

            .dropdown li {
                width: 100%;
            }

            .dropdown a {
                display: block;
                padding: 10px 15px;
                color: #333;
            }

            .dropdown a:hover {
                background-color: #f4f4f4;
            }

            /* Update logo background to blue for desktop view */
            .logo {
                background-color: #007bff; /* Blue background for logo on desktop */
                color: white; /* White text color for logo text */
            }

            .logo img {
                width: 50px; /* Adjust logo size */
                margin-right: 10px;
            }

            .logo span {
                font-size: 1.6rem; /* Increase font size for better visibility */
                font-weight: bold;
            }
        }

        /* Mobile Specific Adjustments */
        @media (max-width: 768px) {
            /* Make the entire header section blue on mobile */
            header {
                display: block;
                padding: 0; /* Remove default padding */
                background-color: #007bff; /* Blue background for the entire header */
                width: 100%; /* Make the blue background cover the entire width */
            }

            /* Logo on top of the header in mobile view with full-width blue background */
            .logo {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%; /* Full-width */
                background-color: #ffffff; /* White background for logo part */
                padding: 30px 0; /* Increased padding for larger header */
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
            }

            .logo img {
                width: 60px; /* Adjust logo size */
                margin-right: 10px;
            }

            .logo span {
                font-size: 1.6rem; /* Increase font size for better visibility */
                font-weight: bold;
            }

            /* Header section with mobile menu icon */
            header nav {
                display: none; /* Hidden by default */
            }

            /* Mobile Navigation visible when active */
            .mobile-nav.active {
                display: flex;
            }

            /* "Menu" Text */
            .menu-text {
                color: white;
                font-size: 1.4rem;
                font-weight: bold;
                margin-left: 20px;
            }

            /* Dropdown menu visibility when "Tours" is clicked */
            .mobile-nav ul li .dropdown {
                display: none;
            }

            .mobile-nav ul li.active .dropdown {
                display: block;
            }
        }
    </style>
</head>
<body>
    <!-- Header with Navigation -->
    <header>
        <!-- Logo (Visible in both mobile and desktop but different positioning) -->
        <div class="logo">
            <img src="mafoy2.jpg.png" alt="Mafoy africa Safaris">
            <span>Mafoy africa Safaris</span>
        </div>

        <!-- Mobile Menu Button and "Menu" Text -->
        <div class="menu-btn" onclick="toggleMobileMenu()">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <span class="menu-text">Menu</span> <!-- Menu Text added here -->

        <!-- Desktop Navigation -->
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="destinations.html">Destinations</a></li>
                <li class="tour-item">
                    <a href="tours.html" onclick="toggleDropdown(event)">Tours</a>
                    <ul class="dropdown">
                        <li><a href="day-trips.html">Day Trip Packages</a></li>
                        <li><a href="budget-tours.html">Budget Tour Packages</a></li>
                        <li><a href="midrange-tours.html">Midrange Tour Packages</a></li>
                        <li><a href="luxury-tours.html">Luxury Tour Packages</a></li>
                        <li><a href="hiking.html">Hiking Packages</a></li>
                        <li><a href="zanzibar-holidays.html">Zanzibar Holidays Packages</a></li>
                    </ul>
                </li>
                <li><a href="about us.html">Testimonials</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- Mobile Navigation -->
    <nav class="mobile-nav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="destinations.html">Destinations</a></li>
            <li class="tour-item">
                <a href="tours.html" onclick="toggleDropdown(event)">Tours</a>
                <ul class="dropdown">
                    <li><a href="day-trips.html">Day Trip Packages</a></li>
                    <li><a href="budget-tours.html">Budget Tour Packages</a></li>
                    <li><a href="midrange-tours.html">Midrange Tour Packages</a></li>
                    <li><a href="luxury-tours.html">Luxury Tour Packages</a></li>
                    <li><a href="hiking.html">Hiking Packages</a></li>
                    <li><a href="zanzibar-holidays.html">Zanzibar Holidays Packages</a></li>
                </ul>
            </li>
            <li><a href="about us.html">About us</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <script>
        // Toggle Mobile Menu
        function toggleMobileMenu() {
            document.querySelector('.mobile-nav').classList.toggle('active');
        }

        // Toggle Dropdown for "Tours"
        function toggleDropdown(event) {
            event.preventDefault();
            const parentLi = event.target.parentElement;
            parentLi.classList.toggle('active');
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Safari Packages | Tanzania Adventures</title>
    <style>
        /* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f9;
        }

        /* Main Content */
        .main-content {
            margin-top: 0px;
            /* Reduced top margin */
            padding: 1rem;
            /* Reduced padding */
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0;
            animation: fadeIn 1s forwards;
        }

        /* Safari Packages Grid */
        .packages-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            /* Exactly 4 columns on desktop */
            gap: 1.5rem;
            /* Reduced gap between items */
            width: 100%;
            margin-top: 1.5rem;
            /* Reduced margin-top */
            justify-items: stretch;
        }

        /* Package Card */
        .package-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            width: 100%;
            opacity: 0;
            animation: fadeInUp 0.8s forwards;
        }

        .package-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        /* Package Image */
        .package-image {
            width: 100%;
            height: 180px;
            /* Adjusted height for better spacing */
            object-fit: cover;
            /* Ensure the image covers the container without stretching */
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .package-card:hover .package-image {
            transform: scale(1.05);
            opacity: 0.8;
        }

        .package-content {
            padding: 1rem;
            /* Reduced padding */
        }

        .package-title {
            font-size: 1.4rem;
            /* Slightly smaller font size */
            color: #2c3e50;
            margin-bottom: 0.3rem;
            /* Reduced bottom margin */
            opacity: 0;
            animation: fadeInUp 1s 0.2s forwards;
        }

        /* Responsive Font Size Adjustments */
        @media (max-width: 1200px) {
            .package-title {
                font-size: 1.3rem;
            }
        }

        @media (max-width: 992px) {
            .package-title {
                font-size: 1.2rem;
            }
        }

        @media (max-width: 768px) {
            .package-title {
                font-size: 1.1rem;
            }
        }

        @media (max-width: 480px) {
            .package-title {
                font-size: 1rem;
            }
        }

        .package-details {
            margin-bottom: 0.5rem;
            /* Reduced margin-bottom */
            color: #666;
            opacity: 0;
            animation: fadeInUp 1s 0.4s forwards;
        }

        .package-price {
            font-weight: bold;
            color: #2c3e50;
            font-size: 1.1rem;
            /* Reduced font size */
            margin-bottom: 0.8rem;
            /* Reduced margin-bottom */
            opacity: 0;
            animation: fadeInUp 1s 0.6s forwards;
        }

        .view-details-btn {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            /* Adjusted padding */
            background-color: #0099ff;
            color: #fff;
            text-decoration: none;
            border-radius: 6px;
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            font-weight: 500;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
            margin-top: 1rem;
            font-size: 1.1rem;
        }

        .view-details-btn:hover {
            background-color: #2980b9;
            transform: scale(1.05);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 10%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 2000;
        }

        .modal.active {
            display: block;
            animation: fadeInModal 0.5s forwards;
        }

        .modal-content {
            position: relative;
            background-color: #fff;
            width: 100%;
            max-width: 10000px;
            margin: 2rem auto;
            border-radius: 12px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            opacity: 0;
            animation: fadeInUp 1s forwards;
        }

        .modal-header {
            padding: 1rem;
            /* Reduced padding */
            background-color: #3498db;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 1.4rem;
            /* Slightly smaller font size */
            color: #fff;
        }

        .close-modal {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #fff;
            padding: 0.5rem;
        }

        .close-modal:hover {
            color: #f8f9fa;
        }

        .modal-body {
            display: flex;
            height: calc(100vh - 140px);
            opacity: 0;
            animation: fadeInUp 1s 0.3s forwards;
        }

        .modal-sidebar {
            width: 250px;
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
            padding: 1rem;
            overflow-y: auto;
            overflow-x: auto;
        }

        .modal-nav {
            list-style: none;
        }

        .modal-nav-item {
            margin-bottom: 0.5rem;
        }

        .modal-nav-link {
            display: block;
            padding: 0.8rem 1rem;
            color: #666;
            text-decoration: none;
            border-radius: 6px;
            transition: all 0.3s ease;
        }

        .modal-nav-link:hover,
        .modal-nav-link.active {
            background-color: #3498db;
            color: #fff;
        }

        .modal-main {
            flex: 1;
            padding: 1rem;
            /* Reduced padding */
            overflow-y: auto;
        }

       .tab-content {
    display: none; /* Initially hidden */
    padding: 20px; /* Padding for spacing inside the container */
    background-color: #ffffff; /* Clean white background for maximum contrast */
    border: 1px solid #dcdcdc; /* Subtle border for structure */
    border-radius: 8px; /* Smooth rounded corners */
    font-size: 18px; /* Larger font size for readability */
    line-height: 1.8; /* Comfortable line spacing */
    color: #1a1a1a; /* Very dark gray text for excellent contrast */
    text-align: justify; /* Ensure text fills the width evenly */
    word-wrap: break-word; /* Prevent long words from breaking the layout */
    width: 100%; /* Ensure the content spans the full width of the container */
    box-sizing: border-box; /* Include padding and border in the element's width */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Display content when active */
.tab-content.active {
    display: block; /* Show content */
    animation: fadeIn 0.3s ease-in-out; /* Smooth fade-in effect */
}

/* Styling for itinerary headings */
.itinerary-day h4 {
    font-size: 1.4rem; /* Professional and legible font size */
    color: #004080; /* Deep blue color for a clean and modern look */
    margin-bottom: 0.5rem; /* Space below heading for separation */
    font-weight: 600; /* Slightly bold for emphasis */
    text-transform: uppercase; /* Uppercase for a structured appearance */
}

/* Fade-in animation for smooth transitions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Adjustments for larger desktop screens */
@media (min-width: 1024px) {
    .tab-content {
        font-size: 20px; /* Slightly larger text for desktop */
        padding: 25px; /* More padding for a spacious look */
        line-height: 2; /* Increase line spacing for better readability */
    }
    .itinerary-day h4 {
        font-size: 1.6rem; /* Slightly larger heading size for desktop */
    }
}

/* Adjustments for mobile devices */
@media (max-width: 768px) {
    .tab-content {
        font-size: 16px; /* Slightly smaller font for mobile */
        padding: 15px; /* Compact padding for smaller screens */
    }
    .itinerary-day h4 {
        font-size: 1.2rem; /* Adjust heading size for smaller screens */
    }
}


        .tab-content.active {
            display: block;
        }

        .tab-content img {
            width: 100% !important;
            height: 50px !important;
            object-fit: cover !important;
            border-radius: 0px;
            margin-bottom: 0rem;
            animation: fadeInImage 1s ease-in-out;
            height: fit-content;
        }

        .back-to-packages {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            background-color: #1471cd;
            color: #fff;
            text-decoration: none;
            border-radius: 6px;
            margin-top: 1.5rem;
            transition: background-color 0.3s ease;
            height: fit-content;
        }

        .back-to-packages:hover {
            background-color: #34495e;
        }

        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInModal {
            from {
                opacity: 0;
                transform: translateY(50px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInImage {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .packages-grid {
                grid-template-columns: repeat(3, 1fr);
                /* 3 columns for medium screens */
            }
        }

        @media (max-width: 992px) {
            .packages-grid {
                grid-template-columns: repeat(2, 1fr);
                /* 2 columns for tablet */
            }
        }

        @media (max-width: 768px) {
            .main-content {
                padding: 1rem;
            }

            .packages-grid {
                grid-template-columns: 1fr;
                /* Single column for mobile */
            }

            .package-card {
                margin-bottom: 1rem;
            }

            .package-image {
                height: 150px;
                /* Resize image for mobile */
            }

            .modal-body {
                flex-direction: column;
            }

            .modal-sidebar {
                width: 100%;
                max-height: fit-content;
                border-right: none;
                border-bottom: 1px solid #dee2e6;
            }

            .modal-nav {
                display: flex;
                overflow-x: auto;
                padding-bottom: 0.5rem;
                gap: 0rem;
                min-height: fit-content;
                overflow-y: auto;
            }

            .modal-nav-item {
                flex: 0 0 auto;
                margin-bottom: 0;
            }

            .modal-nav-link {
                white-space: nowrap;
                padding: 0.5rem 1rem;
            }

            .modal-main {
                height: calc(90vh - 250px);
            }

            .nav-menu {
                display: none;
            }
        }

        @media (max-width: 400px) {
            .package-card {
                margin-bottom: 1rem;
            }

            .modal-content {
                width: 100%;
                margin: 0rem auto;
            }

            .modal-header {
                padding: 0rem;
            }

            .modal-title {
                font-size: 0.2rem;
            }

            h1 {
                font-size: 0.0rem;
            }
        }

        /* Modal Full-Screen View */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            /* Slightly darker overlay for emphasis */
            overflow: auto;
            padding: 2rem;
            box-sizing: border-box;
        }

        .modal-content {
            margin: auto;
            background-color: #fff;
            border-radius: 10px;
            width: 100%;
            max-width: 1600px;
            /* Larger maximum width */
            height: 100%;
            /* Take up more screen height */
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
            /* Deeper shadow for more prominence */
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.0rem rem;
            background-color: hwb(210 16% 0%);
            /* Darker blue for contrast */
            color: #fff;
            font-size: 4rem;
            /* Larger font size */
            font-weight: bold;
    
        }

        General Style for .modal */
.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 10vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* Dark overlay */
    overflow: hidden; /* Prevent scrolling */
    overflow: visible;
}

/* General Style for .modal-content */
.modal-content {
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 1600px; /* Larger maximum width for desktops */
    height: auto; /* Default height */
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Ensures padding/border are included in dimensions */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); /* Shadow for prominence */
}

/* Mobile View (Small Screens) */
@media (max-width: 768px) {
    .modal {
        padding: 0; /* Remove any internal padding */
    }

    .modal-content {
        width: 100vw;      /* Full viewport width */
        height: 100vh;     /* Full viewport height */
        border-radius: 0;  /* Remove rounded corners */
        margin: 0;         /* Remove margins */
        padding: 0;        /* Remove padding */
        box-shadow: none;  /* Remove shadow for fullscreen */
    }
}

/* Disable body scrolling when modal is open */
body.modal-open {
    overflow: hidden;
}

.modal-sidebar {
    flex: 0 0 25%; /* Reduced width for a sleek, modern look */
    background: linear-gradient(135deg, #ffffff, #f8f9fa); /* Minimalist soft gradient */
    padding: 1rem; /* Balanced padding */
    overflow-y: auto;
    border-right: 1px solid #e5e5e5; /* Subtle border for separation */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Soft shadow for a floating effect */
    border-radius: 12px; /* Rounded corners for a modern aesthetic */
    color: #2b2b2b; /* Neutral dark text color */
    font-family: 'Inter', sans-serif; /* Clean and modern font */
    font-size: 0.95rem; /* Comfortable font size */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
    overflow-x: auto;
}

/* Sidebar Navigation Styles */
.modal-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-nav-item {
    margin-bottom: 0.8rem; /* Clean spacing between items */
}

.modal-nav-link {
    display: block;
    padding: 0.8rem 1rem; /* Balanced padding for a clean look */
    text-decoration: none;
    color: #4a4a4a; /* Subtle dark gray for links */
    background-color: #fdfdfd; /* Crisp white background */
    border: 1px solid #e5e5e5; /* Subtle border for structure */
    border-radius: 8px; /* Modern rounded corners */
    font-weight: 500; /* Medium font weight for clarity */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Light shadow for depth */
    transition: all 0.3s ease; /* Smooth transitions for hover effects */
    font-size: 0.9rem; /* Sleek, slightly smaller text */
}

.modal-nav-link:hover {
    background: linear-gradient(135deg, #007bff, #0056b3); /* Gradient hover effect */
    color: #ffffff; /* White text on hover */
    border-color: #0056b3; /* Accent border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover */
    transform: translateY(-3px); /* Lift effect */
}

.modal-nav-link.active {
    background: linear-gradient(135deg, #0056b3, #003c80); /* Deep gradient for active link */
    color: #ffffff; /* White text for active state */
    font-weight: 600; /* Slightly bolder for emphasis */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Prominent shadow for active state */
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-sidebar {
        flex: 0 0 100%; /* Full width for mobile */
        padding: 0.8rem; /* Adjusted padding for smaller screens */
        background: linear-gradient(135deg, #f9f9f9, #ffffff); /* Subtle gradient for mobile */
        box-shadow: none; /* Flat design for mobile */
        border-radius: 0; /* No rounding for seamless stacking */
    }

    .modal-nav-item {
        margin-bottom: 1.5rem; /* Compact spacing for mobile */
    }

    .modal-nav-link {
        padding: 0.6rem 0.8rem; /* Compact padding */
        font-size: 0.85rem; /* Slightly smaller text */
    }

    .modal-nav-link:hover {
        transform: translateY(-2px); /* Subtle lift effect for mobile */
    }
}

        .modal-main {
            flex: 1;
            padding: 0.5rem;
            overflow-y: auto;
            font-size: 1.2rem;
            overflow-x: auto;
            /* Slightly larger text for better readability */
        }

        .modal-nav {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .modal-nav-item {
            margin-bottom: 0.5rem;
        }

        /* Base styles (applies to all screen sizes) */
.modal-nav-link {
    display: block;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: #333;
    background-color: #e9ecef;
    border-radius: 10px;
    font-size: 1rem; /* Larger font size */
    transition: background-color 0.3s;
}

/* Mobile-specific styles (screen width up to 768px) */
@media (max-width: 768px) {
    .modal-nav-link {
        font-size: 0.9rem; /* Slightly smaller font size */
        padding: 0.8rem 1.2rem; /* Adjusted padding for smaller screens */
    }
}

/* Desktop-specific styles (screen width 769px and above) */
@media (min-width: 769px) {
    .modal-nav-link {
        font-size: 1.2rem; /* Larger font size for desktop */
        padding: 1.2rem 2rem; /* More spacious padding */
    }
}

        .modal-nav-link.active {
            background-color: #0e7eef;
            color: #fff;
        }

        .modal-nav-link:hover {
            background-color: #89b2dc;
            color: #fff;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }
        
/* General Style for .tab-image */
.tab-image {
    border-radius: 5px;
    margin-bottom: 4rem;
    object-fit: cover;
    object-position: 0cqmax;
}
h1 {
    font-size: 2rem; /* Adjust for mobile */
}


/* Desktop View (Large Screens) */
@media (min-width: 992px) {
    .tab-image {
        max-height: 900px; /* Larger image for desktops */
    }
}

/* Mobile View (Small Screens) */
@media (max-width: 768px) {
    .tab-image {
        max-height: 200px; /* Smaller image for mobile */
    }
}

        .close-modal {
            background: none;
            border: none;
            color: #fff;
            font-size: 2rem;
            /* Larger close button */
            cursor: pointer;
        }

        .itinerary-day {
            margin-bottom: rem;
        }

        .itinerary-day h4 {
            font-size: 1.4rem;
            /* Larger day title */
            color: #004080;
            margin-bottom: 0.5rem;
        }

        .itinerary-day p {
            font-size: 1.3rem;
            /* Larger description text */
        }

        .itinerary-image {
            max-width: 100%;
            height: auto;
            margin-top: 0rem;
            border-radius: 10px;
        }

        /* Adjust Back to Packages Button */
.back-to-packages {
    display: inline-block;
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-decoration: none;
    color: #ffffff; /* White text color for better contrast */
    font-weight: bold;
    font-size: 1.5rem; /* Larger font size */
    padding: 0.8rem 2rem; /* Added padding for better clickability */
    border-radius: 8px; /* Rounded corners for a more modern look */
    background-color: #007bff; /* Soft blue background color */
    transition: all 0.3s ease; /* Smooth transition on hover */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3); /* Subtle shadow for depth */
}

/* Hover Effects */
.back-to-packages:hover {
    color: #ffffff; /* Keep text white on hover */
    background-color: #0056b3; /* Darker blue on hover */
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .back-to-packages {
        font-size: 1.2rem; /* Smaller font size on mobile */
        padding: 0.8rem 1.5rem; /* Adjust padding for mobile */
        margin-top: 1.5rem; /* Adjust top margin on mobile */
        margin-bottom: 1.5rem; /* Adjust bottom margin on mobile */
    }
}

    </style>
    <!-- Main Content -->
    <main class="main-content">
        <h1 style="color: hsl(196, 100%, 50%) !important;">HIKING PACKAGES</h1>

        <div class="packages-grid">
            <!-- Package Card 1 -->
            <div class="package-card" id="package-1">
                <img src="ho.jpg" alt="Zanzibar" class="package-image">
                <div class="package-content">
                    <h2 class="package-title"> 2 DAYS KILIMANJARO SHORT TREKKING </h2>
                    <div class="package-details">
                        <p><span role="img" aria-label="Location">🏞️</span> <strong>Location:</strong> Kilimanjaro</p>
                        <p><span role="img" aria-label="Duration">🕒</span> <strong>Duration:</strong> 2 Day</p>
                        <p><span role="img" aria-label="Best Season">☀️</span> <strong>Best Season:</strong> June -
                            October</p>
                    </div>
                    <p class="package-price"><span role="img" aria-label="Price">💵</span> <strong>From:</strong> $660
                        per person</p>
                    <a href="#" class="view-details-btn" data-package="package-1">View Details</a>
                </div>
            </div>

            <!-- Package Card 2 -->
            <div class="package-card" id="package-2">
                <img src="meru.jpg" alt="Serengeti National Park" class="package-image">
                <div class="package-content">
                    <h2 class="package-title">3 DAYS MOUNT MERU TRECKING</h2>
                    <div class="package-details">
                        <p><span role="img" aria-label="Location">🦁</span> <strong>Location:</strong> Arusha,
                            </p>
                        <p><span role="img" aria-label="Duration">📅</span> <strong>Duration:</strong> 5 Days</p>
                        <p><span role="img" aria-label="Best Season">🌞</span> <strong>Best Season:</strong> January -
                            February</p>
                    </div>
                    <p class="package-price"><span role="img" aria-label="Price">💰</span> <strong>From:</strong> $830
                        per person</p>
                    <a href="#" class="view-details-btn" data-package="package-2">View Details</a>
                </div>
            </div>

            <!-- Package Card 3 -->
            <div class="package-card" id="package-3">
                <img src="meru4.jpg" alt="Zanzibar Beach" class="package-image">
                <div class="package-content">
                    <h2 class="package-title">4 DAYS MOUNT MERU TREKKING</h2>
                    <div class="package-details">
                        <p><span role="img" aria-label="Location">🏖️</span> <strong>Location:</strong> Arusha</p>
                        <p><span role="img" aria-label="Duration">🕒</span> <strong>Duration:</strong> 4 Days</p>
                        <p><span role="img" aria-label="Best Season">🌞</span> <strong>Best Season:</strong> June -
                            October</p>
                    </div>
                    <p class="package-price"><span role="img" aria-label="Price">💵</span> <strong>From:</strong> $990
                        per person</p>
                    <a href="#" class="view-details-btn" data-package="package-3">View Details</a>
                </div>
            </div>

            <!-- Package Card 4 -->
            <div class="package-card" id="package-4">
                <img src="mountain.JPG" alt="Serengeti Safari" class="package-image">
                <div class="package-content">
                    <h2 class="package-title">5 DAYS KILIMANJARO HIKING VIA MARANGU ROUTE</h2>
                    <div class="package-details">
                        <p><span role="img" aria-label="Location">🦁</span> <strong>Location:</strong> Arusha</p>
                        <p><span role="img" aria-label="Duration">📅</span> <strong>Duration:</strong> 5 Days</p>
                        <p><span role="img" aria-label="Best Season">🌞</span> <strong>Best Season:</strong> June -
                            October</p>
                    </div>
                    <p class="package-price"><span role="img" aria-label="Price">💰</span> <strong>From:</strong> $1650
                        per person</p>
                    <a href="#" class="view-details-btn" data-package="package-4">View Details</a>
                </div>
            </div>

            <!-- Package Card 5 -->
            <div class="package-card" id="package-5">
                <img src="mountain 2.jpg" alt="Luxury Safari" class="package-image">
                <div class="package-content">
                    <h2 class="package-title"> 6 DAYS KILIMANJARO HIKING </h2>
                    <div class="package-details">
                        <p><span role="img" aria-label="Location">🏞️</span> <strong>Location:</strong> Kilimanjaro
                           </p>
                        <p><span role="img" aria-label="Duration">🕒</span> <strong>Duration:</strong> 6 Days</p>
                        <p><span role="img" aria-label="Best Season">🌞</span> <strong>Best Season:</strong> June -
                            October</p>
                    </div>
                    <p class="package-price"><span role="img" aria-label="Price">💵</span> <strong>From:</strong> $1980
                        per person</p>
                    <a href="#" class="view-details-btn" data-package="package-5">View Details</a>
                </div>
            </div>

            <!-- Package Card 6 -->
            <div class="package-card" id="package-6">
                <img src="machame.jpg" alt="Ngorongoro Crater Safari" class="package-image">
                <div class="package-content">
                    <h2 class="package-title">7 DAYS KILIMANJARO HIKING </h2>
                    <div class="package-details">
                        <p><span role="img" aria-label="Location">🌋</span> <strong>Location:</strong> Ngorongoro Crater
                        </p>
                        <p><span role="img" aria-label="Duration">🕒</span> <strong>Duration:</strong> 2 Days</p>
                        <p><span role="img" aria-label="Best Season">☀️</span> <strong>Best Season:</strong> June -
                            October</p>
                    </div>
                    <p class="package-price"><span role="img" aria-label="Price">💰</span> <strong>From:</strong> $2310
                        per person</p>
                    <a href="#" class="view-details-btn" data-package="package-6">View Details</a>
                </div>
            </div>

            <!-- Package Card 7 -->
            <div class="package-card" id="package-7">
                <img src="kilimanjaro9.jpg" alt="Serengeti Safari" class="package-image">
                <div class="package-content">
                    <h2 class="package-title">9 DAY KILIMANJARO HIKING VIA NOTHERN ROUTE</h2>
                    <div class="package-details">
                        <p><span role="img" aria-label="Location">🦁</span> <strong>Location:</strong> Kilimanjaro
                           </p>
                        <p><span role="img" aria-label="Duration">📅</span> <strong>Duration:</strong> 9 Days</p>
                        <p><span role="img" aria-label="Best Season">🌞</span> <strong>Best Season:</strong> June -
                            October</p>
                    </div>
                    <p class="package-price"><span role="img" aria-label="Price">💵</span> <strong>From:</strong> $2970
                        per person</p>
                    <a href="#" class="view-details-btn" data-package="package-7">View Details</a>
                </div>
            </div>

            <!-- Package Card 8 -->
            <div class="package-card" id="package-8">
                <img src="dorphine 2.jpg" alt="Luxury Safari Tour" class="package-image">
                <div class="package-content">
                    <h2 class="package-title">DOLPHIN WATCHING TOUR</h2>
                    <div class="package-details">
                        <p><span role="img" aria-label="Location">🏞️</span> <strong>Location:</strong> Serengeti,
                            Ngorongoro, Tarangire</p>
                        <p><span role="img" aria-label="Duration">🕒</span> <strong>Duration:</strong> 7 Days</p>
                        <p><span role="img" aria-label="Best Season">☀️</span> <strong>Best Season:</strong> June -
                            October</p>
                    </div>
                    <p class="package-price"><span role="img" aria-label="Price">💰</span> <strong>From:</strong> $3,500
                        per person</p>
                    <a href="#" class="view-details-btn" data-package="package-8">View Details</a>
                </div>
            </div>

        </div>
    </main>
    <!-- Package Details Modal -->
    <div class="modal" id="package-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Package Details</h2>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="modal-sidebar">
                    <ul class="modal-nav">
                        <li class="modal-nav-item"><a href="#overview" class="modal-nav-link active">Overview</a></li>
                        <li class="modal-nav-item"><a href="#itinerary" class="modal-nav-link">Itinerary</a></li>
                        <li class="modal-nav-item"><a href="#rates" class="modal-nav-link">Rates</a></li>
                        <li class="modal-nav-item"><a href="#inclusion" class="modal-nav-link">Inclusion</a></li>
                        <li class="modal-nav-item"><a href="#exclusion" class="modal-nav-link">Exclusion</a></li>
                        <li class="modal-nav-item"><a href="#end-of-tours" class="modal-nav-link">End of Tours</a></li>
                        <li class="modal-nav-item"><a href="#weather" class="modal-nav-link">Weather</a></li>
                        <li class="modal-nav-item"><a href="#contact" class="modal-nav-link">Contact</a></li>
                    </ul>
                </div>
                <div class="modal-main">
                    <!-- Image Section -->
                    <img src="zanzibar-overview.jpg" alt="Zanzibar Overview" class="tab-image"
                        style="width: 100%; height: 400px; object-fit: cover; border-radius: 8px; margin-bottom: 4rem;">

                    <div id="overview" class="tab-content active">
                        <h3>Overview</h3>
                        <p id="overview-text">Details will be shown here based on the selected package.</p>
                    </div>
                    <div id="itinerary" class="tab-content">
                        <h3>Itinerary</h3>
                        <div id="itinerary-content">
                            <!-- Itinerary days will be inserted dynamically here -->
                        </div>
                    </div>
                    <div id="rates" class="tab-content">
                        <h3>Rates</h3>
                        <p id="rates-text">Rates will be shown here.</p>
                    </div>
                    <div id="inclusion" class="tab-content">
                        <h3>Inclusion</h3>
                        <p id="inclusion-text">Inclusion details will be shown here.</p>
                    </div>
                    <div id="exclusion" class="tab-content">
                        <h3>Exclusion</h3>
                        <p id="exclusion-text">Exclusion details will be shown here.</p>
                    </div>
                    <div id="end-of-tours" class="tab-content">
                        <h3>End of Tours</h3>
                        <p id="end-of-tours-text">End of tour details will be shown here.</p>
                    </div>
                    <div id="weather" class="tab-content">
                        <h3>Weather</h3>
                        <p id="weather-text">Weather details will be shown here.</p>
                    </div>
                    <div id="contact" class="tab-content">
                        <h3>Contact</h3>
                        <p>For more details, contact us at <strong>info@example.com</strong>.</p>
                    </div>
                    <a href="#" class="back-to-packages">Back to Packages</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const packageDetails = {
                'package-1': {
                    overview: "On this trip, you will hike on the Marangu Route with one overnight at Mandara Hut. You will climb through the attractive tropical rain forest, and see different species of birds, impatiens Kilimanjaro, Colobus Monkey, Blue Monkey, and many other interesting things. After a short tour at Mandara, you will have to go to the special hut for an evening meal and overnight. After breakfast, we will begin hiking to Maundi Crater for good views of Kenya and Northern Tanzania.",


                    rates: "Starting at $660 per person.",
                    inclusion: "The following services are included in the tour package:  <li>International flights</li> porterage, rescue fee, park fees (for non-residents), all activities (unless labeled as optional), all accommodation (unless listed as an upgrade), a professional driver/guide, all transportation (unless labeled as optional), all taxes/VAT, roundtrip airport transfer, meals (as specified in the day-by-day section), and drinking water (on all days).",
                    exclusion: "The following items and services are not included in the tour package: climbing gear, international flights (from/to home), additional accommodation before or after the tour, tips (tipping guideline is US$10.00 per person per day), personal items (such as souvenirs, travel insurance, visa fees, etc.), and any government-imposed increase in taxes and/or park fees.",
                    endOfTours: "Additional accommodation can be arranged for an extra cost, and you will be dropped off at the airport at the end of the tour.",
                    weather: "The best time for safari is during the dry season, from June to October.",
                    itinerary: [
                        { day: "Day 1", title: "Marangu Gate to Mandara Hut", description: "After breakfast at the hotel, you'll receive a briefing from one of the guides before heading to Marangu Gate for registration. From there, you'll begin your trek through the rainforest to the Mandara Hut encampment. Along the way, you can take a side trip to Maundi Crater for a panoramic view of the surrounding areas, including Northern Tanzania and Kenya. As you hike through the lush rainforest, you'll encounter towering Eucalyptus trees, vibrant birdlife, and playful colobus monkeys. The trek covers a distance of 7 km and takes about 4-5 hours, with an elevation gain from 1700m to 2720m. The habitat along the route is a montane forest, and the Mandara Hut offers basic accommodation on Mount Kilimanjaro. Lunch and dinner are provided, with drinking water available, but breakfast and other drinks are not included" },
                        { day: "Day 2", title: "Horombo Hut to Marangu Gate", description: "On the final day of the trek, you will leave the glades of the rainforest and ascend onto the open moorlands towards the Horombo Hut, where you'll enjoy breathtaking views of Kibo and Mawenzi peaks. After lunch at Mandara Hut, you’ll continue your descent back to Marangu Gate. The hike covers 11 km, with an elevation change from 2720m to 3700m. The ascent takes about 3-4 hours, while the descent takes approximately 2 hours. The route passes through heathland habitat. Once you reach the gate, you will be driven back to Arusha and to your respective accommodation. Breakfast and lunch are included, along with drinking water, but dinner and other drinks are not provided." },
                     
                    ],
                    images: {
                        overview: "manyara.jpg",
                        itinerary: "jozani 2.jpg",
                        rates: "zanzibar-rates.jpg",
                        inclusion: "The following services are included in the tour package: porterage, rescue fee, park fees (for non-residents), all activities (unless labeled as optional), all accommodation (unless listed as an upgrade), a professional driver/guide, all transportation (unless labeled as optional), all taxes/VAT, roundtrip airport transfer, meals (as specified in the day-by-day section), and drinking water (on all days).",

                        exclusion: "zanzibar-exclusion.jpg",
                        endOfTours: "zanzibar-end-of-tours.jpg",
                        weather: "zanzibar-weather.jpg",
                        contact: "zanzibar-contact.jpg"
                    }
                },
                'package-2': {
                    overview: "Mount Meru, located in Arusha National Park, is a popular climbing destination, offering a stunning variety of natural environments with diverse flora and fauna. The full ascent typically takes at least three days, although a four-day itinerary is highly recommended for better acclimatization. Many climbers use Meru as a preparatory climb before attempting Mount Kilimanjaro. The route to the summit is the only one available, and it takes you through a blend of nature and culture. You will be picked up from your hotel or the airport in Arusha, and accommodation before the tour starts can be arranged for an extra cost.",

                    rates: ": $ 830 per person",
                    inclusion: "he following services are included in the tour package: porterage, rescue fee, park fees (for non-residents), all activities (unless labeled as optional), all accommodation (unless listed as an upgrade), a professional driver/guide, all transportation (unless labeled as optional), all taxes/VAT, roundtrip airport transfer, meals (as specified in the day-by-day section), and drinking water (on all days).",
                    exclusion: "he following items and services are not included in the tour package: climbing gear, international flights (from/to home), additional accommodation before or after the tour, tips (with a tipping guideline of US$10.00 per person per day), personal items (such as souvenirs, travel insurance, visa fees, etc.), and any government-imposed increase in taxes and/or park fees.",
                    endOfTours: "Additional accommodation can be arranged for an extra cost, and you will be dropped off at the airport at the end of the tour.",
                    weather: "The best time to visit is from December to March and June to October.",
                    itinerary: [
                        { day: "Day 1", title: "Arusha (1400m) – Miriakamba Hut (2500m)", description: "After an early breakfast in Arusha (1400m), you'll be picked up from your hotel and driven to the Momella Gate in Arusha National Park. At the gate, the porters will pack your belongings while you and your guide complete the registration with Tanzania National Park. The hike begins with a walking safari experience, where you’ll have the chance to spot giraffes, zebras, antelopes, buffalos, and possibly elephants along the trail. Due to the high likelihood of encountering wildlife, an armed ranger will accompany you for safety. As you continue, you’ll pass the Ngarenanyuki River and a stunning waterfall at the base of Mt. Meru. Upon reaching Miriakamba Hut (2500m), your chef will prepare a hot dinner and provide washing water. Enjoy the breathtaking sunset before an overnight stay at the hut. Meals provided include lunch and dinner, with drinking water available, but breakfast and other drinks are not included" },
                        { day: "Day 2", title: "Miriakamba Hut (2500m) – Saddle Hut", description: "After breakfast, you’ll begin ascending the steep trail along the ridge of the saddle, with the opportunity to spot various wildlife along the way. The trail offers stunning views of the Mt. Meru Crater and the Ash Tray. Upon arrival at Saddle Hut, you can further acclimate by hiking to Little Mt. Meru (3820m) with your guide. Afterward, you will be served an early dinner to ensure ample rest before your midnight summit attempt. All meals are included, and drinking water will be provided, though other drinks are not included. Accommodation is at Saddle Hut, a budget mountain hut located on Mt. Meru." },
                        { day: "Day 3", title: "Saddle Hut (3500m) – Summit Attempt (4566m) – Miriakamba Hut (2500m)", description: "Your summit day begins with a wake-up call at 12:30 am for tea and biscuits, followed by the start of your summit attempt at 1:30 am. The trail begins with a steep ascent from Rhino Point (3800m) to Cobra Point (4350m), and in the final hour, you'll scramble on a rocky ridge between the crater and the inner cliffs of Meru. You'll reach the summit of Mount Meru (4565m) just in time for sunrise, offering spectacular views of the Mt. Meru Ash Tray and Mt. Kilimanjaro. After taking in the breathtaking views, you'll descend to Saddle Hut for a short break and brunch. Following this, you’ll continue your descent to the Momella Gate, where your transfer vehicle will be waiting to take you back to your hotel in Arusha. Meals provided include breakfast and lunch, with drinking water available, but dinner and other drinks are not included. This marks the end of the tour, though additional accommodation can be arranged for an extra cost, and you'll be dropped off at the airport." },
                    ],
                    images: {
                        overview: "meru2.jpg",
                        itinerary: "serengeti-itinerary.jpg",
                        rates: "serengeti-rates.jpg",
                        inclusion: "serengeti-inclusion.jpg",
                        exclusion: "serengeti-exclusion.jpg",
                        endOfTours: "serengeti-end-of-tours.jpg",
                        weather: "serengeti-weather.jpg",
                        contact: "serengeti-contact.jpg"
                    }
                },
                'package-3': {
                             overview: "Mount Meru, an active (but dormant) volcano located north of Arusha in Tanzania, stands at 4562 meters, making it Tanzania's second-highest mountain and the fourth-highest in Africa. It has become a popular warm-up trek for climbers heading to Kilimanjaro. On this 4-day hike, you'll start with a walking safari, spotting buffalo, giraffes, and baboons, before embarking on a challenging yet beautiful trail, all while enjoying breathtaking views of Kilimanjaro. You'll be picked up from the airport or your hotel in Arusha, and accommodation before the tour starts can be arranged for an extra cost.",

                    rates: "Starting at $300 per person.",
                    inclusion: "The following are included in the tour package: porterage, rescue fee, park fees (for non-residents), all activities (unless labeled as optional), all accommodation (unless listed as an upgrade), a professional driver/guide, all transportation (unless labeled as optional), all taxes/VAT, roundtrip airport transfer, meals (as specified in the day-by-day section), and drinking water (on all days).",
                    exclusion: "The following are not included in the tour package: climbing gear, international flights (from/to home), additional accommodation before or after the tour, tips (tipping guideline of US$10.00 per person per day), personal items (such as souvenirs, travel insurance, visa fees, etc.), and any government-imposed increase in taxes and/or park fees.",
                    endOfTours: "The tour ends with a drop-off at your accommodation or the airport.",
                    weather: "The best time to visit Zanzibar is during the dry season from June to October.",
                    itinerary: [
                        { day: "Day 1", title: "Arusha to the Ngongongare gate, then Trek to Miriakamba Huts", description: "You will be picked up from your accommodation at 08:00 am and transferred to the main gate of Arusha National Park, Ngongongare. After completing the necessary paperwork, your hike will begin with a walking safari, escorted by a park ranger, leading you to Momela Gate where your trek to the first hut starts. The hike to Miriakamba Hut covers a distance of 10 km, with an elevation change from 4,921 ft to 8,250 ft. It will take approximately 4-6 hours through the lush rainforest habitat. Upon reaching Miriakamba Hut, a budget mountain hut located on Mount Meru, you will enjoy all meals, with drinking water provided, although other drinks are not included." },
                        { day: "Day 2", title: "Trek to Saddle Huts", description: "After breakfast, the steep ascent continues as you climb higher, with dramatic changes in vegetation and weather. Along the way, you'll be rewarded with breathtaking views, including a glimpse of Mount Kilimanjaro's peak to the east. The trail leads to Saddle Hut, located near the summit, where you will stay overnight. The hike from Miriakamba Hut to Saddle Hut covers 8 km, with an elevation gain from 8,250 ft to 11,712 ft, taking approximately 3-5 hours through heathland habitat. At Saddle Hut, a budget mountain hut on Mount Meru, all meals are included, along with drinking water, though other drinks are not provided" },
                        { day: "Day 3", title: "Summit attempt, later descend back to the Hut", description: "Today is dedicated to the summit attempt of Mount Meru. The trail ascends along a steep ridge, requiring a slow and steady pace to reach the peak. Upon reaching the summit at 14,977 ft, you'll be rewarded with a breathtaking sunrise, perfect for photos and celebration. After taking in the views, you'll descend back to Miriakamba Hut for an overnight stay. The ascent from Saddle Hut to the summit covers 5 km, with an elevation gain from 11,712 ft to 14,977 ft, taking approximately 4-6 hours through alpine desert terrain. The descent from the summit to Miriakamba Hut spans 13 km, with an elevation loss from 14,977 ft to 8,250 ft, taking another 4-6 hours through heathland habitat. All meals are included, and drinking water is provided, though other drinks are not included. Accommodation is at Miriakamba Hut, a budget mountain hut located on Mount Meru." },
                        { day: "Day 4", title: "Descend to the main gate and drive back to Arusha", description: "This final day on Mount Meru involves a short and quick descent through open grassland and mixed forest, offering a chance to spot wildlife before reaching Momella Gate in the late morning. Climbers who reached the summit will be awarded a certificate. At Momella Gate, our drivers will be waiting to transfer you back to your hotel in Arusha or Moshi. The descent from Miriakamba Hut to Momella Gate covers 10 km, with an elevation loss from 11,712 ft to 4,921 ft, taking approximately 2-4 hours through rainforest habitat. Meals include breakfast and lunch, with drinking water provided, though dinner and other drinks are not included. This marks the end of the tour, but additional accommodation can be arranged for an extra cost, and you will be dropped off at the airport if needed." },
                    ],
                    images: {
                        overview: "mbogo.jpg",
                        itinerary: "zanzibar-culture.jpg",
                        rates: "zanzibar-rates.jpg",
                        inclusion: "zanzibar-inclusion.jpg",
                        exclusion: "zanzibar-exclusion.jpg",
                        endOfTours: "zanzibar-end-of-tours.jpg",
                        weather: "zanzibar-weather.jpg",
                        contact: "zanzibar-contact.jpg"
                    }
                },
                'package-4': {
                    overview: " Compared to other mountains, Mount Kilimanjaro is relatively easier to climb, making it accessible even to those without expert mountaineering skills. All you need is determination and a good level of fitness. Remarkably, climbers ranging in age from 7 to 89 years have successfully reached its summit. With the help of our experienced guides, we can take you to the Roof of Africa,where you’ll be rewarded with breathtaking views of the continent’s stunning landscapes. To make your adventure seamless, we offer airport pickups, and pre-tour accommodation can be arranged at an additional cost.",

                    rates: "Starting at $1650 per person.",
                    inclusion: "The package includes porterage, rescue fees, park fees (for non-residents), and all activities (unless labeled as optional). All accommodation is included unless an upgrade is specified. You will have a professional driver/guide throughout the journey, with all transportation provided (unless labeled as optional). All taxes and VAT are covered, and roundtrip airport transfers are included. Meals are provided as specified in the day-by-day section, and drinking water is available on all days.",
                    exclusion: "The package does not include climbing gear, international flights (from/to home), or additional accommodation before and after the tour. Tips are not included, with a guideline of US$10.00 per person per day. Personal items such as souvenirs, travel insurance, visa fees, and other personal expenses are not covered. Additionally, any government-imposed increases in taxes and/or park fees are not included in the package.",
                    endOfTours: "The tour ends with a drop-off at your accommodation or the airport.",
                    weather: "The best time to visit is from June to October.",
                    itinerary: [
                        { day: "Day 1", title: "Arusha -Marangu gate to Mandara hut", description: "The journey begins with a departure from Arusha to the Marangu Gate, where all formalities are completed before embarking on a trek through the lush rainforest that covers the lower slopes of Mount Kilimanjaro. The 4 to 5-hour hike offers an opportunity to spot wildlife, including blue colobus monkeys and various bird species. At the end of the day, you will arrive at Mandara Hut, a budget mountain hut equipped with solar lighting and flush latrines for added comfort. Nearby, the Maundi Crater provides breathtaking views of Northern Tanzania and Kenya, making it a rewarding detour. Along the way, our professional guide, John, will enhance your experience by sharing fascinating information about Kilimanjaro’s history, vegetation, and other intriguing details. The trek covers an elevation of 1860m to 2700m over a distance of 8 kilometers, gaining 818 meters in altitude. Meals include lunch and dinner, while drinking water is provided; other drinks are available at your own cost." },
                        { day: "Day 2", title: "Mandara Hut to Horombo hut", description: "You will wake up early to prepare for an exciting and challenging day of trekking. The journey begins through the forest before the trail opens into the alpine zone, offering stunning views of the changing landscape. If the weather is clear, you’ll catch a glimpse of Kibo and Mawenzi, two of the three volcanic peaks that form the summit of Mount Kilimanjaro. After a 5 to 6-hour hike covering a distance of 12 kilometers, you will arrive at Horombo Hut, where dinner and overnight accommodation await. At this altitude, you may begin to feel the effects of the thinner air, but our team will ensure your safety and comfort. The trek takes you from an elevation of 2700m (8875ft) to 3700m (12,200ft), gaining 998 meters in altitude. The habitat transitions into heathland, offering a unique and picturesque environment. Meals for the day include breakfast, lunch, and dinner, with drinking water provided. Horombo Hut, a budget mountain hut on Kilimanjaro, provides a comfortable resting spot for the night." },
                        { day: "Day 3", title: "Horombo hut to Kibo hut", description: "It’s another big day of trekking as you make your way to Kibo Hut, where you will rest in preparation for your summit attempt to the Roof of Africa. The journey involves climbing almost 4,130 meters, reaching Kibo Hut by evening. Along the way, you’ll traverse the striking alpine desert landscape, which offers a stark and beautiful contrast to the lower zones. Upon arrival, you’ll enjoy dinner and be advised to drink plenty of water to stay hydrated for the challenging ascent ahead. After dinner, you’ll rest and prepare for the early start to your summit climb. The trek takes you from an elevation of 3700m (12,200ft) to 4700m (15,500ft), covering a distance of 9 kilometers over 5 to 6 hours and gaining 993 meters in altitude. Meals for the day include breakfast, lunch, and dinner, with drinking water provided. Kibo Hut, a budget mountain hut on Mount Kilimanjaro, will serve as your accommodation for the night." },
                        { day: "Day 4", title: "Kibo hut- Uhuru Peak to Horombo hut", description: "Just after midnight, our professional guides will wake you with a cup of tea and a light meal to energize you as you prepare for the ultimate adventure. Dressed warmly and ready, you will begin your hike in pitch darkness, trekking for 5 to 6 hours at a steady pace to reach Stella Point a few hours before sunrise. From there, an additional two hours of challenging hiking will take you to your ultimate goal: Uhuru Peak. Standing at 5985 meters, you will witness a breathtaking sunrise and enjoy a spectacular panoramic view from the Roof of Africa—congratulations on your incredible achievement! After savoring the moment, you will begin your descent back to Horombo Hut via Kibo Hut. This descent, covering a total of 21 kilometers, will be one of the longest and most tiring days of your life, but also deeply rewarding. The journey takes you from an elevation of 4700m (15,500ft) to the summit at 5895m (19,340ft) and then down to 3700m (12,200ft). Meals for the day include breakfast, lunch, and dinner, with drinking water provided. You will rest for the night at Horombo Hut, a budget mountain hut on Mount Kilimanjaro." },
                        { day: "Day 5", title: "Horombo hut to Marangu gate to Arusha", description: "Just after midnight, our professional guides will wake you up with a cup of tea and a light meal to give you energy as you dress and prepare for the adventure ahead. You will be hiking in pitch darkness for 5 to 6 hours, so take it easy and you will reach Stella Point a few hours before sunrise. From there, there will be an additional two hours of intense hiking before you reach your ultimate goal: Uhuru Peak. Standing at 5985 meters, you will experience an amazing sunrise and take in a spectacular panoramic view. Congratulations, you have made it to the Roof of Africa! After celebrating your achievement, you will descend back to Horombo Hut via Kibo Hut. This will be one of the longest and most tiring days of your life, but it will be an unforgettable experience. The trek covers a distance of 6 kilometers (4 miles) up and 15 kilometers (9 miles) down. The elevation changes from 4700m (15,500ft) to 5895m (19,340ft) at the summit and then down to 3700m (12,200ft). Meals for the day include breakfast, lunch, and dinner, with drinking water provided. You will spend the night at Horombo Hut, a budget mountain hut located on Mount Kilimanjaro." },

                    ],
                    images: {
                        overview: "mountain.jpg",
                        itinerary: "serengeti-safari.jpg",
                        rates: "serengeti-rates.jpg",
                        inclusion: "serengeti-inclusion.jpg",
                        exclusion: "serengeti-exclusion.jpg",
                        endOfTours: "serengeti-end-of-tours.jpg",
                        weather: "serengeti-weather.jpg",
                        contact: "serengeti-contact.jpg"
                    }
                },
                'package-5': {
                    overview: "The Marangu Route, also known as the Coca-Cola Route, approaches Kilimanjaro from the southeast and is favored by many for being considered the easiest route on the mountain. The minimum duration for this route is five days, though the chances of successfully reaching the summit in that time are somewhat low. It is highly recommended to spend an extra acclimatization day to increase your chances of success. Marangu is unique in that it is the only route that offers sleeping huts in dormitory-style accommodations, providing more comfort than camping. You'll be picked up from the airport or your hotel in Arusha, and accommodation before the tour starts can be arranged for an additional cost.",

                    rates: "Starting at $1980 per person.",
                    inclusion: "The package includes porterage, rescue fees, park fees (for non-residents), and all activities (unless labeled as optional). All accommodation is included, unless an upgrade is specified. A professional driver/guide will accompany you throughout the journey, and all transportation is provided (unless labeled as optional). All taxes and VAT are covered, along with roundtrip airport transfers. Meals are included as specified in the day-by-day section, and drinking water is provided on all days.",
                    exclusion: "The package does not include climbing gear, international flights (from/to home), or additional accommodation before and after the tour. Tips are not included, with a recommended guideline of US$10.00 per person per day. Personal items such as souvenirs, travel insurance, visa fees, and other personal expenses are not covered. Any government-imposed increases in taxes and/or park fees are also not included.",
                    endOfTours: "The tour ends with a drop-off at your accommodation or the airport.",
                    weather: "The best time to visit is from June to October.",
                    itinerary: [
                        { day: "Day 1", title: "Marangu Gate to Mandara Hut", description: "After arriving at Marangu Gate, you will wait for your permits, and once they are ready, you will officially begin your ascent to the first hut, Mandara Hut. As you hike through the montane forest, you may encounter blue and colobus monkeys and hear the sounds of various bird species. The trail takes you to an elevation of 1905m to 2723m, covering a distance of 8.3 km over 4 to 5 hours. The habitat transitions into moorland, offering a unique landscape. You will spend the night at Mandara Hut, a budget mountain hut located on Mount Kilimanjaro. Meals for the day include lunch and dinner, with drinking water provided; other drinks are not included." },
                        { day: "Day 2", title: "Mandara Hut to Horombo Camp", description: "As you continue your ascent, you will encounter small shrubs as well as fairy-tale giants like the groundsel and giant lobelias. Along the way, you'll also catch your first glimpse of Mawenzi, one of the volcanic peaks of Mount Kilimanjaro. The trek takes you from an elevation of 2723m to 3721m, covering a distance of 12.5 km over 6 to 8 hours, with the habitat remaining in the moorland zone. Upon reaching Horombo Hut, you will enjoy a well-deserved dinner and rest for the night. Horombo Hut, a budget mountain hut located on Mount Kilimanjaro, provides basic yet comfortable accommodation. All meals are included, and drinking water is provided, though other drinks are not included." },
                        { day: "Day 3", title: "Horombo Hut", description: "On this day, you have the option to rest at the huts or take a short stroll up to the Mawenzi base camp and then return to Horombo Hut. This extra day is crucial for acclimatization, allowing your body to adjust to the altitude and providing a better understanding of the mountain's weather conditions. After this break, you will continue your journey upwards to Kibo Hut, where you will rest in preparation for the midnight start to the summit. Horombo Hut, a budget mountain hut located on Mount Kilimanjaro, will serve as your accommodation for the night. All meals are included, with drinking water provided; other drinks are not included." },
                        { day: "Day 4", title: "Horombo Hut to Kibo Hut", description: "After a good night's rest and breakfast, you will begin your trek past the last water point to reach the saddle area, a vast desert located between the two peaks of Mawenzi and Kibo. This area offers a stark, alpine desert landscape, with views of both peaks. The trek covers a distance of 10.5 km over 6 hours, taking you from an elevation of 3721m to 4714m. Upon arrival at Kibo Hut, you will enjoy an early dinner and rest for the night in preparation for your summit attempt. Kibo Hut, a budget mountain hut located on Mount Kilimanjaro, will be your accommodation. All meals are included, and drinking water is provided, though other drinks are not included." },
                        { day: "Day 5", title: "Kibo Huts to Summit to Horombo Hut", description: "This portion of the trek is the most mentally and physically challenging, requiring all your strength and determination. It will also be very cold until you begin descending, so make sure you have all your warm layers on. The goal is to reach the summit before dawn, so you can stand at Uhuru Peak just before or after sunrise. The climb involves steep switchbacks over scree, and possibly snow, as you ascend to Gilman’s Point on the crater rim at 5,861 meters, typically between 4 and 6 am. From here, you will have incredible views of the crater and its icecaps. We strongly recommend gaiters and trekking poles to navigate the loose gravel and volcanic ash terrain. The trek covers 4 km upwards to the summit and 14 km down to your next destination. The ascent will take about 5 hours, and the descent will take about 6 hours." },
                        { day: "Day 6", title: "Horombo to Marangu Gate", description: "After a restful sleep, you will be awakened for breakfast, pack your belongings, and continue your descent through the moorland to Mandara Hut. There, you will enjoy lunch before proceeding further down through the lush forest to the Marangu Park gate. After signing out at the gate, a vehicle will transport you back to your hotel in Arusha, where you will receive your certificate of achievement and celebrate your success! The descent covers 18 km and takes 5 to 7 hours, starting from an elevation of 3721m down to 1905m. Meals provided include breakfast and lunch, with drinking water available; other drinks are not included. Afterward, you'll be dropped off at the airport, or if you wish, additional accommodation can be arranged for an extra cost. This marks the end of your tour." },

                    ],
                    images: {
                        overview: "marangu.jpg",
                        itinerary: "luxury-safari-itinerary.jpg",
                        rates: "luxury-safari-rates.jpg",
                        inclusion: "luxury-safari-inclusion.jpg",
                        exclusion: "luxury-safari-exclusion.jpg",
                        endOfTours: "luxury-safari-end-of-tours.jpg",
                        weather: "luxury-safari-weather.jpg",
                        contact: "luxury-safari-contact.jpg"
                    }
                },
                'package-6': {
                    overview: "The Machame Route, known for its diverse landscapes and breathtaking views, offers a unique challenge that will test your willpower, fitness, and mental strength. This route takes you through lush rainforests, where you may encounter colobus monkeys, and continues into heath and moorland, filled with ferns and ericas. Eventually, you will reach the icy caps at the summit of Mount Kilimanjaro. During the trek, you will stay in tents for overnight accommodations. While the climb may seem challenging, it is made easier with the guidance of our professional tour guide. You'll be picked up from your hotel or the airport in Arusha, and accommodation before the tour starts can be arranged for an extra cost.",

                    rates: "Starting at $2310 per person.",
                    inclusion: "The tour package includes porterage to assist with carrying your gear, a rescue fee for your safety, and park fees for non-residents. It also covers all activities unless specifically labeled as optional, as well as all accommodations unless an upgrade is requested. A professional driver/guide will accompany you throughout the journey, and all necessary transportation is included unless marked as optional. The package also takes care of all applicable taxes and VAT, roundtrip airport transfers, meals as specified in the itinerary, and drinking water for every day of the tour.",
                    exclusion: "The tour package excludes climbing gear, which participants need to bring or rent. International flights to and from your home are not included. Additional accommodation before and after the tour can be arranged at an extra cost. Tips are also excluded, with a guideline of US$10.00 per person per day. Personal items such as souvenirs, travel insurance, visa fees, and other essentials are the responsibility of the traveler. Any government-imposed increases in taxes or park fees are also not covered in the package.",
                    endOfTours: "The tour ends with a drop-off at your accommodation or the airport.",
                    weather: "The best time to visit is from June to October.",
                    itinerary: [
                        { day: "Day 1", title: "Machame Gate to Machame Camp", description: "You will be picked up from your hotel by our driver and guide, who will provide a briefing about your journey up Mount Kilimanjaro. After the briefing, you will be driven to Machame Gate to register and sign the necessary documents before starting your trek. From the gate, you will walk through the rainforest along a winding trail that ascends a ridge. The lower section of the trail can be muddy and slippery, so gaiters and trekking poles are recommended. After a short distance, you will reach Machame Camp, where you will spend the night. The trek covers a distance of 11 km, taking 5 to 6 hours, with an elevation gain from 1790m to 3010m. The habitat is primarily rainforest. Your accommodation will be budget camping on Mount Kilimanjaro. Meals for the day include lunch and dinner, with drinking water provided; other drinks are not included." },
                        { day: "Day 2", title: "Machame Camp to Shira Campi", description: "After breakfast, you will leave the lush rainforest behind and continue along an ascending path. You will cross a small valley and then follow a steep rocky ridge covered with heather until you reach the end of the ridge. The route then turns west into a river gorge. Your overnight stay will be at the Shira Hut campsite, located at an elevation of 3845m. The trek covers a distance of 5 km, taking 4 to 6 hours, with an elevation gain from 3010m to 3845m. The habitat transitions into moorland. Accommodation will be budget camping on Mount Kilimanjaro. All meals are included, with drinking water provided; other drinks are not included." },
                        { day: "Day 3", title: "Shira Camp to Lava Tower to Barranco Camp", description: "On this day, your trek begins with an ascent above the Shira Plateau toward the Lava Tower. As you climb, the surrounding vegetation becomes more sparse, and the landscape transitions into an alpine desert. You will continue through the expansive Barranco Valley, home to lobelia and giant senecio plants. After approximately 6 to 7 hours of hiking, you will arrive at Barranco Camp, which is renowned for being the most beautiful camp on the mountain. The trek covers a distance of 8 km, taking 5 to 6 hours, with an elevation gain from 3845m to 3986m. The habitat is semi-desert. Accommodation will be budget camping on Mount Kilimanjaro. All meals are included, with drinking water provided; other drinks are not included." },
                        { day: "Day 4", title: "Barranco Camp to Karanga Camp", description: "After breakfast, we will leave Barranco and continue along a steep ridge, passing the Barranco Wall, and make our way to the Karanga Valley campsite. This is a shorter day, designed specifically for acclimatization. The trek covers a distance of 5 km, taking 3 to 4 hours, with an elevation gain from 3986m to 4034m. The habitat is alpine desert. Accommodation will be budget camping on Mount Kilimanjaro. All meals are included, with drinking water provided; other drinks are not included." },
                        { day: "Day 5", title: "Karanga Camp to Barafu Camp", description: "After breakfast, we leave Karanga and proceed to the junction that connects with the Mweka Trail. From here, we continue ascending to the Barafu Hut. At this point, you will have completed the South Circuit, which provides stunning views of the summit from various angles. From this position, the two peaks of Mawenzi and Kibo are clearly visible. The trek covers a distance of 3 km, taking 2 to 3 hours, with an elevation gain from 4034m to 4662m. The habitat is alpine desert. Accommodation will be budget camping on Mount Kilimanjaro. All meals are included, with drinking water provided; other drinks are not included." },
                        { day: "Day 6", title: "Barafu Camp to Summit to Mweka Camp", description: "Very early in the morning, between midnight and 2 a.m., you will begin your ascent to the summit, passing between the Rebmann and Ratzel glaciers. Heading in a northwesterly direction, you will climb through heavy scree towards Stella Point on the crater rim. At Stella Point, you will pause for a short rest and enjoy the most magnificent sunrise, weather permitting. From Stella Point, snow may accompany you on the final 1-hour ascent to the summit. Reaching Uhuru Peak, the highest point on Mount Kilimanjaro and the entire African continent, will be a moment of triumph and awe as you take in the breathtaking views. After spending some time at the summit, you will begin your descent back to Barafu, where a warm meal and rest await. Following this, you will continue your journey down to Mweka Camp, where you will have dinner and spend the night. The day's trek is both physically and mentally challenging, transitioning from the arctic conditions at the summit to the alpine desert on the descent." },
                        { day: "Day 7", title: "Mweka Camp to Mweka Gate", description: "After breakfast, you will continue your descent down to the Mweka Park Gate, where you will receive your well-earned summit certificates. As you descend to lower elevations, the terrain may become wet and muddy, so gaiters and trekking poles are highly recommended. The warmer climate at this altitude means shorts and t-shirts will likely suffice, though it's wise to keep rain gear and warmer clothing on hand. Once all formalities at the gate are completed, you will be driven back to your respective accommodation to rest and celebrate your incredible achievement." },

                    ],
                    images: {
                        overview: "barranco.jpg",
                        itinerary: "wildlife-itinerary.jpg",
                        rates: "wildlife-rates.jpg",
                        inclusion: "wildlife-inclusion.jpg",
                        exclusion: "wildlife-exclusion.jpg",
                        endOfTours: "wildlife-end-of-tours.jpg",
                        weather: "wildlife-weather.jpg",
                        contact: "wildlife-contact.jpg"
                    }
                },
                'package-7': {
                    overview: "The Northern Route is an excellent choice for climbing Mount Kilimanjaro, offering ample time for acclimatization and showcasing the mountain's diverse landscapes. This route traverses the mountain from west to east, providing a unique and comprehensive experience. It is known for its higher success rate, making it a preferred option for climbers. You will be collected from the airport upon arrival, and additional accommodation before the tour starts can be arranged at an extra cost to suit your needs.",

                    rates: "Starting at $2970 per person.",
                    inclusion: "All meals, park fees, accommodation, and safari guides.",
                    exclusion: "Flights, personal expenses, and travel insurance.",
                    endOfTours: "The tour ends with a drop-off at your accommodation or the airport.",
                    weather: "The best time to visit is during the dry season, from June to October.",
                    itinerary: [
                        { day: "Day 1", title: "Arusha to Londorosi Gate to Mti Mkubwa Camp", description: "After breakfast at your hotel, your guide will provide a detailed briefing about the trek. At 9 am, you will be picked up by our team and driven to the western side of Mount Kilimanjaro, heading to Londrossi Gate. Here, the guides and porters will prepare and pack the equipment and supplies. After registration at the Kilimanjaro Park office, you will be given a packed lunch. The journey continues with a 45-minute drive to Lemosho Glades, where the trek officially begins. You will ascend for about three hours through dense rainforest, which may be wet and muddy, so it’s advisable to use gaiters and trekking poles. By late afternoon, you will arrive at Mti Mkubwa Camp, also called Big Tree Camp. Upon arrival, you’ll find your tent already set up by the porters who went ahead. You will be greeted with boiled drinking water and hot washing water to refresh yourself. Once settled in, a hot dinner will be served in your tent." },
                        { day: "Day 2", title: "Mt Mkubwa Camp to Shira 1 camp", description: "From the forested slopes of Lemosho, you ascend through a podocarpus and juniper forest before emerging into a stunning zone of heather and volcanic rock draped with lichen. This path leads to the Shira Plateau, which was once Kilimanjaro’s third peak before its collapse. Along the way, you will pause for lunch on the trail, taking in the natural beauty surrounding you. By mid-afternoon, you will reach Shira 1 Camp, where you can relax and enjoy the breathtaking view of Kibo, the majestic peak of Kilimanjaro. Overnight will be spent at the camp, offering a serene end to an incredible day of trekking." },
                        { day: "Day 3", title: "Shira 1 Camp to Shira 2 Camp", description: "After breakfast, the journey continues across the expansive Shira Plateau, gradually ascending to Shira Camp 2 at an altitude of 3,850 meters. Along the way, you’ll be treated to breathtaking views of the valley below and the towering Western Breach of Kilimanjaro above. At Shira Camp 2, you’ll join trekkers from the Machame Route, sharing stories and camaraderie under the open sky. The plateau is exposed, so prepare for a cold night as temperatures can drop below zero. It’s an unforgettable experience amidst the raw beauty of Kilimanjaro." },
                        { day: "Day 4", title: "Shira 2 Camp to Moir Hut Camp", description: "Leaving the forest behind, the trail ascends gently across the high-altitude Shira Caldera, offering stunning views of the expansive landscape and the striking Arrow Glacier. The journey leads to Shira Cave, where the magnificent scenery sets the tone for the day. Continuing the trek, you will arrive at Moir Hut Camp, situated at 4,200 meters, where you will rest for the night. The camp provides a tranquil spot to relax and prepare for the challenges ahead on Kilimanjaro." },
                        { day: "Day 5", title: "Moir Hut to Buffalo Camp", description: "After climbing out of the Moir Valley, the trek takes a short detour to reach the summit of Lent Hills at 15,400 feet, offering breathtaking panoramic views of the surrounding landscape. After taking in the stunning vistas, you will return to the main trail and head eastwards, following the northern circuit route. The final section of the day involves an undulating path, gradually making its way toward Pofu Camp, where you will rest for the night. The camp provides a peaceful environment to unwind and prepare for the next day's journey on Mount Kilimanjaro." },
                        { day: "Day 6", title: "Buffalo Camp to Third Cave", description: "From Pofu Camp, the trek continues eastwards, crossing numerous small valleys as the landscape gradually becomes more barren with increasingly sparse vegetation. After several hours of walking, you will arrive at Third Cave Camp, located at a higher elevation. This camp offers a tranquil setting where you can relax and enjoy a hearty dinner, preparing for the next day's journey. After dinner, you'll rest for the night at Third Cave, situated on the slopes of Mount Kilimanjaro, to recharge for the upcoming challenges of the climb." },
                        { day: "Day 7", title: "Third Cave to School Hut Camp", description: "There is a steady ascent as you make your way towards the saddle, a barren, lunar-like landscape nestled between the towering peaks of Kibo and Mawenzi. After navigating this challenging terrain, you will reach School Hut by early afternoon. This camp serves as a rest stop, where you will spend the remainder of the day relaxing and preparing for the summit day ahead. It is crucial to rest and conserve energy, as the summit climb will require both mental and physical strength. Dinner will be served, and you will rest overnight at School Hut, ready for the final push to the summit." },
                        { day: "Day 8", title: "School hut to Uhuru peak to Mweka Camp", description: "The final and most challenging part of your climb begins around 1 a.m., as you embark on a switchback trail through loose volcanic scree to reach the crater rim at Gillman’s Point. Here, you will take a brief rest and witness a spectacular sunrise over the Mawenzi peak. Afterward, you will continue towards Uhuru Peak, passing close to the awe-inspiring glaciers and ice cliffs that still dominate much of the summit area. Once at the peak, you will retrace your steps along the crater rim to Stella Point, then descend through Barafu Camp to finally reach Mweka Camp. This marks the culmination of your incredible journey to the roof of Africa." },
                        { day: "Day 9", title: "Mweka Camp to Mweka Gate", description: "After your final celebratory breakfast, where the team will thank and congratulate you in their unique, special way, you'll begin the final 3-hour scenic descent to Mweka Gate. Once you reach the gate, you'll sign out and enjoy a well-deserved lunch. Afterward, you'll be dropped off at your hotel, where you can relax and enjoy a long, hot shower to celebrate the successful completion of your Kilimanjaro adventure. This marks the end of your tour." },

                    ],
                    images: {
                        overview: "mountain5.jpg",
                        itinerary: "beach-safari-itinerary.jpg",
                        rates: "beach-safari-rates.jpg",
                        inclusion: "beach-safari-inclusion.jpg",
                        exclusion: "beach-safari-exclusion.jpg",
                        endOfTours: "beach-safari-end-of-tours.jpg",
                        weather: "beach-safari-weather.jpg",
                        contact: "beach-safari-contact.jpg"
                    }
                },
                'package-8': {
                    overview: "Travel to the southern village of Kizimkazi, renowned for its dolphin populations. This early morning tour offers the best chance to spot and swim with bottlenose and humpback dolphins in their natural habitat. While the opportunity to swim with dolphins is thrilling, guides emphasize responsible tourism to avoid disturbing the animals. After your dolphin encounter, explore the nearby coral reefs through snorkeling, where you can see vibrant marine life. This tour also includes a visit to the historic Kizimkazi Mosque, one of the oldest Islamic buildings in East Africa.",

                    rates: "Starting at $350 per person.",
                    inclusion: "Accommodation, guided tours, park fees, and all meals.",
                    exclusion: "Flights, personal expenses, and travel insurance.",
                    endOfTours: "The tour ends with a drop-off at your accommodation or the airport.",
                    weather: "The best time to visit is during the dry season from June to October.",
                    itinerary: [
                        { day: "Day 1", title: "Arrival in Arusha", description: "Tour the cultural sites in Arusha." },
                        { day: "Day 2", title: "Serengeti Safari", description: "Explore Serengeti National Park." },
                        { day: "Day 3", title: "Ngorongoro Crater", description: "Full-day safari in Ngorongoro Crater." },
                    ],
                    images: {
                        overview: "dorphine 2.jpg",
                        itinerary: "adventure-tour-itinerary.jpg",
                        rates: "adventure-tour-rates.jpg",
                        inclusion: "adventure-tour-inclusion.jpg",
                        exclusion: "adventure-tour-exclusion.jpg",
                        endOfTours: "adventure-tour-end-of-tours.jpg",
                        weather: "adventure-tour-weather.jpg",
                        contact: "adventure-tour-contact.jpg"
                    }
                }
            };

            document.querySelectorAll('.view-details-btn').forEach(button => {
                button.addEventListener('click', function (e) {
                    e.preventDefault();
                    const packageId = this.getAttribute('data-package');
                    const modal = document.getElementById('package-modal');
                    const packageData = packageDetails[packageId];

                    document.querySelector('#overview-text').textContent = packageData.overview;
                    document.querySelector('#rates-text').textContent = packageData.rates;
                    document.querySelector('#inclusion-text').textContent = packageData.inclusion;
                    document.querySelector('#exclusion-text').textContent = packageData.exclusion;
                    document.querySelector('#end-of-tours-text').textContent = packageData.endOfTours;
                    document.querySelector('#weather-text').textContent = packageData.weather;

                    // Set unique image for the overview section
                    document.querySelector('.tab-image').src = packageData.images.overview;

                    const itineraryContainer = document.getElementById('itinerary-content');
                    itineraryContainer.innerHTML = "";
                    packageData.itinerary.forEach(day => {
                        const dayElement = document.createElement('div');
                        dayElement.classList.add('itinerary-day');
                        dayElement.innerHTML = `
                        <h4>${day.day}: ${day.title}</h4>
                        <p>${day.description}</p>
                    `;
                        itineraryContainer.appendChild(dayElement);
                    });

                    modal.style.display = 'block';
                });
            });

            document.querySelector('.close-modal').addEventListener('click', function () {
                document.getElementById('package-modal').style.display = 'none';
            });

            document.querySelector('.back-to-packages').addEventListener('click', function () {
                document.getElementById('package-modal').style.display = 'none';
            });

            document.querySelectorAll('.modal-nav-link').forEach(link => {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    document.querySelectorAll('.modal-nav-link').forEach(navLink => navLink.classList.remove('active'));
                    this.classList.add('active');
                    document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
                    document.querySelector(this.getAttribute('href')).classList.add('active');
                });
            });
        });
    </script>
    </main>

    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Information and Guide</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        /* General reset for all elements */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Scoped styles for the main content area */
        .travel-guide {
            font-family: 'Roboto', sans-serif;
            background-color: #f1f7fc; /* Softer background color for better contrast */
            color: #333;
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            min-height: 50vh;
        }

        .travel-guide main {
            display: flex;
            justify-content: space-between;
            width: 100%;
            flex: 1;
            padding: 20px;
        }

        /* Section styling */
        .travel-guide .section {
            padding: 20px;
            background-color: #ffffff; /* Clean white background */
            border-left: 5px solid #0078d7; /* Vibrant blue border */
            border-radius: 8px; /* Rounded corners */
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            margin-right: 10px;
            flex: 1;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        }

        .travel-guide .section:nth-child(even) {
            background-color: #f4faff; /* Light blue background for alternating sections */
        }

        .travel-guide .section:hover {
            background-color: #e0f3ff; /* Slightly brighter hover effect */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More pronounced shadow on hover */
        }

        .travel-guide .section h2 {
            font-size: 1.2rem; /* Smaller heading size */
            margin-bottom: 10px; /* Reduced margin */
            color: #0078d7; /* Vibrant blue for headings */
            text-transform: uppercase;
            letter-spacing: 1px;
            border-bottom: 2px solid #0078d7; /* Consistent with section border */
            padding-bottom: 5px;
        }

        .travel-guide .section ul {
            list-style: none;
            padding-left: 0;
        }

        .travel-guide .section ul li {
            margin-bottom: 8px; /* Reduced margin */
            font-size: 1rem;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .travel-guide .section ul li:hover {
            color: #0056a3; /* Darker blue on hover */
        }

        /* View More button styling */
        .view-more {
            text-align: center;
            margin-top: 15px;
            width: 100%; /* Ensure it covers the full width */
        }

        .view-more a {
            display: block; /* Makes the link behave like a block element */
            text-decoration: none;
            color: #fff;
            background-color: #3498db;
            font-size: 1.1rem;
            padding: 12px 0; /* Added padding for vertical spacing */
            border-radius: 5px;
            transition: all 0.3s;
            width: 100%; /* Make the button span the full width */
            text-align: center; /* Center the text inside the button */
        }

        .view-more a:hover {
            background-color: #2980b9;
        }

        /* Footer styling */
        .travel-guide footer {
            text-align: center;
            background-color: #0056a3; /* Darker blue footer */
            color: white;
            padding: 15px;
            font-size: 0.9rem;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        }

        .travel-guide footer p {
            margin: 5px 0;
        }

        .travel-guide footer a {
            color: #bcdcff; /* Softer link color for footer */
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .travel-guide footer a:hover {
            color: #ffffff; /* Pure white on hover */
        }

        /* Mobile Layout */
        @media (max-width: 768px) {
            .travel-guide main {
                flex-direction: column;
            }

            .travel-guide .section {
                margin-right: 0;
                margin-bottom: 15px;
            }

            .travel-guide .section:last-child {
                margin-bottom: 0;
            }

            .travel-guide .section h2 {
                font-size: 1.2rem;
            }

            .travel-guide .section ul li {
                font-size: 0.9rem;
            }

            .view-more a {
                font-size: 1rem; /* Adjusted font size */
                padding: 8px 0; /* Adjusted padding */
            }
        }
    </style>
</head>
<body>
    <div class="travel-guide">
        <main>
            <section class="section">
                <h2>About Us</h2>
                <ul>
                    <li>Terms and Conditions</li>
                    <li>Privacy</li>
                </ul>
            </section>

            <section class="section">
                <h2>Travel Information</h2>
                <ul>
                    <li>Tanzania Weather</li>
                    <li>Yellow Fever Requirement</li>
                    <li>When to Visit</li>
                    <li>Travel Resources</li>
                </ul>
            </section>

            <section class="section">
                <h2>Travel Guide</h2>
                <ul>
                    <li>Frequently Asked Questions</li>
                    <li>Mountain Packing List</li>
                    <li>Packing List for Safaris</li>
                    <li>Safari Coding</li>
                    <li>Things to Do</li>
                </ul>
            </section>

            <section class="section">
                <h2>Contact Us</h2>
                <ul>
                    <li>Call and WhatsApp: +255 692 208 654</li>
                    <li>Email: info@mafoyafricasafaris.com</li>
                    <li>Address: Arusha, Tanzania</li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Instagram</a></li>
                </ul>
            </section>
        </main>

        <footer>
            <p>&copy; 2024 Mafoy Africa Safaris. All Rights Reserved.</p>
            <p><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
        </footer>
    </div>
</body>
</html>