.mainSoft1 {
    width: 100%;
    /* min-height: 100dvh; */

    background-color: var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);



}


.mainSoft1 .num {
        margin-top: 6em;
      

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    min-width: 5rem;
    min-height: 5rem;
    font-size: var(--razvojNum);

    border-radius: 50%;


    border: .2em solid var(--purple);

}

.mainSoft1 .firstDiv {
    padding: .5em;
    font-size: var(--razvojFirstText);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;

    /* background-color: red; */

}

.mainSoft1 .secondDiv {
    padding: .5em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--razvojSecondText);
    color: var(--grey);
}


.mainSoft1 .boxesImage {

    width: 68rem;

    display: flex;
    align-items: center;
    justify-content: space-around;


}


.mainSoft1 .boxesImage img {
    min-height: 10rem;
    background-color: transparent;
    /* background-color: red; */
}



.mainSoft1 .threedDiv {

    margin-top: 1em;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;






    /* border: 1px solid blue; */


}

.mainSoft1 .threedDivItems {

    position: relative;


    width: 22rem;
    padding: 1em;
    height: 12rem;

    border: .2em solid var(--purple);
    border-radius: .7em;
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    font-size: var(--razvojBoxText);

    overflow: hidden;



}

.mainSoft1 .threedDivItems:hover {
    transition: 400ms;
    transform: scale(.98);

}

.mainSoft1 .threedDivItems div:hover {
    transition: 400ms;
    transform: scale(1.02);
    color: var(--grey);
}

.mainSoft1 .threedDivItems div:nth-child(1) {
    color: var(--grey);
    font-size: var(--razvojBoxNaslov);
}




.mainSoft1 .threedDivItems span {


    position: absolute;
    left: 16.4rem;
    top: 6.4rem;

    height: 6rem;
    width: 6rem;
    border-radius: 50%;
    border: .2em solid var(--purple);

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--razvojIcons);
    overflow: hidden;
    color: var(--purple);


}



@media (max-width:68rem){
.mainSoft1 .boxesImage {

        width: 50rem;

        display: flex;
        align-items: center;
        justify-content: space-around;



    }


    .mainSoft1 .boxesImage img {
        min-height: 10rem;
        background-color: transparent;
        /* background-color: red; */
        display: none;
    }



    .mainSoft1 .threedDiv {

        margin-top: 1em;
        margin-bottom: 2em;
        display: flex;
        flex-direction: column;






        /* border: 1px solid blue; */


    }

    .mainSoft1 .threedDivItems {

        position: relative;


        width: 22rem;
        padding: 1em;
        height: 12rem;

        border: .2em solid var(--purple);
        border-radius: .7em;
        margin-top: 1em;
        margin-bottom: 1em;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        font-size: var(--razvojBoxText);

        overflow: hidden;



    }

    .mainSoft1 .threedDivItems:hover {
        transition: 400ms;
        transform: scale(.98);

    }

    .mainSoft1 .threedDivItems div:hover {
        transition: 400ms;
        transform: scale(1.02);
        color: var(--grey);
    }

    .mainSoft1 .threedDivItems div:nth-child(1) {
        color: var(--grey);
        font-size: var(--razvojBoxNaslov);
    }




    .mainSoft1 .threedDivItems span {


        position: absolute;
        left: 16.4rem;
        top: 6.4rem;

        height: 6rem;
        width: 6rem;
        border-radius: 50%;
        border: .2em solid var(--purple);

        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--razvojIcons);
        overflow: hidden;
        color: var(--purple);


    }
}















@media (max-width:50rem) {
    .mainSoft1 .boxesImage {

        width: 100%;

        display: flex;
        align-items: center;
        justify-content: space-around;

    


    }


    .mainSoft1 .boxesImage img {
        min-height: 10rem;
        background-color: transparent;
        /* background-color: red; */
        display: none;
    }



    .mainSoft1 .threedDiv {

        margin-top: 1em;
        margin-bottom: 2em;
        display: flex;
        flex-direction: column;






        /* border: 1px solid blue; */


    }

    .mainSoft1 .threedDivItems {

        position: relative;


        width: 22rem;
        padding: 1em;
        height: 12rem;

        border: .2em solid var(--purple);
        border-radius: .7em;
        margin-top: 1em;
        margin-bottom: 1em;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        font-size: var(--razvojBoxText);

        overflow: hidden;



    }

    .mainSoft1 .threedDivItems:hover {
        transition: 400ms;
        transform: scale(.98);

    }

    .mainSoft1 .threedDivItems div:hover {
        transition: 400ms;
        transform: scale(1.02);
        color: var(--grey);
    }

    .mainSoft1 .threedDivItems div:nth-child(1) {
        color: var(--grey);
        font-size: var(--razvojBoxNaslov);
    }




    .mainSoft1 .threedDivItems span {


        position: absolute;
        left: 16.4rem;
        top: 6.4rem;

        height: 6rem;
        width: 6rem;
        border-radius: 50%;
        border: .2em solid var(--purple);

        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--razvojIcons);
        overflow: hidden;
        color: var(--purple);


    }
}













@media (max-width:45rem) {
    .mainSoft1 .boxesImage {

        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;




    }


        .mainSoft1 .secondDiv {
            padding: .5em;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--razvojSecondText);
            color: var(--grey);
            text-align: center;
        }





    .mainSoft1 .threedDiv {

        margin-top: 1em;
        margin-bottom: 1em;
        display: flex;
        flex-direction: column;






        /* border: 1px solid blue; */


    }

    .mainSoft1 .threedDivItems {

        position: relative;


        width: 22rem;
        padding: 1em;
        height: 12rem;

        border: .2em solid var(--purple);
        border-radius: .7em;
        margin-top: 1em;
        margin-bottom: 1em;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        font-size: var(--razvojBoxText);

        overflow: hidden;



    }

    .mainSoft1 .threedDivItems:hover {
        transition: 400ms;
        transform: scale(.98);

    }

    .mainSoft1 .threedDivItems div:hover {
        transition: 400ms;
        transform: scale(1.02);
        color: var(--grey);
    }

    .mainSoft1 .threedDivItems div:nth-child(1) {
        color: var(--grey);
        font-size: var(--razvojBoxNaslov);
    }




    .mainSoft1 .threedDivItems span {


        position: absolute;
        left: 16.4rem;
        top: 6.4rem;

        height: 6rem;
        width: 6rem;
        border-radius: 50%;
        border: .2em solid var(--purple);

        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--razvojIcons);
        overflow: hidden;
        color: var(--purple);


    }
}




@media (max-width:22rem) {



    .mainSoft1 .threedDivItems {

        position: relative;


        width: 20rem;
        padding: 1em;
        height: 11rem;


        margin-top: 1em;
        margin-bottom: 1em;
        display: flex;
        flex-direction: column;
        overflow: hidden;



    }

.mainSoft1 .threedDivItems span {


        position: absolute;
        left: 14.8rem;
         top: 5.2rem;

        height: 6rem;
        width: 6rem;

        display: flex;
        align-items: center;
        justify-content: center;



    }

}