.archana_main{

    /* border: 1px solid red; */

    padding: 10px 10px;

    height: auto;

}

.archana_main .container{

    /* border: 1px solid green; */

    /* width: 100%; */

    height: auto;

}

.archana_main .container .sub_container{

    /* border: 1px solid green; */

    width: 100%;

    position: relative;

    height: auto;

    overflow: hidden;
    /* border-radius: 50%; */

}

.archana_main .container .sub_container .box1{

    width: 25%;

    position: absolute;

    /* border: 1px solid rgb(29, 148, 14); */

    height: 150px;

    top: 70px;

    left: 150px;

    border-radius: 25px;

    border-bottom: 2px solid #004030;;

    box-shadow: 0px 4px 167px rgba(0,0,0,0.15);

    background: #ffff;

    transition: 0.5s all ease;

    padding: 15px 25px;

    z-index: 2;

    transition: 0.5s all ease;

}

.archana_main .container .sub_container .box1:hover{

    background: #004030;
}

.archana_main .container .sub_container .box1 h4{

    font-weight: 500;

    font-family: "Kanit",sans-serif;

    font-size: 23px;

    line-height: 33px;

    color: #1c1c1c;



}

.archana_main .container .sub_container .box1:hover h4{

    color: #ffff;

}

.archana_main .container .sub_container .box1 p{

    margin-top: 5px;

    font-family: "Kanit",sans-serif;

    font-weight: 400;

    font-size: 16px;

    line-height: 26px;

    color: #7B7E86;

}

.archana_main .container .sub_container .box1:hover p{

    color: #ffff;

}

.archana_main .container .sub_container .box1 .icon_box{

    border: 2px solid #ffff;

    position: absolute;

    top: 50%;

    right: -65px;

    width: 66px;

    height: 66px;

    background: linear-gradient(to bottom, #013326, #035e48);;

    transform: translate(-50%, -50%) skew(-8deg);

    border-radius: 10px;

    align-items: center;

    font-size: 40px;

    color: #ffff;

    font-family: 'icomoon' !important;

}

.archana_main .container .sub_container .box1 .icon_box .icon-programs-courses::before{

    content: "\e934";

    position: absolute;

    color: #ffff;

}

.archana_main .container .sub_container .box1 .icon_box i{

    color: #ffff;

}

.archana_main .container .sub_container .box2{

    width: 25%;

    position: absolute;

    /* border: 1px solid rgb(29, 148, 14); */

    height: 150px;

    top: 250px;

    left: 140px;

    border-radius: 25px;

    border-bottom: 2px solid  #004030;;

    box-shadow: 0px 4px 167px rgba(0,0,0,0.15);

    background: #ffff;

    transition: 0.5s all ease;

    padding: 15px 25px;

    z-index: 2;

}

.archana_main .container .sub_container .box2:hover{

    background: linear-gradient(to bottom, #013326, #035e48);

}

.archana_main .container .sub_container .box2 h4{

    font-weight: 500;

    font-family: "Kanit",sans-serif;

    font-size: 23px;

    line-height: 33px;

    color: #1c1c1c;



}

.archana_main .container .sub_container .box2:hover h4{

    color: #ffff;

}

.archana_main .container .sub_container .box2 p{

    margin-top: 5px;

    font-family: "Kanit",sans-serif;

    font-weight: 400;

    font-size: 16px;

    line-height: 26px;

    color: #7B7E86;

}

.archana_main .container .sub_container .box2:hover p{

    color: #ffff;

}

.archana_main .container .sub_container .box2 .icon_box{

    border: 2px solid #ffff;

    position: absolute;

    top: 50%;

    right: -65px;

    width: 66px;

    height: 66px;

    background: linear-gradient(to bottom, #013326, #035e48);;

    -webkit-transform: translate(-50%, -50%) skew(-8deg);

    transform: translate(-50%, -50%) skew(-8deg);

    border-radius: 10px;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    font-size: 40px;

    color: #ffff;

}

.archana_main .container .sub_container .box2 .icon_box i{

    color: #ffff;

}

.archana_main .container .sub_container .box3{

    width: 25%;

    position: absolute;

    /* border: 1px solid rgb(29, 148, 14); */

    height: 150px;

    top: 430px;

    left: 170px;

    border-radius: 25px;

    border-bottom: 2px solid  #004030;;

    box-shadow: 0px 4px 167px rgba(0,0,0,0.15);

    background: #ffff;

    transition: 0.5s all ease;

    padding: 15px 14px;

    z-index: 2;

}

.archana_main .container .sub_container .box3:hover{

    background: linear-gradient(to bottom, #013326, #035e48);;

}

.archana_main .container .sub_container .box3 h4{

    font-weight: 500;

    font-family: "Kanit",sans-serif;

    font-size: 23px;

    line-height: 33px;

    color: #1c1c1c;



}

.archana_main .container .sub_container .box3:hover h4{

    color: #ffff;

}

.archana_main .container .sub_container .box3 p{

    margin-top: 5px;

    font-family: "Kanit",sans-serif;

    font-weight: 400;

    font-size: 16px;

    line-height: 26px;

    color: #7B7E86;

}

.archana_main .container .sub_container .box3:hover p{

    color: #ffff;

}

.archana_main .container .sub_container .box3 .icon_box{

    border: 2px solid #ffff;

    position: absolute;

    top: 50%;

    right: -65px;

    width: 66px;

    height: 66px;

    background: linear-gradient(to bottom, #013326, #035e48);;

    -webkit-transform: translate(-50%, -50%) skew(-8deg);

    transform: translate(-50%, -50%) skew(-8deg);

    border-radius: 10px;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    font-size: 40px;

    color: #ffff;

}

.archana_main .container .sub_container .box3 .icon_box i{

    color: #ffff;

}

.archana_main .container .sub_container .box4{

    width: 25%;

    position: absolute;

    /* border: 1px solid rgb(29, 148, 14); */

    height: 150px;

    top: 70px;

    /* left: 140px; */

    right: 150px;

    border-radius: 25px;

    border-bottom: 2px solid #004030;;

    box-shadow: 0px 4px 167px rgba(0,0,0,0.15);

    background: #ffff;

    transition: 0.5s all ease;

    padding: 15px 14px;

    z-index: 2;

}

.archana_main .container .sub_container .box4:hover{

    background: linear-gradient(to bottom, #013326, #035e48);;
}

.archana_main .container .sub_container .box4 h4{

    font-weight: 500;

    font-family: "Kanit",sans-serif;

    font-size: 23px;

    line-height: 33px;

    color: #ffffff;

    padding: 0px 0px;

}

.archana_main .container .sub_container .box4:hover h4{

    counter-reset: #ffff;

}

.archana_main .container .sub_container .box4 p{

    margin-top: 5px;

    font-family: "Kanit",sans-serif;

    font-weight: 400;

    font-size: 16px;

    line-height: 26px;

    color: #7B7E86;

    padding: 0px 20px;

}

.archana_main .container .sub_container .box4:hover p{

    color: #ffff;

}

.archana_main .container .sub_container .box4 .icon_box{

    border: 2px solid #ffff;

    position: absolute;

    top: 50%;

    left: 0;

    width: 66px;

    height: 66px;

    background: linear-gradient(to bottom, #013326, #035e48);;

    -webkit-transform: translate(-50%, -50%) skew(-8deg);

    transform: translate(-50%, -50%) skew(-8deg);

    border-radius: 10px;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    font-size: 40px;

    color: #ffff;

}

.archana_main .container .sub_container .box4 .icon_box i{

    color: #ffff;

}

.archana_main .container .sub_container .box5{

    width: 25%;

    position: absolute;

    /* border: 1px solid rgb(29, 148, 14); */

    height: 150px;

    top: 250px;

    /* left: 140px; */

    right: 150px;

    border-radius: 25px;

    border-bottom: 2px solid  #004030;;

    box-shadow: 0px 4px 167px rgba(0,0,0,0.15);

    background: #ffff;

    transition: 0.5s all ease;

    padding: 15px 8px;

    z-index: 2;

}

.archana_main .container .sub_container .box5:hover{

    background: linear-gradient(to bottom, #013326, #035e48);;

}

.archana_main .container .sub_container .box5 h4{

    font-weight: 500;

    font-family: "Kanit",sans-serif;

    font-size: 23px;

    line-height: 33px;

    color: #1c1c1c;

    padding: 0px 20px;

}

.archana_main .container .sub_container .box5:hover h4{

    color: #ffff;

}

.archana_main .container .sub_container .box5 p{

    margin-top: 5px;

    font-family: "Kanit",sans-serif;

    font-weight: 400;

    font-size: 16px;

    line-height: 26px;

    color: #7B7E86;

    padding: 0px 30px;

}

.archana_main .container .sub_container .box5:hover p{

    color: #ffff;

}

.archana_main .container .sub_container .box5 .icon_box{

    border: 2px solid #ffff;

    position: absolute;

    top: 50%;

    left: 0;

    width: 66px;

    height: 66px;

    background:linear-gradient(to bottom, #013326, #035e48);;
    -webkit-transform: translate(-50%, -50%) skew(-8deg);

    transform: translate(-50%, -50%) skew(-8deg);

    border-radius: 10px;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    font-size: 40px;

    color: #ffff;

}

.archana_main .container .sub_container .box5 .icon_box i{

    color: #ffff;

}

.archana_main .container .sub_container .box6{

    width: 25%;

    position: absolute;

    /* border: 1px solid rgb(29, 148, 14); */

    height: 150px;

    top: 430px;

    /* left: 140px; */

    right: 170px;

    border-radius: 25px;

    border-bottom: 2px solid  #004030;;

    box-shadow: 0px 4px 167px rgba(0,0,0,0.15);

    background: #ffff;

    transition: 0.5s all ease;

    padding: 15px 8px;

    z-index: 2;

}

.archana_main .container .sub_container .box6:hover{

    background:linear-gradient(to bottom, #013326, #035e48);;
}

.archana_main .container .sub_container .box6 h4{

    font-weight: 500;

    font-family: "Kanit",sans-serif;

    font-size: 23px;

    line-height: 33px;

    color: #1c1c1c;

    padding: 0px 20px;

}

.archana_main .container .sub_container .box6:hover h4{

    color: #ffff;

}

.archana_main .container .sub_container .box6 p{

    margin-top: 5px;

    font-family: "Kanit",sans-serif;

    font-weight: 400;

    font-size: 16px;

    line-height: 26px;

    color: #7B7E86;

    padding: 0px 30px;

}

.archana_main .container .sub_container .box6:hover p{

    color: #ffff;

}

.archana_main .container .sub_container .box6 .icon_box{

    border: 2px solid #fff;

    position: absolute;

    top: 50%;

    left: 0;

    width: 66px;

    height: 66px;

    background:linear-gradient(to bottom, #013326, #035e48);;
    -webkit-transform: translate(-50%, -50%) skew(-8deg);

    transform: translate(-50%, -50%) skew(-8deg);

    border-radius: 10px;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    font-size: 40px;

    color: #ffff;

}

.archana_main .container .sub_container .box6 .icon_box i{

    color: #ffff;

}

.archana_main .container .sub_container .middile_img{


    display: flex;

    align-items: center;

    justify-content: space-evenly;

    height: 650px;
    top: 10%;

    left: 28%;
    position: absolute;

}

.archana_main .container .sub_container .middile_img img{

    height: 60%;

}

.archana_main .container .sub_container .main_rotate_div{

    position: absolute;

    height: 505px;

    width: 501px;

    overflow: hidden;

    top: 10%;

    left: 28%;

    border-radius: 50%;

    /* border: 1px solid red; */
    
}

.archana_main .container .sub_container .main_rotate_div .middile_rotate{


    left: 0;

    top: 0;

    z-index: -1;

    position: absolute;

   scale: none;

   rotate: none;

    translate:none;

    transform:translate(-50%, -50%) translate3d(0px, 0px, 0px) rotate(115.254deg);

    animation: rotate 10s infinite;
    
   
} 

@keyframes rotate{

    0%{



        transform: rotate(0deg);

    }

    100%{

        transform: rotate(360deg);

    }

}