html, body {
    overflow-x: hidden;
    max-width: 100%;
}

.hero-section {
            position: relative;
            min-height: 700px;
            background-image: url('../images/pine.jpg');
            background-size: cover;
            background-position: center;
            margin-top: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0);
        }

        .hero-text {
            position: relative;
            z-index: 1;
            padding: 4rem 5%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            max-width: 900px;
        }

        .hero-text > * {
            max-width: 100%;
            width: 100%;
        }

        .hero-image {
            display: none;
        }

        @media (max-width: 768px) {
            .hero-section {
                min-height: 600px;
            }
            .hero-text {
                padding: 3rem 1.5rem;
            }
        }