body {
    font-family: 'Rubik', sans-serif;
    color: #161619; /* Основной цвет текста */
}

* {
    font-family: 'Rubik', sans-serif;
}

.container-base {
    max-width: 1320px; /* Максимальная ширина для десктопа */
    margin: 0 auto; /* Центрирование содержимого */
}


/* Стиль для синего цвета */
    .blue-color {
        color: #003578 !important; /* Синий цвет для текста */
    }

    .hov-blue-color:hover {
        color: #003578 !important; /* Синий цвет для ховера по тексту */
        transition: color 0.2s ease 0s;
        cursor: pointer;
    }

    .muted-blue-color {
        color: #003578 !important; /* Синий цвет для текста */
        opacity: 40%;
    }

    .blue-bg {
        background-color: #003578 !important; /* Синий цвет для фона */
    }

    .hov-light-blue-color:hover {
        color: #4f9bff !important; /* Синий цвет для ховера по тексту */
        transition: color 0.2s ease 0s;
        cursor: pointer;
    }

    .light-blue-bg {
        background-color: #4f9bff !important; /* Синий цвет для фона */
    }


/* Стиль для красного цвета */
    .red-color {
        color: #D93B23; /* Красный цвет для текста */
    }
    .red-bg {
        background-color: #D93B23; /* Красный цвет для фона */
    }

    .hov-red-color:hover {
        color: #D93B23 !important; /* Синий цвет для ховера по тексту */
        transition: color 0.2s ease 0s;
        cursor: pointer;
    }

    .red-bg:hover {
        background-color: #9f2d1c; /* темный оттеннок красного цвет для ховера фона */
        transform: translateY(-2px);
        transition: translate 0.4s ease 0s;
    }

    


/* Стиль для черного цвета */
    .black-color {
        color:#161619 !important;  /* Черный цвет для текста */
    }
    .black-bg {
        background-color: #161619; /* Черный цвет для фона */
    }

/* Стиль для ховера для текста - вариант с расстояниями*/
    .hover-undernise-effect {
        position: relative;
        overflow: hidden;
        transition: letter-spacing 0.5s ease-in-out; /* Анимация для расстояния между буквами */
    }

    .hover-undernise-effect:hover {
        letter-spacing: 2px; /* Увеличивает расстояние между буквами при наведении */
    }

    .hover-undernise-effect::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease-in-out; /* Анимация расширения подчеркивания */
    }

    .hover-undernise-effect:hover::after {
        transform: scaleX(1); /* При наведении подчеркивание расширяется до полной ширины */
    }
 
    /* Стиль для ховера для текста - просто подчеркивание*/
    .hover-underline-effect {
        position: relative;
        overflow: hidden;
    }

    .hover-underline-effect::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease-in-out;
    }

    /* Добавление анимации подчеркивания при наведении */
    .hover-underline-effect:hover::after,
    /* Добавление анимации подчеркивания при фокусе */
    .hover-underline-effect:focus::after {
        transform: scaleX(1);
    }


/* Стили для маленькой карточки новости */
.news-card {
    overflow: hidden; /* Обрезка изображения */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /*Анимация для ховера*/
  }

  
  /* Стили для изображения новости */
  .news-image {
    position: relative;
  }
  
  .news-image img {
    width: 100%;
    display: block; /* Убрать пробел под изображением */
    aspect-ratio: 16 / 9; /* Пропорция изображения */
    /*object-fit: cover;  Обрезка по пропорции */
    object-fit: contain; /* Обрезка по пропорции */
  }


  .news-card:hover .news-title {
    color: #003578 !important; /* Синий цвет для ховера по тексту */
    transition: color 0.2s ease 0s;
    cursor: pointer;
  }
  
  .news-hover-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2b30a3; /* Синий цвет фона */
    mix-blend-mode: hard-light;
    opacity: 0; /* Изначально прозрачный */
    transition: opacity 0.3s ease; /* Плавная анимация прозрачности */
  }
  
  .news-image:hover .news-hover-overlay  {
    opacity: 0.5; /* Половина прозрачности при ховере */
    cursor: pointer;
  }


  .news-image-big .news-image-big-black   .img-big-container  {
    position: relative;
  }

  .news-image-big  .img-big-container img {
    height: 418px;
    width: 100%; 
    display: block; /* Убрать пробел под изображением */
    object-fit: cover; /* Обрезка по пропорции */
  }

  .news-hover-big-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2b30a3; /* Синий цвет фона */
    mix-blend-mode: hard-light;
    opacity: 0; /* Изначально прозрачный */
    transition: opacity 0.3s ease; /* Плавная анимация прозрачности */
  }
  

  .news-image-big:hover .news-hover-big-overlay {
    opacity: 0.5; /* Половина прозрачности при ховере */
    cursor: pointer;
  }
  
  .news-image-big-black img{
    height: 100%;
    width: 100%; 
    object-fit: cover; /* Обрезка по пропорции */
  }

  .img-cover {
    object-fit: cover; /* Обрезка по пропорции */
  }

/* Стили для картинки большой новости */

.big-article-img-wrapper {
  /* min-height: 200px; Вы можете задать любую высоту или сделать её адаптивной */
  /* height: 460px; */
  height: auto;
  overflow: hidden;
  position: relative;
}

.big-article-img-wrapper:hover .news-hover-overlay {
  opacity: 0.5; /* Половина прозрачности при ховере */
  cursor: pointer; 

}

.big-article-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.img-gallery {
    width: 100%;
    display: block; /* Убрать пробел под изображением */
    aspect-ratio: 16 / 12; /* Пропорция изображения */
    object-fit: cover; /* Обрезка по пропорции */
    object-position: center;
}

.img-gallery-modal {
  max-height: 80vh; /* 80% of viewport height */
  object-fit: contain; /* Maintain aspect ratio */
  width: auto; /* Auto width */
  margin: auto; /* Center the image */
}
  
/* стили для статей */

.image-article-news {
    position: relative; /* Относительное позиционирование для контейнера */
    width: 100%; /* Контейнер занимает всю ширину */
    overflow: hidden; /* Скрывает все, что выходит за пределы контейнера */
  }
  
  .image-article-news::after {
    content: ""; /* Псевдоэлемент для поддержания аспектного соотношения */
    display: block;
    padding-bottom: 56.25%; /* Аспектное соотношение 16:9 */
  }
  
  .image-article-news img {
    position: absolute; /* Абсолютное позиционирование для изображения */
    padding: 0 2px 0 2px;
    top: 0;
    left: 0;
    width: 100%; /* Ширина изображения равна ширине контейнера */
    height: 100%; /* Высота изображения равна высоте контейнера */
    object-fit: cover; /* Обрезает изображение, чтобы оно покрывало контейнер, сохраняя при этом пропорции */
  }

  .video-article-news {
    position: relative; /* Устанавливаем относительное позиционирование для контейнера */
    width: 100%; /* Задаем ширину контейнера равной ширине экрана */
    padding-top: 56.25%; /* Высота контейнера, соответствующая пропорциям 16:9 */
    overflow: hidden; /* Скрыть все, что выходит за пределы контейнера */
}

.video-article-news iframe {
    padding: 0 2px 0 2px;
    position: absolute; /* Абсолютное позиционирование для iframe */
    top: 0; /* Располагаем iframe в верхней части контейнера */
    left: 0; /* Располагаем iframe в левой части контейнера */
    width: 100%; /* Растягиваем iframe на всю ширину контейнера */
    height: 100%; /* Растягиваем iframe на всю высоту контейнера */
}