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

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



}

.mainSoft2 .firstDiv {
    margin-top: 2em;
    margin-bottom: 2em;

    width: 68rem;
    padding: .5em;
    display: flex;


    justify-content: space-between;



}

 .mainSoft2 .firstDivText {
    max-width: 37rem;

    font-weight: bold;



} 

 .mainSoft2 .firstDivText div {
    padding: .5em;
    font-size: var(--soft2Text);
} 

.mainSoft2 .firstDivText div:nth-child(1) {
    font-size: var(--soft2headline);
    color: var(--grey);
}




.mainSoft2 .firstDivRightText {
    max-width: 25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: var(--soft2Text);



    /* border: 2px solid blueviolet; */

}

.mainSoft2 .firstDivRightText div {
    padding: .5em;


}

.mainSoft2 .firstDiv a {
    margin-left: 2em;
    text-decoration: none;
    padding: .8em;
    background-color: var(--purple);
    color: var(--white);
    font-size: var(--soft2Text);

    border-bottom-right-radius: var(--borderRadius);

    /* background-color: red; */

}




.mainSoft2 .threedDiv {

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







    /* border: 1px solid blue; */


}

.mainSoft2 .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;



}



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

}

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


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

}




.mainSoft2 .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);


}



.triLinka{
    width: 68rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.triLinkaDiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5em;
    font-size: var(--soft2Text);
    
    
}

.triLinkaDiv a{
    font-size: var(--soft2Text);
    padding: .9em;
    margin-bottom: 1em;
    text-decoration: none;
    background-color: var(--purple);
    color: var(--white);
    font-weight: 550;
    border-bottom-right-radius: var(--borderRadius);
}


.triLinkaDiv:nth-child(2) a{
   margin-right:5em;
}


.triLinkaDiv a:hover{
    transition: 500ms;
    transform: scale(.96);
}







@media (max-width:68rem) {
    .mainSoft2 .firstDiv {
        margin-top: 2em;
        margin-bottom: 2em;

        width: 50rem;
        padding: .5em;
        display: flex;
        flex-direction: column;


        justify-content: space-between;



    }

    .mainSoft2 .firstDivText {
        max-width: 37rem;


    }

    .mainSoft2 .firstDivText div {
        padding: .5em;
        font-size: var(--soft2Text);
    }

    .mainSoft2 .firstDivText div:nth-child(1) {
        font-size: var(--soft2headline);
        color: var(--grey);
    }




    .mainSoft2 .firstDivRightText {
        margin-top: 1em;
        max-width: 25rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: var(--soft2Text);




    }

    .mainSoft2 .firstDivRightText div {
        padding: .5em;


    }

    .mainSoft2 .firstDiv a {
        margin-left: 2em;
        text-decoration: none;
        padding: .8em;
        background-color: var(--purple);
        color: var(--white);
        font-size: var(--soft2Text);

        border-bottom-right-radius: var(--borderRadius);



    }




    .mainSoft2 .threedDiv {

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







        /* border: 1px solid blue; */


    }

    .mainSoft2 .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;



    }



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

    }

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


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




    .mainSoft2 .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);


    }


 .triLinka {
     width:50rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;

 }


 .triLinkaDiv:nth-child(2) a {
     margin-right: 5em;
 }


}




















@media (max-width:50rem) {
    .mainSoft2 .firstDiv {
        margin-top: 2em;
        margin-bottom: 2em;

        width: 90%;
        padding: .5em;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        justify-content: space-between;



    }

    .mainSoft2 .firstDivText {
        max-width: 95%;


    }

    .mainSoft2 .firstDivText div {
        padding: .5em;
        font-size: var(--soft2Text);
    }

    .mainSoft2 .firstDivText div:nth-child(1) {
        font-size: var(--soft2headline);
        color: var(--grey);
    }




    .mainSoft2 .firstDivRightText {
        margin-top: 1em;
        min-width: 100%;
        display: flex;
        flex-direction: column;

        justify-content: space-between;
        font-size: var(--soft2Text);
        align-items: center;




    }

    .mainSoft2 .firstDivRightText div {
        padding: .5em;


    }

    .mainSoft2 .firstDiv a {
        margin-left: 2em;
        text-decoration: none;
        padding: .8em;
        background-color: var(--purple);
        color: var(--white);
        font-size: var(--soft2Text);

        border-bottom-right-radius: var(--borderRadius);



    }




    .mainSoft2 .threedDiv {

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








        /* border: 1px solid blue; */


    }

    .mainSoft2 .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;



    }



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

    }

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


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




    .mainSoft2 .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);


    }

 .triLinka {
     width: 95%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;

 }


 .triLinkaDiv:nth-child(2) a {
     margin-right: 0em;
 }



}










@media (max-width:40rem) {

    .mainSoft2 .firstDiv {
        margin-top: 2em;
        margin-bottom: 2em;

        width: 95%;
        padding: .5em;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        justify-content: center;

/* background-color: red; */

    }

    .mainSoft2 .firstDivText {
        max-width: 100%;


    }

    .mainSoft2 .firstDivText div {
        padding: .5em;
       
        font-size: var(--soft2Text);
    }

    .mainSoft2 .firstDivText div:nth-child(1) {
        font-size: var(--soft2headline);
        color: var(--grey);
    }




    .mainSoft2 .firstDivRightText {
        margin-top: 1em;
        width: 100%;
        display: flex;
        align-items: flex-start;

        flex-direction: column;
        justify-content: space-between;
        font-size: var(--soft2Text);




    }

    .mainSoft2 .firstDivRightText div {
        padding: .5em;


    }

    .mainSoft2 .firstDiv a {
        margin-left: 2em;
        text-decoration: none;
        padding: .8em;
        background-color: var(--purple);
        color: var(--white);
        font-size: var(--soft2Text);

        border-bottom-right-radius: var(--borderRadius);



    }




    .mainSoft2 .threedDiv {


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






        /* border: 1px solid blue; */


    }

    .mainSoft2 .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;



    }








    .mainSoft2 .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);


    }


 .triLinka {
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;

 }


 .triLinkaDiv {
     display: flex;
   
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: .5em;
     font-size: var(--soft2Text);

 }

 .triLinkaDiv a {
     font-size: var(--soft2Text);
     padding: .8em;
     margin-bottom: 1em;
     text-decoration: none;
     background-color: var(--purple);
     color: var(--white);
     font-weight: 600;
     border-bottom-right-radius: var(--borderRadius);
 }


 .triLinkaDiv:nth-child(2) a {
     margin-right: 0em;
 }


}






@media (max-width:400px) {
    .mainSoft2 .threedDiv {


        margin-top: 1em;
        margin-bottom: 1em;

        display: flex;
        flex-direction: column;







        /* border: 1px solid blue; */


    }

    .mainSoft2 .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;

        display: none;

    }








    .mainSoft2 .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:350px) {

    .mainSoft2 .firstDiv {
        margin-top: 2em;
        margin-bottom: 2em;

        width: 98%;
        padding: .5em;
        display: flex;
        flex-direction: column;
        align-items: center;

        justify-content: space-between;

        /* background-color: red; */

    }



    .mainSoft2 .threedDiv {


        margin-top: 1em;
        margin-bottom: 1em;

        display: flex;
        flex-direction: column;







        /* border: 1px solid blue; */


    }

    .mainSoft2 .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;

        display: none;

    }








    .mainSoft2 .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);


    }


    .mainSoft2 .firstDiv a {
        margin-left: 1em;
        text-decoration: none;
        padding: .7em;
        background-color: var(--purple);
        color: var(--white);
        font-size: var(--soft2Text);

        border-bottom-right-radius: var(--borderRadius);

        /* background-color: red; */

    }



}