@media (max-width:400px)
{
    .title1 img{width: 22%;margin-left: 40%;margin-top: 39px;}
    .title1 h1{width: 100%;font-size: 17px;height: 46px;margin-top: 4%;}
    .title1 h4{font-size: 13px; margin-top: 7px;}
    .title1 hr{width: 50%;margin-left: 25%;}
    .main{width: 100%; margin: 0 0 0 0;}
    .main .prsonality-right{width: 100%;}
    .main .prsonality-right .img-1 p,.main .prsonality-right .img-1 a {width: 93%;font-size: 13px;}
    .main .prsonality-right .maharat .nameOfMaharat .person{width: 17%;}
    .main .prsonality-left{float: right;width: 100%;font-size: 16px;}
    .main .prsonality-left .madrak-maharat h5{margin-top: -8px;}
    .main .prsonality-left .main .madrak-maharat{margin-top: -4;}
    .main .prsonality-left .main .madrak-maharat .ypo  p {font-size: 19px;}
    .main .prsonality-left .all-circle .circle1{margin: 11% 5% 0 0;font-size: 56px;}
    .footer-end hr{margin-top: 40%;}
    .footer-end .end p{font-size: 13px;}
    .main .prsonality-left {font-size: 14px;}
    .main .prsonality-left .all-circle .circle1 span{font-size: 17px;width: 3em;line-height: 57px;}
}
@media (min-width:401px) and (max-width:500px)
{
    .title1 img{width: 22%;margin-left: 40%;margin-top: 18px;}
    .title1 h1{font-size: 22px;height: 52px;}
    .title1 h4{font-size: 15px;}
    .title1 hr{width:46%;margin-left: 27%;}
    .main{width: 100%;margin: 0 0 0 0;}
    .main .prsonality-right{width: 100%;}
    .main .prsonality-left .madrak-maharat h5{    margin-right: 20px;    }
    .main .prsonality-right .maharat .nameOfMaharat .person{width: 12%;}
    .main .prsonality-left{float: right;width: 100%;}
    .main .prsonality-left{font-size: 16px;}
    .main .prsonality-left .main .madrak-maharat{margin-top: -4;}
    .main .prsonality-left .main .madrak-maharat .ypo  p {font-size: 19px;}
    .main .prsonality-left .all-circle .circle1{margin: 0 5% 0 0;font-size: 61px;}
    .footer-end hr{margin-top: 33%;}
    .footer-end .end p{font-size: 18px;}
    .main .prsonality-left .madrak-maharat h6{    margin-right: 38px;}
    .main .prsonality-left .maharat h2{font-size: 24px;}
    .main .prsonality-left .madrak-tahsili {margin-right: 15px;}
    .main .prsonality-right .maharat .nameOfMaharat p{margin-right: 15px;}
    .all-circle h2{margin-right: 15px;    font-size: 20px;}
    .main .prsonality-left .all-circle .circle1 .all-circle-title p{font-size: 14px;}
    .main .prsonality-left .all-circle .circle1 span{font-size: 17px;width: 3.5em;line-height: 61px;}

}
@media (min-width:501px) and (max-width:560px)
{
    .title1 img{width: 20%;margin-left: 41%;margin-top: 15px;}
    .title1 h1{margin-bottom: 3%;font-size: 23px;height: 52px;}
    .title1 h4{margin-top: 1%;font-size: 14px;}
    .title1 hr{width:40%;margin-left: 30%;}
    .main .prsonality-left .maharat h2{font-size: 20px;}
    .main{width: 100%;float: left;margin: 0 0 0 0;}
    .main .prsonality-right ul{font-size: 14px;}

    .main .prsonality-right .maharat h2{font-size: 21px;margin-right: 5px;}
    .main .prsonality-right .img-1 img {width: 14%;margin-left: 66%;}
    .main .prsonality-right .img-1 p,.main .prsonality-right .img-1 a {width: 98%; font-size: 14.5px;    margin-right: 17%;}
    .main .prsonality-right .img-1 i{width: 16%;margin-right: 5px;    font-size: 30px;}
    .main .prsonality-left .madrak-tahsili h3{font-size: 14px;}
    .main .prsonality-right .maharat .nameOfMaharat .person{width: 22%;}
    .main .prsonality-left .all-circle .circle1{margin-bottom: 66px;}
    .all-circle h2{font-size: 19px;}
    .main .prsonality-left .all-circle .circle1 .all-circle-title p{font-size: 14px;margin-top: 2px;}
    .total-code{width: 100%; height: auto;float: right;}
    .main .prsonality-right .maharat .nameOfMaharat p {margin-right: 7px;}
    .main .prsonality-left .all-circle .circle1 span{font-size: 16px;width: 3.5em;line-height: 55px;}

}
 @media (min-width:561px) and (max-width:800px)
{
    .title1 img{width: 16%;margin-left: 42%;margin-top: 20px;}
    .title1 h1{margin-bottom: 4%;font-size: 25px;height: 47px;}
    .title1 h4{margin-top: 0.5%;font-size: 22px;}
    .title1 hr{width: 35%;}
    .main .prsonality-left .maharat h2{font-size: 21px;}
    .main{width: 100%;float: left;margin: 0 0 0 0;}
    .main .prsonality-right ul{font-size: 15px;}

    .main .prsonality-right .maharat h2{font-size: 21px;margin-right: 5px;}
    .main .prsonality-right .img-1 img {width: 14%;margin-left: 66%;}
    .main .prsonality-right .img-1 p,.main .prsonality-right .img-1 a {width: 98%; font-size: 14.5px;}
    .main .prsonality-right .img-1 i{width: 14%;margin-right: 5px;    font-size: 30px;}
    .main .prsonality-left .madrak-tahsili h3{font-size: 14px;}
    .main .prsonality-right .maharat .nameOfMaharat .person{width: 25%;}
    .main .prsonality-left .all-circle .circle1{margin-bottom: 66px;}
    .main .prsonality-left .all-circle .circle1 .all-circle-title p{font-size: 14px;margin-top: 2px;}
    .all-circle h2{font-size: 19px;}
    .total-code{width: 100%; height: auto;float: right;}
    .main .prsonality-right .maharat .nameOfMaharat p {margin-right: 7px;}
    .main .prsonality-left .all-circle .circle1 span{font-size: 16px;width: 3.5em;line-height: 55px;}


} 
@media (min-width:801px)
{
    .title1{
        width: 700px;
        border-radius: 10px;
        overflow: hidden;
        padding: 33px;
    }
    .all-circle h2{font-size: 19px;}
    .title1 img {width: 19%;margin-left: 41%;margin-top: 1px;}
    .title1 h1{margin-bottom: 4%;font-size: 26px;height: 47px;margin-top: 1%;}
    .title1 h4{margin-top: 1%;font-size: 20px;}
    .title1 hr{width: 37%;margin-left: 31%;}
    .main .prsonality-left .maharat h2{font-size: 19px;}
    .main{width: 100%;float: left;margin: 0 0 0 0;}
    .main .prsonality-right{width: 41%;}
    .main .prsonality-right ul{font-size: 15px;}
    .main .prsonality-right .maharat h2{font-size: 20px;}
    .main .prsonality-right .img-1{padding-top: 3px;}
    .main .prsonality-right .img-1 img {width: 14%;margin-left: 66%;}
    .main .prsonality-right .img-1 p,.main .prsonality-right .img-1 a {width: 82%; font-size: 14.5px;padding-top: 3px;}
    .main .prsonality-left .madrak-tahsili h3{font-size: 14px;}
    .main .prsonality-right .maharat .nameOfMaharat .person{width: 20%;}
    .main .prsonality-left .all-circle .circle1{margin-bottom: 66px;}
    .main .prsonality-left .all-circle .circle1 .all-circle-title p{font-size: 16px;margin-top: 2px;margin-bottom: 29px;}
    /* .total-code{width: 90%; height: auto;float: right;display: flex;align-items: center;flex-direction: column;flex-wrap: wrap;align-content: center;justify-content: center;} */
    .main .prsonality-left .all-circle .circle1 { font-size: 59px;margin: 21px 14px;    margin-top: 4px;}
    .main .prsonality-left .all-circle .circle1 span {width: 3.5em;font-size: 17px;    line-height: 59px;}
    .total-code{display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;flex-direction: column;
    background-color: #c9c8c6;
    }
    .main{
    width: 700px;
    border-radius: 10px;
    overflow: hidden;
    padding: 33px;
    }
    
}

/*for hide in mobile*/
@media (max-width: 768px) {
  #hideonMonile{
    display: none !important;
  }
  .title1 h1{font-size: 22px !important;}
    .title1 h4 {font-size: 17px !important;}
}