/* static/css/main.css */

/* Стили для фонового div */
.full-width-background {
	background-image: url('/static/img/conny-schneider-pREq0ns_p_E-unsplash.jpg');
	/* Путь к вашему изображению */
	background-size: cover;
	/* Изображение будет покрывать весь div, обрезая лишнее */
	background-position: center center;
	/* Центрируем изображение */
	background-repeat: no-repeat;
	/* Запрещаем повторение изображения */
	min-height: 100vh;
	/* Высота div будет не менее 100% высоты окна просмотра */
	display: flex;
	/* Используем flexbox для центрирования содержимого */
	align-items: center;
	/* Центрируем содержимое по вертикали */
	justify-content: center;
	/* Центрируем содержимое по горизонтали */
	position: relative;
	/* Необходимо для наложения затемнения */
}

/* Опционально: Затемнение для лучшей читаемости текста */
.full-width-background::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	/* Полупрозрачный черный цвет */
	z-index: 1;
	/* Помещаем затемнение под содержимое */
}

/* Стили для контейнера с формой, чтобы он был поверх затемнения */
.form-container-wrapper {
	position: relative;
	/* Для поднятия над затемнением */
	z-index: 2;
	/* Выше затемнения */
	background-color: rgba(255, 255, 255, 0.7);
	/* Слегка прозрачный белый фон для формы */
	padding: 0px;
	border-radius: 8px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	width: 100%;
	/* Занимаем всю доступную ширину до max-width */
}

.navbar-custom-bg {
	/* Указываем путь к вашему изображению */
	background-image: url('/static/img/codioful-formerly-gradienta-1LirzgcpY2c-unsplash.jpg');
	background-size: cover;
	/* Растягивает изображение, чтобы оно полностью покрывало фон */
	background-position: center center;
	/* Центрирует изображение */
	background-repeat: no-repeat;
	/* Предотвращает повторение изображения */
	position: relative;
	/* Необходимо для позиционирования псевдоэлемента ::before */
	z-index: 0;
	/* Убедитесь, что содержимое навигации находится над фоном */
}

/* Добавляем полупрозрачный оверлей для лучшей читаемости текста */
.navbar-custom-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	/* Полупрозрачный черный (50% прозрачности) */
	z-index: -1;
	/* Размещаем оверлей под содержимым навигации */
}

.footer-custom-bg {
	/* Указываем путь к вашему изображению */
	background-image: url('/static/img/codioful-formerly-gradienta-1LirzgcpY2c-unsplash.jpg');
	background-size: cover;
	/* Растягивает изображение, чтобы оно полностью покрывало фон */
	background-position: center top;
	/* Центрирует изображение */
	background-repeat: no-repeat;
	/* Предотвращает повторение изображения */
	position: relative;
	/* Необходимо для позиционирования псевдоэлемента ::before */
	z-index: 0;
	/* Убедитесь, что содержимое навигации находится над фоном */
}

/* Добавляем полупрозрачный оверлей для лучшей читаемости текста */
.footer-custom-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	/* Полупрозрачный черный (50% прозрачности) */
	z-index: -1;
	/* Размещаем оверлей под содержимым навигации */
}

/* Стили для прозрачного навбара */
.navbar-transparent {
	background-color: transparent !important;
	/* Важно: переопределяем стили Bootstrap */
	/* Если вы хотите, чтобы навбар становился непрозрачным при скролле,
               этот стиль можно будет изменить с помощью JavaScript */
}

/* Дополнительные стили, чтобы текст был белым, если navbar-dark не полностью справляется
           (хотя для большинства случаев navbar-dark достаточно) */
.navbar-transparent .navbar-nav .nav-link,
.navbar-transparent .navbar-brand {
	color: white !important;
}

/* Цвет иконки гамбургера для мобильных устройств */
.navbar-transparent .navbar-toggler-icon {
	/* Это SVG, и navbar-dark обычно делает его светлым.
               Если нужно явно задать цвет, можно использовать фильтр,
               но это сложнее. Обычно navbar-dark достаточно. */
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Пример фона для страницы, чтобы прозрачность была видна */
.body_bg_1 {
	background-image: linear-gradient(to right bottom, #4CAF50, #2196F3);
	/* Градиентный фон */
	background-image: url('/static/img/conny-schneider-pREq0ns_p_E-unsplash.jpg');
	/* Путь к вашему изображению */
	background-size: cover;
	background-attachment: fixed;
	/* Для прокручиваемого фона */
	min-height: 200vh;
	/* Чтобы можно было прокрутить и увидеть fixed-top */
	color: white;
	/* Цвет текста на странице */
}

.body_bg_2 {
	background-image: linear-gradient(to right bottom, #4CAF50, #2196F3);
	/* Градиентный фон */
	background-size: cover;
	background-attachment: fixed;
	/* Для прокручиваемого фона */
	min-height: 200vh;
	/* Чтобы можно было прокрутить и увидеть fixed-top */
	color: white;
	/* Цвет текста на странице */
}

/* Отступ для контента, чтобы он не перекрывался фиксированным меню */
.content-wrapper {
	padding-top: 50px;
	/* Высота вашего навбара + небольшой отступ */
}

.card-with-bg_1 {
    background-color: white;
    /* Основное свойство для установки фонового изображения */
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.05)), url('/static/img/party-illustration-graphic-blue-background-gift-boxes-firecrackers-and-trumpet-with-copy-space-area-suitable-to-use-on-new-year-birthday-or-any-other-celebrating-event-vector.jpg');

    /* Как изображение будет масштабироваться */
    background-size: cover; /* Изображение будет покрывать всю область, обрезая лишнее */
    /* background-size: contain; */ /* Изображение будет полностью видно, но могут быть пустые области */
    /* background-size: 100% 100%; */ /* Растянет изображение на всю ширину и высоту (может исказить) */

    /* Позиционирование изображения */
    background-position: center center; /* Центрирует изображение */
    /* background-position: top left; */ /* Левый верхний угол */

    /* Повторение изображения */
    background-repeat: no-repeat; /* Предотвращает повторение изображения */

    /* Дополнительно: для лучшей читаемости текста */
    color: black; /* Изменяем цвет текста на светлый, если фон темный */
    /* background-color: rgba(0, 0, 0, 0.4); */ /* Можно добавить полупрозрачный цвет фона поверх изображения, но под текст */

    /* Если у вас есть background-color в Bootstrap .card, вам может понадобиться переопределить его */
    /* background-color: transparent; */ /* Убедитесь, что основной фон карточки прозрачен, чтобы было видно изображение */

    /* Важно для h-100: убедитесь, что родительский элемент имеет заданную высоту,
       или задайте min-height, если содержимое может быть небольшим. */
    min-height: 250px; /* Пример: минимальная высота, чтобы изображение было видно */
    font-weight: normal;
}

/* Если текст плохо читается, можно добавить overlay */
.card-with-bg_1 .card-body, .card-with-bg_1 .card-header {
    position: relative;
    z-index: 1; /* Убедитесь, что текст поверх overlay */
}


.card-with-bg_1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0); /* Полупрозрачный черный цвет */
    z-index: 0; /* Размещаем overlay под содержимым .card-body */
    border-radius: inherit; /* Если у карточки есть border-radius */
}

/* Вариант 1: Рассветный Туман */
.menu-gradient-option-1 {
    background-image: linear-gradient(to bottom right, #FF026A 0%, #AB18A2 50%, #3D25ED 100%);
    /*
     * #FF9A9E - Мягкий розовый/коралловый
     * #FAD0C4 - Нежный персиковый
     * #A1C4FD - Светлый небесно-голубой
     *
     * Направление: to bottom right (снизу-вправо)
     */
}

#left_side_menu li a {
    display: block; /* Делаем ссылки блочными, чтобы они занимали всю ширину */
    padding: 12px 20px; /* Отступы для пунктов меню */
    color: white; /* Белый цвет текста для ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    transition: background-color 0.3s ease; /* Плавный переход для ховера */
    background-color: rgba(255, 255, 255, 0.0);
    border-radius: 8px; /* Скругление при ховере */
}

#left_side_menu li a:hover {
    background-color: rgba(255, 255, 255, 0.15); /* Полупрозрачный белый фон при наведении */
    border-radius: 8px; /* Скругление при ховере */
}

#mainNavbarCollapse li a {
    display: block; /* Делаем ссылки блочными, чтобы они занимали всю ширину */
    padding: 8px 14px; /* Отступы для пунктов меню */
    color: white; /* Белый цвет текста для ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    transition: background-color 0.3s ease; /* Плавный переход для ховера */
    background-color: rgba(255, 255, 255, 0.0);
    border-radius: 8px; /* Скругление при ховере */
}

#mainNavbarCollapse li a:hover {
    background-color: rgba(255, 255, 255, 0.15); /* Полупрозрачный белый фон при наведении */
    border-radius: 8px; /* Скругление при ховере */
}