@media only screen and (min-width: 411px) and (max-width: 768px) {
    .navbar {
        width: 100.3%;
    }

    .navbar-nav {
        margin-left: 2px;
    }


    .banner-div {
        /* border: 2px solid red; */
        width: 103%;
        height: 300px;
        display: flex;
        float: left;
    }
    .grp-photo img{
        margin: 5px 5px;
        /* width: 100%;
        height: 100%; */
        border-top-right-radius: 180px;
        border: 7px solid #5c450e;
    }
    .banner-text {
        position: relative;
        width: 100%;
        height: 95%;
        display: flex;
        float: left;
        justify-items: center;
        align-items: center;
        text-align: center;
    }

    .banner-text1 {
        width: 102%;
        padding: 60px 20px;
    }

    .banner-text2 {
        padding: 55px 20px;
    }

    .banner-img {
        width: 100%;
        height: 95%;
    }

    .banner-img img {
        padding-top: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 60%;
        height: 100%;
        border-radius: 50%;

    }

    .course-head {
        width: 104%;
    }

    .about_taital {
        width: 100%;
        margin-top: 4px;
        font-size: 16px;
    }

    .about_text {
        font-size: 13px;
        margin-bottom: 5px;
    }

    .sname,
    .lorem_text,
    .footer_text {
        text-align: center;
        width: 100%;
        padding: 5px 10px;
    }

    .footer_menu {
        width: 100%;
        float: left;
        text-align: center;
    }

    .social_icon ul {
        width: 100%;
        display: flex;
        float: left;
        text-align: center;
        padding: 10px 47px;
    }

    .copyright_text {
        width: 100%;
        text-align: center;
        margin-left: 0px;
        padding: 10px 10px;
    }

    .footer_menu li {
        list-style: none;
        text-decoration: none;
    }
    .compname{
        font-size: 30px;
    }
    .copyright_text a {
        font-weight: bold;
    }

    .footer_section h2 {
        text-align: center;
        padding-top: 30px;
    }

    .hair-banner {
        height: 40px;
    }

    .party-banner {
        height: 40px;
    }

    .foot-logo img {
        margin-top: 46px;
        width: 99%;
        height: 100%;
        /* border: 5px solid  #878585; */
        padding: 1px;
    }

    .my-col p {
        font-weight: bold;
        display: inline-block;
        font-size: 15px;
        padding: 5px;
        margin-top: 14px;
    }

    .mconainter {
        width: 80%;
    }

    .course-page h1 {
        margin: 20px 0px;
        font-size: 29px;
        font-weight: bold;
        color: #2e2d2d;
    }

    .mcol-6 img {
        padding: 5px 5px;
        margin-top: 25px;
        margin-left: 15px;
        width: 350px;
        height: 350px;
        border-radius: 30%;
    }

    .contact .myinfo {
        width: 100%;

    }

    .contact .myinfo h4 {
        padding: 13px 0 0 80px;
        font-size: 12px;
        font-weight: bold;
    }

    .contact .myinfo p {
        font-size: 12px;
        font-weight: bold;
        margin-top: 7px;
        padding-right: 80px;
    }

    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
        padding: 0 4px;
    }

    .comment-sub,
    .col-25,
    .col-75,
    input[type=submit] {
        width: 100%;
        margin-top: 0;
    }

}


@media only screen and (min-width: 280px) and (max-width: 410px) {
    body {
        margin-top: 0px;
    }

    .navbar {
        width: 100.3%;
    }

    .navbar-nav {
        margin-left: 2px;
    }
    .navbar-brand{
        font-size: 18px;
    }

    .backimg,
    .hair-banner,
    .party-banner,
    .grpimg {
        margin-top: 60px;
    }

    .banner-port, .course-page {
        margin-top: 70px;
    }
    .grp-photo img{
        margin: 5px 5px;
        /* width: 100%;
        height: 100%; */
        border-top-right-radius: 110px;
        border: 7px solid #5c450e;
    }

    .mlogo {
        display: none;
        margin-left: 2px;
    }

    .banner-div {
        /* border: 2px solid red; */
        width: 103%;
        height: 250px;
        display: block;
        float: none;
    }

    .banner-text {
        position: relative;
        width: 100%;
        height: 105%;
        display: flex;
        float: left;
        justify-items: center;
        align-items: center;
        text-align: center;
    }

    .banner-text1 {
        height: 102%;
        padding: 60px 20px;
        margin-top: 80px;
    }

    .banner-text2 {
        padding: 55px 20px;
        margin-top: 80px;
    }

    .banner-img {
        width: 100%;
        height: 95%;
    }

    .banner-img img {
        padding-top: 4px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 75%;
        height: 105%;
        border-radius: 50%;
    }

    .course-head {
        width: 104%;
    }

    .about_taital {
        width: 100%;
        /* margin-top: 18px; */
        font-size: 12px;
    }

    .about_text {
        font-size: 10px;
    }

    .sname,
    .lorem_text,
    .footer_text {
        text-align: center;
        width: 100%;
        padding: 5px 10px;
    }

    .footer_menu {
        width: 100%;
        float: left;
        text-align: center;
    }

    .social_icon ul {
        width: 100%;
        display: flex;
        float: left;
        text-align: center;
        padding: 10px 90px;
    }

    .copyright_text {
        width: 100%;
        text-align: center;
        margin-left: 0px;
        padding: 10px 10px;
    }

    .footer_menu li {
        list-style: none;
        text-decoration: none;
    }

    .copyright_text a {
        font-weight: bold;
    }

    .footer_section h2 {
        text-align: center;
        padding-top: 30px;
    }
    .compname{
        font-size: 30px;
    }

    .hair-banner {
        height: 25px;
    }

    .party-banner {
        height: 25px;
    }

    .col-6 {
        width: 100%;
        height: 250px;
        display: block;
        float: none;
    }

    .my-col {
        display: block;
        width: 100%;
        height: auto;
        text-align: center;
    }

    .my-col p {
        font-weight: bold;
        display: inline-block;
        font-size: 15px;
        padding: 5px;
        margin-top: 14px;
    }

    .mconainter {
        width: 100%;
        display: block;
        margin-left: 5px;
    }

    .mcol-6 {
        text-align: center;
        width: 100%;
        border: none;
        padding: 5px;
    }

    .mcol-6 p {
        font-size: 18px;
        padding: 10px 6px;
        color: #833b52d7;
    }

    #soon {
        font-size: 22px;
    }

    .contact .myinfo {
        width: 100%;

    }

    .contact .myinfo h4 {
        padding: 13px 0 0 0px;
        font-size: 12px;
        font-weight: bold;
    }

    .contact .myinfo p {
        font-size: 12px;
        font-weight: bold;
        margin-top: 10px;
        padding: 0 0 0 48px;
    }

    .row {
        flex-direction: column;
    }

    .column {
        -ms-flex: 100%;
        flex: 85%;
        max-width: 100%;
        padding: 0 4px;

    }

    .back {
        min-width: 300px;
    }

    .back img {
        width: 100%;
        height: 280px;
    }

    .back h1 {
        font-size: 40px;
    }
    .comment-main{

        padding: 5px 2px;
    }
    .comment-sub{
        width: 100%;
        padding: 5px 2px;
    }
    .btnpadd{
        padding: 0px 15px;
    }
    .col-25,
    .col-75,
    input[type=submit] {
        width: 100%;
        margin-top: 0;
    }

    .alert {
        margin-top: 60px;
    }

    .opt-yesno {
        width: 50%;
    }

    input[type=submit] {
        width: 96%;
    }

    .btn {
        font-size: 15px;
    }

    .app-head {
        margin-top: 55px;
        padding-top: 25px;
        width: 100%;
    }
    .app-head h2{
       font-size: 25px;
    }

    .app-form {
        margin: 15px 5px;
        padding: 10px 5px;
        width: 97%;
    }
    .verify-sub {
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        padding: 10px 5px;
    }
    .ver-title{
        margin-top: 60px;
        margin-bottom: 0;
    }
    .setpos{
        width: 100%;
        height: auto;
        position: absolute;
        top: 10%;
        left: 0%;
        font-size: 15px;
      }

}