/* Основные стили для body и html */
html, body {
    height: 100%; /* Растягиваем body и html на всю высоту окна */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
/* Основной контент (main) должен растягиваться, чтобы футер был внизу */
main {
    flex: 1; /* Растягиваем main на всю доступную высоту */
}

body{
    background-color: #d3eff3;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400; /* Regular по умолчанию */
}
h1{
    text-align: center;
    /*font-family: 'Roboto Condensed', sans-serif;*/
    font-weight: 700; /* Bold */    
}
.navbar-brand img{
    height: 100px;
    margin-top: 0;
}
.fon-top{
background: rgba(133, 156, 171, 1);
}
.slogan {
    background: rgba(182, 18, 18, 1);
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.slogan p {
    color: white; /* Белый текст */
    font-size: 1rem; /* Увеличиваем размер шрифта */
    text-decoration: none; /* Убираем подчеркивание */
    margin-top: 1rem;
}
.btn.btn-primary {
    color: white; /* Белый текст */
    border-color: transparent; /* Убираем границу */
    border-width: 4px;
}
/*Кнопки главного меню*/
.btn.btn-primary.btn-home{
    background: rgba(255, 165, 0, 1);    
}
.btn.btn-primary.btn-home:hover{
    border-color: rgba(255, 165, 0, 1);
}
.btn.btn-primary.btn-home.active {
    background: transparent;
    border-color: rgba(255, 165, 0, 1);
}
.btn.btn-primary.btn-my{
    background: rgba(244, 217, 11, 1);
}
.btn.btn-primary.btn-my:hover{
    border-color: rgba(244, 217, 11, 1);
}
.btn.btn-primary.btn-my.active {
    background: transparent;
    border-color: rgba(244, 217, 11, 1);
}
.btn.btn-primary.btn-ga{
    background: rgba(18, 236, 18, 1);
}
.btn.btn-primary.btn-ga:hover{
    border-color: rgba(18, 236, 18, 1);
}
.btn.btn-primary.btn-ga.active {
    background: transparent;
    border-color: rgba(18, 236, 18, 1);
}
.btn.btn-primary.btn-re{
    background: rgba(13, 242, 231, 1);
}
.btn.btn-primary.btn-re:hover{
    border-color: rgba(13, 242, 231, 1);
}
.btn.btn-primary.btn-re.active {
    background: transparent;
    border-color: rgba(13, 242, 231, 1);
}
.btn.btn-primary.btn-us{
    background: rgba(28, 12, 243, 1);
}
.btn.btn-primary.btn-us:hover{
    border-color: rgba(28, 12, 243, 1);
}
.btn.btn-primary.btn-us.active {
    background: transparent;
    border-color: rgba(28, 12, 243, 1);
}
.btn.btn-primary.btn-cont{
    background: rgba(132, 14, 235, 1);
}
.btn.btn-primary.btn-cont:hover{
    border-color: rgba(132, 14, 235, 1);
}
.btn.btn-primary.btn-cont.active {
    background: transparent;
    border-color: rgba(132, 14, 235, 1);
}

/*Кнопки левого меню*/
.btn.btn-primary.l1{
    background: rgba(52, 73, 94, 1);
}
.btn.btn-primary.l1:hover{
    background: #22262B;
    /*border-color: rgba(52, 73, 94, 1);*/
}

/*Кнопки правого меню*/
.btn.btn-primary.pr{
    background: rgba(182, 18, 18, 1);
}
.btn.btn-primary.pr:hover{
    background: #800a0a;
}
.btn.btn-primary.pr2{
    background: rgba(255, 107, 54, 1);
}
.btn.btn-primary.pr2:hover{
    background: #be4a23;
}


/* Стили при наведении */
.btn.btn-primary:hover {
    background: transparent;
}
/*Приветствие*/
.text{
    background: #D9D9D9;
    margin-top: 1rem;
    margin-inline: -0.5rem;
    padding: 0.5rem;
    padding-bottom: 0.2rem;
}
.text p{ 
    margin-block: 0.5rem;
}

/* Стили для ссылок при наведении */
footer a:hover {
    color: #ffcc00; /* Желтый цвет при наведении */
    text-decoration: underline; /* Подчеркивание при наведении */
}
/* Стили для контейнера изображения */
.image-container {
    position: relative;
    display: inline-block;
}
/* Скрываем изображение при наведении по умолчанию */
.hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease; /* Плавное изменение прозрачности */
}
/* Показываем изображение при наведении */
.image-container:hover .hover-img {
    opacity: 1;
}
/* Скрываем обычное изображение при наведении */
.image-container:hover .default-img {
    opacity: 0;
}





footer {
    background: #4e5da1;
    padding: 2rem 0;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-social {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

footer a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #ffcc00;
    text-decoration: underline;
}

/* Стили для контейнера изображения */
.image-container {
    position: relative;
    display: inline-block;
}

/* Иконки соцсетей по умолчанию */
.image-container img {
    height: 90px;
    transition: all 0.3s ease;
}

/* Мобильная версия */
@media (max-width: 768px) {
    .footer-container {
        margin-top: -1rem; /* Поднимаем контейнер выше */
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0rem;
    }
    
    .footer-social {
        order: 3; /* Перемещаем иконки в конец */
        width: 100%;
        margin-top: 1rem;
        flex-wrap: wrap;
    }
    
    .image-container img {
        height: 50px !important;
    }
    
    /* Опционально: уменьшаем отступы для мобильных */
    .footer-column {
        gap: 0rem;
    }
}