исправь расположение блока запись на процедуру (где форма) для мобильной версии, сейчас он почему-то смещен влево
<!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; /* Убираем отступы */
        }
        .navbar {
            background-color: white;
        }
        .navbar-brand img {
            width: 40%; /* Устанавливаем ширину логотипа в 40% */
            max-height: 100px; /* Максимальная ширина логотипа для больших экранов */
            height: auto; /* Сохраняет пропорции */
        }
        .nav-item {
            margin: 0 5px; /* Отступы между элементами */
            font-family: 'Jura', sans-serif; /* Применяем шрифт Jura */
        }
        .nav-link {
            padding: 10px 15px; /* Добавьте отступы для ссылок */
            color: black !important; /* Задаем цвет текста и используем !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 img {
            max-height: 10vh;
            height: auto; /* Сохраняет пропорции */
            margin-bottom: 10vh;
        }
        .hero h2 {
            font-family: 'Jura', sans-serif; /* Применяем шрифт Jura */
            color: black; /* Цвет текста */
            font-size: 2rem; /* Размер шрифта */
            margin-bottom: 40px; /* Отступ снизу */
            text-align: center; /* Центрирование текста */
        }
        .hero .btn {
            font-family: 'Jura', sans-serif; /* Применяем шрифт Jura */
            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 {
            transform: scale(1.1); /* Увеличение кнопки при наведении */
        }
        .hero .btn:active {
            transform: scale(1.1); /* Увеличение кнопки при нажатии */
            background-color: transparent; /* Сохраняет прозрачный фон при нажатии */
        }
        .service-card {
            border: 1px solid black; /* Черная тонкая граница */
            display: flex;
            flex-direction: column; /* Позволяет карточкам занимать одинаковую высоту */
            height: 100%; /* Задает высоту карточки */
        }
        .card-img-top {
            max-height: 200px;
            object-fit: cover;
        }
        .footer {
            background-color: #f8f9fa; /* Цвет фона блока */
            padding: 20px;
            text-align: center;
            border-top: 1px solid #dee2e6; /* Граница сверху футера */
        }
        .card-body {
            display: flex;
            flex-direction: column;
            flex-grow: 1; /* Позволяет телу карточки занимать оставшееся пространство */
            justify-content: space-between; /* Размещает содержимое карточки */
        }
        .card-title {
            text-align: center; /* Центрирование заголовка */
        }
        .card-text {
            font-family: 'Jura', sans-serif; /* Применяем шрифт Jura */
        }
        .btn {
            display: block; /* Делает кнопку блочным элементом */
            margin: 0 auto; /* Центрирует кнопку */
        }

        /* Установка отступов между карточками */
        .row {
            margin-bottom: 20px; /* Отступ между строками */
        }

        /* Убираем обводку вокруг палочек */
        .navbar-toggler {
            border: none; /* Убираем обводку */
        }

        .navbar-toggler-icon {
            background-color: transparent; /* Убираем фон */
            border: none; /* Убираем обводку */
        }

        /* Убираем обводку при фокусе */
        .btn:focus,
        .navbar-toggler:focus {
            outline: none; /* Убираем обводку при фокусе */
            box-shadow: none; /* Убираем тень при фокусе */
        }
        
        /* Медиазапрос для мобильных устройств */
        @media (max-width: 576px) {
            .hero h2 {
                font-size: 1.5rem; /* Уменьшаем размер шрифта заголовка на мобильных устройствах */
            }
            .hero .btn {
                font-size: 1.2rem; /* Уменьшаем размер шрифта кнопки на мобильных устройствах */
            }
            .nav-link {
                font-size: 0.9rem; /* Уменьшаем размер шрифта навигационных ссылок на мобильных устройствах */
            }
            .card-title {
                font-size: 1.2rem; /* Уменьшаем размер шрифта заголовков карточек */
            }
            .card-text {
                font-size: 0.9rem; /* Уменьшаем размер шрифта текста в карточках */
            }
            .col-md-4 {
                margin-bottom: 15px; /* Отступ между карточками на мобильных устройствах */
            }
        }

        .btn-outline-dark {
            font-family: 'Jura', sans-serif;
            color: black;
            border: none;
            position: relative;
            text-decoration: none; /* Убираем стандартное подчеркивание */
            padding: 10px 15px;
            background-color: transparent; /* Прозрачный фон */
            outline: none; /* Убираем стандартную обводку при фокусе */
        }

        .btn-outline-dark::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0.5px;
            background: black;
            transform: scaleX(0); /* Изначально скрыто */
            transition: transform 0.3s ease; /* Плавный переход */
        }

        .btn-outline-dark:hover::after,
        .btn-outline-dark:focus::after,
        .btn-outline-dark:active::after {
            transform: scaleX(1); /* Появление подчеркивания при наведении и нажатии */
        }

        .btn-outline-dark:hover,
        .btn-outline-dark:focus,
        .btn-outline-dark:active {
            color: black; /* Оставляем цвет текста черным при наведении и нажатии */
            background-color: transparent; /* Сохраняем прозрачный фон */
            outline: none; /* Убираем обводку при фокусе */
            box-shadow: none; /* Убираем тень при нажатии */
        }

        /* Контейнер для стрелки и текста */
        .hero {
            background-color: white; /* Фоновый цвет блока */
            display: flex;
            height: calc(100vh - 60px - 150px); /* Высота блока равна высоте экрана минус высота navbar */
            flex-direction: column; /* Позволяет размещать элементы вертикально */
            align-items: center; /* Центрирование содержимого по горизонтали */
            position: relative; /* Для позиционирования элементов внутри блока */
            color: black; /* Цвет текста */
            margin-top: 150px; /* Убираем верхний отступ */
        }

        .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-family: 'Jura', sans-serif;
            font-size: 1.2rem;
            color: black;
            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);
            }
        }

        /* Медиазапрос для адаптации на мобильных устройствах */
        @media (max-width: 576px) {
            .scroll-down {
                bottom: 20px;
            }

            .scroll-text {
                font-size: 1rem; /* Уменьшаем текст на мобильных устройствах */
            }

            .arrow {
                width: 20px;
                height: 20px;
                border-width: 2px; /* Уменьшаем толщину стрелки */
            }
        }
        .jura-text {
            font-family: 'Jura', sans-serif; /* Применяем шрифт Jura */
        }
        
        .underlined-badge {
            color:black;
            /* text-decoration: underline; /* или другой стиль подчеркивания */
            /*line-height: 1; /* Убедитесь, что line-height одинаковый */
            /*padding: 0; /* Убедитесь, что padding одинаковый */
            /*margin: 0; /* Убедитесь, что margin одинаковый */ 
        }
        
        .custom-border {
            border: 1px solid white; /* Укажите нужный цвет и ширину */
        }
        
        .custom-btn {
            border: 1px solid transparent; /* Прозрачная рамка по умолчанию */
            color: black; /* Черный текст */
            transition: border 0.3s ease; /* Плавный переход для рамки */
            position: relative; /* Для псевдоэлементов */
        }

        .custom-btn.active {
            border: 1px solid black; /* Черная рамка для активной кнопки */
        }

        .btn-group {
            border: 1px solid transparent; /* Прозрачная обводка вокруг кнопок */
            border-radius: 0; /* Убираем скругление */
        }
        .logo-block {
            height: 5vh; /* Установите желаемую высоту блока */
        }

        .zapis-btn {
            border: 1px solid black; /* Черная рамка вокруг кнопки */
            color: black; /* Черный текст */
            background-color: transparent; /* Прозрачный фон */
            transition: transform 0.3s ease; /* Плавный переход для увеличения */
            padding: 10px 30px; /* Отступы кнопки */
            border-radius: 0; /* Убираем скругления */
        }


        .form-control {
        background-color: white; /* Фоновый цвет */
        border: 1px solid #ced4da; /* Цвет рамки */
        transition: border-color 0.2s; /* Плавный переход для изменения цвета рамки */
        }

        /* Стили при фокусе на input */
        .form-control:focus {
            background-color: white; /* Оставляем белым при фокусе */
            outline: none; /* Убираем стандартный контур */
        }

        /* Стили для заполненного input */
        .form-control:valid {
            background-color: white; /* Оставляем белым при заполнении */
        }

        #zapis .custom-border {
            border: 1px solid #ced4da; /* Светлая рамка */
        }


        #zapis h2 {
            font-size: 1.8rem;
            margin-bottom: 20px;
        }

        #zapis label {
            font-weight: bold;
        }

        #zapis .form-control {
            font-size: 1rem;
        }

        #zapis .btn {
            font-size: 1.2rem;
            padding: 12px;
            background-color: transparent;
            border: 1px solid black;
            transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
        }

        #zapis .btn:hover {
            transform: scale(1.05);
            background-color: transparent;
            color: black;
        }

        #zapis .btn:active {
            transform: scale(1);
            background-color: black;
            color: white;
        }

        /* Медиазапросы для адаптации формы на мобильных устройствах */
        @media (max-width: 576px) {
            #zapis h2 {
                font-size: 1.5rem;
            }
            #zapis .btn {
                font-size: 1rem;
                padding: 10px;
            }
        }


        .form-control:focus {
            box-shadow: none; /* Убирает тень вокруг поля */
            border-color: #ced4da; /* Возвращает стандартный цвет границы Bootstrap */
        }

        /* Убираем синюю или красную обводку для некорректных и корректных полей */
        .form-control.is-invalid,
        .form-control.is-valid {
            border-color: #ced4da;
            box-shadow: none;
        }

        /* Убираем стандартную обводку для кнопок при фокусе */
        .btn:focus, .btn:active:focus {
            box-shadow: none;
        }

        /* Дополнительно, если используются другие элементы управления, убираем их обводки */
        input[type="text"]:focus,
        input[type="tel"]:focus,
        input[type="date"]:focus,
        input[type="time"]:focus,
        select:focus {
            outline: none;

            border-color: #ced4da;
        }


        .form-control:focus {
            border-color: black;
            box-shadow: 0 0 0 1px black
        }

        
        /* Дополнительные стили формы */
        .zapis-btn {
            background-color: #007bff;
            border: none;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        .zapis-btn:hover {
            background-color: #0056b3;
        }

        /* Пример кастомной обводки при ошибке, если нужно */
        /*
        .form-control.custom-invalid {
            border-color: #dc3545;
        }
        */


                /* Стили для кастомных чекбоксов */
                .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);
        }

        /* Изменяем цвет текста при выборе */
        .custom-checkbox input:checked + .checkmark + span {
            color: white;
        }

        /* Стиль для состояния ошибки */
        .checkbox-group.is-invalid label .checkmark {
            border-color: #dc3545; /* Bootstrap красный цвет для ошибок */
        }

        .checkbox-group.is-invalid .invalid-feedback {
            display: block;
            color: #dc3545;
        }

        /* Адаптивные стили для чекбоксов */
        @media (max-width: 576px) {
            .custom-checkbox {
                padding-left: 30px;
            }

            .custom-checkbox .checkmark {
                height: 20px;
                width: 20px;
            }

            .custom-checkbox .checkmark:after {
                left: 6px;
                top: 3px;
                width: 6px;
                height: 10px;
            }
        }

        /* Дополнительные стили формы */
        .bg-white {
            background-color: #fff;
        }
        .custom-border {
            border: 1px solid #ddd;
        }
        .jura-text {
            font-family: 'Jura', sans-serif;
        }
        .btn-block {
            width: 100%;
        }
        .zapis-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
        }
        .zapis-btn:hover {
            background-color: #45a049;
        }
        .invalid-feedback {
            display: none;
        }
    </style>
    </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 text-center">Перейти к услугам</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 jura-text" id="masterTab">Мастер</button>
            <button type="button" class="btn custom-btn w-50 jura-text" id="topMasterTab">Топ-мастер</button>
        </div>

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

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

<div id="zapis" class="container mt-5 mb-5 col-11">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="bg-white p-4 rounded-0 custom-border"> 
                <h2 class="text-center jura-text mb-4">Запишитесь на процедуру</h2>
                <form id="bookingForm" novalidate>
                    <div class="form-group">
                        <label for="name" class="jura-text">Имя</label>
                        <input type="text" class="form-control rounded-0" id="name" placeholder="Введите ваше имя" required>
                        <div class="invalid-feedback">
                            Пожалуйста, введите ваше имя.
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phone" class="jura-text">Номер телефона</label>
                        <input type="tel" class="form-control rounded-0" 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 class="jura-text">Выберите услуги</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" class="jura-text">Выберите дату</label>
                        <input type="date" class="form-control rounded-0" id="date" required>
                        <div class="invalid-feedback">
                            Пожалуйста, выберите дату.
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="time" class="jura-text">Выберите время</label>
                        <input type="time" class="form-control rounded-0" id="time" required>
                        <div class="invalid-feedback">
                            Пожалуйста, выберите время.
                        </div>
                    </div>
                    <button type="submit" class="btn jura-text btn-block rounded-0">Записаться</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 jura-text"> <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" style="width: 40px; height: 40px;">
        </a>
        <a href="https://telegram.org" target="_blank" class="mx-4">
            <img src="telegram.svg" alt="Telegram" class="img-fluid" style="width: 40px; height: 40px;">
        </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" style="width: 40px; height: 40px;">
        </a>
        <a href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>" class="mx-4">
            <img src="phone.svg" alt="Phone" class="img-fluid" style="width: 40px; height: 40px;">
        </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];
    // Проходимся по всем найденным элементам <span>
        spans.forEach((span, index) => {
        // Устанавливаем цену для каждого элемента <span>
            span.textContent =  masterPrices[index];
        });

        // Устанавливаем вкладку "Мастер" активной по умолчанию
        masterTab.classList.add('active');

        masterTab.addEventListener('click', () => {
            masterTab.classList.add('active');
            topMasterTab.classList.remove('active');
            spans.forEach((span, index) => {
            // Устанавливаем цену для каждого элемента <span>
            span.textContent =  masterPrices[index];
            });
        });

        topMasterTab.addEventListener('click', () => {

            topMasterTab.classList.add('active');
            masterTab.classList.remove('active');
            spans.forEach((span, index) => {
            // Устанавливаем цену для каждого элемента <span>
            span.textContent =  topMasterPrices[index];
            });
        });
    });
</script>
<script>
    // Получаем все элементы навигации
    document.addEventListener('DOMContentLoaded', () => {
        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');

        // Устанавливаем начальное значение с префиксом +7 (
        phoneInput.value = '+7 (';

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

        // Предотвращаем удаление префикса +7 (
        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); // Удаляем все кроме цифр и убираем первый символ (7)
            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>
    function updateColumnClass() {
        const column = document.getElementById('zapis');
        if (window.innerWidth < 768) { // Ширина экрана для мобильных устройств
            column.className = 'col-11';
        } else {
            column.className = 'col-12';
        }
    }

    // Обновляем класс при загрузке страницы
    window.onload = updateColumnClass;

    // Обновляем класс при изменении размера окна
    window.onresize = updateColumnClass;
</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>