/* Custom CSS for your header */
header {
    padding: 15px 0;
    
}

.navbar-toggler-icon {
    border-color: #008037; /* Green color for toggle button icon */
}

.navbar-nav .nav-link {
    margin-right: 15px;
}

.social-icons {
    display: flex;
    align-items: center;
	float:right;
	padding-right: 60px;
}

.social-icon {
    margin-left: 3px;
    text-decoration: none;
	
}

.social-icon img {
    max-width: 64px;
    height: auto;
}

/* === Language switch pill === */
.lang-switch-pill {
  display: flex;
  align-items: center;
  border-radius: 999px;
  overflow: hidden;
  height: 38px;
  min-width: 88px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Segment */
.lang-switch-pill .lang-segment {
  flex: 1 1 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  color: #555;
  transition: all 0.2s ease;
  user-select: none;
}

/* RU / HE base colors */
/* === segment base colors (safe) === */
.lang-switch-pill .ru {
  background: rgba(120, 200, 170, 0.22);
}

.lang-switch-pill .he {
  background: rgba(120, 180, 220, 0.22);
}

/* === active state (NO transparency tricks) === */
.lang-switch-pill .active {
  background: #ffffff;
  color: #000;
  font-weight: 600;
}

/* === hover (desktop only, safer) === */
@media (hover: hover) {
  .lang-switch-pill .lang-segment:hover {
    background: rgba(255, 255, 255, 0.85);
  }
}

/* === mobile sizing (explicit, no overrides elsewhere) === */
@media (max-width: 576px) {
  .lang-switch-pill {
    height: 38px;
    min-width: 96px;
  }
}


/* */


.row.rtl-row {
  flex-direction: row-reverse;
}

.rtl-carousel .carousel-item > .row {
    flex-direction: row-reverse;
}

.card-green    { background-color: #E9F4F8; }
.card-orange   { background-color: #E6F2EC; }
.card-turquoise{ background-color: #FFF0E6; }
.card-purple   { background-color: #F3E9F7; }


.card-action {
  height: 100%;
  min-height: 220px;

  background-clip: padding-box;

  display: flex;
  flex-direction: column;
}

@media (max-width: 767.98px) {
  .card-action.card-green     { background-color: #E9F4F8; }
  .card-action.card-orange    { background-color: #E6F2EC; }
  .card-action.card-turquoise { background-color: #FFF0E6; }
  .card-action.card-purple    { background-color: #F3E9F7; }
}

.card-action .card-body {
  width: 100%;
}


/* Стили для секции с фото и текстом */
.section-with-image {
    background: linear-gradient(to right, transparent 50%, #000 50%); /* Постепенный переход от фото к тёмному фону */
    overflow: hidden; /* Скрыть возможное переполнение фотографии */
}

.section-with-image img {
    transition: transform 0.3s; /* Плавное изменение масштаба фото при наведении */
}

.section-with-image:hover img {
    transform: scale(1.1); /* Увеличение фото при наведении */
}

/* Стили для кнопки "Подробнее" */


.btn-orange {
    background-color: #ff914d;
    color: #fff;
    transition: background-color 0.3s;
}

.btn-orange:hover {
    background-color: #ff6b00;
}

/* =========================
   ОБЩЕЕ: полупрозрачный слой
   ========================= */
#News .card-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* затемнение поверх картинки */
}

/* =========================
   ДЕСКТОП: карусель (≥768px)
   ========================= */
@media (min-width: 768px) {

    /* Заголовок и текст внутри подписи карусели */
    #News .carousel-caption h3,
    #News .carousel-caption p {
        background-color: rgba(0, 0, 0, 0.7); /* тёмный полупрозрачный фон */
        color: #fff;                           /* белый текст */
        padding: 10px;
        border-radius: 5px;
        font-weight: normal;                   /* НЕ жирный */
    }

    /* Размер заголовка в карусели */
    #News .carousel-caption h3 {
        font-size: 2.2rem;
        line-height: 1.3;
    }

    /* Если вернёшь параграф в карусели – чуть меньше шрифт */
    #News .carousel-caption p {
        font-size: 1rem;
        line-height: 1.4;
        margin-top: 0.5rem;
    }
}


/* Видимая кнопка */
#News .visible-btn {
    visibility: visible;
    pointer-events: auto;
}

/* Невидимая кнопка */
#News  .hidden-btn {
    visibility: hidden;
    pointer-events: none;
}

@media (min-width: 768px) {
    #News .carousel-caption .news-btn {
        margin-top: 1.5rem; /* попробуй 1.5–2rem, увеличивай/уменьшай по вкусу */
    }
}  




/* ===================================
   МОБИЛЬНЫЕ ЭКРАНЫ: карточки (<768px)
   =================================== */

  @media (max-width: 767.98px) {

    /* Вся мобильная карточка новостей */
    #News .card {
        position: relative;
        height: 260px;          /* фиксированная высота для всех карточек */ 
        overflow: hidden;
        background-size: cover;
        background-position: center;
    }

    /* Затемнение поверх всей карточки */
    #News .card-overlay {
        position: absolute;
        inset: 0;               /* top:0; right:0; bottom:0; left:0 */
        background-color: rgba(0, 0, 0, 0.5);
    }

    /* Тело карточки: растягиваем на всю высоту и центрируем текст */
    #News .card-body {
        height: 100%;
        display: flex;
		flex-direction: column; 
        align-items: center;    /* центр по вертикали */
        justify-content: center;/* центр по горизонтали */
        text-align: center;
        padding: 20px;          /* чтобы текст не прилипал к краям */
    }

    /* Заголовок внутри карточки */
    #News .card-body h3 {
        font-size: 1.25rem;
        line-height: 1.3;
        font-weight: 300;    /* НЕ жирный */
        color: #fff;            /* белый текст */
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
        margin: 0;              /* убираем лишние внешние отступы */
		line-height: 1.25;   /* равномернее ???? */
    }

    /* Если когда-нибудь покажешь текст в p (card-text) — тоже белый */
    #News .card-text {
        color: #fff;
    }
	
	#News .news-btn {
        margin-top: 2rem;   /* было ~1.1 — теперь ниже */
    }
}





/* Стили для карточек команды */
.team-card {
    background-color: #424f6f; /* Темно-серый цвет фона карточки */
    border: 2px solid #424f6f; /* Тонкая тёмная рамка */
    border-radius: 10px; /* Закругленные края */
    color: #fff; /* Белый текст */
	/*height:450px; */

}

.team-card {
    height: 500px; /* или другая нужная вам высота */
    display: flex;
    flex-direction: column;
}

.team-card img {
    height: 180px;     /* фиксируем высоту изображения */
    width: 180px;
    object-fit: cover; /* круг не потеряет пропорции */
    margin: 50px auto 0;
}


.team-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.team-card .card-text {
    overflow: hidden;     /* текст не выйдет за пределы */
}

/* Только для маленьких экранов OurTeam */
@media (max-width: 767.98px) {
    #OurTeam .team-card {
        height: auto;          /* больше НЕ фиксированная, а по контенту */
    }
}


/* Стили для заголовков и текста в карточках */
.card-title {
    font-size: 20px;
    margin-bottom: 0.5rem;
	
}



.card-text {
    font-size: 16px;
}

/* Стили для круглых фотографий */
.card .rounded-circle {
    width: 86px;
    height: 86px;
    margin: 0 auto; /* Центрирование фото */
	margin-top: 4px;
  /*  border: 2px solid #fff; /* Тонкая белая рамка */
}

#OurTeam .card .rounded-circle {
    margin: 40px auto 0;  /* любые значения: 35–50 подбираешь по вкусу */
}


/*Стили теста */

.rightimg  {
    float: right; /* Выравнивание по правому краю  */ 
    margin: 8px 12px 8px 8px; /* Отступы вокруг картинки  7px 12px 7px 7px;*/
   }
 
 @media (max-width: 576px){
  .media { display: block; } /* вместо flex на телефонах */
  .media > img { 
    display:block; 
    margin: 0 auto 1rem; 
    max-width: 100%; 
    height: auto;
  }
  .rightimg { 
    float:none !important; 
    display:block; 
    margin:0 auto 1rem; 
  }
}
   

   
.leftimg {
    float:left; /* Выравнивание по левому краю */
    margin: 8px 12px 8px 8px; /* Отступы вокруг картинки */
   }
   
    @media (max-width: 576px){
  .media { display: block; } /* вместо flex на телефонах */
  .media > img { 
    display:block; 
    margin: 0 auto 1rem; 
    max-width: 100%; 
    height: auto;
  }
  .leftimg { 
    float:none !important; 
    display:block; 
    margin:0 auto 1rem; 
  }
}

.photo-container {
    height: 234px;
    overflow: hidden;
}

.photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


	
   
.btncolor {
	background-color:#000080;
	border-color:#000080;
}

.video {
		background-color:#5d7687;
}


form {
    border: 1px solid #ccc; /* Тонкая серая рамка */
    border-radius: 10px; /* Закругленные края */
    padding: 20px; /* Отступ внутри формы */
}

/* Стили для footer */
footer {
    padding: 20px 0;
}

/* Стили для ссылок в меню */
footer ul.list-unstyled li a {
    color: white;
    text-decoration: none;
}

footer ul.list-unstyled li a:hover {
    text-decoration: underline;
}

/* Стили для контактной информации и копирайта */
footer p.small {
    margin: 5px 0;
}

/* Стили для логотипа */
footer h4 {
    font-size: 20px;
    margin: 0;
}

/* Стили для копирайта */
footer p.small:last-child {
    margin-top: 15px;
}
h3 {
	
	color:#141c57;
} 

/* TEST*/
    .text-primary {
        color: #007BFF;
    }

    .icon {
        width: 32px;
        fill: #333; /* Тёмно-серый цвет для иконок */
    }

  

    /* Увеличение расстояния между Main Content и footer */
    .mt-4 {
        margin-bottom: 20px; /* Увеличьте значение по вашему усмотрению */
    }
	
.videolist {
	padding-top: 25px;
}

/*.video-title {
height: 200px;
}*/ 


/* ================================
   1. Фиксированная высота заголовка
   ================================ */
.videolist .video-title h5 {
    min-height: 72px;       /* эталонная высота заголовка */
    line-height: 1.2;
    overflow: hidden;        /* обрезаем, если вдруг будет больше */
}


/* ================================
   2. Фиксированная высота описания
   ================================ */
.videolist .video-text {
    min-height: 96px;       /* эталонная высота описания */
    line-height: 1.25;
    overflow: hidden;        /* не даём растягивать карточку */
}


/* ================================
   3. Видео — фиксированное соотношение 16:9
      и без дёрганий при загрузке
   ================================ */
.videolist iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
}



a {
  color: white; /* Unvisited link color */
  text-decoration: none;
}

a:visited {
  color: white; /* Visited link color */
}

a:hover {
	color: white; /* Unvisited link color */
   text-decoration: none;	
}


.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.popup-content {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

blockquote {
  font-style: italic;
  color: #7188bd;
  border-left: 3px solid #465578;
  padding-left: 12px;
  margin: 10px 0;
}


.speshal_h1{
  font-size: 26px; /* Увеличиваем размер шрифта на 15% относительно базового (h1) */
  color: #353a40; /* Цвет текста */
  
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  
  
}


.custom-line-height {
  line-height: 1.8; /* Увеличиваем межстрочные отступы на 15% */
   font-size: 18px;
   font-weight: bold;
  
}

.custom-list {
  padding-left: 60px; /* Отступ слева на 30 пикселей */
}


.custom-list li::marker {
  font-size: 32px; /* Размер шрифта номеров списка */
  color: orange; /* Цвет текста номеров списка оранжевый */
  font-weight: bold;
}

.lable-custom {
  font-size: 18px; /* Размер шрифта номеров списка */
  color: orange; 
  font-weight: bold;
}

.topclass {
	
	font-size: 0.75em;
	/*font-weight: lighter;*/
	line-height:1.2;
}
	

.rtl {
  direction: rtl;         /* базовое направление справа-налево */
  unicode-bidi: isolate;  /* изолирует абзац от внешнего текста, убирает «кашу» с цифрами/скобками */
  text-align: right;      /* на случай, если где-то задано text-align: left */
}

@media (max-width: 576px) {
  .media { 
    display: block;           /* вместо flex */
  }
  .media > img, 
  .media .align-self-start,
  .media .mr-3 {
    display: block;
    float: none !important;
    margin: 0 auto 1rem !important; /* центрируем картинку */
    max-width: 100% !important;
    height: auto !important;
  }
  .media .media-body {
    width: 100%;
  }
}

/* popup improvements */
#myModal .modal-content {
  background: #fff7f0;
  border: none;
  border-radius: 20px;
  animation: pop-in 0.3s ease-out;
}

#myModal .modal-body {
  color: #333;
}

#myModal .btn-orange {
  background-color: #ff7a00;
  color: #fff;
  border: none;
  font-weight: 600;
  transition: 0.2s;
}

#myModal .btn-orange:hover {
  background-color: #e56e00;
}

.popup-icon i {
  font-size: 48px;
}

#popup-icon.success {
  color: #28a745;
}

#popup-icon.error {
  color: #dc3545;
}

@keyframes pop-in {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ===== Комментарии: база ===== */
#comments{
  padding:12px 14px !important;
  box-sizing:border-box;
}
#comments-list{ padding:8px 0; }

#comments .alert {
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f8f9fa;
  color: #555;
  font-size: 0.9em;
  line-height: 1.4;
}

#comments .card{
  border-radius:10px;
  margin-bottom:10px;
  border:1px solid #e6e6e6;
  background-color:#fafafa;
  transition:background-color .2s ease;
}
/* зебра — нечётные чуть темнее */
#comments .card:nth-child(odd){ background-color:#f3f3f3; }

/* строка комментария (ОДИН раз, без дублей) */
#comments .cmt{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:nowrap; /* не даём переноситься */
}

/* тело и шапка */
#comments .cmt-body{ flex:1 1 auto; min-width:0; }
#comments .cmt-header{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
#comments .cmt-time{ font-size:.9em; color:#6c757d; }

/* ===== Кружок-аватар (DIV) ===== */
#comments .cmt-avatar{
  display:inline-grid !important;      /* надёжнее в моб.движках */
  place-items:center;                  /* центр буквы */
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;            /* запретить сжатие/растяжение */
  box-sizing:border-box;

  border-radius:9999px !important;     /* круг при любом раскладе */
  background-clip:padding-box;         /* страховка артефактов */
  overflow:hidden;

  line-height:1; font-weight:700; font-size:14px; color:#fff;
  text-transform:uppercase;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  user-select:none;
}

/* ===== Mobile-only фиксы (Chrome Android + Samsung Internet) ===== */
@media (max-width:575.98px){
  /* базовый пэддинг не теряем */
  #comments{
    padding:10px 12px !important;
  }
  /* если #comments стоит прямо внутри .row — убираем отрицательные маргины Bootstrap */
  .row > #comments{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  /* если у #comments есть .col-* класс — добавим боковые отступы вручную */
  #comments[class*="col-"]{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  /* если внутри снова .row — тоже обнулим её отрицательные маргины */
  #comments .row{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* мобильные размеры и типографика */
  #comments .cmt{ gap:10px; }
  #comments .cmt-avatar{
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
    font-size:13px;
  }
  #comments .cmt-time{ font-size:.85em; }
  #comments textarea.form-control{ min-height:96px; }
}

@media (max-width:575.98px) and (pointer:coarse){
  @supports (-webkit-appearance:none) {
    #comments{
      box-sizing: border-box !important;
      border-left: 12px solid transparent !important;
      border-right: 12px solid transparent !important;
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .row > #comments{
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }
}
#all-events .card-text {
    min-height: 200px;
}

/* ===== 3x3 INFO GRID ===== */

.info-card {
  background: linear-gradient(135deg, #f2f2f2, #e6e6e6);
  border-radius: 10px;
  padding: 24px 18px;
  height: 100%;
}

.info-img {
  max-width: 80px;
  margin-bottom: 16px;
}

.info-title {
  font-family: 'Assistant', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  color: #7c7c7c;
  margin-bottom: 8px;
}

.info-text {
  font-family: 'Assistant', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  color: #7c7c7c;
  font-size: 0.95rem;
  line-height: 1.5;
}