Исправь ошибку. Верхняя шапка с навигацией на мобильных телефонах плохо смотрится, слишком длинная и не влазит в экран, сделай адаптивной под все мобильные устройства. Отправь мне полный код исправленного стиля цсс, включая и предыдущий.


<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="description" content="Гадання, обряди, ворожіння на картах Таро та Ленорман, екстрасенсорні послуги від Анатолія Шевченка. Професійні магічні послуги в Україні. Зняття порчі, повернення коханих, чистки, захисти, фінансові ритуали, бізнес-консультації.">
<meta name="keywords" content="гадання, обряди, ритуали, зняття порчі, повернення коханого, магічні послуги, ворожіння на Таро, Ленорман, екстрасенсорика, чистки, захисти, фінансові ритуали, бізнес, Анатолій Шевченко, ворожка, магія, магічні ритуали, екстрасенс, ворожіння на любов">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Гадання та Магічні Послуги від Анатолія Шевченка</title>
<!-- Підключення Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- Підключення бібліотеки AOS для анімацій -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.css">
<!-- Стилі сайту -->
<style>
/* Базові стилі /
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background: #121212;
color: #e0e0e0;
overflow-x: hidden;
}
      a {
        color: #ffca28;
        text-decoration: none;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0;
    }

    p {
        line-height: 1.6em;
        margin: 0 0 15px 0;
    }

    .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
        padding: 0 20px; 
    }

    / Навігація /
    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(18, 18, 18, 0.9);
        padding: 10px 20px;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 10;
    }

    nav .logo a {
        font-size: 1.5em;
        font-weight: bold;
        color: #ffca28;
    }

    nav .nav-menu {
        display: flex;
        list-style: none;
    }

    nav .nav-menu li {
        margin: 0 15px;
    }

    nav .nav-menu li a {
        font-size: 1em;
        color: #e0e0e0;
        transition: color 0.3s;
    }

    nav .nav-menu li a:hover {
        color: #ffca28;
    }

    / Гамбургер-меню для мобільних пристроїв /
    .hamburger {
        display: none;
        flex-direction: column;
        cursor: pointer;
    }

    .hamburger span {
        height: 3px;
        width: 25px;
        background: #e0e0e0;
        margin-bottom: 4px;
        border-radius: 5px;
    }

    #menu-toggle {
        display: none;
    }

    #menu-toggle:checked + .hamburger span {
        background: #ffca28;
    }

    #menu-toggle:checked ~ .nav-menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        background: #212121;
        width: 100%;
        text-align: center;
    }

    #menu-toggle:checked ~ .nav-menu li {
        margin: 15px 0;
    }

    / Хедер /
    header {
        position: relative;
        height: 100vh;
        color: #fff;
        display: flex;
        align-items: center;
        text-align: center;
        overflow: hidden;
    }

    #starry-sky {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0d0d0d;
        overflow: hidden;
        z-index: 0;
    }

    .header-content {
        z-index: 1;
        width: 100%;
        padding: 0 20px;
    }

    .profile-photo {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-image: url('myphoto.jpg'); 
        background-size: cover;
        background-position: center;
        margin: 0 auto 30px;
        animation: fadeInDown 2s;
        cursor: pointer;
        transition: transform 0.3s;
    }

    .profile-photo:hover {
        transform: scale(1.1);
    }

    header h1 {
        font-size: 3em;
        margin-bottom: 20px;
        animation: fadeInDown 2s;
    }

    header p {
        font-size: 1.5em;
        margin-bottom: 30px;
        animation: fadeInUp 2s;
    }

    .btn {
        background-color: #ffca28;
        color: #212121;
        padding: 15px 30px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        font-weight: bold;
        font-size: 1em;
        transition: background-color 0.3s;
    }

    .btn:hover {
        background-color: #ffc107;
    }

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    / Розділи сайту /
    section {
        padding: 80px 0;
    }

    .about-me {
        background: #212121;
    }

    .services {
        background: #121212;
    }

    .services h2,
    .reviews h2,
    .contact h2 {
        text-align: center;
        margin-bottom: 50px;
    }

    .service-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .service-item {
        background: #1e1e1e;
        width: 48%;
        margin-bottom: 30px;
        padding: 20px;
        border-radius: 10px;
        transition: transform 0.3s;
    }

    .service-item:hover {
        transform: translateY(-10px);
    }

    .service-item h3 {
        color: #ffca28;
        margin-bottom: 15px;
        font-size: 1.5em;
    }

    .reviews {
        background: #212121;
    }

    .review-item {
        max-width: 800px;
        margin: 0 auto 30px auto;
        padding: 20px;
        background: #1e1e1e;
        border-radius: 10px;
    }

    .review-item p {
        font-style: italic;
    }

    .contact {
        background: #121212;
        text-align: center;
    }

    .contact form {
        max-width: 500px;
        margin: 0 auto;
    }

    .contact form input,
    .contact form textarea {
        width: 100%;
        padding: 15px;
        margin-bottom: 15px;
        border: none;
        border-radius: 5px;
        background: #1e1e1e;
        color: #e0e0e0;
        font-size: 1em;
    }

    .contact form button {
        width: 100%;
        padding: 15px;
        border: none;
        border-radius: 5px;
        background: #ffca28;
        color: #212121;
        font-size: 1em;
        cursor: pointer;
        font-weight: bold;
        transition: background-color 0.3s;
    }

    .contact form button:hover {
        background-color: #ffc107;
    }

    .contact-info p {
        margin: 10px 0;
    }

    .contact-info a {
        color: #ffca28;
    }

    footer {
        background: #0d0d0d;
        padding: 20px 0;
        text-align: center;
        color: #757575;
    }

    / Медіа-запити /
    @media (max-width: 768px) {
        nav .nav-menu {
            display: none;
        }

        .hamburger {
            display: flex;
        }

        .service-item {
            width: 100%;
        }

        header h1 {
            font-size: 2.5em;
        }

        header p {
            font-size: 1.2em;
        }

        .header-content {
            margin-top: 80px; / збільшити відступ для мобільних пристроїв */
        }

        nav .logo a {
            font-size: 1.2em;
        }

        nav {
            padding: 10px 15px;
        }
    }

    @media (max-width: 480px) {
        header h1 {
            font-size: 2em;
        }

        .profile-photo {
            width: 150px;
            height: 150px;
        }

        .btn {
            padding: 12px 20px;
            font-size: 0.9em;
        }

        nav .logo a {
            font-size: 1em;
        }
    }
</style>
    content_copyUse code with caution.</head>
<body>
<!-- Навігація -->
<header>
<canvas id="starry-sky"></canvas>
<nav>
<div class="logo">
<a href="#">Анатолій Шевченко</a>
</div>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="hamburger">
<span></span>
<span></span>
<span></span>
</label>
<ul class="nav-menu">
<li><a href="#about">Про мене</a></li>
<li><a href="#services">Послуги</a></li>
<li><a href="#reviews">Відгуки</a></li>
<li><a href="#contact">Контакти</a></li>
</ul>
</nav>
<div class="header-content">
<div class="profile-photo"></div>
<h1 data-aos="fade-down">Анатолій Шевченко</h1>
<p data-aos="fade-up">Професійні магічні послуги, гадання та обряди</p>
<a href="#contact" class="btn" data-aos="fade-up">Записатися на прийом</a>
</div>
</header>
      <!-- Про мене -->
<section class="about-me" id="about">
    <div class="container">
        <h2 data-aos="fade-left">Про мене</h2>
        <p data-aos="fade-up">
            Я, Анатолій Шевченко, фахівець з понад 14-річним досвідом у сфері магії, ворожіння та екстрасенсорики. Моя мета – допомогти людям знайти відповіді на їхні найглибші питання, вирішити складні життєві ситуації та відкрити нові горизонти можливостей.
        </p>
        <p data-aos="fade-up">
            За роки практики я допоміг багатьом людям у різних сферах життя: зняття порчі та негативу, повернення коханих, проведення чисток та встановлення захистів, фінансові ритуали для бізнесу та багато іншого.
        </p>
    </div>
</section>

<!-- Послуги -->
<section class="services" id="services">
    <div class="container">
        <h2 data-aos="fade-up">Магічні Послуги</h2>
        <div class="service-items">
            <div class="service-item" data-aos="fade-right">
                <h3>Зняття порчі та негативу</h3>
                <p>Проводжу ритуали з очищення від негативних енергій, зняття порчі, вроків та усіх видів магічних впливів, що заважають вашому щасливому життю.</p>
            </div>
            <div class="service-item" data-aos="fade-left">
                <h3>Повернення коханого чи коханої</h3>
                <p>Допоможу відновити стосунки з вашою другою половинкою, налагодити взаєморозуміння та повернути втрачене кохання за допомогою спеціальних обрядів.</p>
            </div>
            <div class="service-item" data-aos="fade-right">
                <h3>Чистки та захисти</h3>
                <p>Проведення енергетичних чисток для відновлення гармонії та балансу, встановлення потужного захисту від негативного впливу та заздрощів.</p>
            </div>
            <div class="service-item" data-aos="fade-left">
                <h3>Фінансові та бізнес ритуали</h3>
                <p>Спеціальні обряди для залучення фінансового успіху, покращення справ у бізнесі, відкриття нових можливостей та припливу матеріального добробуту.</p>
            </div>
            <div class="service-item" data-aos="fade-right">
                <h3>Гадання на картах Таро</h3>
                <p>Дізнайтеся про своє майбутнє, отримайте поради та передбачення на основі стародавнього мистецтва Таро.</p>
            </div>
            <div class="service-item" data-aos="fade-left">
                <h3>Індивідуальні магічні ритуали</h3>
                <p>Розробляю персональні ритуали відповідно до вашої ситуації та потреб. Звертайтеся з будь-якими питаннями — знайдемо рішення разом.</p>
            </div>
        </div>
    </div>
</section>

<!-- Відгуки -->
<section class="reviews" id="reviews">
    <div class="container">
        <h2 data-aos="fade-up">Відгуки клієнтів</h2>
        <div class="review-item" data-aos="zoom-in">
            <p>"Після звернення до Анатолія моє життя змінилося на краще. Він допоміг повернути чоловіка в сім'ю. Щиро рекомендую!" – Наталія, Дніпро</p>
        </div>
        <div class="review-item" data-aos="zoom-in">
            <p>"Завдяки фінансовому ритуалу мій бізнес почав процвітати. Тепер я впевнений у своєму майбутньому." – Олег, Харків</p>
        </div>
        <div class="review-item" data-aos="zoom-in">
            <p>"Анатолій провів чистку, і я відчула неймовірне полегшення. Ніби з мене зняли важкий тягар. Дякую!" – Олена, Київ</p>
        </div>
        <div class="review-item" data-aos="zoom-in">
            <p>"Гадання на картах Таро від Анатолія допомогло мені розібратися в складній ситуації. Він дав мені мудрі поради, які я з вдячністю застосовую." – Іван, Львів</p>
        </div>
    </div>
</section>

<!-- Контакти -->
<section class="contact" id="contact">
    <div class="container">
        <h2 data-aos="fade-up">Зв'яжіться зі мною</h2>
        <form action="send_form.php" method="post" data-aos="fade-up">
            <input type="text" name="name" placeholder="Ім'я" required>
            <input type="tel" name="phone" placeholder="Телефон або Viber" required>
            <textarea name="question" placeholder="Ваше питання коротко" rows="5" required></textarea>
            <button type="submit">Відправити заявку</button>
        </form>
        <div class="contact-info" data-aos="fade-up">
            <p>Телефон та Viber: <a href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>"><PRESIDIO_ANONYMIZED_PHONE_NUMBER></a></p>
            <p>Електронна пошта: <a href="mailto:<PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>"><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></a></p>
        </div>
    </div>
</section>

<!-- Підвал -->
<footer>
    <div class="container">
        <p>© 2023 Анатолій Шевченко. Всі права захищено.</p>
    </div>
</footer>

<!-- Скрипти -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init({
    duration: 1200,
    once: true,
  });
</script>
<script>
    const canvas = document.getElementById('starry-sky');
    const context = canvas.getContext('2d');
    let width, height, stars = [];

    function init() {
        resizeCanvas();
        createStars();
        animate();
    }

    function resizeCanvas() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
    }

    window.addEventListener('resize', resizeCanvas);

    function createStars() {
        stars = [];
        for (let i = 0; i < 200; i++) {
            stars.push({
                x: Math.random() * width,
                y: Math.random() * height,
                radius: Math.random() * 1.5,
                alpha: Math.random(),
                dx: (Math.random() - 0.5) * 0.5,
                dy: (Math.random() - 0.5) * 0.5
            });
        }
    }

    function drawStars() {
        context.clearRect(0, 0, width, height);
        context.fillStyle = '#ffffff';

        stars.forEach(star => {
            context.globalAlpha = star.alpha;
            context.beginPath();
            context.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
            context.fill();

            star.x += star.dx;
            star.y += star.dy;

            if (star.x < 0 || star.x > width) star.dx *= -1;
            if (star.y < 0 || star.y > height) star.dy *= -1;
        });
    }

    function animate() {
        drawStars();
        requestAnimationFrame(animate);
    }

    init();
</script>
    content_copyUse code with caution.</body>
</html>