В этом коде есть проблема при полете чаек, добавь еще 3 чайки и реши все проблемы. @extends('layouts.main')
@section('content')

    <section>
        <div>
            <div class="container d-flex align-items-center" style="height:80px">
                <h3 class="fw-bold">О Компании</h3>
            </div>
        </div>

        <div style="background-color: #27282C;">
            <div class="container pb-5 about" style="position: relative !important;">
                    <svg class="seagull" id="seagull1"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50" width="100" height="50">
                        <!-- Чайка -->
                        <g fill="none" stroke="white" stroke-width="1">
                            <g>
                                <!-- Левое крыло -->
                                <path d="M30,25 C25,20 15,15 5,25">
                                    <animateTransform attributeName="transform" type="translate" from="0 0" to="100 0" dur="5s" repeatCount="indefinite" />
                                </path>

                                <!-- Правое крыло -->
                                <path d="M30,25 C35,20 45,15 55,25">
                                    <animateTransform attributeName="transform" type="translate" from="0 0" to="100 0" dur="5s" repeatCount="indefinite" />
                                </path>

                                <!-- Тело чайки -->
                                <path d="M28,25 C30,27 32,27 34,25">
                                    <animateTransform attributeName="transform" type="translate" from="0 0" to="100 0" dur="5s" repeatCount="indefinite" />
                                </path>
                            </g>
                        </g>
                        </g>
                    </svg>


                <svg class="seagull" id="seagull2" viewBox="0 0 100 50">
                    <!-- Чайка -->
                    <g fill="none" stroke="white" stroke-width="1">
                        <g>
                            <!-- Левое крыло -->
                            <path d="M30,25 C25,20 15,15 5,25">
                                <animateTransform attributeName="transform" type="translate" from="0 0" to="100 0" dur="5s" repeatCount="indefinite" />
                            </path>

                            <!-- Правое крыло -->
                            <path d="M30,25 C35,20 45,15 55,25">
                                <animateTransform attributeName="transform" type="translate" from="0 0" to="100 0" dur="5s" repeatCount="indefinite" />
                            </path>

                            <!-- Тело чайки -->
                            <path d="M28,25 C30,27 32,27 34,25">
                                <animateTransform attributeName="transform" type="translate" from="0 0" to="100 0" dur="5s" repeatCount="indefinite" />
                            </path>
                        </g>
                    </g>

                </svg>



                <svg class="seagull" id="seagull3" viewBox="0 0 100 50">
                    <!-- Чайка -->
                    <g fill="none" stroke="white" stroke-width="1">
                        <g>
                            <!-- Левое крыло -->
                            <path d="M30,25 C25,20 15,15 5,25">
                                <animateTransform attributeName="transform" type="translate" from="0 0" to="100 0" dur="5s" repeatCount="indefinite" />
                            </path>

                            <!-- Правое крыло -->
                            <path d="M30,25 C35,20 45,15 55,25">
                                <animateTransform attributeName="transform" type="translate" from="0 0" to="100 0" dur="5s" repeatCount="indefinite" />
                            </path>

                            <!-- Тело чайки -->
                            <path d="M28,25 C30,27 32,27 34,25">
                                <animateTransform attributeName="transform" type="translate" from="0 0" to="100 0" dur="5s" repeatCount="indefinite" />
                            </path>
                        </g>
                    </g>
                </svg>
                <div class="pt-5" style="color: #FFFFFF;">
                    <h1 style="font-size: 68px; font-weight: 700;">Наши страсти: объединяя море и технологии</h1>
                    <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <p class="fs-4">
                                Мы с энтузиазмом используем программирование для разработки инновационных инструментов, упрощающих жизнь крюинговых и судоходных компаний.
                            </p>
                        </div>
                    </div>
                    <h2 class="mt-3 mb-3" style="font-size: 42px; font-weight: 700;">Наша миссия</h2>
                    <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <p class="fs-4">Облегчить и ускорить процесс подбора и управления морскими экипажами для крюинговых и судоходных компаний,
                                предоставляя инновационные и надежные технологические решения, способствующие устойчивому росту и процветанию отрасли.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <main class="main-content py-5 flex-grow-1">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-12">
                    <h1 class="mb-4">Наша команда</h1>
                    <p class="fs-5">Мы гордимся нашей командой профессионалов, которые разделяют нашу страсть к судоходной отрасли и технологиям. Наши специалисты
                        не только талантливые программисты, но также имеют глубокое понимание всех аспектов крюинговой деятельности, начиная от процесса рекрутинга до крю менеджмента судов.</p>
                    <p class="fs-5 mt-5">Мы знаем из первых рук, с какими трудностями и вызовами сталкиваются компании, и поэтому наша миссия -
                        создавать эффективные и инновационные решения, которые облегчат управление экипажами и повысят стандарты качества и безопасности в отрасли.</p>
                    <p class="fs-5 mt-5">Наша команда тесно сотрудничает с представителями морских компаний, чтобы точно понимать их потребности и требования.
                        Благодаря такому подходу, мы разрабатываем продукты, которые сочетают в себе передовые технологии, отраслевые стандарты
                        и уникальный опыт нашей команды. Вместе мы стремимся изменить лицо судоходной отрасли и внести свой вклад в ее процветание.</p>
                </div>
            </div>
        </div>
    </main>
@endsection

<style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        color: #333;
    }
    .seagull {
        position: absolute;
        width: 50px;
        height: 50px;
        fill: #fff;
        opacity: 0.7;
    }
    #seagull1 {
        animation: fly1 20s infinite linear;
        top: 20px;
        left: 10%;
    }
    #seagull2 {
        animation: fly2 25s infinite linear;
        top: 60px;
        left: 30%;
    }
    #seagull3 {
        animation: fly3 22s infinite linear;
        top: 100px;
        left: 60%;
    }
    @keyframes fly1 {
        0% { transform: translateX(0) translateY(0) scale(1); }
        50% { transform: translateX(300px) translateY(-50px) scale(0.8); }
        100% { transform: translateX(0) translateY(0) scale(1); }
    }
    @keyframes fly2 {
        0% { transform: translateX(0) translateY(0) scale(0.9); }
        50% { transform: translateX(-200px) translateY(-30px) scale(1.1); }
        100% { transform: translateX(0) translateY(0) scale(0.9); }
    }
    @keyframes fly3 {
        0% { transform: translateX(0) translateY(0) scale(1.1); }
        50% { transform: translateX(250px) translateY(-70px) scale(0.9); }
        100% { transform: translateX(0) translateY(0) scale(1.1); }
    }
    .about {
        position: relative;
        overflow: hidden;
    }
    .main-content {
        background-color: #f4f4f4;
    }
</style>