.geo_container{
  padding: 96px 0;
/* background: rgba(242, 13, 13, 0.05); */
    background-image: url('../../images/fon.svg');
}

.geo_flex{
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.geo_title_wrap{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Стили для анимации заголовка и описания */
.geo_container .title h2,
.geo_container .title p {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.geo_container .title h2.revealed,
.geo_container .title p.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Можно добавить разные задержки для заголовка и описания */
.geo_container .title h2 {
    transition-duration: 0.6s;
}

.geo_container .title p {
    transition-duration: 0.6s;
    transition-delay: 0.1s;
}

.geo_wrap{
    display: flex;
  padding: 60px;
  align-items: center;
  gap: 60px;
  align-self: stretch;
  border-radius: 20px;
  border: 1px solid #323232;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.geo_cont_block{
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.geo_block {
display: flex;
  padding: 24px;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;
  align-self: stretch;
  opacity: 0;
  transform: translateX(-120px);
  transition: opacity 1.6s cubic-bezier(0.2, 0.9, 0.4, 1.1), transform 1.6s cubic-bezier(0.2, 0.9, 0.4, 1.1), border 0.3s ease;
    transition-delay: 0s, 0s, 0s;
  will-change: opacity, transform, border;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  cursor: pointer;
  transition: .3s;
}

.geo_container_text{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.geo_block.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Задержки для появления - применяем к .geo_block, а не к .revealed */
.geo_block:nth-child(1) {
    transition-delay: 0s, 0s, 0s; /* opacity, transform, border */
}

.geo_block:nth-child(2) {
    transition-delay: 0.15s, 0.15s, 0s; /* border без задержки */
}

.geo_block:nth-child(3) {
    transition-delay: 0.3s, 0.3s, 0s;
}

.geo_icon {
flex-shrink: 0;
  display: flex;
  width: 40px;
  height: 40px;
  padding: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.10);
}

.geo_block h3{
color: var(--White, #FFF);

/* m_bold */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 125% */
}

.geo_block p{
color: var(--Light-grey, #C3C3C3);

/* p */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 128.571% */
}

.geo_map {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: auto;
    max-height: 540px;
    background: #221010;
    border-radius: 16px;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.8);
    /* max-height: 512px; */
    transition: opacity 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.2), 
                transform 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}

.geo_map svg{
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.geo_map.revealed {
    opacity: 1;
    transform: scale(1);
}

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


.geo_block:hover{
    border: 1px solid var(--P, #676767);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px 0 rgba(11, 11, 11, 0.20);
}


#hover-group {
    cursor: pointer;
}

/* Для подсветки geo_block при наведении на маркер */
.geo_block.hover {
    border: 1px solid var(--P, #676767);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px 0 rgba(11, 11, 11, 0.20);
}

/* Для подсветки маркера при наведении на geo_block (через JS) */
#hover-group.hover path[id^="marker_"] {
    transform: scale(1.4);
    fill: rgba(240, 56, 64, 1);
    stroke: rgba(240, 56, 64, 1);
}

#hover-group.hover path[id^="container_"] {
    fill: #fff;
}

#hover-group.hover .message-text {
    opacity: 1;
}

/* Подсветка фона для всех контейнеров при наведении */
#hover-group:hover path[id^="container_"] {
    fill: #fff;
}

/* Блоки с текстом скрыты по умолчанию */
#hover-group .message-text {
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* Показываем текст при наведении на группу */
#hover-group:hover .message-text {
    opacity: 1;
}

/* Анимация увеличения для всех маркеров */
#hover-group:hover path[id^="marker_"] {
    transform: scale(1.4);
    transition: transform 0.15s ease;
    
    fill: rgba(240, 56, 64, 1);
    stroke: rgba(240, 56, 64, 1);
}

/* Базовый transition для плавности */
path[id^="marker_"] {
    transition: transform 0.15s ease;
}

#marker_1 {
    transform-origin: 245.5px 295px;
}

#marker_2 {
    transform-origin: 360.25px 445.262px;
}

#marker_3 {
    transform-origin: 447.473px 206.262px;
}

@media (max-width: 1030px) {
    .geo_container{
        padding: 64px 0;
    }
    .geo_wrap{
        flex-direction: column;
        padding: 30px;
    }
    .geo_title_wrap,
    .geo_map{
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 800px) {
    .geo_wrap{
        gap: 30px;
    }
    .geo_flex{
        gap: 32px;
    }
    .geo_cont_block{
        order: 1;
        gap: 12px;
    }
    .geo_block h3{
        font-size: 18px;
    }
    .geo_block p{
        font-size: 12px;
    }
}