body {
    font-family: "Dela Gothic One", sans-serif;
    color: #000000; /* Set all text to black */
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
    box-sizing: border-box;
    display: block;
}

header {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
}

header img {
    width: 100%; /* Ensure the image spans the full width */
    height: 100%; /* Maintain the aspect ratio */
    object-fit: contain; /* Ensure the image is not cropped */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    header img {
        width: 100%; /* Ensure the image spans the full height on mobile */
        object-fit: 100%; /* Cover the container without distortion */
    }
}

main {
    padding: 0px;
}

/* Desktop version */
.adres-image {
    width: 95%; /* Изображение выходит за экран на 1/8 ширины */
    height: auto;
    max-width: 450px;
    position: relative; /* Относительное позиционирование */
    transform: translateX(20%); /* Смещение вправо от центра */
    border-radius: 25px; /* Закругленные углы */
}

/* Mobile version */
@media (max-width: 768px) {
    .adres-image {
        width: 95%; /* Изображение выходит за экран на 1/8 ширины */
        height: auto;
        max-width: 450px;
        margin-right: 10%; /* Смещение вправо для центрирования */
        border-radius: 25px; /* Закругленные углы */
    }

    .adres-text {
        margin-left: 15%; /* Ширина блока */
        margin-top: 10%;
        max-height: 200px;
        min-width: 170px;
        transform: none; /* Убираем трансформацию */
    }
}

/* Ensure the parent container is positioned relatively */
.event-details {
    position: relative;
}

.event-details {
    position: relative;
}

/* Style for the event note */
.adres-text {
    background-color: #F2AAC4; /* Light pink with 70% opacity */
    border-radius: 25px; /* Rounded corners */
    padding: 10px; /* Padding inside the box */
    position: relative; /* Position relative to its normal position */
    top: -200px; /* Adjust this value to move the box up or down */
    right: -50%;
    transform: translateX(-100%); /* Center the box */
    width: 80%; /* Adjust width as needed */
    text-align: center; /* Center the text */
    max-width: 220px;
    
    z-index: 10; /* Ensure it appears above the image */
}

.adres-text p {
    margin: 0;
    font-family: "Comfortaa", sans-serif;
    font-size: 1em; /* Размер шрифта */
    color: #000000; /* Цвет текста */
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.button-container {
    text-align: center; /* Center the button horizontally */
    margin-top: -120px; /* Space above the button container */
}

.new-route-button {
    font-family: "Dela Gothic One", sans-serif;
    background-color: #F2AAC4; /* Light pink background color */
    color: #000000; /* White text color */
    border: none; /* Remove default border */
    border-radius: 25px; /* Rounded corners */
    padding: 10px 15px; /* Increase padding for a wider button */
    font-size: 0.9em; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    min-width: 250px; /* Minimum width to ensure it's not too narrow */
}

.new-route-button:hover {
    background-color: #F2AAC4; /* Darker pink on hover */
}

.route-button:hover {
    background-color: #F2AAC4; /* Darker shade on hover */
}

.text-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.dress-code-text {
    font-family: "Dela Gothic One", sans-serif;
    margin: 0;
    max-width: 150px; /* Set a fixed width to control line breaks */
    word-wrap: break-word; /* Allow breaking words if necessary */
}

.dress-code-text.left {
    color: #000000; /* Black color for left and right texts */
    font-size: 0.9em;
    max-width: 90px; /* Adjust size as needed */
    position: relative;
    right: -55%; /* Центрирование относительно экрана */
    transform: translateX(-280%);
}

.dress-code-text.right {
    color: #000000; /* Black color for left and right texts */
    font-size: 0.9em;
    max-width: 90px; /* Adjust size as needed */
    position: relative;
    left: -55%; /* Центрирование относительно экрана */
    transform: translateX(280%);
}

@media (max-width: 768px) {
    .dress-code-text.left {
        transform: translateX(-215%);
    }

    .dress-code-text.right {
        transform: translateX(215%);
    }
}

.dress-code-text.center {
    color: #F2AAC4; /* Pink color for the center text */
    font-size: 1.8em; /* Slightly larger size for the center text */
}

.event-details, .dress-code, .additional-info, .event-photo, .form-container {
    background: #f5f5f5; /* Match background color */
    border-radius: 25px; /* Pill-shaped sections */
    padding: 100px 20px 20px 20px;
    text-align: center; /* Center the content within the section */
}

.gallery {
    background: #f5f5f5; /* Match background color */
    border-radius: 25px; /* Pill-shaped sections */
    padding: 20px 20px 20px 20px;
    text-align: center; /* Center the content within the section */
}

@media (max-width: 768px) {
    .event-details {
        padding: 20px 20px 20px 20px;
    }
}

.invitation-text {
    font-family: "Comfortaa", sans-serif;
    font-size: 1.1em; /* Larger font size */
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    margin: 20px auto 0; /* Центрирование по горизонтали */
    max-width: 700px;
    text-align: center; /* Центрирование текста */
    color: #000000; /* Dark color for better readability */
}

.invitation-text-podpiska {
    font-family: "Comfortaa", sans-serif;
    font-size: 1.1em; /* Larger font size */
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    margin: 20px auto 0; /* Центрирование по горизонтали */
    max-width: 700px;
    text-align: center; /* Центрирование текста */
    color: #000000; /* Dark color for better readability */
}

.invitation-text-flower {
    font-family: "Comfortaa", sans-serif;
    font-size: 1.1em; /* Larger font size */
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    margin: 0 auto 20px; /* Центрирование по горизонтали */
    max-width: 700px;
    text-align: center; /* Центрирование текста */
    color: #F2AAC4; /* Dark color for better readability */
}

.tn-atom {
    font-family: "Dela Gothic One", sans-serif;
    color: #000000; /* White text color */
    margin-bottom: 20px; /* Add space below the title */
    font-size: 0.9em; /* Increase font size for emphasis */
    background-color: #F2AAC4; /* Pink background color */
    padding: 10px 15px; /* Padding for the background */
    border-radius: 25px; /* Pill-shaped background */
    display: inline-block; /* Ensure the background only wraps around the text */
    text-align: center; /* Center the text */
}

.color-palette {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 40px; /* Ensure consistent spacing */
    flex-wrap: wrap; /* Allow wrapping to the next line */
}

.color {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

/* Ensure 3 circles per row for women's palette */
.dress-code .color-palette {
    flex-basis: calc(33.333% - 20px); /* 3 circles per row */
}

/* Ensure 3 circles per row for men's palette */
.gallery .color-palette {
    flex-basis: calc(33.333% - 20px); /* 3 circles per row */
}

.carousel {
    margin: 0 auto;
    padding: 20px 0;
    max-width: 700px;
    overflow: hidden;
    display: flex;
    position: relative;
    padding-left: 20px;
}

.group {
    display: flex;
    gap: 20px;
    will-change: transform;
    animation: scrolling 15s linear infinite; /* Increased duration to slow down the animation */
    padding-right: 20px;
}

.group img {
    width: 200px;
    height: auto;
    border-radius: 25px; /* Pill-shaped images */
    background-color: #fff; /* Solid white background */
    flex-shrink: 0;
    transform: perspective(1000px) rotateX(10deg);
    transition: transform 0.3s ease-in-out;
}

.group img:hover {
    transform: perspective(1000px) rotateX(0deg) scale(1.05);
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.carousel:hover .group {
    animation-play-state: paused;
}

/* Additional Styling */
h1, h2 {
    color: #000000;
}

p {
    color: #000000;
    line-height: 1.6;
}

label {
    color: #000000;
}

input, select, button {
    width: 5%; /* Adjust width to account for padding */
    padding: 10px;
    border: none; /* Removed border */
    border-radius: 25px; /* Pill-shaped inputs and buttons */
    background-color: #f9f9f9;
}

button {
    background-color: #F2AAC4;
    color: #000000;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

button:hover {
    background-color: #e08ab1;
}

.form-group {
    margin-bottom: 20px;
    text-align: left; /* Align form groups to the left */
}

.form-label {
    font-family: "Comfortaa", sans-serif;
    font-size: 1.1em; /* Размер шрифта */
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    display: block;
    margin-bottom: 5px;
    color: #000000;
    text-align: left; /* Align labels to the left */
}

.radio-group, .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: "Comfortaa", sans-serif;
    font-size: 1.1em; /* Размер шрифта */
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    text-align: left; /* Align checkbox and radio groups to the left */
}

.radio-group label, .checkbox-group label {
    display: flex;
    align-items: center; /* Align items to the center vertically */
    gap: 10px;
    text-align: left; /* Align checkbox and radio labels to the left */
}

.radio-group input, .checkbox-group input {
    font-family: "Comfortaa", sans-serif;
    font-size: 1em; /* Размер шрифта */
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    margin-top: 0; /* Ensure no extra margin on top */
    margin-right: 10px; /* Space between input and label text */
}

.form-container {
    max-width: 600px;
    margin: 100px auto 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 25px; /* Скругленные углы */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left; /* Выравнивание текста по левому краю */
}

.form-header {
    text-align: left; /* Выравнивание заголовка по левому краю */
    margin-bottom: 20px;
}

.form-title {
    font-family: "Dela Gothic One", sans-serif;
    font-size: 1.5em;
    color: #000000;
}

.form-description {
    font-family: "Comfortaa", sans-serif;
    font-size: 1.1em; /* Размер шрифта */
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color: #000000;
}

.form-input, .form-select {
    width: calc(100% - 20px); /* Ширина с учетом отступов */
    padding: 10px;
    margin-top: 5px;
    border: 2px solid #ccc; /* Граница для видимости */
    border-radius: 25px; /* Скругленные углы */
    font-family: "Comfortaa", sans-serif;
    font-size: 1.1em; /* Размер шрифта */
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    text-align: left; /* Выравнивание текста по левому краю */
    box-sizing: border-box; /* Учитываем padding и border в ширине */
}

/* Ensure the input field changes border color to pink on focus */
input[name="other-drink"] {
    border: 2px solid #ccc; /* Standard border */
    margin-left: 10px; /* Ensure consistent margins */
    width: calc(100% - 20px); /* Adjust width to match other fields */
}

input[name="other-drink"]:focus {
    border-color: #F2AAC4 !important; /* Pink border on focus */
    outline: none; /* Remove default outline */
}

/* Ensure the same style applies to other input fields if needed */
.form-input:focus, .form-select:focus {
    border-color: #F2AAC4 !important; /* Pink border on focus */
    outline: none; /* Remove default outline */
}

.form-button {
    width: 100%;
    padding: 10px 15px;
    background-color: #F2AAC4; /* Розовый цвет кнопки */
    color: #000000;
    font-family: "Dela Gothic One", sans-serif;
    border: none;
    border-radius: 25px; /* Скругленные углы */
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center; /* Центрируем текст кнопки */
}

.form-button:hover {
    background-color: #F2AAC4; /* Темно-розовый при наведении */
}

.event-photo {
    margin-bottom: 40px;
    background: #f5f5f5; /* Match background color */
    border-radius: 25px; /* Pill-shaped sections */
    text-align: center; /* Center the content within the section */
}

@media (max-width: 768px) {
    .event-photo {
        width: 101%; /* Изображение выходит за экран на 1/8 ширины */
        height: auto;
        margin-left: -5.1%; /* Смещение влево для центрирования */
        border-radius: 25px; /* Закругленные углы */
    }
}

.event-photo .full-width-image {
    width: 100%;
    height: auto;
    max-width: 550px;
    border-radius: 25px; /* Match the rounded corners */
}

.spacer {
    height: 20px; /* Отступ между изображениями */
}

/* Desktop version */
.overflow-image {
    width: 95%; /* Изображение выходит за экран на 1/8 ширины */
    height: auto;
    max-width: 450px;
    position: relative; /* Относительное позиционирование */
    left: 50%; /* Центрирование относительно экрана */
    transform: translateX(-75%); /* Смещение влево от центра */
    border-radius: 25px; /* Закругленные углы */
}

/* Mobile version */
@media (max-width: 768px) {
    .overflow-image {
        width: 95%; /* Изображение выходит за экран на 1/8 ширины */
        height: auto;
        max-width: 352px;
        margin-left: 9%; /* Смещение влево для центрирования */
        border-radius: 25px; /* Закругленные углы */
    }
    .event-note {
        margin-left: -7%; /* Ширина блока */
        max-height: 200px;
        min-width: 170px;
        transform: none; /* Убираем трансформацию */
    }
}

/* Ensure the parent container is positioned relatively */
.overflow-image {
    position: relative;
    
}

.overflow {
    position: relative;
}

/* Style for the event note */
.event-note {
    background-color: #F2AAC4; /* Light pink with 70% opacity */
    border-radius: 25px; /* Rounded corners */
    padding: 10px; /* Padding inside the box */
    position: relative; /* Position relative to its normal position */
    top: -250px; /* Adjust this value to move the box up or down */
    left: 50%; /* Center horizontally */
    transform: translateX(-25%); /* Center the box */
    width: 80%; /* Adjust width as needed */
    text-align: center; /* Center the text */
    max-width: 250px;
    z-index: 10; /* Ensure it appears above the image */
}

.overflow-image {
    width: 90%; /* Изображение выходит за экран на 1/8 ширины */
    height: auto;
    max-width: 415px;
    position: relative; /* Относительное позиционирование */
    left: 50%; /* Центрирование относительно экрана */
    transform: translateX(-79%); /* Смещение влево от центра */
    border-radius: 25px; /* Закругленные углы */
}

.event-note p {
    font-family: "Comfortaa", sans-serif;
    font-size: 1em; /* Размер шрифта */
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    margin: 0;
    color: #000000; /* Цвет текста */
}

.spacer1 {
    height: 1000px; /* Отступ между изображениями */
}

/* Desktop version */
.mirrored-overflow-image {
    width: 90%; /* Изображение выходит за экран на 1/8 ширины */
    margin-top: -100px; /* Space above the button container */
    height: auto;
    max-width: 415px;
    position: relative; /* Относительное позиционирование */
    left: 50%; /* Центрирование относительно экрана */
    transform: translateX(-22%); /* Смещение вправо от центра */
    border-radius: 25px; /* Закругленные углы */
}

/* Mobile version */
@media (max-width: 768px) {
    .mirrored-overflow-image {
        width: 95%; /* Изображение выходит за экран на 1/8 ширины */
        height: auto;
        max-width: 352px;
        margin-left: -9%; /* Смещение влево для центрирования */
        border-radius: 25px; /* Закругленные углы */
    }

    .mirrored-event-note {
        margin-left: 7%; /* Ширина блока */
        max-height: 200px;
        min-width: 170px;
        transform: none; /* Убираем трансформацию */
    }
}

/* Ensure the parent container is positioned relatively */
.mirrored-overflow {
    position: relative;
}

.mirrored-overflow {
    position: relative;
}

/* Style for the event note */
.mirrored-event-note {
    background-color: #F2AAC4; /* Light pink with 70% opacity */
    border-radius: 25px; /* Rounded corners */
    padding: 10px; /* Padding inside the box */
    position: relative; /* Position relative to its normal position */
    top: -200px; /* Adjust this value to move the box up or down */
    left: 50%; /* Center horizontally */
    transform: translateX(-75%); /* Center the box */
    width: 80%; /* Adjust width as needed */
    text-align: center; /* Center the text */
    max-width: 250px;
    z-index: 10; /* Ensure it appears above the image */
}

.mirrored-event-note p {
    font-family: "Comfortaa", sans-serif;
    margin: 0;
    font-size: 1em; /* Размер шрифта */
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color: #000000; /* Цвет текста */
}

/* Style for the new text */
.feedback {
    text-align: center; /* Center the text */
    font-family: "Dela Gothic One", sans-serif; /* Use a fancy font */
    color: #000000; /* Dark color for better readability */
    padding: 0 20px 20px 20px;
    margin-top: -50px; /* Уменьшите это значение, чтобы поднять кнопку выше */
}

/* Style for the new image */
.feedback img {
    display: block;
    margin: 20px auto; /* Center the image */
    max-height: 500px;
    max-width: 500px; /* Ensure the image is responsive */
    height: auto; /* Maintain the aspect ratio */
    border-radius: 25px; /* Optional: Add rounded corners */
}

@media (max-width: 768px) {
    .feedback img {
        display: block;
        margin: 20px auto; /* Center the image */
        max-width: 100%; /* Ensure the image is responsive */
        height: auto; /* Maintain the aspect ratio */
        border-radius: 25px; /* Optional: Add rounded corners */
    }
}

.koordinator-note {
    font-size: 1.1em; /* Larger font size */
    text-align: center; /* Center the text */
    font-family: "Comfortaa", sans-serif; /* Use a fancy font */
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color: #000000; /* Dark color for better readability */
    padding: 0 20px 20px 20px;
    margin-top: -30px;
    max-width: 600px;
    margin: 20px auto; /* Центрирование по горизонтали */
}