html {
  scroll-behavior: smooth;
}

/* Offset for the Fixed Navbar */
section {
  scroll-margin-top: 70px; /* This prevents the navbar from covering your titles */
}

/* --- Desktop & Laptop Polish --- */
@media (min-width: 992px) {
    .text-md-justify {
        text-align: justify;
    }
    #hero {
        min-height: 60vh; /* Hero takes up 60% of laptop screen height */
        display: flex;
        align-items: center;
    }
}

/* --- Mobile-Specific Optimization --- */
@media (max-width: 767px) {
    /* 1. Prevent "Map Trapping" - makes the map shorter so users can scroll past it */
    iframe {
        height: 250px !important;
    }

    /* 2. Hero Adjustments - ensures the logo doesn't look tiny or too huge */
    #hero {
        padding-top: 80px !important; /* Space for the fixed navbar */
        padding-bottom: 40px !important;
    }
    #hero img {
        width: 250px !important; /* Better fit for phone screens */
    }

    /* 3. Typography - Left align is easier to read on narrow screens */
    h1 {
        font-size: 1.75rem; /* Slightly smaller headers for mobile */
    }
    .text-justify, .text-md-justify {
        text-align: left !important;
    }

    /* 4. Padding - Tighter spacing for mobile thumb-scrolling */
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* --- Global Utilities --- */
.img-fluid.rounded {
    transition: transform 0.3s ease;
}
/* Subtle hover effect for laptop users */
.img-fluid.rounded:hover {
    transform: scale(1.02);
}