/* General styles for mobile adjustments */
@media (max-width: 768px) {
    /* Adjust the logo size and margin on mobile */
    .logo {
        max-width: 150px; /* Make logo smaller on mobile */
        margin-bottom: 20px;
    }

    /* Reduce the size of the h1 title on mobile */
    .hero-section h1 {
        font-size: 2em; /* Reduce the heading size */
    }

    /* Adjust the subheading font size */
    .hero-section p.lead {
        font-size: 1.1em; /* Reduce the subheading size */
    }

    /* Adjust button size and positioning */
    .hero-section .btn {
        font-size: 1em;
        padding: 10px 20px;
    }

    /* Ensure enough spacing below the button */
    .hero-section {
        padding-bottom: 30px;
    }

    /* Fix overlap issues by increasing padding between sections */
    section#about {
        padding-top: 50px;
    }
}