#lower-part{
    position: relative;
    top: -1vw;
}

.indicators-section {
    position: relative;
    /* padding-top: 50px; */
    width: 100%;
    height: auto;
    background-image: url('../images/pngs/pozadí.jpg');
    background-size: contain;
    z-index: 10;
}

/* division that ensures consistency if the moving line */
.moving-dashed-line{
    position: relative;
    width: 100%;
    height: 5vw;
    z-index: 13;
    text-align: center;
    background-image: url('../images/pngs/pozadi-short-PC-reversed.png');
    background-position: bottom;
    background-size: cover;
}

/* This part specifies the moving dashed line. it uses the svg path */
.line {
    stroke-dasharray: 5px;
    stroke-dashoffset: 0;
    stroke-width: 2px;
    will-change: stroke-dashoffset;
    animation: dash 0.5s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -10px;
    }
}
svg {
    width: 100%;
    height: 100%;
    z-index: 15;
}
/* end of line css */
:root{
  --avoid-footer: 0px;    /* dynamická rezerva nad footerem (doplní JS) */
}

.slideDownButt{
    position: fixed;
    color: #fff;
    border: none;
    cursor: pointer;
    bottom: 0.5vh;
    inset-inline: 0;
    margin-inline: auto;
    z-index: 15;
    opacity: 1;
    background: transparent;
    transition: transform 0.3s ease;
}

.slideDownButt img {
    width: 3vw;
    transform:rotate(90deg);
    aspect-ratio: 1/1;
    background: transparent;
}

.slideDownButt.first {
    bottom: calc(max(5px,3.5vh + var(--avoid-footer)));
    transform: rotate(180deg);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.slideDownButt.highlight {
  animation: pulse 1.5s infinite;
}

.slideDownButt.hidden{
  opacity: 0;
  pointer-events: none;
}

.indicators-container{
    position: relative;
    background-color: var(--blue-bg);
    top: 0vh;
    left: 14.5%;
    width: 23%;
    /* padding-top: 5vh; */
    padding-bottom: 5vh;
    /* display: flex; */
    /* flex-wrap: wrap; */
    box-sizing: border-box;
    /* justify-content: space-around;
    align-items: flex-start; */
    z-index: 12;
}

.single-indicator{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    position: relative;
    flex-direction: row;
}

.single-indicator.active{
    width:100%;
}

.indicator {
    background-color: var(--blue-bg);
    height: 40vh;
    max-width: 100%;
    color: white;
    padding: 0 5% 0 5%;
    margin: 5vh 0 5vh 0;
    z-index: 12;
    text-align: center;
    flex-grow: 1;
}

.single-indicator-p {
    font-size: clamp(0.5rem, 0.75vw + 0.5rem, 1.6vw);
    position: absolute;
    left: 100%;
    width: 180%;
    opacity: 0;
    z-index: 11;
    color: #fff;
    transition: all 1s ease; /* Add smooth transition for changes */
}

.single-indicator-p.active {
    left:150%;
    z-index: 11;
    opacity: 1; /* The text fades out */
}

.indicator-svg-div{
    position: relative;
    width: 30%;
    height: 30%;
    margin: 10% auto auto auto;
    padding-right: 5%;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

.indicator-svg1, .indicator-svg2  {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease-in-out;
}
.indicator-svg1{
    opacity: 1;
}
.indicator-svg2 {
    opacity: 0;
}
.indicator-svg2:hover {
    opacity: 1;
}

.indicator-num {
    font-size: 5vh;
    font-weight: bold;
    margin-top: auto;
    margin-bottom: auto;
}

.indicator-text {
    font-size: 4vh;
    overflow-wrap: break-word;
    line-height: 1.2;
    font-weight: 600;
    margin-top: auto;
    margin-bottom: auto;
}

.white-line {
    width: 80%; 
    height: 5vh;
    height: 0.2vh; 
    background-color: white; 
    margin: 3vh auto 3vh auto; 
}

.lower-section-logo{
    z-index: 12;
    background-color: var(--blue-bg);
    position: relative;
    text-align: center;
}

.lower-section-logo-img{
    width: 70%;
    margin: 15vh 0 15vh 0;
}

.indicator-slide_butt{
    position: absolute;
    left: 93%;
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 15;
    opacity: 1;
    background-color: rgba(0,0,0,0);
}

.indicator-slide_butt img {
    transition: transform 0.5s ease; 
}

.indicator_button_rotate img{
    transform: rotate(180deg);
}

.indicators-expand-butt-img {
    width: 3vw;
    aspect-ratio: 1/1;
    background-color: rgba(0,0,0,0);
  }