.info-block #small-block,
.info-block #large-block {
  position: fixed;
  right: -40%;       /* изначально за правой границей */
}

/* когда мы хотим увидеть small */
.info-block #small-block.visible {
  right: 0;
}

/* когда мы хотим увидеть large */
.info-block #large-block.visible {
  right: 0;
}

/* дополнительный сдвиг для small при открытом large */
.info-block #small-block.shifted {
  /* здесь 500px — это ширина large-block; можно заменить */
 right: 40%;
    background: #ff9768;
    font-size: 1rem;
    line-height: 2;
    display: none;
}




/* 1) Маленький красный блок с "!" */
   .info-block  #small-block {
             position: fixed;
    width: 44px;
    background: red;
    color: white;
    font-size: 2.5rem;
    line-height: 37px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    right: -100px;
    cursor: pointer;
    transition: right 0.5s ease;
    z-index: 2;
    display: block;
        
    }
.info-block  #small-block .fa {
    width: auto;
    height:  auto;
}
    @keyframes pulse {
      0%   { transform: translateY(-50%) scale(1); }
      50%  { transform: translateY(-50%) scale(1.3); }
      100% { transform: translateY(-50%) scale(1); }
    }
    .pulse {
      animation: pulse 0.6s ease 1;
    }

 /* 2) Блок "Важная информация" теперь 280?100 */
    .info-block  #info-block {
        height: 28px;
    background: red;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    /* text-align: center; */
    }



    /* 3) Большой серый блок 500?280 */
    .info-block #large-block {
      position: fixed;
      width: 40%;
    height: 50%;
      background: #fbfbfb;
      top: 50%; transform: translateY(-50%);
      right: -40%;        /* спрятан за правым краем */
      transition: right 0.5s ease;
      z-index: 50;
      padding: 20px; box-sizing: border-box;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }
.info-block .text { height: 86%;

}
   .info-block  #large-block .close {
         position: absolute;
    top: 4px;
    right: 4px;
    font-size: 24px;
    cursor: pointer;
    /* color: red; */
    opacity: 1;
    }
.info-block .overflow-auto{overflow: auto !important;}
.info-block  .p-0 {
    padding: 0 !important;
}
.info-block  .p-3 {
    padding: 1rem !important;
}
.info-block  .me-5 {
    margin-right: 3rem !important;
}
.info-block  .lh-sm {
    line-height: 1.25 !important;
}
.info-block  .pe-5 {
    padding-right: 3rem !important;
}

.info-block  .mt-2 {
    margin-top: .5rem !important;
}
@media (max-width: 767px) {
.info-block #large-block {
  right: -77%;       /* изначально за правой границей */
width: 77%;
    }


}