.mainText {
    width: 100%;


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



}


.mainText .num {
    margin-top: 1em;

    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(--green);

}

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

    /* background-color: red; */

}

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


.mainText .boxesImage {

    width: 68rem;

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


}



.mainText .threedDiv img {
    height: 15rem;
    background-color: transparent;
  
}



.mainText .threedDiv {

       

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






    /* border: 1px solid blue; */


}

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

}

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

.mainText .threedDivItems {

    position: relative;


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

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

    font-size: var(--razvojBoxText);

    overflow: hidden;



}

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




.mainText .threedDivItems span {


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

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

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


}



.mainText .fourDiv{
     width: 68rem;
    margin-bottom: 1em;

    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: red; */


}



@media (max-width:68rem) {

.mainText  img {
        height: 15rem;
        background-color: transparent;
    display: none;

    }

.mainText .boxesImage {

        width: 50rem;

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


    }



    .mainText .threedDiv img {
        height: 15rem;
        background-color: transparent;

    }



    .mainText .threedDiv {



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






     


    }



    .mainText .threedDivItems {

        position: relative;


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

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

        font-size: var(--razvojBoxText);

        overflow: hidden;



    }








    .mainText .fourDiv {
        width: 50rem;
        margin-bottom: 1em;


        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;


    }

 .mainText .fourDiv .threedDivItems:nth-child(2){
 
    display: none;

 }


}















@media (max-width:50rem) {


    .mainText .boxesImage {

        width: 100%;

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


    }



    .mainText .threedDiv img {
        height: 15rem;
        background-color: transparent;

    }



    .mainText .threedDiv {



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









    }



    .mainText .threedDivItems {

        position: relative;


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

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

        font-size: var(--razvojBoxText);

        overflow: hidden;



    }








    .mainText .fourDiv {
        width: 100%;
        margin-bottom: 1em;


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


    }
}











@media (max-width:45rem) {


    .mainText .boxesImage {

        width: 100%;

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


    }



    .mainText .threedDiv img {
        height: 15rem;
        background-color: transparent;

    }



    .mainText .threedDiv {



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









    }



    .mainText .threedDivItems {

        position: relative;


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

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

        font-size: var(--razvojBoxText);

        overflow: hidden;



    }








    .mainText .fourDiv {
        width: 100%;
        margin-bottom: 1em;


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


    }
 .mainText .fourDiv .threedDivItems:nth-child(2) {

     display: flex;

 }


}



@media (max-width:22rem) {



    .mainText .threedDivItems {

        position: relative;


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


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



    }

   .mainText .threedDivItems span {


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

        height: 6rem;
        width: 6rem;

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



    }

}