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

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





}


.mainRazvoj .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(--blue);

}

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

/* border: 2px solid blue; */

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

    /* border: 2px solid green; */

}


.mainRazvoj .boxesImage{
   
    width: 68rem;

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

    /* border: 2px solid red; */

} 


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



.mainRazvoj .threedDiv {
  
    margin-top: 1em;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    





    /* border: 1px solid blue; */


}

.mainRazvoj .threedDivItems {

    position: relative;


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

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

    font-size: var(--razvojBoxText);

    overflow: hidden;



}

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

}


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


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




.mainRazvoj .threedDivItems span {


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

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

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


}




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

        max-width: 50rem;

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

    }


    .mainRazvoj .boxesImage img {
        min-height: 10rem;
        
        background-color: transparent;
       
        display: none;

    }



    .mainRazvoj .threedDiv {

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






        /* border: 1px solid blue; */


    }

    .mainRazvoj .threedDivItems {

        position: relative;


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

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

        font-size: var(--razvojBoxText);

        overflow: hidden;



    }

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

    }


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


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




    .mainRazvoj .threedDivItems span {


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

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

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


    }
}











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

        max-width: 100%;

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

    }




    .mainRazvoj .threedDiv {

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






        /* border: 1px solid blue; */


    }

    .mainRazvoj .threedDivItems {

        position: relative;


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

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

        font-size: var(--razvojBoxText);

        overflow: hidden;



    }

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

    }


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


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




    .mainRazvoj .threedDivItems span {


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

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

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


    }
}






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

        max-width: 100%;

        display: flex;
        flex-direction: column;

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

    }


}




@media (max-width:22rem) {



    .mainRazvoj .threedDivItems {

        position: relative;


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


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



    }

        .mainRazvoj .threedDivItems span {


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

        height: 6rem;
        width: 6rem;

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



    }

}