@media (max-width:800px){
    .moving-dashed-line{
        height: 9vw;
        background-size:cover;
        background-image: url('../images/pngs/pozadi-short-mobile-cropped.png');
    }

    .line {
        stroke-dasharray: 20px;
        stroke-dashoffset: 0;
        stroke-width: 5px;
        animation: dash 1.5s linear infinite;
    }
    
    @keyframes dash {
        to {
            stroke-dashoffset: -40px;
        }
    }
}

@media (max-width: 50em) or (max-aspect-ratio: 7/5){ /*so mainly for screens up to 1024px and secondly for high resolution mobile phones (so above 1024px but lower ratio)*/

    /* main */
    .slideDownButt {
        bottom: 0.5vh;
        inset-inline: auto;
        margin-inline: 0;
        left: unset;
        right: 1vw;
    }

    .slideDownButt.highlight{
        inset-inline: 0;
        margin-inline: auto;
    }

    .slideDownButt.first {
        bottom: calc(max(30px,3.5vh + var(--avoid-footer)));
    }

    .slideDownButt img {
        width: 7vw;
    }  
    
    .indicators-section {
        height: auto;
        top: -1px;
        aspect-ratio:unset;
    }

    .indicators-container{
        left: 10vw;
        width: 80vw;
        top: unset;
        padding-bottom: unset;
        padding-top: 8vh;
        box-sizing: unset;
    }


    /* logo */
    .logo-container{
        height: 12%;
        text-align: center;
    }

    .lower-section-logo{
        background-color: var(--blue-bg);
    }

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

    /* indicator */
    .single-indicator{
        height: auto;
        text-align: center;
        flex-direction: column;
        transition: all 0.7s ease-in-out;
        display: flex;
        justify-content: center;
    }

    .indicator {
        width: 90%;
        height: auto;
        margin: unset;
    }

    /* indictor parts */

    .indicator-svg-div{
        width: 20vw;
        height:20vw;
        margin: 5% auto 5% auto;
    }

    .indicator-num {
        font-size: 8vw;
    }
    
    .indicator-text {
        font-size: 6vw;
        line-height: 1.2;
    }

    /* indicator butt and article */

    .indicator-slide_butt {
        position: relative;
        right: 0;
        left: 0;
        text-align: center;
    }

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

    .indicators-expand-butt-img {
        transform:rotate(90deg);
        width: 7.5vw;
    }

    .single-indicator-p {
        position: relative;
        text-align: center;
        width: 80%;
        left: 0;
        right: 0;
        height: unset;
        margin-right: auto;
        margin-left: auto;
        font-size: 3vw;
        overflow: hidden; 
        max-height: 0;
        transition: max-height 1s ease;
        opacity: 1;
    }
    
    .single-indicator-p.active {
        left: 0;
        right: 0;
        top: 0;
        max-height: 50vh;
    }
}