/**UXUI MIDDEL IMAGES**/


.imageS {
    opacity: 1;
    display: block;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    width: 80%;
    margin-bottom: 2%;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    max-width: 83%;

}

.box-middel:hover .imageS {
    opacity: 0.3;
}

.box-middel:hover .middle {
    opacity: 1;
}

.branche-titel-elearning {
    margin-left: 30%;
    margin-top: 2%;
}

.branche-titel-gesundheit {
    margin-left: 18%;
    margin-top: 2%;
}


/**HOVERING DOTS**/

.image-container {
    position: relative;
    width: 500px; /* Set the width of your image container */
}

.dot {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0); /* Set the color of your dots */
    border-radius: 50%;
    cursor: pointer;
}

.dot1 {
    top: 50px; /* Set the position of your first dot */
    left: 100px;
}

.dot2 {
    top: 200px; /* Set the position of your second dot */
    left: 300px;
}


.tooltip {
    visibility: hidden;
    width: 120px;
    background-color: rgba(51, 51, 51, 0.66);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

.dot:hover + .tooltip {
    visibility: visible;
    opacity: 1;
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0); /* Change color on hover if desired */
}


.plan {
    top: 4%; /* Set the position of your second dot */
    left: 10.8%;
}

.dev {
    top: 145px; /* Set the position of your second dot */
    left: 230px;
}

.integration {
    top: 2%; /* Set the position of your second dot */
    left: 48.2%;
}

.release {
    top: 27.5%; /* Set the position of your second dot */
    left: 79%;
}

.deploy {
    top: 1%; /* Set the position of your second dot */
    left: 86.3%;
}

.create {
    top: 81%; /* Set the position of your second dot */
    left: 86.3%;
}

.feedback {
    top: 81%; /* Set the position of your second dot */
    left: 48.2%;
}

.build {
    top: 81%; /* Set the position of your second dot */
    left: 9.8%;
}


.plan-text {
    top: -30px;
    margin-left: 20px;
    margin-top: 40%;
}

.monitor-text {
    margin-left: 30%;
    margin-top: 30%;
}

.test-text {
    margin-left: 30%;
    margin-top: 30%;
}

.release-text {
    margin-left: 30%;
    margin-top: 30%;
}

.deploy-text {
    margin-left: 30%;
    margin-top: 30%;
}

.operate-text {
    margin-left: 30%;
    margin-top: 30%;
}


.code-text {
    margin-left: 30%;
    margin-top: 30%;
}

.stack-icons-adjustment {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 3%;

}


@media screen and (max-width: 500px) {

    .box-middel {
        width: 50%;

    }

    .imageS {
        opacity: 1;
        display: block;
        height: auto;
        transition: .5s ease;
        backface-visibility: hidden;
        width: 80%;
    }

    .imageS-titel {
        margin-bottom: 10%;
        font-size: calc(1rem + 1vw);
    }

    .stack-icons-adjustment {
        margin-left: 2%;
        margin-right: 2%;
        padding-bottom: 5%;

    }

    .stack-icons {
        width: calc(1.475rem + 7.0vw);
    }

    .stack-icon-spacing {
        margin-right: 10%;
        margin-left: 10%;
    }


    .box-middel {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .box-middel:hover .middle {
        opacity: 1;
        background-color: white;
        border-radius: 10px;
        border: solid 1px #131645;
    }

    .dot {
        display: none;
    }

}

.stack-icons {
    width: calc(2.5rem + 2vw)
}

.icon-titel {
    padding-top: 5%;
    padding-bottom: 1%;
    color: white;
    letter-spacing: 3px;
    font-size: calc(0.4rem + 0.6vw);
}

@media screen and (min-width: 2200px) {

    .box-middel {
        position: relative;
        width: 50%;
    }

    .imageS {
        opacity: 1;
        display: block;
        height: auto;
        transition: .5s ease;
        backface-visibility: hidden;
        width: 80%;
    }

    .stack-icons-adjustment {
        margin-left: 2%;
        margin-right: 2%;
        padding-bottom: 5%;

    }

    .stack-icon-spacing {
        margin-right: 10%;
        margin-left: 10%;
    }


    .box-middel {
        position: relative;
        width: 50%;
    }


}


@keyframes moveIcons {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }

}


.moving-icons {
    animation: moveIcons 50s linear infinite;
}