.info {
    /*margin-top: 50px;*/
    width: 100%;
    min-height: 738px;
    /* background: url('../img/dino.jpg') no-repeat; */
    display: flex;
    justify-content: center;
    /* padding: 50px 0; */
    padding-top: 50px;
    transition: opacity 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    /* чтобы оверлей не вылезал за границы */
}

.info-wrp {
    width: 1280px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;

}

/* Новый слой для фона */
/* Оверлей фона для десктопа */
.info-bg-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-repeat: no-repeat;    /* ключевое */
  background-size: contain;          /* покрытие всего блока */
  background-position: center;
  transition: opacity 0.6s ease-in-out;
  opacity: 1;
  z-index: 0;
}


.info-block {
    width: 49%;
}

.info-left {
    padding: 24px;
    background: url('../img/dino-left-bg.png') no-repeat;
}

.info-left-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 17px 17px 15px 17px;
    border-radius: 30px;
    width: 360px;
    height: 56px;
    text-transform: uppercase;
    color: var(--White, #FFF);
    font-family: Nunito;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    background: var(--Green-, #45B553);
}

.info-text-wrp {
    margin-left: 16px;
}

.text-dino-title {
    color: var(--Gray-Gray, #454545);
    font-family: Nunito;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    /* 41.8px */
}

.text-dino-text {
    max-width: 536px;
    margin-top: 32px;
    color: var(--Gray-Gray, #454545);
    font-family: "Nunito Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 33.6px */
}

.info-left-slog {
    margin-top: 32px;
    color: var(--Gray-Gray, #454545);
    font-family: Nunito;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
}

.info-left-link {
    display: block;
    margin-top: 8px;
}

.info-left-btn-text {
    max-width: 221px;
    color: var(--Gray-Gray, #454545);
    font-family: "Nunito Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    /* 18px */
}

/* правый блок */
.info-right {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    padding-bottom: 48px;
}

/* слайдер */
.info-slider-controls {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    width: 85%;
}

.info-slider-controls button {
    /* background: rgba(255, 255, 255, 0.8);
    border: none;
    font-size: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%; */
    cursor: pointer;
}

.info-slider-controls button:focus {
    outline: 2px solid #45B553;
}

.i1 {
    cursor: pointer;
    width: 14px;
    height: 33px;
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='33' viewBox='0 0 16 33' fill='none'>\
  <path d='M14.5 0L1.04895 15.853C0.732295 16.2262 0.732296 16.7738 1.04895 17.147L14.5 33' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'/>\
</svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

.i3 {
    cursor: pointer;
    width: 14px;
    height: 33px;
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='33' viewBox='0 0 16 33' fill='none'>\
  <path d='M1.68506 0L15.1361 15.853C15.4528 16.2262 15.4528 16.7738 15.1361 17.147L1.68506 33' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'/>\
</svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

.info-slider-indicators {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.info-slider-indicator {
    width: 19px;
    height: 11px;
    /* border-radius: 50%; */
    background: #fff;
    cursor: pointer;
}

.info-slider-indicator_active {
    background: #45B553;
}

.info-slider-caption {
    color: var(--Gray-Gray, #454545);
    text-align: center;
    font-family: "Nunito Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 33.6px */
}

/* в конец вашего styles.css */
@media (max-width: 575.98px) {
  /* 1) Секция: вертикальный стэк */
  .info {
    flex-direction: column;
    /* padding: 20px 0; */
    padding: 0;
    min-height: auto;
  }
    .info-left-header {
        width: 320px;
        font-size: 28px;
    }
    .info-hide {
        display: none;
    }
    .info-slider-caption {
        font-size: 22px;
    }
    .text-dino-text {
        color: var(--Gray-Gray, #454545);
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 140%; /* 25.2px */
    }


        /* 2) Переопределяем обёртку: теперь 100% и в колонку */
  .info-wrp {
    width: 100% !important;          /* перезаписываем 1280px */
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* 3) Блоки: занимают всю ширину */
  .info-left,
  .info-right {
    width: 100%;
    box-sizing: border-box;
  }

  /* 4) Левый блок — белый фон */
  .info-left {
    background: #fff !important;
    padding: 0 16px 16px 16px;
  }

  /* 5) Скрываем глобальный оверлей */
  .info-bg-overlay {
    display: none;
  }

  /* 6) Правый блок: будет получать фон через JS */
  .info-right {
    position: relative;
    padding: 16px;
    margin-top: 16px;
    background-size: cover;
    background-position: center;
    transition: background-image 0.6s ease-in-out;
    min-height: 576px;               /* чтобы контейнер не схлопнулся */
  }

  /* Поднимем контролы и подпись над фоном */
  .info-right > * {
    position: relative;
    z-index: 1;
  }
}