/* style.css */
body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #f1f1f1;
    padding: 1rem;
    text-align: center;
}

    header h1 {
        color: #003555;
        margin: 0;
    }

nav {
    background-color: #003555;
    text-align: center;
}

    nav a {
        display: inline-block;
        color: white;
        padding: 1rem;
        text-decoration: none;
        font-weight: bold;
    }

        nav a:hover {
            background-color: #ffd25f;
            color: #003555;
        }

.hero {
    background-color: #ddd;
    height: 300px;
    background-image: url('./images/plane.jpg');
    background-size: cover;
    background-position:center;
    display: flex;
    align-items: center;
    justify-content: left;
}

    .hero h2 {
        background-color: #ffd25f;
        padding: 1rem;
        border-radius: 5px;
        color: #003555;
    }

main {
    padding: 2rem;
    max-width: 900px;
    margin: auto;
    background-color: #f4f4f4;
}

img.placeholder {
    width: 100%;
    max-width: 400px;
    height: 200px;
    background-color: #ccc;
    display: block;
    margin: 1rem auto;
    object-fit: cover;
}

footer {
    background-color: #003555;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}
.larger {
    font-size: 1.5em;
}
#testimonials h2 {
    padding: 5px;
    background-color: #003555;
    color: white;
}

.button {
    padding: 1em;
    background-color: #ffd25f;
    text-decoration: none;
    color: #003555;
    font-weight: 600;
    margin-top: 1em;
    display: inline-block;
}
#reserve {
    margin:.5em;
}

.fares h1 {
    font-size: 1.3em;
    background-color: #ffd25f;
    padding: .5em;
}

/* Responsive Nagivation */

nav {
    color: white;
    padding: 10px 0;
    text-align: center; /* Initially center the links for wider screens */
}

    nav a {
        color: white;
        padding: 14px 20px;
        text-decoration: none;
        display: inline-block; /* Display links inline on wider screens */
    }


/* Style for the hamburger menu (initially hidden) */
.menu-icon {
    display: none;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

/* Style for the navigation links in the mobile view (initially hidden) */
.nav-links {
    display: none;
    flex-direction: column; /* Stack links vertically */
    width: 100%;
    text-align: left; /* Align links to the left in mobile view */
}

    .nav-links a {
        display: block; /* Make each link take full width */
    }

/* Show the menu icon and stack links vertically on smaller screens */
@media screen and (max-width: 600px) {
    nav {
        position: relative; /* Needed for absolute positioning of the menu icon */
        text-align: left; /* Align title to the left on smaller screens */
        padding: 15px 0; /* Adjust padding for smaller screens */
    }

    .menu-icon {
        display: block;
    }

    .nav-links {
        display: none; /* Initially hide the links */
    }

        .nav-links.responsive {
            display: flex; /* Show the links when the 'responsive' class is added */
        }

            .nav-links.responsive a {
                padding: 10px 15px;
            }

    nav a {
        display: none; /* Hide the inline links on smaller screens */
    }

        nav a:first-child {
            display: inline-block; /* Show the Home link as a potential title */
            margin-left: 15px;
        }
}
@media screen and (max-width: 600px) {
    span.larger {
        font-size: 1em; /* Font size for h1 on screens 600px or smaller */
    }
}