@media only screen and (max-width: 1300px) {
    .other-hero-section .hero-content {
        padding:30px 30px 30px 30px
    }

    .other-hero-section .hero-content h2 {
        font-size: 32px;
        line-height: normal
    }

    .other-hero-section .hero-banner {
        width: 680px
    }

    .other-hero-section .hero-content {
        width: calc(100% - 680px)
    }
}

@media only screen and (max-width: 1200px) {
    .hero-section .hero-bottom-left {
        max-width:250px;
        bottom: -50px
    }

    .hero-section .hero-bottom-right {
        max-width: 190px
    }

    .strengths-section .strengths-row {
        gap: 30px 30px
    }

    .strengths-section .strengths-row .strengths-card .arrow1 {
        width: 80px;
        right: -60px
    }

    .strengths-section .strengths-row .strengths-card .arrow3 {
        width: 80px;
        right: -60px
    }

    .strengths-section .strengths-row .strengths-card .heading .text {
        font-size: 24px
    }

    .strengths-section .strengths-row .strengths-card .heading .number {
        font-size: 70px
    }

    .strengths-section .strengths-row .strengths-card {
        padding: 40px 25px
    }

    .strengths-section .strengths-row .strengths-card .discription .text p {
        font-size: 16px
    }

    .strengths-section .strengths-row .strengths-card .discription .img2 {
        margin-top: -80px
    }

    .support-details-section .support-details-row .support-card {
        height: 220px;
        width: 220px
    }

    .support-details-section .support-details-row {
        gap: 15px 20px
    }

    .facility-section .facility-row {
        gap: 30px
    }

    .blog-card .blog-content {
        padding: 25px
    }

    .support-details-section .support-v1 {
        width: 100px
    }

    .support-details-section .support-v2 {
        width: 60px
    }

    .support-details-section .support-v3 {
        width: 160px
    }

    .staff-section .staff-v2 {
        width: 120px
    }

    .usage-flow-section .flow-v1 {
        width: 140px
    }

    .usage-flow-section .flow-v2 {
        width: 100px
    }

    .nav-action {
        display: none
    }

    .header .header-inner .nav-bar a {
        padding: 0px 15px
    }

    .hero-section .hero-content {
        padding: 100px 0px 200px
    }

    .management-philosophy-section .management-philosophy-row {
        gap: 30px
    }

    .classroom-strengths-section .strengths-cards-row .strengths-card {
        padding: 30px 25px
    }

    .other-hero-section .hero-content .classroom-hero-v1 {
        max-width: 100px
    }

    .classroom-strengths-section .sc-v1 {
        max-width: 100px
    }

    .classroom-strengths-section .sc-v2 {
        max-width: 130px
    }

    .service-introduction-section .si-v1 {
        max-width: 100px
    }

    .service-introduction-section .service-introduction-card {
        padding: 30px
    }

    .service-introduction-section .si-v2 {
        max-width: 140px
    }

    .flow-of-the-day-section .fd-v1 {
        max-width: 100px;
        right: 40px
    }

    .flow-of-the-day-section .flow-section .flow-card .detail h6 {
        font-size: 22px
    }

    .flow-of-the-day-section .flow-section .flow-card .detail {
        padding-left: 30px
    }

    .atmosphere-section .content h3 {
        font-size: 32px
    }

    .atmosphere-section .content h4 {
        font-size: 24px;
        line-height: normal;
        margin-bottom: 20px
    }

    .equipment-introduction-section .equipment-card h4 {
        font-size: 20px
    }

    .equipment-introduction-section .equipment-card p {
        font-size: 16px
    }

    .transportation-section .transportation-v1,.safety-initiatives .safety-v2,.safety-initiatives .safety-v1 {
        max-width: 100px
    }
}

@media only screen and (max-width: 1100px) {
    .other-hero-section .hero-banner {
        width:50%
    }

    .other-hero-section .hero-content {
        width: 50%
    }

    .other-hero-section .hero-content .breadcrumb {
        margin-bottom: 30px
    }

    .other-hero-section .hero-content p {
        margin-top: 20px
    }

    .classroom-concept-section .content h3 {
        font-size: 32px
    }

    .classroom-concept-section .content h5 {
        font-size: 24px
    }

    .classroom-concept-section .content h6 {
        font-size: 20px
    }
}

@media only screen and (min-width: 991px) {
    .mobile-header {
        display:none
    }
}

@media only screen and (max-width: 991px) {
    .header {
        display:none
    }

    .hero-section .hero-content h2 {
        font-size: 32px;
        line-height: normal
    }

    .hero-section {
        height: 600px
    }

    .hero-section .hero-content {
        padding: 100px 0px
    }

    .hero-section .hero-bottom-left {
        max-width: 170px;
        bottom: -30px
    }

    .hero-section .hero-bottom-right {
        max-width: 120px
    }

    .center-heading h3 {
        font-size: 32px
    }

    .center-heading h3 span {
        font-size: 42px
    }

    .strengths-section .strengths-row {
        flex-direction: column
    }

    .strengths-section .strengths-row .strengths-card {
        width: 100%
    }

    .support-details-section,.staff-section,.blog-section,.strengths-section {
        border-radius: 100px
    }

    .footer-section .bottom {
        flex-direction: column;
        gap: 20px
    }

    .footer-section .bottom .bottom-nav {
        flex-direction: column
    }

    .strengths-section .strengths-row .strengths-card .arrow1 {
        transform: rotate(63deg);
        left: 33px;
        bottom: -36px;
        top: auto;
        right: auto
    }

    .strengths-section .strengths-row .strengths-card .arrow2 {
        transform: rotate(-12deg);
        height: 96px;
        left: auto;
        bottom: -67px;
        top: auto;
        right: 61px
    }

    .strengths-section .strengths-row .strengths-card .arrow3 {
        transform: rotate(63deg);
        left: 33px;
        bottom: -36px;
        top: auto;
        right: auto
    }

    .strengths-section .strengths-row .strengths-card .top-left,.strengths-section .strengths-row .strengths-card .top-right {
        right: auto;
        left: 50%;
        transform: translateX(-50%)
    }

    .support-details-section .support-details-row .support-card {
        height: 180px;
        width: 180px;
        gap: 10px
    }

    .support-details-section .support-details-row .support-card svg {
        max-height: 50px;
        max-width: 50px
    }

    .support-details-section .support-details-row .support-card p {
        font-size: 16px
    }

    .footer-section .contact-card {
        padding: 40px
    }

    .footer-section .contact-card h4 {
        font-size: 30px
    }

    .other-hero-section {
        flex-direction: column-reverse
    }

    .other-hero-section .hero-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .other-hero-section .hero-content .breadcrumb {
        display: none
    }

    .other-hero-section .hero-content p {
        max-width: 335px;
        text-align: center
    }

    .other-hero-section .hero-content p br {
        display: none
    }

    .other-hero-section .hero-content .classroom-hero-v1 {
        display: none
    }

    .other-hero-section .hero-content p {
        margin-top: 10px
    }

    .other-hero-section .hero-content {
        padding-top: 0px
    }

    .other-hero-section .hero-content h2 {
        text-align: center
    }

    .other-hero-section .hero-banner {
        width: 100%
    }

    .order-1 {
        order: 2 !important
    }

    .order-2 {
        order: 1 !important
    }

    .classroom-concept-section .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center
    }

    .classroom-concept-section .content p,.classroom-concept-section .content h6 {
        text-align: center
    }

    .management-philosophy-section .management-philosophy-row {
        flex-direction: column
    }

    .classroom-strengths-section .strengths-cards-row .content {
        max-width: 100%
    }

    .classroom-strengths-section .sc-v2 {
        display: none
    }

    .classroom-strengths-section .strengths-cards-row .banner img {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
        max-height: 100%
    }

    .service-introduction-section .service-introduction-card .banner {
        margin-bottom: 20px
    }

    .atmosphere-section .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-bottom: 30px
    }

    .atmosphere-section {
        border-radius: 40px
    }

    .other-hero-section .hero-content {
        margin-top: -20px;
        position: relative;
        z-index: 1
    }

    .other-hero-section .hero-banner {
        position: relative;
        z-index: 0
    }

    .equipment-introduction-section .heading h3 {
        max-width: 260px;
        text-align: center
    }

    .transportation-section .transportation-v1,.safety-initiatives .safety-v2,.safety-initiatives .safety-v1,.safety-initiatives .safety-v1 {
        display: none
    }

    .transportation-section .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .transportation-section .content h5 {
        text-align: center
    }

    .transportation-section .content p {
        width: 100%;
        max-width: 255px
    }

    .job-categories-section .job-categories-row .cat-pills {
        padding: 10px 20px;
        height: auto;
        border-radius: 20px;
        font-size: 20px
    }

    .staff-section,.job-categories-section {
        border-radius: 40px
    }

    .atmosphere-section {
        margin-top: 20px
    }

    .atmosphere-section {
        padding-top: 40px
    }

    .atmosphere-section .atmosphere-card {
        height: 120px
    }

    .atmosphere-section .atmosphere-card .pill {
        left: 10px;
        bottom: 10px
    }

    .atmosphere-section .atmosphere-card .pill {
        height: 30px
    }

    .atmosphere-section {
        padding-bottom: 30px
    }

    .equipment-introduction-section {
        padding: 40px 0px
    }

    .transportation-section .content h5 {
        font-size: 24px;
        margin-bottom: 20px
    }

    .job-categories-section .center-heading .heading {
        margin-top: -10px
    }

    .job-categories-section {
        padding-bottom: 60px;
        margin-bottom: 60px
    }

    .main-blog-section .blog-main-v1,.other-hero-section .contact-hero-v1 {
        max-width: 100px
    }

    .main-blog-section .blog-main-v1,.other-hero-section .contact-hero-v1 {
        display: none
    }

    .contact-info .info {
        padding: 0px 20px
    }

    .contact-info .info .info-row {
        padding: 10px 0px
    }

    .contact-info .contact-info-v1 {
        display: none
    }

    .contact-info .info h3 {
        font-size: 32px
    }

    .contact-info {
        flex-direction: column-reverse
    }

    .contact-info .info {
        width: 100%
    }

    .contact-info .map {
        width: 100%
    }

    .contact-form-section .form-card .form-group {
        flex-direction: column;
        margin-bottom: 20px
    }

    .contact-form-section .form-card .form-group .title {
        width: 100%
    }

    .contact-form-section .form-card .form-group .input {
        width: 100%
    }
}

@media screen and (min-width: 769px) {
    .d-show-sm {
        display:none !important
    }
}

@media screen and (max-width: 768px) {
    .d-none-sm {
        display:none !important
    }

    .facility-section .facility-row {
        flex-direction: column
    }

    .strengths-section .strengths-row .strengths-card .heading {
        flex-direction: column
    }

    .strengths-section .strengths-row .strengths-card .discription {
        flex-direction: column
    }

    .strengths-section .strengths-row .strengths-card .discription .text {
        width: 100%
    }

    .strengths-section .strengths-row .strengths-card .discription .img {
        width: 100%;
        height: 162px;
        -o-object-position: center;
        object-position: center
    }

    .support-details-section .support-details-row .support-card {
        width: 100%;
        height: 114px;
        flex-direction: row
    }

    .usage-flow-section .flow-v2,.usage-flow-section .flow-v1,.support-details-section .support-v3,.support-details-section .support-v2,.staff-section .staff-v1,.staff-section .staff-v2 {
        display: none
    }

    .strengths-section .strengths-row .strengths-card .heading .number {
        width: 100%;
        line-height: 60px
    }

    .strengths-section .strengths-row .strengths-card .arrow2 {
        transform: rotate(0deg)
    }

    .strengths-section .strengths-row .strengths-card .discription .img2 {
        width: 100%;
        display: flex;
        justify-content: center
    }

    .strengths-section .strengths-row .strengths-card .discription .img2 img {
        width: 80%
    }

    .strengths-section .strengths-row .strengths-card .discription .img2 {
        margin-top: -40px
    }

    .strengths-section .strengths-row .strengths-card .discription {
        gap: 20px
    }

    .strengths-section .strengths-row .strengths-card .heading .text {
        width: 100%
    }

    .support-details-section .support-v1 {
        width: 60px;
        right: 20px;
        top: -100px
    }

    .strengths-section {
        margin-bottom: 90px
    }

    .support-details-section .center-heading p {
        max-width: 335px
    }

    .support-details-section .center-heading p br {
        display: none
    }

    .support-details-section .support-details-row .support-card svg {
        max-width: none;
        max-height: none
    }

    .support-details-section .support-details-row .support-card {
        justify-content: flex-start;
        padding: 10px 40px
    }

    .support-details-section .support-details-row .support-card svg {
        width: 140px
    }

    .support-details-section .support-details-row .support-card p {
        width: 50%;
        text-align: left
    }

    .facility-section .facility-row .facility-col {
        width: 100%
    }

    .facility-section .facility-row .facility-col .heading .title .btn {
        display: none !important
    }

    .center-heading h3 {
        margin-bottom: 30px
    }

    .usage-flow-section,.strengths-section,.support-details-section,.blog-section,.staff-section {
        padding-bottom: 60px
    }

    .footer-section .contact-card {
        background-image: url(../images/contact-bg-sm.png);
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 100%
    }

    .footer-section .contact-card {
        min-height: 720px;
        padding: 40px 20px
    }

    .footer-section .contact-card .contact-number {
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .footer-section .contact-card .contact-number .number {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px
    }

    .footer-section .contact-card h4 {
        font-size: 32px;
        text-align: center
    }

    .footer-section .contact-card .contact-number .number h5 {
        font-size: 32px
    }

    .footer-section .footer-content .footer-disc .f-brand {
        justify-content: center
    }

    .footer-section .footer-content .footer-disc .contect-row {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start
    }

    .footer-section .footer-content .footer-disc .contect-row {
        gap: 20px;
        margin-bottom: 40px
    }

    .footer-section .footer-content .footer-disc .contect-row p {
        margin-bottom: 0px
    }

    .footer-section .footer-content .footer-disc .company-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin-top: 30px;
        padding-top: 30px
    }

    .footer-section .footer-content .footer-disc .company-logo {
        width: 104px;
        flex-basis: auto
    }

    .footer-section .footer-content .footer-disc .company-text span {
        display: block;
        min-width: 0;
        margin-right: 0;
        margin-bottom: 4px
    }

    .footer-section .footer-content {
        padding-bottom: 40px
    }

    .strengths-card:nth-child(2) .number {
        text-align: right
    }

    .strengths-card:nth-child(4) .number {
        text-align: right
    }

    .classroom-strengths-section,.management-philosophy-section {
        border-radius: 40px
    }

    .flow-of-the-day-section .flow-section .flow-card .detail {
        flex-direction: column
    }

    .flow-of-the-day-section .flow-heading {
        width: 100%
    }

    .flow-of-the-day-section .fd-v1 {
        display: none
    }

    .classroom-concept-section {
        padding-bottom: 30px
    }

    .classroom-concept-section .content {
        padding: 0px
    }

    .classroom-concept-section .content h5 {
        max-width: 250px;
        margin-bottom: 20px
    }

    .classroom-concept-section {
        margin-bottom: 70px
    }

    .management-philosophy-section {
        margin-bottom: 70px
    }

    .classroom-strengths-section .sc-v1 {
        display: none
    }

    .classroom-strengths-section .strengths-cards-row .content .heading {
        max-width: 270px
    }

    .classroom-strengths-section .strengths-cards-row .content h6 {
        max-width: 300px
    }

    .classroom-strengths-section .strengths-cards-row .content h6 br {
        display: none
    }

    .classroom-strengths-section .strengths-cards-row .content p {
        font-size: 20px;
        margin-bottom: 20px
    }

    .service-introduction-section .si-v1 {
        display: none
    }

    .classroom-strengths-section {
        margin-bottom: 60px
    }

    .service-introduction-section .service-introduction-card h6 {
        text-align: center;
        max-width: 240px
    }

    .service-introduction-section .service-introduction-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .service-introduction-section .service-introduction-card {
        padding: 20px
    }

    .service-introduction-section .service-introduction-card .content p br {
        display: none
    }

    .service-introduction-section .service-introduction-card {
        height: auto;
        margin-bottom: 20px
    }

    .flow-of-the-day-section .flow-section .flow-card {
        align-items: flex-start
    }

    .flow-of-the-day-section .flow-section .flow-card .detail {
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px
    }

    .flow-of-the-day-section .flow-section .flow-card .detail h6 {
        font-size: 18px
    }

    .flow-of-the-day-section .flow-section .flow-card .detail h6 br {
        display: none
    }

    .flow-of-the-day-section .flow-section {
        gap: 0px
    }

    .flow-of-the-day-section .flow-section .flow-card {
        margin-bottom: 40px
    }

    .service-introduction-section .si-v2 {
        display: none
    }

    .management-philosophy-section {
        padding-bottom: 60px
    }

    .classroom-strengths-section {
        padding-bottom: 20px
    }

    .service-introduction-section {
        padding-bottom: 80px
    }

    .main-blog-section .blog-main-v1,.other-hero-section .contact-hero-v1 {
        display: none
    }

    .main-blog-section .tab-pills {
        flex-wrap: wrap;
        gap: 6px
    }

    .blog-card {
        margin-bottom: 20px
    }

    .pagination .page-link {
        height: 40px;
        width: 40px
    }

    .articles-section {
        border-radius: 40px
    }

    .vw-100 {
        width: 100% !important
    }

    .main-blog-section .tab-pills .pill {
        padding: 10px 15px;
        height: auto
    }

    .main-blog-section {
        padding: 40px 0px 100px
    }

    .articles-section {
        margin-bottom: 40px
    }

    .contact-form-section {
        padding: 40px 0px
    }

    .contact-form-section .form-card .form-group .title {
        padding: 0px 0px 10px
    }

    .contact-form-section .form-card .form-group .checkbox-group {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start
    }

    .contact-form-section .form-card .form-group .input {
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .contact-form-section .form-card .form-group.bottom {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .contact-form-section .form-card .form-group.bottom .title {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .btn-submit {
        max-width: 250px
    }

    .contact-info .info .info-row .row {
        align-items: center
    }

    .contact-info {
        margin-bottom: 60px
    }

    .reservation-btn {
        height: 70px;
        width: 70px;
        padding: 5px;
        gap: 3px !important;
        bottom: 10px;
        right: 10px
    }

    .reservation-btn svg {
        max-width: 15px;
        max-height: 15px
    }

    .reservation-btn span {
        line-height: normal;
        font-size: 10px
    }

    .philosophy-card {
        flex-direction: column
    }

    .philosophy-card .content {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .philosophy-card .content {
        width: 100%
    }

    .center-heading h5 {
        font-size: 20px
    }

    .philosophy-section {
        border-radius: 40px
    }
}

@media screen and (min-width: 450px) {
    .d-show-xs {
        display:none
    }
}

@media screen and (max-width: 450px) {
    .d-none-xs {
        display:none
    }

    .btn-sm-200 {
        width: 200px !important
    }

    .hero-section {
        height: 730px
    }

    .hero-section .hero-content {
        display: flex;
        align-items: flex-end;
        padding-bottom: 50px;
        height: 100%
    }

    .hero-section .hero-content .inner-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%
    }

    .hero-section .hero-bottom-right {
        display: none
    }

    .hero-section .hero-bottom-left {
        max-width: 147px;
        bottom: -60px
    }

    .hero-section .hero-content p {
        margin: 10px 0px
    }

    .strengths-section .strengths-row .strengths-card .discription .text img {
        max-width: 100%
    }

    .blog-section .blog-row {
        width: 850px
    }

    .blog-card .blog-content {
        padding: 30px 20px
    }

    .blog-card .blog-content p br {
        display: none
    }

    .staff-section .staff-section-row {
        width: 1100px
    }

    .banner-section {
        height: 600px;
        margin-top: -90px;
        margin-bottom: -90px
    }

    .strengths-section .strengths-row .strengths-card .discription .text p {
        margin-bottom: 0px
    }

    .facility-section {
        padding: 60px 0px 100px
    }

    .other-hero-section .hero-content {
        padding: 0px 10px
    }

    .bd-section .bd-comment-box {
        padding: 25px;
        gap: 15px
    }

    .bd-section .bd-highlight {
        padding: 25px 20px
    }

    .bd-section .bd-comment-box .bd-comment-icon {
        display: none
    }

    .philosophy-card {
        height: 338px;
        width: 338px;
        gap: 10px
    }

    .philosophy-card .content h4 {
        max-width: 165px
    }

    .philosophy-card {
        padding: 20px 40px
    }

    .philosophy-section {
        padding-bottom: 40px
    }

    .privacy-policy-section {
        padding: 56px 0px 70px
    }

    .privacy-policy-section .privacy-policy-card {
        border-radius: 20px;
        padding: 30px 20px
    }

    .privacy-policy-section .privacy-policy-card h3 {
        font-size: 17px;
        padding-left: 12px;
        border-left-width: 4px;
        margin: 28px 0 10px
    }

    .privacy-policy-section .privacy-policy-card p {
        font-size: 14px;
        line-height: 1.85
    }
}