@php
     $news = App\Models\NewsEvent::first();
@endphp
<div class="top-section">
    <div class="content-wrapper">
        <h1 class="main-title">{{ $news->main_title }}</h1>
        <p class="subtitle">{{ $news->text }}</p>
    </div>
</div>

<style>
    .top-section {
        margin-top: 150px;
        padding: 60px 5%;
        /* margin: 0 auto; */
        text-align: left;
        margin-left: 0;
    }

    .content-wrapper {
        margin: 0 auto;
    }

    .main-title {
        font-size: 2rem;
        font-weight: 700;
        color: #0a4375;
        margin-bottom: 0.2em;
        letter-spacing: 1px;
    }

    .subtitle {
        font-size: 0.9rem;
        color: #333;
        margin-top: 0;
    }

   /* Enhanced responsive styles */
   @media (max-width: 1200px) {
        .top-section {
            margin-top: 130px;
            padding: 50px 4%;
        }
        .main-title {
            font-size: 1.9rem;
        }
        .subtitle {
            font-size: 0.95rem;
        }
    }

    @media (max-width: 992px) {
        .top-section {
            margin-top: 120px;
            padding: 45px 3%;
        }
        .main-title {
            font-size: 1.8rem;
        }
        .subtitle {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 768px) {
        .top-section {
            margin-top: 110px;
            padding: 40px 5%;
        }
        .main-title {
            font-size: 2rem;
        }
        .subtitle {
            font-size: 1rem;
        }
    }

    @media (max-width: 600px) {
        .top-section {
            margin-top: 100px;
            padding: 35px 4%;
        }
        .main-title {
            font-size: 1.7rem;
        }
        .subtitle {
            font-size: 0.95rem;
        }
    }

    @media (max-width: 576px) {
        .top-section {
            margin-top: 90px;
            padding: 30px 4%;
        }
        .main-title {
            font-size: 1.8rem;
        }
        .subtitle {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 480px) {
        .top-section {
            margin-top: 80px;
            padding: 25px 3%;
        }
        .main-title {
            font-size: 1.6rem;
        }
        .subtitle {
            font-size: 0.85rem;
        }
    }

    @media (max-width: 400px) {
        .top-section {
            margin-top: 70px;
            padding: 20px 2%;
        }
        .main-title {
            font-size: 1.5rem;
        }
        .subtitle {
            font-size: 0.8rem;
        }
    }

    @media (max-width: 360px) {
        .top-section {
            margin-top: 60px;
            padding: 18px 2%;
        }
        .main-title {
            font-size: 1.4rem;
        }
        .subtitle {
            font-size: 0.75rem;
        }
    }
</style>