@media(max-width:1024px){

    .archana_main{

        width: 100%;

        /* border: 1px solid rgb(16, 214, 221); */

    }

    .archana_main .container{

        /* border: 1px solid green; */

    }

    .archana_main .container .sub_container .box1{

        width: 35%;

        left: 0;

    }

    .archana_main .container .sub_container .box2{

        width: 35%;

        left: 0;

    }

    .archana_main .container .sub_container .box3{

        width: 35%;

        left: 0;

    }

    .archana_main .container .sub_container .box4{

        width: 35%;

        right: 0;

    }

    .archana_main .container .sub_container .box5{

        width: 35%;

        right: 0;

    }

    .archana_main .container .sub_container .box6{

        width: 35%;

        right: 0;

    }

    .archana_main .container .sub_container .main_rotate_div{
        
        left: 23%;
    }

    .archana_main .container .sub_container .main_rotate_div .middile_rotate{

        left: 0;

    }

}

@media(max-width:768px){

    .archana_main{

        width: 100%;

        /* border: 1px solid rgb(16, 214, 221); */

        height: auto;

        flex-direction: column;

    }

    .archana_main .container{

        /* border: 1px solid green; */

        

    }

    .archana_main .container .sub_container{

        height: auto;

        flex-direction: column;

        /* border: 1px solid rgb(19, 0, 128); */

    }

    .archana_main .container .sub_container .box1{

        width: 85%;

        left: 7%;

        top: 0;

    }

    .archana_main .container .sub_container .box2{

        width: 85%;

        left: 7%;

        top: 45%;

    }

    .archana_main .container .sub_container .box3{

        width: 85%;

        left: 7%;

        top: 95%;

    }

    .archana_main .container .sub_container .box4{

        width: 85%;

        top: 25%;

        right: 7%;

    }

    .archana_main .container .sub_container .box5{

        width: 85%;

        right: 7%;

        top: 75%;

    }

    .archana_main .container .sub_container .box6{

        width: 85%;

        right: 7%;

        /* top: 100%; */

        bottom: -25%;

    }
 
    .archana_main .container .sub_container .main_rotate_div{

        left: 23%;

        top: 15%;
    }

    .archana_main .container .sub_container .main_rotate_div .middile_rotate{

        left: 0;

        top: 0;

    }

}
@media(max-width:982px){

    .archana_main{

        width: 100%;

        /* border: 1px solid rgb(16, 214, 221); */

        height: auto;

        flex-direction: column;

        padding: 0px 0px;

    }

    .archana_main .container{

        /* border: 1px solid green; */

        width: 100%;
        

    }

    .archana_main .container .sub_container{

        height: auto;

        flex-direction: column;

        /* border: 1px solid rgb(19, 0, 128); */

    }

    .archana_main .container .sub_container .box1{

        width: 85%;

        left: 7%;

        top: 0;

    }

    .archana_main .container .sub_container .box2{

        width: 85%;

        left: 7%;

        top: 45%;

    }

    .archana_main .container .sub_container .box3{

        width: 85%;

        left: 7%;

        top: 95%;

    }

    .archana_main .container .sub_container .box4{

        width: 85%;

        top: 25%;

        right: 7%;

    }

    .archana_main .container .sub_container .box5{

        width: 85%;

        right: 7%;

        top: 75%;

    }

    .archana_main .container .sub_container .box6{

        width: 85%;

        right: 7%;

        /* top: 100%; */

        bottom: -25%;

    }

    .archana_main .container .sub_container .middile_rotate{

        left: 110px;

        top: 15%;

    }

}