/* ComingSoon.css */
/* Importing Pacifico font */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

/* Importing Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
}

.coming-soon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    text-align: center;
    background: url('/images/background.png') no-repeat center center/cover;
    font-family: 'Arial', sans-serif;
    color: #333;
}

.header-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 42px;
}

.logo {
    width: 177.89px;
    height: 228.85px;
    padding: 12.49px;
    gap: 12.49px;
}

.tagline {
    font-size: 1.2rem;
    color: #555;
}

.text-container {
    text-align: left;
}

.coming-soon-text {
    font-family: 'Pacifico', sans-serif;
    font-size: 80.47px;
    font-weight: 400;
    line-height: 79.66px;
    color: #026F57;
}

.form-section {
    width: 1000px;
    background-color: #00000080;
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 36px;
    padding-left: 48px;
    gap: 60px;
    margin-bottom: 54px;
}

.submit-container {
    margin-left: 150px;
}

/* Style for Email field */
.input-group.email-input {
    margin-left: 250px; /* Margin to shift the field to the right */
}

/* Style for the form itself */
form {
    display: flex; /* Using Flexbox to place all elements horizontally */
    justify-content: flex-start; /* Placing elements on the left */
    align-items: center; /* Vertically aligning elements */
    gap: 0px; /* Distance between input fields and button */
    width: 100%; /* Stretching the form to the full available width */
    max-width: 1260px; /* Limiting the maximum width of the form */
}

.form-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.input-group {
    display: flex;
    flex-direction: column;
    width: 250px;
}

    .input-group label {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 24px;
        line-height: 23.76px;
        color: #FCFCFC;
        text-align: left;
    }

    .input-group input {
        padding: 10px 0;
        font-size: 1rem;
        border: none;
        border-bottom: 3px solid #FCFCFC;
        background-color: transparent;
        color: #FCFCFC;
        width: 371.5px;
    }

        .input-group input:focus {
            outline: none;
            border-bottom: 2px solid #FCFCFC;
        }

        .input-group input::placeholder {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 24px;
            line-height: 23.76px;
            color: #FCFCFC;
            text-align: left;
        }

/* Style for button on PC */
.cta-button {
    margin-left: 60px; /* Automatic left margin to shift the button to the right */
    width: 295px;
    height: 65px;
    background-color: #F6B31C;
    border-radius: 32px;
    gap: 4.95px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .cta-button span {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 24px;
        line-height: 29.26px;
        text-align: center;
        color: #026F57;
    }

    .cta-button:hover {
        background-color: #f57f17;
    }

.tagline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20.12px;
    line-height: 19.92px;
    color: #026f57;
}

/* Стили для фона модального окна "Coming Soon" */
.comingsoon-overlay {
    position: fixed; /* Позиционирование относительно окна браузера */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Прозрачный черный фон для затемнения */
    display: flex;
    justify-content: center;
    align-items: center; /* Центрируем содержимое окна */
    z-index: 9999; /* Обеспечиваем, чтобы окно было поверх всего остального контента */
}

/* Стили для контента модального окна "Coming Soon" */
.comingsoon-content {
    background-color: white;
    padding: 20px; /* Добавляем отступы для контента */
    border-radius: 10px; /* Скругляем углы окна */
    max-width: 1700px; /* Увеличиваем максимальную ширину для окна */
    width: 90%; /* Окно будет занимать 90% ширины экрана */
    height: 80%; /* Ограничиваем высоту окна */
    position: relative;
    text-align: center;
    box-sizing: border-box; /* Учитываем padding в размере окна */
    overflow: hidden; /* Убираем прокрутку */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Выравнивание содержимого по верхней части */
}

/* Кнопка для закрытия окна "Coming Soon" */
.close-comingsoon {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ffd700; /* Желтый фон для кнопки */
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: white; /* Белый текст на кнопке */
    padding: 10px;
    border-radius: 15px; /* Скругленные углы кнопки */
    z-index: 10000; /* Кнопка будет поверх остальных элементов */
}

/* Mobile styles */
@media (max-width: 768px) {
    .coming-soon-container {
        padding: 20px; /* Padding on mobile devices */
        justify-content: flex-start; /* Shifting content to the top of the screen */
        text-align: center; /* Centering all text */
    }

    .header-section {
        flex-direction: column; /* Logo and text vertically */
        gap: 20px;
        margin-top: 0; /* Removing top margin */
        align-items: center; /* Centering content */
    }

    .logo {
        width: 150px; /* Reducing logo size */
        height: 200px; /* Reducing logo height */
    }

    .coming-soon-text {
        font-size: 40px; /* Reducing text size on mobile devices */
        line-height: 44px;
        text-align: center; /* Centering text */
    }

    .tagline {
        font-size: 14px; /* Reducing font size */
        line-height: 1; /* Adjusting line height */
        color: #026F57; /* Text color */
        text-align: center; /* Centering text */
        margin: 0; /* Removing margins */
        margin-top: -30px; /* Raising text higher */
    }

    .form-section {
        width: calc(100% - 60px); /* Form width considering padding */
        margin-bottom: 36px; /* Bottom margin */
        gap: 54px; /* Distance between elements */
        background-color: rgba(0, 0, 0, 0.5); /* Transparent black background */
        position: absolute;
        bottom: 0; /* Attaching to the bottom of the screen */
        height: 420px; /* Increasing block height */
    }

    .form-container {
        flex-direction: column; /* Placing input fields and button vertically */
        align-items: center;
    }

    .input-group {
        width: 100%; /* Input fields width 100% */
        margin-bottom: 16px; /* Margin between input fields */
        text-align: center; /* Centering text */
        margin-left: -30px; /* Shifting to the left */
        margin-top: 20px; /* Top margin for input fields */
    }

        .input-group input {
            width: 100%; /* Filling the entire available block */
            max-width: 371.5px; /* Limiting maximum width */
        }

    .submit-container {
        margin-left: 0; /* Removing margin for mobile devices */
    }

    .input-group.email-input {
        margin-left: -30px; /* Removing margin for email field on mobile devices */
    }

    form {
        flex-direction: column; /* Placing elements vertically on mobile devices */
    }

    .cta-button {
        margin-left: -26px;
        margin-top: 50px;
        width: 200px; /* Reducing button width */
        height: 60px; /* Reducing button height */
    }
}