@font-face {
    font-family: 'Comfortaa';
    src: url('/fonts/Comfortaa-Regular.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'Comfortaa';
    src: url('/fonts/Comfortaa-Bold.ttf') format('truetype');
    font-weight: bold;
}
@media (prefers-color-scheme: dark) {
    /* Стили для темной темы */
}

@media (prefers-color-scheme: light) {
    /* Стили для светлой темы */
}

body {
    font-family: 'Comfortaa', sans-serif;
}


.home-bg {
    position: relative;
    background-image: url('/img/home-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-bg::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
    z-index: 1;
}

.home-bg > * {
    position: relative;
    z-index: 2;
}

#home_logo {
    margin-top: 20px;
    letter-spacing: .5cap;
}

@media (max-width: 768px) {
    #home_logo {
        font-size: 32px; /* Меньший размер шрифта на мобильных устройствах */
        letter-spacing: 0.2cap; /* Меньший интервал между буквами на мобильных устройствах */
    }
}
#home_descr {
    margin-top: 20px;
    letter-spacing: .5cap;
}

@media (max-width: 768px) {
    #home_descr {
        font-size: 22px; /* Меньший размер шрифта на мобильных устройствах */
        letter-spacing: 0.2cap; /* Меньший интервал между буквами на мобильных устройствах */
    }
}
h2  {
    margin-top: 20px;
    letter-spacing: .3cap;
}

#plett  {
    letter-spacing: .1cap;
}


@media (max-width: 768px) {
    h2 {
            letter-spacing: 0.2cap; /* Меньший интервал между буквами на мобильных устройствах */
    }
}

.center-content {
    display: flex;
    flex-direction: column; /* Указывает, что элементы должны располагаться вертикально */
    justify-content: center; /* Центрирование по вертикали */
    align-items: center; /* Центрирование по горизонтали */
    min-height: 100vh; /* Высота секции */
}
.feedback-form {
    max-width: 90%;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Comfortaa', sans-serif;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.form-group {
    padding: 0 15px;
    box-sizing: border-box;
    margin-bottom: 20px; /* Отступ между полями */
}

/* Адаптация для десктопов и больших экранов */
@media (min-width: 768px) {
    .form-group {
        flex: 1 1 50%; /* Поля занимают 50% ширины */
    }
    
    .form-group.full-width {
        flex-basis: 100%; /* Поле сообщения занимает всю ширину */
    }
}
/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
    .form-group {
        flex-basis: 100%; /* Поля занимают 90% ширины */
    }

    .form-group.full-width {
        flex-basis: 100%; /* Поле сообщения также занимает 90% ширины */
    }

    button[type="submit"] {
        width: 100%; /* Кнопка также занимает 90% ширины */
    }
}
/* Стили для полей ввода и текстовой области */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #505050;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: transparent; /* Устанавливаем прозрачный фон */
}
#budget {
    color: rgb(133, 133, 133);
}
.form-group textarea {
    height: 100px;
}

button[type="submit"] {
    width: 30%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Стили для выпадающего списка */
.form-group select {
    appearance: none; /* Удаляем стандартный стиль браузера */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048"><path fill="%23007bff" d="M0 384h2048L1024 1408 0 384z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px top 50%; /* Позиционирование иконки стрелки */
    background-size: 12px 12px; /* Размер иконки стрелки */
    padding-right: 30px; /* Отступ для иконки стрелки */
}

#devider {
    width: 10%;
    height: 3px;
    background: #ffffff;
}

.footer {
    background-color: #000000; /* Светлый фон, можно изменить на другой цвет */
    padding: 20px 0;
    font-family: 'Comfortaa', sans-serif;
}

.footer p {
    margin: 0;  
    color: #fff; /* Цвет текста, можно изменить */
}

.footer a {
    color: #007bff; /* Цвет ссылок, можно изменить */
}

.footer a:hover {
    color: #0056b3; /* Цвет ссылок при наведении, можно изменить */
}


.parallax-section {
    position: relative;
    background-image: url('/img/bg2.png');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px; /* Вы можете настроить это значение */
}

/* Адаптивный эффект параллакса для мобильных устройств */
@media (max-width: 768px) {
    .parallax-section {
        background-attachment: scroll; /* Исправляет фон на мобильных устройствах */
    }
}