@media (min-width:200px) and (max-width:479px) {
    .main-content {
        background-size: 165% 100%
    }
    .navbar {
        padding: 0 20px
    }
    .header-logo {
        padding: 0 0
    }
    .navbar .navbar-collapse {
        z-index: 99
    }
    .navbar .navbar-collapse .navbar-nav {
        padding-top: 8px;
        background: rgb(241 241 241 / 95%);
        width: 270px;
        border-radius: 5px;
        text-align: center;
        padding: 20px 0
    }
    .navbar-light .navbar-nav .nav-link {
        color: grey;
        padding: .8rem 1.2rem
    }
    .navbar-light .navbar-toggler {
        outline: 0
    }
    .navbar-toggler-icon {
        height: 2.8em
    }
    .request-trial-show {
        background-size: 100% 100%;
        padding: 40px 20px;
        background-image: none;
        text-align: center;
        background: linear-gradient(90deg, rgb(0 0 0) 0, rgb(129 129 129 / 10%) 50%, #000 100%)
    }
    .request-trial-show p {
        color: #e6e6e6
    }
    .system-statistical .number {
        margin: 20px auto
    }
    .programs-intro .program-data {
        text-align: center
    }

    .programs-intro .programs-intro-header {
        padding: 0 50px 0
    }
    .programs-intro .row {
        padding: 0 20px
    }
    .programs-intro .program-img {
        width: 100%;
        margin-top: 110px
    }
    .programs-intro .program2 .program-img img {
        width: 100%
    }
    .school-management-featuers {
        padding: 50px 40px 0
    }
    .school-management-featuers .featureData {
        padding: 0 7px;
        margin: 20px 0
    }
    .school-management-featuers .featureData img {
        width: 30%
    }
    .program-explanation {
        padding: 50px 15px
    }
    .blog {
        padding: 50px 20px
    }
    .blog .blog-content {
        text-align: center
    }
    .clients-reviews {
        padding: 50px 10px
    }
    .clients-logos {
        padding: 50px 10px
    }
    .footer {
        background-size: 150% 100%
    }
    .footer .row {
        padding: 20px 20px
    }
    .footer ul {
        padding: 0;
        margin: 35px 0
    }
    .footer .footer-logo {
        text-align: center
    }
    .footer .footer-logo img {
        width: 35%;
        margin: 20px auto 10px
    }
    .footer .contactData img {
        width: 20%;
        margin: -30px 0 -30px
    }
    .footer .copyrights p {
        padding: 10px 30px
    }
    .request-trial-show .modal .modal-body form {
        width: 100%
    }
    .breadcrumb {
        padding: 1.75rem 1rem
    }
    .program-page {
        padding: 0 15px
    }
    .program-page .program-content img {
        width: 78%;
        height: 165px;
        float: none
    }
    .blog-header {
        padding: 0 20px
    }
    .blog-page {
        padding: 40px 15px
    }
    .about-header {
        padding: 0 40px
    }
    .clients-page-logos {
        padding: 30px 15px
    }
    .contactus {
        padding: 40px 20px
    }
    .contactus .contactTelephones {
        padding: 0 30px;
        margin-top: 45px;
        text-align: center
    }
    .contactus .form-content {
        padding: 40px 20px
    }
    .about-header {
        padding: 0 15px
    }
    .about-intro {
        padding: 0 15px 40px;
        text-align: center
    }
    .about-data {
        padding: 40px 15px;
        text-align: center
    }
    .trial-version .form-content {
        padding: 40px 30px
    }
    .trial-version {
        padding: 40px 10px
    }
    .tutorial-article .form-content {
        padding: 40px 25px
    }
    .blog-article-content {
        padding: 40px 15px
    }
    .blog-article-header {
        margin: 0 5px;
        padding: 25px 10px
    }
    .blog-article-header .articleDate {
        color: grey;
        margin: 0;
        text-align: center
    }
    .blog-article-header .blog-article-header-data {
        margin: 0
    }
    .blog-article-content .blogs .more {
        margin: 10px 0
    }
    .blog-article-content .commentForm {
        padding: 40px 25px
    }
    .blog-article-content ul {
        padding: 0 10px
    }
    .features-page {
        padding: 0 15px
    }
    .features-page .features-intro {
        padding: 40px 0
    }
}

@media (max-width:767px) {
    .flex-column-sm {
        flex-direction: column-reverse
    }
    .flip-data {
        width: 100%;
        text-align: center;
    }
}

@media (min-width:480px) and (max-width:767px) {
    .main-content {
        background-size: 165% 100%
    }
    .navbar {
        padding: 0 20px
    }
    .header-logo {
        padding: 0 0
    }
    .navbar .navbar-collapse {
        z-index: 99
    }
    .navbar .navbar-collapse .navbar-nav {
        padding-top: 8px;
        background: rgb(241 241 241 / 95%);
        width: 290px;
        border-radius: 5px;
        text-align: center;
        padding: 20px 0
    }
    .navbar-light .navbar-nav .nav-link {
        color: grey;
        padding: .8rem 1.2rem
    }
    .navbar-light .navbar-toggler {
        outline: 0
    }
    .navbar-toggler-icon {
        height: 2.8em
    }
    .request-trial-show {
        background-size: 100% 100%;
        padding: 40px 20px;
        background-image: none;
        text-align: center;
        background: linear-gradient(90deg, rgb(0 0 0) 0, rgb(129 129 129 / 10%) 50%, #000 100%)
    }
    .request-trial-show p {
        color: #e6e6e6
    }
    .system-statistical .number {
        margin: 20px auto
    }
    .programs-intro .program-data {
        text-align: center
    }
    .programs-intro .programs-intro-header {
        padding: 0 50px 0
    }
    .programs-intro .row {
        padding: 0 20px
    }
    .programs-intro .program-img {
        width: 100%;
        margin-top: 110px
    }
    .programs-intro .program2 .program-img img {
        width: 100%
    }
    .school-management-featuers {
        padding: 50px 40px 0
    }
    .school-management-featuers .featureData {
        padding: 0 7px;
        margin: 20px 0
    }
    .school-management-featuers .featureData img {
        width: 30%
    }
    .program-explanation {
        padding: 50px 20px
    }
    .blog {
        padding: 50px 40px
    }
    .clients-reviews {
        padding: 50px 40px
    }
    .clients-logos {
        padding: 50px 40px
    }
    .footer {
        background-size: 150% 100%
    }
    .footer .row {
        padding: 20px 40px
    }
    .footer ul {
        padding: 0;
        margin: 35px 0
    }
    .footer .footer-logo {
        text-align: center
    }
    .footer .footer-logo img {
        width: 35%;
        margin: 20px auto 10px
    }
    .footer .contactData img {
        width: 20%;
        margin: -30px 0 -30px
    }
    .request-trial-show .modal .modal-body form {
        width: 100%
    }
    .breadcrumb {
        padding: 1.75rem 1rem
    }
    .program-page {
        padding: 0 15px
    }
    .program-page .program-content img {
        width: 90%;
        height: 235px;
        float: none
    }
    .blog-header {
        padding: 0 20px
    }
    .blog-page {
        padding: 40px 15px
    }
    .about-header {
        padding: 0 40px
    }
    .clients-page-logos {
        padding: 30px 50px
    }
    .contactus {
        padding: 40px 20px
    }
    .contactus .contactTelephones {
        padding: 0 30px;
        margin-top: 45px;
        text-align: center
    }
    .contactus .form-content {
        padding: 40px 20px
    }
    .about-header {
        padding: 0 30px
    }
    .about-intro {
        padding: 0 50px 40px
    }
    .about-data {
        padding: 40px 50px
    }
    .trial-version .form-content {
        padding: 40px 30px
    }
    .trial-version {
        padding: 40px 10px
    }
    .tutorial-article .form-content {
        padding: 40px 25px
    }
    .blog-article-content {
        padding: 40px
    }
    .blog-article-header {
        margin: 0 30px
    }
    .blog-article-header .articleDate {
        color: grey;
        margin: 0 20px 0;
        text-align: center
    }
    .blog-article-header .blog-article-header-data {
        margin: 0
    }
    .blog-article-content .blogs .more {
        margin: 10px 0
    }
    .blog-article-header .blog-article-header-data {
        margin: 0 35px
    }
    .blog-article-content .commentForm {
        padding: 40px 25px
    }
    .blog-article-content ul {
        padding: 0 10px
    }
    .features-page {
        padding: 0 15px
    }
}

@media (min-width:768px) and (max-width:991px) {
    .navbar .navbar-collapse {
        z-index: 99
    }
    .navbar .navbar-collapse .navbar-nav {
        padding-top: 8px;
        background: rgb(241 241 241 / 95%);
        width: 290px;
        border-radius: 5px;
        text-align: center;
        padding: 20px 0
    }
    .navbar-light .navbar-nav .nav-link {
        color: grey;
        padding: .8rem 1.2rem
    }
    .navbar-light .navbar-toggler {
        outline: 0
    }
    .navbar-toggler-icon {
        height: 2.8em
    }
    .request-trial-show {
        background-size: 100% 100%;
        padding: 40px 20px
    }
    .programs-intro .programs-intro-header {
        padding: 0 50px 0
    }
    .programs-intro .row {
        padding: 0 20px
    }
    .programs-intro .program-img {
        width: 100%;
        margin-top: 110px
    }
    .programs-intro .program2 .program-img img {
        width: 100%
    }
    .school-management-featuers {
        padding: 50px 40px 0
    }
    .school-management-featuers .featureData {
        padding: 0 7px;
        margin: 20px 0
    }
    .program-explanation {
        padding: 50px 40px
    }
    .blog {
        padding: 50px 40px
    }
    .clients-reviews {
        padding: 50px 40px
    }
    .clients-logos {
        padding: 50px 40px
    }
    .footer {
        background-size: 150% 100%
    }
    .footer .row {
        padding: 20px 40px
    }
    .footer ul {
        padding: 0
    }
    .footer .footer-logo {
        text-align: center
    }
    .footer .footer-logo img {
        width: 20%;
        margin: 20px auto 50px
    }
    .footer .contactData img {
        width: 20%;
        margin: -30px 0 -30px
    }
    .request-trial-show .modal .modal-body form {
        width: 100%
    }
    .breadcrumb {
        padding: 1.75rem 1rem
    }
    .program-page {
        padding: 0 15px
    }
    .program-page .program-content img {
        width: 40%
    }
    .blog-header {
        padding: 0 20px
    }
    .blog-page {
        padding: 40px 15px
    }
    .contactus {
        padding: 40px 20px
    }
    .contactus .contactTelephones {
        padding: 0 30px
    }
    .contactus .form-content {
        padding: 40px 20px
    }
    .about-header {
        padding: 0 30px
    }
    .about-intro {
        padding: 0 50px 40px
    }
    .about-data {
        padding: 40px 50px
    }
    .trial-version .form-content {
        padding: 40px 45px
    }
    .trial-version {
        padding: 40px 135px
    }
    .tutorial-article .form-content {
        padding: 40px 130px
    }
    .blog-article-content {
        padding: 40px
    }
    .blog-article-header {
        margin: 0 30px
    }
    .blog-article-header .blog-article-header-data {
        margin: 0 35px
    }
    .blog-article-content .commentForm {
        padding: 40px 100px
    }
    .features-page {
        padding: 0 15px
    }
    .features-page .features-intro img {
        width: 125%;
        margin: 159px auto 0
    }
    .features-page .features-list img {
        width: 115%;
        margin: 300px auto 0
    }
}

@media (min-width:992px) and (max-width:1199px) {
    .navbar {
        padding: 0
    }
    .navbar-nav {
        padding-right: 0
    }
    .navbar-light .navbar-nav .nav-link {
        padding: .5rem 5px;
        font-size: 12px
    }
    .nav-btn {
        padding: 5px 10px;
        margin: 0 10px;
        font-size: 12px
    }
    .header-logo {
        width: 65%;
        padding: 0
    }
    .request-trial-show {
        background-size: 100% 100%;
        padding: 100px 35px
    }
    .programs-intro .row {
        padding: 0 70px
    }
    .programs-intro .program-img {
        width: 100%;
        margin-top: 106px
    }
    .programs-intro .program2 .program-img img {
        width: 75%
    }
    .school-management-featuers {
        padding: 50px 40px 0
    }
    .school-management-featuers .featureData {
        padding: 0 7px;
        margin: 20px 0
    }
    .program-explanation {
        padding: 50px 40px
    }
    .blog {
        padding: 50px 40px
    }
    .clients-reviews {
        padding: 50px 40px
    }
    .clients-logos {
        padding: 50px 40px
    }
    .footer .row {
        padding: 20px 40px
    }
    .footer ul {
        padding: 0
    }
    .footer .footer-logo img {
        width: 90%
    }
    .footer .contactData img {
        width: 15%;
        margin: -30px 0 -30px
    }
    .program-page .program-content img {
        width: 30%
    }
    .contactus {
        padding: 40px 20px
    }
    .contactus .contactTelephones {
        padding: 0 70px
    }
    .about-header {
        padding: 0 90px
    }
    .about-intro {
        padding: 0 130px 40px
    }
    .about-data {
        padding: 40px 130px
    }
    .trial-version .form-content {
        padding: 40px 45px
    }
    .trial-version {
        padding: 40px 135px
    }
    .tutorial-article .form-content {
        padding: 40px 130px
    }
    .blog-article-content {
        padding: 40px 110px
    }
    .blog-article-content {
        padding: 40px 130px
    }
    .features-page {
        padding: 0 15px
    }
    .features-page .features-intro img {
        width: 108%;
        margin: 76px auto 0
    }
    .features-page .features-list img {
        width: 100%;
        margin: 125px auto 0
    }
}

@media (min-width:1200px) and (max-width:1500px) {
    .navbar {
        padding: 0 15px
    }
    .navbar-light .navbar-nav .nav-link {
        padding: .5rem .5rem;
        font-size: 12px
    }
    .request-trial-show {
        background-size: 100% 100%;
        padding: 88px 140px
    }
    .nav-btn {
        margin: 0 10px
    }
    .programs-intro .program-img {
        width: 100%
    }
    .programs-intro .program2 .program-img img {
        width: 100%
    }
    .school-management-featuers .featureData {
        padding: 0 15px
    }
    .footer .footer-logo img {
        width: 100%
    }
    .footer ul {
        padding: 0
    }
    .footer .contactData img {
        width: 14%;
        margin: -25px 0 -30px
    }
    .program-page .program-content img {
        width: 30%
    }
    .contactus {
        padding: 40px 20px
    }
    .trial-version .form-content {
        padding: 40px 45px
    }
    .tutorial-article .form-content {
        padding: 40px 130px
    }
    .blog-article-content {
        padding: 40px 130px
    }
    .features-page .features-intro img {
        width: 108%;
        margin: 76px auto 0
    }
    .features-page .features-list img {
        width: 100%;
        margin: 125px auto 0
    }
}