сделай так, чтобы стрелочка с надписью Перейти к услугам отображалась всегда внизу страницы независимо от устройства!
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Салон Красоты</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Jura:wght@400&display=swap" rel="stylesheet"> <!-- Подключение шрифта Jura -->
    <style>
        /* Общие стили */
        body {
            background-color: white;
            color: black;
            margin: 0;
            font-family: 'Jura', sans-serif;
        }

        /* Навигационная панель */
        .navbar {
            background-color: white;
        }
        .navbar-brand img {
            width: 40%;
            max-height: 100px;
            height: auto;
        }
        .nav-item {
            margin: 0 5px;
        }
        .nav-link {
            padding: 10px 15px;
            color: black !important;
            position: relative;
            text-decoration: none;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0.5px;
            background: black;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        .nav-link:hover::after {
            transform: scaleX(1);
        }

        /* Героический блок */
        .hero {
            background-color: white;
            display: flex;
            height: calc(100vh - 60px - 150px);
            flex-direction: column;
            align-items: center;
            position: relative;
            color: black;
            margin-top: 150px;
            text-align: center;
        }
        .hero img {
            max-height: 10vh;
            height: auto;
            margin-bottom: 10vh;
        }
        .hero h2 {
            font-size: 2rem;
            margin-bottom: 40px;
        }
        .hero .btn {
            font-size: 1.5rem;
            padding: 10px 30px;
            background-color: transparent;
            border: 2px solid black;
            color: black;
            transition: transform 0.3s ease;
            border-radius: 0;
        }
        .hero .btn:hover,
        .hero .btn:active {
            transform: scale(1.1);
            background-color: transparent;
        }
        .hero .btn:active {
            background-color: transparent;
        }

        /* Стрелка прокрутки */
        .scroll-down {
            position: absolute;
            bottom: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }
        .arrow {
            width: 30px;
            height: 30px;
            border-left: 3px solid black;
            border-bottom: 3px solid black;
            transform: rotate(-45deg);
            animation: bounce 1.5s infinite;
        }
        .scroll-text {
            font-size: 1.2rem;
            margin-top: 10px;
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0) rotate(-45deg);
            }
            40% {
                transform: translateY(-10px) rotate(-45deg);
            }
            60% {
                transform: translateY(-5px) rotate(-45deg);
            }
        }

        /* Секции услуг */
        #services h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .list-group-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .underlined-badge {
            color: black;
        }

        /* Форма записи */
        #zapis {
            background-color: white;
            padding: 20px;
            border-radius: 0;
        }
        #zapis h2 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            text-align: center;
        }
        #zapis label {
            font-weight: bold;
        }
        #zapis .form-control {
            background-color: white;
            border: 1px solid #ced4da;
            font-size: 1rem;
            transition: border-color 0.2s;
            border-radius: 0;
        }
        #zapis .form-control:focus {
            border-color: black;
            box-shadow: 0 0 0 1px black;
            outline: none;
        }
        #zapis .btn {
            font-size: 1.2rem;
            padding: 12px;
            background-color: transparent;
            border: 1px solid black;
            transition: transform 0.3s ease;
            border-radius: 0;
        }
        #zapis .btn:hover {
            transform: scale(1.05);
            background-color: transparent;
            color: black;
        }
        #zapis .btn:active {
            transform: scale(1);
            background-color: black;
            color: white;
        }

        /* Кастомные кнопки и группы */
        .custom-btn {
            border: 1px solid transparent;
            color: black;
            transition: border 0.3s ease;
            position: relative;
            background-color: transparent;
            padding: 10px 15px;
            font-family: 'Jura', sans-serif;
        }
        .custom-btn.active {
            border: 1px solid black;
        }
        .btn-group .btn {
            border-radius: 0;
        }

        /* Чекбоксы */
        .custom-checkbox {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 10px;
            cursor: pointer;
            font-size: 15px;
            user-select: none;
            transition: color 0.3s;
        }
        .custom-checkbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }
        .custom-checkbox .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: white;
            border: 0.5px solid black;
            transition: background-color 0.3s, border-color 0.3s;
        }
        .custom-checkbox:hover input ~ .checkmark {
            background-color: white;
        }
        .custom-checkbox input:checked ~ .checkmark {
            background-color: white;
            border-color: white;
        }
        .custom-checkbox .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }
        .custom-checkbox input:checked ~ .checkmark:after {
            display: block;
        }
        .custom-checkbox .checkmark:after {
            left: 9px;
            top: 3px;
            width: 8px;
            height: 14px;
            border: solid black;
            border-width: 0 1px 1px 0;
            transform: rotate(45deg);
        }
        .checkbox-group.is-invalid .checkmark {
            border-color: #dc3545;
        }
        .checkbox-group.is-invalid .invalid-feedback {
            display: block;
            color: #dc3545;
        }

        /* Логотипы контактов */
        .logo-block {
            height: 5vh;
            text-align: center;
        }
        .logo-block img {
            width: 40px;
            height: 40px;
        }

        /* Футер */
        .footer {
            background-color: #f8f9fa;
            padding: 20px;
            text-align: center;
            border-top: 1px solid #dee2e6;
        }

        /* Медиазапросы для адаптации на мобильных устройствах */
        @media (max-width: 576px) {
            .hero h2 {
                font-size: 1.5rem;
            }
            .hero .btn {
                font-size: 1.2rem;
            }
            .nav-link {
                font-size: 0.9rem;
            }
            .list-group-item {
                font-size: 0.9rem;
            }
            .scroll-text {
                font-size: 1rem;
            }
            .arrow {
                width: 20px;
                height: 20px;
                border-width: 2px;
            }
            .custom-checkbox {
                padding-left: 30px;
            }
            .custom-checkbox .checkmark {
                height: 20px;
                width: 20px;
            }
            .custom-checkbox .checkmark:after {
                left: 6px;
                top: 3px;
                width: 6px;
                height: 10px;
            }
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="#">
        <img src="logo1.svg" alt="Логотип">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#services">Услуги</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#contacts">Контакты</a>
            </li>
        </ul>
    </div>
</nav>

<div class="hero">
    <img src="https://sun9-21.userapi.com/impf/bwQ2OPpbS_AGYGlDPzhFgAQtNt7cY_BoTG5MNQ/RvgiikTJdIw.jpg?size=1920x768&quality=95&crop=0,775,2560,1022&sign=ab8eb6e4b8ddef79518438df3b687fe5&type=cover_group" alt="Изображение" />
    <h2>Ваши ресницы — ключ к новым высотам!</h2>
    <a href="#zapis" class="btn">Записаться</a>
    
    <div class="scroll-down">
        <div class="arrow"></div>
        <p class="scroll-text">Перейти к услугам</p>
    </div>
</div>

<div id="services" class="container-fluid py-5">
    <div class="container">
        <div class="btn-group mb-3 w-100" role="group" aria-label="Basic outlined example">
            <button type="button" class="btn custom-btn w-50 active" id="masterTab">Мастер</button>
            <button type="button" class="btn custom-btn w-50" id="topMasterTab">Топ-мастер</button>
        </div>

        <ul class="list-group" id="lashes">
            <h2 id="tabTitle">Ресницы</h2>
            <li class="list-group-item justify-content-between align-items-center">
                Классика / уголки
                <span class="underlined-badge"></span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                1.5d
                <span class="underlined-badge"></span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                2d
                <span class="underlined-badge"></span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                3d
                <span class="underlined-badge"></span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                3.5d
                <span class="underlined-badge"></span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                4d
                <span class="underlined-badge"></span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                5d
                <span class="underlined-badge"></span>
            </li>
        </ul>

        <ul class="list-group" id="brows">
            <h2 id="tabTitle">Брови</h2>
            <li class="list-group-item justify-content-between align-items-center">
                Коррекция
                <span class="underlined-badge">600</span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                Окрашивание
                <span class="underlined-badge">600</span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                Коррекция и окрашивание
                <span class="underlined-badge">900</span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                Д/у фиг поймешь
                <span class="underlined-badge">1600</span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                Окрашивание ресниц
                <span class="underlined-badge">300</span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                Пушок
                <span class="underlined-badge">300</span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                Счастье для ресниц /бровей
                <span class="underlined-badge">650</span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                Ламинирование ресниц
                <span class="underlined-badge">1500</span>
            </li>
        </ul>

        <ul class="list-group" id="effects">
            <h2 id="tabTitle">Эффекты</h2>
            <li class="list-group-item justify-content-between align-items-center">
                Мокрый
                <span class="underlined-badge">300</span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                Лучики
                <span class="underlined-badge">300</span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                Цветные ресницы
                <span class="underlined-badge">300</span>
            </li>
            <li class="list-group-item justify-content-between align-items-center">
                Снятие
                <span class="underlined-badge">200 / 300</span>
            </li>
        </ul>
    </div>
</div>

<div id="zapis" class="container mt-5 mb-5 col-12">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="bg-white p-4 rounded-0"> 
                <h2 class="mb-4">Запишитесь на процедуру</h2>
                <form id="bookingForm" novalidate>
                    <div class="form-group">
                        <label for="name">Имя</label>
                        <input type="text" class="form-control" id="name" placeholder="Введите ваше имя" required>
                        <div class="invalid-feedback">
                            Пожалуйста, введите ваше имя.
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phone">Номер телефона</label>
                        <input type="tel" class="form-control" id="phone" placeholder="+7 (___) ___-__-__" pattern="\+7\s\(\d{3}\)\s\d{3}-\d{2}-\d{2}" required>
                        <div class="invalid-feedback">
                            Пожалуйста, введите корректный номер телефона.
                        </div>
                    </div>
                    <div class="form-group">
                        <fieldset>
                            <legend>Выберите услуги</legend>
                            <div class="checkbox-group" aria-describedby="serviceHelp">
                                <label class="custom-checkbox">
                                    <input type="checkbox" name="services" value="classic_lashes" required>
                                    <span class="checkmark"></span>
                                    Классика ресниц
                                </label>
                                <label class="custom-checkbox">
                                    <input type="checkbox" name="services" value="1_5D_lashes">
                                    <span class="checkmark"></span>
                                    1.5D ресницы
                                </label>
                                <label class="custom-checkbox">
                                    <input type="checkbox" name="services" value="2D_lashes">
                                    <span class="checkmark"></span>
                                    2D ресницы
                                </label>
                                <label class="custom-checkbox">
                                    <input type="checkbox" name="services" value="3D_lashes">
                                    <span class="checkmark"></span>
                                    3D ресницы
                                </label>
                                <label class="custom-checkbox">
                                    <input type="checkbox" name="services" value="lash_lamination">
                                    <span class="checkmark"></span>
                                    Ламинирование ресниц
                                </label>
                                <label class="custom-checkbox">
                                    <input type="checkbox" name="services" value="eyebrow_correction">
                                    <span class="checkmark"></span>
                                    Коррекция бровей
                                </label>
                                <label class="custom-checkbox">
                                    <input type="checkbox" name="services" value="eyebrow_coloring">
                                    <span class="checkmark"></span>
                                    Окрашивание бровей
                                </label>
                                <!-- Добавьте дополнительные чекбоксы по необходимости -->
                            </div>
                            <small id="serviceHelp" class="form-text text-muted">
                                Выберите услуги, которые вам необходимы.
                            </small>
                            <div class="invalid-feedback">
                                Пожалуйста, выберите хотя бы одну услугу.
                            </div>
                        </fieldset>
                    </div>
                    <div class="form-group">
                        <label for="date">Выберите дату</label>
                        <input type="date" class="form-control" id="date" required>
                        <div class="invalid-feedback">
                            Пожалуйста, выберите дату.
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="time">Выберите время</label>
                        <input type="time" class="form-control" id="time" required>
                        <div class="invalid-feedback">
                            Пожалуйста, выберите время.
                        </div>
                    </div>
                    <button type="submit" class="btn btn-block">Записаться</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid logo-block d-flex flex-column justify-content-center align-items-center mb-5" id="contacts">
    <span class="contact-text mt-2 mb-3"><b> СВЯЖИСЬ С НАМИ САМОСТОЯТЕЛЬНО</b></span>
    <div class="d-flex justify-content-center">
        <a href="https://instagram.com" target="_blank" class="mx-4">
            <img src="instagram.svg" alt="Instagram" class="img-fluid">
        </a>
        <a href="https://telegram.org" target="_blank" class="mx-4">
            <img src="telegram.svg" alt="Telegram" class="img-fluid">
        </a>
        <a href="https://wa.me/+79173192955?text=Здравствуйте,%20хочу%20записаться%20на%20процедуру!" target="_blank" class="mx-4">
            <img src="whatsapp.svg" alt="WhatsApp" class="img-fluid">
        </a>
        <a href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>" class="mx-4">
            <img src="phone.svg" alt="Phone" class="img-fluid">
        </a>
    </div>
</div>

<div class="footer">
    <p>&copy; 2024 Sky Lashes</p>
</div>

<!-- Скрипты -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const masterTab = document.getElementById('masterTab');
        const topMasterTab = document.getElementById('topMasterTab');
        const lashes = document.getElementById('lashes');
        const spans = document.querySelectorAll('#lashes .underlined-badge');
        const masterPrices = [1500,1600,1700,1850,2000,2150,2350,2500];
        const topMasterPrices = [1600,1700,1950,2050,2300,2400,2700,2900];

        // Установка цен по умолчанию
        const setPrices = (prices) => {
            spans.forEach((span, index) => {
                span.textContent = prices[index];
            });
        };
        setPrices(masterPrices);

        // Активные вкладки
        masterTab.classList.add('active');

        masterTab.addEventListener('click', () => {
            masterTab.classList.add('active');
            topMasterTab.classList.remove('active');
            setPrices(masterPrices);
        });

        topMasterTab.addEventListener('click', () => {
            topMasterTab.classList.add('active');
            masterTab.classList.remove('active');
            setPrices(topMasterPrices);
        });

        // Закрытие навигации при клике на ссылку
        const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
        const navbarToggler = document.querySelector('.navbar-toggler');
        const navbarCollapse = document.querySelector('#navbarNav');

        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                if (navbarCollapse.classList.contains('show')) {
                    navbarToggler.click();
                }
            });
        });
    });
</script>

<!-- Скрипт форматирования телефона -->
<script>
    function setCursorPosition(elem, pos) {
        if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        const phoneInput = document.getElementById('phone');

        phoneInput.value = '+7 (';

        phoneInput.addEventListener('focus', () => {
            if (!phoneInput.value.startsWith('+7 (')) {
                phoneInput.value = '+7 (';
                setCursorPosition(phoneInput, phoneInput.value.length);
            }
        });

        phoneInput.addEventListener('keydown', (e) => {
            const cursorPos = phoneInput.selectionStart;
            const prefix = '+7 (';

            if (cursorPos <= prefix.length && (e.key === 'Backspace' || e.key === 'Delete')) {
                e.preventDefault();
            }

            const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
            if (!/[0-9]/.test(e.key) && !allowedKeys.includes(e.key)) {
                e.preventDefault();
            }
        });

        phoneInput.addEventListener('input', () => {
            const prefix = '+7 (';
            let digits = phoneInput.value.replace(/\D/g, '').substring(1);
            let formatted = prefix;
            
            if (digits.length > 0) {
                formatted += digits.substring(0, 3);
            }
            if (digits.length >= 4) {
                formatted += ') ' + digits.substring(3, 6);
            }
            if (digits.length >= 7) {
                formatted += '-' + digits.substring(6, 8);
            }
            if (digits.length >= 9) {
                formatted += '-' + digits.substring(8, 10);
            }

            phoneInput.value = formatted;
            setCursorPosition(phoneInput, phoneInput.value.length);
        });
    });
</script>

<script>
    document.getElementById('bookingForm').addEventListener('submit', function(event) {
        const form = event.target;
        let isValid = form.checkValidity();

        const checkboxes = document.querySelectorAll('input[name="services"]');
        const isChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
        const serviceGroup = document.querySelector('.checkbox-group');

        if (!isChecked) {
            isValid = false;
            serviceGroup.classList.add('is-invalid');
        } else {
            serviceGroup.classList.remove('is-invalid');
        }

        if (!isValid) {
            event.preventDefault();
            event.stopPropagation();
            form.classList.add('was-validated');
        }
    }, false);
</script>
</body>
</html>