header nav ul {
    list-style-type: none;
    text-align: center;
    background: #007aff;
    margin: 0;
    padding: 0;
}

header nav ul li {
    display: inline-block;  /* changed from inline for better mobile handling */
    margin-right: 20px;
}

header nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 15px 20px;
    display: block;  /* makes the whole area clickable */
}

body, html {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
    background-color: #f4f4f9;
}

.hero {
    background-image: url('https://lh3.googleusercontent.com/fife/ALs6j_FBg1qoTJUj2VDy766-9lX_DDGNVyP9OK8goJ3au0kOdEuhMgIozS2QfxpoNg0TIwg4QCjjwCKkNaRkhD6BI6kqYNY8sWo_84IWC9Z0aAoXC-0EuliNk69M8I3M-qL1hXj_qem10h2KHzvQHUEIXNeZOHi_h5E4cFrNcZj3yEGQCDMyka606QWoetgziN7l2M4lCIDzlP8EJsGd8vGvj5-MXAB6Kyn0-4Jk8TnpbHSkAjuV8y-mQxkgxN9Lb8w-iZWUIp4d5HcTs3KolkDmO4Ty_BZVUMqxgApMVR2jmRkaJZ9NX-QSTdsbct440bDcV4pTZ0u9pBY6VOlq1Fd_e_pjW4DnmGKVSES3sQKOTVSeba63kkVB4lRtLuTHUCAVqZ2t0AmN27uGjvplbsMiyWhHCTJhEAUbSCnSCK8MPJvP0y5d_iZTROJTmlR4WZNJk-vLW506GtBPjP5YBXqbSj50bIQNAx3ZeMcCxXfB3uY-GdhnLXoPCl-htNRsiUvOfC44e94OHkIbAjCzBujE3Gc730GUD0cl92NlJ-HbTg_ngrXAuGXuaiH8Ii_6Va9l2-8Gx5RIeU_HAHrQ4Lj8fvG9U44WCSgso_jr1B7u8xBcyDqmseruIMW4tUGuPhMWtRxgX3vAT1EOnLfSEhPZfuXxma_tGVgoO4YAoShnJl6nGNJS8X-E-LZWiYiFvn94eggs-V5qtZZIPktSPn5m2e-6wKDAz5dff046qRndBrhPwdqqeQ3OsU4eTXq6XSchrVvRe4K8sSKZbdbgkAYhbrR1LNVqIsKlwpqwiM25JgNKOyy2qRA1jc88QOH-w80-Az4sosijp37RO8rxiOEIPFxGu7Y5G7az29dwlbNjY0UdV6bZ9dsj_9d64Y-0ZGL7nTUKWYCRmu02zXEyT8_hpiE0tBEXVtewoW9FsJtB_rSs2AjUJpVG3gNdCjhv-0ihibUstNrX70Eb5V8KE3xRyMkZ-Uel-xYK7qY-0jjnbMdzY1pdAbMPsS1JCQzjtSMmexhAS19M9sjt-pF8A34QR7liv6MEI7yKKmsjSgid_wz_7PVmj7Hscece9Rp-44bfd4tsTFKGfw25RERH8sIqPb5f5_YpVazizi1fVJXmLXfRtV3IrAy5rxvJ5o_cBVrF7B5em8hjsb8M06SZOufdL-125x1Z9x_JfLe_MwtpLlu9E2FHz7aKMfnhKcLLog09oagyks-LFJs-2Cpw425vPpZTUyIQLZIPRsuco9m9hgw3I1JhnkuDQsESuCRk_OTtPtyHkgyAui7Q3xJui6UdIOw-Z-2YIv6qjZbfO4_ktrW5mqkOiCtgJM6yc4J2DXZg8cG3Ai5N8Ha1fTFUmjtGbQTCWAj-KLLPI_tx0lCPPVMZUu2A0r4l1J44z88uWY4tMyf6i0lqbnUIXzyZUav_ChsJpYoE1Xt8NbZ3CIyGTh48aWeRs15khJMxlKlI3rFXVB5MdEqpg_TT-cLyvOz7MRXwuXj4r-4BV8HCFDBzH7FzTHd7_x85s8Wdim1atO7Fesl3q42M6UN6Wy9N-QzkVri_m-Pt5S_nEfEOfYtk-wI65c_yJSLW0yUttNa-HbYWLPI2NHRQ_NYqk2pWLLQLeBTToGJVNOXQrtYcHdr4_qGiyMEvI0bpFrziUiiS47JivrhmzbKP_vdezcE2RpsFIIZJhkj1iOSvOVEuuBdgfsBJnY-bSOgq8IBIaTU=w4096-h2336');
    height: 100vh;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    background-position: center;
}

.content, .plans {
    padding: 20px;
    text-align: center;
}

.content {
    background: white;
    margin: 20px auto;
    max-width: 80%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.plans {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Modern way to space flex items */
}

.plan {
    flex: 1 1 300px; /* Flex-grow, flex-shrink, flex-basis */
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    background: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-in-out;
}

@media (max-width: 768px) {
    header nav ul li {
        display: block; /* stack nav items on smaller screens */
        text-align: center;
    }

    .hero {
        height: 50vh; /* shorter hero section on smaller devices */
    }
}

.button {
    background-color: #007aff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.button:hover {
    background-color: #0056b3;
}