/* 
@media screen and (max-width:1690px) {
    #slider-home .slider-bg {
        height: 979px !important;
    }
}

@media screen and (max-width:1920px) {
    #slider-home .slider-bg {
        height: 979px !important;
    }
} */

@media screen and (max-width:1690px) {
    /* -------------------- ALL -------------------- */

    /* SWIRL GIF */
    #home-pattern-1 img {
        width: 490px !important;
    }
        
    #home-pattern-2 img, 
    #home-pattern-3 img,
    #home-pattern-4 img {
        width: 250px !important;
    }    

    #home-pattern-3 {
        top: -280px !important; 
        right: -166px !important;
    }  
    
    #home-pattern-4 { 
        bottom: -192px !important;
    }  
    
    .description-fsize {
        font-size: 16px;
        line-height: 26px;
    }

    .title-h2 {
        font-size: 42px;
        line-height: 51px;
    }

    .content-quote2 p,
    .content-quote2 strong,
    .content-quote li,
    .content-quote strong,
    #contentw-2 #intro-2 li,
    #contentw-2 #intro-2 strong,
    #contentw-2 #intro-1 p,
    #contentw-2 #intro-1 strong,
    .title-h4 {
        font-size: 24px;
        line-height: 34px;
    }


    #navbar .top .center .link1 a {
        font-size: 16px;
    }

    #navbar .logo img {
        width: 105px;
    }

    #navbar.navbar-white #menu-bottom {
        padding: 4px 0;
    } 

    #navbar .bottom .link2 a, #navbar .bottom .link2 li {
        font-size: 11px;
    }

    .page-banner {
        margin-top: 110px !important;
    }

    #navbar .right .lang-wrapper select {
        font-size: 14px;
    } 

    #navbar-right  {
        padding-top: 10px;
    }

    #navbar-right .lang-select {
        font-size: 12px;
    }
    /* -------------------- ALL -------------------- */

    /* -------------------- HOMEPAGE -------------------- */
    #slider-home .slider-bg {
        height: 883px;
    }

    #slider-home .slider-inner {
        margin-bottom: 260px;
    }

    #banner .slider-counter {
        top: 280px;
    } 
    
    #banner .social-media {
        top: 326px;
    }

    #home-intro-1 .content .text {
        font-size: 32px;
        line-height: 36px;
    }

    #home-intro-1 .content .text {
        width: 98%;
    }

    #home-intro-2 img {
        width: 275px;
    }

    .box-wrapper {
        width: 70%; 
    }

    .card-list1 { 
        gap: 20px;
    }

    .btn {
        /* width: 200px; */
        font-size: 16px;
        height: 35px;
        padding: 4px 0px 5px 23px;
    }

    #home-intro-5 {
        width: 65%;
    }

    #home-intro-6 .section-desc {
        width: 72%;
    }

    #home-section-7::before {
        height: 283px;
    }

    #home-intro-7 .section-desc {
        width: 100%;
    }

    /* -------------------- HOMEPAGE END -------------------- */

    /* -------------------- WHO WE ARE : HISTORY -------------------- */
    #content-3 #intro-1 .w50:nth-child(1) {
        width: 45%;
    }

    #content-3 #intro-1 .w50:nth-child(1) .w20 {
        width: 30%;
    }

    #content-3 #intro-1 .w50:nth-child(2) {
        width: 55%;
    }

    #content-3 #intro-4::before {
        height: 300px;
    }

    #content-3 #intro-2 .image img {
        margin-bottom: 30px;
        width: 224px;
    }

    #content-3 .people-wrapper {
        gap: 40px;
    }

    #content-3 .partner-detail .item .title {
        width: 80%;
        height: 140px;
    }

    /* -------------------- WHO WE ARE : HISTORY END -------------------- */ 

    /* -------------------- WHAT WE DO -------------------- */
    #contentw-1 #intro-1 h2 {
        width: 61%;
    }
    /* -------------------- WHAT WE DO -------------------- */
   
    /* -------------------- ANNUAL EVENT -------------------- */
    .top-content-1 h2 {
        width: 61% !important;
    }

    #intro-2-ae .container .right .title-desc #i2-title {
        margin-top: 120px !important;
    }

    #intro-2-ae .container .inner {
        gap: 100px !important;
    }
    
    #annual-events-content .top-content-1 img {
        width: 166px;
    }

    #annual-events-content #content-1 #intro-1 .container {
        gap: 60px !important;
    }


    /* -------------------- ANNUAL EVENT : CONFERENCE -------------------- */
    #content-annual-2 #intro-1 .quote4 .text {
        width: 53%;
    }

    #content-annual-3 #intro-1 .quote4 .text {
        width: 81%;
    }

    .counter-custom .counter {
        font-size: 64px;
    }

    .quote4 img {
        width: 167px !important;
    }
    /* -------------------- ANNUAL EVENT : CONFERENCE  END -------------------- */
    
    /* -------------------- ANNUAL EVENT END -------------------- */

    /* -------------------- WHAT WE DO : OUR PARTNER -------------------- */

    .logo-our-partner img {
        width: 99px;
    }
    /* -------------------- WHAT WE DO : OUR PARTNER END -------------------- */

    /* -------------------- PAGE NOT FOUND -------------------- */
    #page-not-found {
        padding-top: 60px;
    }

    .title-62 {
        font-size: 52px !important;
        line-height: 60px !important;
    }

    .title-32 {
        font-size: 22px !important;
        line-height: 28px !important;
    }
    /* -------------------- PAGE NOT FOUND END -------------------- */

    
    

    /* -------------------- SCHOOL NETWORK -------------------- */
    #intro-1-sn .container .sub-title {
        height: 66px !important;
    } 

    #intro-1-sn {
        height: auto !important;
    }
    /* -------------------- SCHOOL NETWORK END -------------------- */

    /* -------------------- ANNUAL EVENT : NEWS -------------------- */
    #content-annual-4 #intro-1 h1 {
        font-size: 48px;
        line-height: 48px; 
    }

    #content-annual-4 #intro-1 .title-f28 {
        font-size: 26px;
    }

    #news-list .item .body {
        width: 100%;
    }

    #news-list .item .foot {
        display: flex;
        gap: 82px;
    }

    #news-list .item .bg-thumb {
        height: 260px;
    }
    /* -------------------- ANNUAL EVENT : NEWS END -------------------- */

    /* -------------------- ANNUAL EVENT : NEWS DETAIL -------------------- */
    #news-detail .news-info .date img {
        width: 23px;
    }

    #news-detail .news-info .location img {
        width: 17px;
    }

    #news-detail {
        width: 59%;
    }

    /* -------------------- ANNUAL EVENT : NEWS DETAIL END -------------------- */
}

@media screen and (max-width:1441px) {
    /* -------------------- ALL -------------------- */
    .title-h2 {
        font-size: 40px !important;
        line-height: 49px !important;
    }

    .title-large {
        font-size: 64px;
        line-height: 64px;
    }
    /* -------------------- ALL END -------------------- */
    /* -------------------- HOME -------------------- */
    #slider-home .slider-bg {
        height: 731px !important;
    }

    #banner .slider-counter {
        top: 220px;
    }

    #slider-home .slider-inner {
        margin-bottom: 200px;
    }

    #banner .social-media {
        top: 263px;
    }

    #slider-home .slider-arrow {
        width: 40px !important;
    }

    
    #slider-home .slider-arrow.arrow-l {
        right: 120px !important; 
    }

    #slider-home .slider-arrow.arrow-r {
        right: 66px !important;  
    }

    .quote1 .main-img img {
        width: 130px;
    }

    .quote1 .inner {
        width: 80%;
    }

    .quote1::before {
        width: 90%;
    }

    .quote1::after {
        width: 90%;
    }

    .quote1 .text {
        width: 100%;
    } 

    .quote1 .inner .right {
        margin-left: 60px;
    }

    .quote2 .title {
        width: 77%;
    }

    .quote2 .quote-close {
        bottom: -90px;
    }
    
    /* -------------------- HOME END -------------------- */

    /* -------------------- WHO WE ARE -------------------- */
    #content-1 .all .title {
        width: 65%;
    }

    #content-1 #intro-2 .inner {
        width: 44%;
    }

    #content-1 #intro-3 .section-title .title {
        width: 90%;
    }

    .icon-text-list {
        gap: 110px;
    }
    /* -------------------- WHO WE ARE END -------------------- */
    
    /* -------------------- WHO WE ARE : HISTORY -------------------- */
    #content-3 #intro-1 .w50:nth-child(1) {
        width: 40%;
    }

    #content-3 #intro-1 .w50:nth-child(2) {
        width: 60%;
    }

    .people-wrapper {
        width: 90%;
    }

    #content-3 #intro-4::before {
        height: 291px;
    } 

    #content-3 #intro-1 .w50:nth-child(2) .w40 {
        width: 45%;
    }

    /* -------------------- WHO WE ARE : HISTORY END -------------------- */ 

    /* -------------------- WHAT WE DO -------------------- */
     #contentw-1 #intro-1 h2 {
        width: 66%;
    }

    #subnav ul li a {
        font-size: 16px;
    }
    
    /* -------------------- WHAT WE DO -------------------- */

    /* -------------------- WHAT WE DO : TEACHER TRAINING -------------------- */
    #what-teacher-pattern-5 {
        bottom: -98px !important;
    }

    #contentw-3 #intro-1 .quote2 .title {
        width: 87%;
    }

    #contentw-3 #intro-2 .sm-detail .item {
        padding: 20px 40px 80px;
    }
    
    #contentw-3 #intro-2 .sm-detail {
        width: 71%;
    }

    #contentw-3 #intro-4 .quote1 .inner {
        width: 90% !important;
    }
    /* -------------------- WHAT WE DO : TEACHER TRAINING END -------------------- */

    /* -------------------- WHAT WE DO : PUBLICATION -------------------- */
    
    #contentw-4 .quote1 .inner {
        width: 97% !important;
    }

    #contentw-4 .quote1 .inner .right {
        margin-left: 0;
    }

    #contentw-4 .quote3 {
        width: 97%;
    }

    #annual-events-content .top-content-1 h2 {
        width: 67%;
    }

    .top-content-1 img{ 
        width: 166px;
    }

    /* -------------------- WHAT WE DO : PUBLICATION END -------------------- */

    /* -------------------- ANNUAL EVENT  -------------------- */
    #annual-events-content #content-1 #intro-1 {
        height: 780px !important;
    }
    
    /* -------------------- ANNUAL EVENT END -------------------- */

    /* -------------------- ANNUAL EVENT : CONFERENCE -------------------- */
    
    #content-annual-2 #intro-1 .quote4 .text { 
        width: 61%;
    }

    #content-annual-3 #intro-1 .quote4 .text { 
        width: 70%;
    }

    #content-annual-3 #intro-1 .title-h1 {
        font-size: 36px;
        line-height: 46px;
    }

    #intro-3-ea #intro-picture-3 {
        height: 700px !important;
    }

    /* -------------------- ANNUAL EVENT : CONFERENCE END -------------------- */

} 

@media screen and (max-width:1366px) {
    /* -------------------- ALL -------------------- */
    .description-fsize {
        font-size: 14px;
        line-height: 24px;
    }

    .page-banner {
        margin-top: 97px !important;
    }

    .title-h2 {
        font-size: 37px !important;
        line-height: 40px !important;
    }

    .content-quote2 p,
    .content-quote2 strong,
    .content-quote strong,
    .content-quote p,
    .content-quote li,
    #contentw-2 #intro-2 strong,
    #contentw-2 #intro-1 p,
    #contentw-2 #intro-1 strong,
    .title-h4 {
        font-size: 22px !important;
    }

    
    #navbar .logo img {
        width: 90px;
    }

    #navbar .top .center .link1 a {
        font-size: 14px;
    }

    #navbar .right .lang-wrapper select {
        font-size: 12px;
    }

    #navbar .top {
        padding: 19px 0;
    }

    #navbar .bottom .link2 a, #navbar .bottom .link2 li {
        font-size: 10px;
    }


    #search-wrapper .inner .search-input-wrapper input,
    #search-wrapper .inner #search-btn {
        font-size: 16px;
        height: 60px;
    }

    #home-intro-1 .left {
        margin-top: 141px; 
    }

    #home-intro-1 {
        border-radius: 13px;
        padding: 26px 45px 100px;
    }

    #home-intro-1 .content .text {
        font-size: 26px;
        line-height: 31px;
    }

    #home-intro-1 .quote-mark img {
        width: 100px;
    }

    #home-intro-1 .content {
        padding-left: 135px;
    }

    .title-h3 {
        font-size: 38px;
    }

    #bg-intro-5 {
        height: 725px;
    }
    /* -------------------- ALL END -------------------- */

    /* -------------------- HOME -------------------- */
 

    #home-intro-1 .content .text {
        font-size: 30px;
    }

    .description-fsize-l { 
        font-size: 32px;
        line-height: 38px;
    }

    #slider-home .slider-bg {
        height: 644px !important;
    }

    #slider-home .slider-arrow {
        width: 35px !important;
    }

    #slider-home .slider-arrow.arrow-l {
        right: 103px !important; 
    }

    #slider-home .slider-arrow.arrow-r {
        right: 61px !important;  
    }

    #banner .social-media a {
        width: 39px !important;
        height: 39px !important;
    }

    #slider-home .slider-inner {
        margin-bottom: 160px;
    }

    #banner .slider-counter .current {
        width: 39px !important;
        height: 39px !important;
        font-size: 12px;
    }

    #banner .social-media {
        top: 248px;
    }

    /* .btn {
        width: 170px;
        font-size: 14px;
    }  */

    /* -------------------- HOME END -------------------- */

    /* -------------------- WHO WE ARE -------------------- */
    #content-1 #intro-2 {
        height: 722px;
    }

    #content-1 #intro-2 .container {
        padding: 20px 0 90px !important;
    }

    /* -------------------- WHO WE ARE END-------------------- */

    /* -------------------- WHO WE ARE : PROFILE-------------------- */
    #content-3 #intro-2 .image img {
        width: 200px;
    }
    /* -------------------- WHO WE ARE : PROFILE END-------------------- */

    /* -------------------- WHO WE ARE : OUR PARTNER-------------------- */
    #content-4 #intro-1 {
        padding-top: 80px;
    }

    .counter-custom .counter {
        font-size: 60px;
    }

    #content-3 .partner-detail .item,
    #content-4 .section-detail {
        padding: 35px 55px !important;
    }

    #content-4 #intro-4 .content-img {
        width: 50%; 
    }

    #content-3 .partner-detail .item .title { 
        width: 100% !important;
    }
    
    /* -------------------- WHO WE ARE : OUR PARTNER END-------------------- */

    /* -------------------- WHAT WE DO -------------------- */
    #contentw-1 #intro-1 h2 {
        width: 61%;
    }

    .title-f64 {
        line-height: 58px;
        font-size: 58px;
    }
    /* -------------------- WHAT WE DO END -------------------- */

    /* -------------------- WHAT WE DO END : R&D -------------------- */
    .quote1 .main-image img {
        width: 120px;
    }

    .quote2 {    
        padding: 60px 20px 80px;
    }

    
    
    .quote2 .left .wrapper-img  {
        margin-top: -142px;
    }

    .quote2 .left .wrapper-img .bg-img-quote {
        width: 160px !important;
        height: 160px !important;
    }

    .quote2 .left img { 
        width: 160px;
        margin-top: -142px;
    }
    /* -------------------- WHAT WE DO END : R&D END -------------------- */

    /* -------------------- ANNUAL EVENT -------------------- */
    
    /* -------------------- ANNUAL EVENT END -------------------- */

    /* -------------------- ANNUAL EVENT : NEWS -------------------- */
      #content-annual-4 #intro-1 h1 {
        font-size: 42px;
        line-height: 42px; 
    }

    #content-annual-4 #intro-1 .title-f28 {
        font-size: 24px;
    }

    #content-annual-4 #intro-1 .title-f28 {
        font-size: 20px !important;
    }
    /* -------------------- ANNUAL EVENT : NEWS END -------------------- */
    
}

@media screen and (max-width:1300px) {
    /* -------------------- HOME -------------------- */
    #home-intro-1 .left {
        margin-top: 127px;
    }
    /* -------------------- HOME END -------------------- */

    /* -------------------- WHO WE ARE -------------------- */
    .icon-text-list {
        gap: 60px;
    }

    /* -------------------- WHO WE ARE END -------------------- */

    /* -------------------- WHAT WE DO -------------------- */
    #contentw-1 #intro-1 .main-image img {
        width: 140px;
    }

    #contentw-1 #intro-1 {
        height: 660px;
    }

    #contentw-1 #intro-6 .section-cta {
        margin-top: 30px;
    }

    #contentw-1 #intro-6 .section-content {
        gap: 20px;
    }

    
    #contentw-1 #intro-7 #slider-publication .description-fsize {
        font-size: 12px;
        line-height: 18px;
    }

    #contentw-1 #intro-7 #slider-publication .inner {
        padding: 20px;
    }

    #contentw-1 #intro-7 #slider-publication .image {
        margin-top: 10px;
    }
    /* -------------------- WHAT WE DO END -------------------- */

    
    /* -------------------- WHAT WE DO END : R&D -------------------- */
    .quote1 .inner {
        width: 90%;
    }
    /* -------------------- WHAT WE DO END : R&D END -------------------- */

    /* -------------------- ANNUAL EVENT : NEWS -------------------- */
    #news-list .item .bg-thumb {
        height: 200px;
    }
    /* -------------------- ANNUAL EVENT : NEWS END -------------------- */

    /* -------------------- ANNUAL EVENT : NEWS DETAIL -------------------- */
  
      #news-detail {
        width: 70%;
    }
               
    /* -------------------- ANNUAL EVENT : NEWS DETAIL END -------------------- */
}

@media screen and (max-width:1200px) {
    /* -------------------- ALL -------------------- */
 
    #subnav ul {
        gap: 20px !important; 
    }

    #subnav ul li a {
        font-size: 12px !important;
    }
    /* -------------------- ALL END -------------------- */

    /* -------------------- HOME -------------------- */
    .title-h4 {
        font-size: 22px;
    }

    .description-fsize {
        line-height: 22px;
    }

    #content-3 #intro-1 .history-list .item, 
    #content-3 #intro-1 .history-list .item .w40 {
       flex-wrap: wrap;
    }

    
    #content-3 #intro-1 .history-list .item > div,
    #content-3 #intro-1 .history-list .item .w40 > div {
        width: 100% !important;
    }

    
    #content-3 #intro-1 .history-list .item .w40 {
        gap: 10px;
    }

    #content-3 #intro-1 .history-list .item > div:nth-child(2) {
        margin-top: 20px;
    }

    
    #content-3 #intro-1 .history-list .item h4 br {
        display: none;
    }
   
    /* -------------------- HOME END -------------------- */
 

    /* -------------------- WHO WE ARE : OUR PARTNER -------------------- */
    .counter-custom .counter {
        font-size: 50px;
    }
    /* -------------------- WHO WE ARE : OUR PARTNER END -------------------- */

    /* -------------------- WHAT WE DO -------------------- */
   
    #contentw-1 #intro-6 .section-content {
        flex-wrap: wrap;
    }

    
    #contentw-1 #intro-6 .section-content .left, 
    #contentw-1 #intro-6 .section-content .right {
        width: 100%;
    } 

    
    #contentw-1 #intro-6 .section-content .left {
        order: 2;
    }
    
    #contentw-1 #intro-6 .section-content .right {
        order: 1;
    }

    #contentw-1 #intro-6 .section-content .left .section-title {
        text-align: center;
    }

    #contentw-1 #intro-6 .section-content .section-cta {
        justify-content: end;
    }

    .title-f64 {
        line-height: 48px;
        font-size: 48px;
    }

    #contentw-1 #intro-1 {
        padding-top: 60px;
    }

    #contentw-1 #intro-2 {
        margin-top: -100px !important;
    }

    #contentw-1 #intro-3 .section-cta,
    #contentw-1 #intro-4 .section-cta {
        margin-top: 30px;
    }
    /* -------------------- WHAT WE DO END -------------------- */

    /* -------------------- WHAT WE DO : TEACHER TRAINING  -------------------- */
    #contentw-3 #intro-4 .quote1 {
        width: 100% !important;
    }
    /* -------------------- WHAT WE DO : TEACHER TRAINING END -------------------- */

    /* -------------------- ANNUAL EVENT -------------------- */
    #annual-events-content #intro-1 .title-h1 {
        font-size: 38px;
        line-height: 48px;
    }

    #annual-events-content .top-content-1 img {
        width: 146px !important;
    }

    #annual-events-content #content-1 #intro-1 {
        height: 680px !important;
    }

    #intro-2-ae .container .inner {
        gap: 60px !important;
    }

    #intro-2-ae {
        margin: 75px 0 0 !important;
    }

    #content-annual-3 #intro-2 {
        margin-top: 40px !important;
    }
    
    #content-annual-3 #intro-3 .bottom {
        margin-top: 40px !important;
    }

    #content-annual-3 #intro-2 .section-content,
    #content-annual-3 #intro-3 .bottom {
        flex-wrap: wrap !important;
    }

    #content-annual-3 #intro-2 .left,
    #content-annual-3 #intro-2 .right,
    #content-annual-3 #intro-3 .bottom .left{
        width: 100% !important;
        text-align: center !important;
    }
    
    
    #content-annual-3 #intro-3 .bottom .right {
        width: 100% !important;
    }


    #content-annual-3 #intro-2 .right,
    #content-annual-3 #intro-3 .bottom .right {
        margin-top: 40px !important;
    }
    /* -------------------- ANNUAL EVENT END -------------------- */
}

@media screen and (max-width:1199px) {
    /* -------------------- ALL -------------------- */
    
    /* -------------------- ALL END -------------------- */
    
    /* -------------------- HOME -------------------- */
    .card-list1 {       
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card-list1 .item { 
        height: auto;;
    }
    /* -------------------- HOME END -------------------- */
    

    /* -------------------- PAGE NOT FOUND -------------------- */
    .title-62 {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    .title-32 {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    #page-not-found {
        height: auto !important;
    }
    /* -------------------- PAGE NOT FOUND END -------------------- */
}

@media screen and (max-width:1100px) {
    
    /* -------------------- WHO WE ARE -------------------- */
    .icon-text-list .item {
        width: 30%;
    }

    .icon-text-list .item .head .text {
        width: 100%;
        font-size: 18px;
    }

    #content-1 .all .title {
        width: 80%;
    }
    /* -------------------- WHO WE ARE END -------------------- */
    
    /* -------------------- WHAT WE DO END : R&D -------------------- */
    .quote1 .inner .right {
        margin-left: 40px;
    }

    .quote1 .bottom {
        gap: 30px;
    }

    .quote2 {
        width: 90%;
    }

    #contentw-2 #intro-3 .section-desc {
        width: 100%;
    }
    /* -------------------- WHAT WE DO END : R&D END -------------------- */

    
    
    /* -------------------- WHAT WE DO : PUBLICATION -------------------- */
    .quote1 .left .image img { 
        width: 110px;
    }

    .title-medium {
        font-size: 30px;
        line-height: 30px; 
    }

    #contentw-4 .quote1 .inner {
        gap: 30px;
    }
    
    /* -------------------- WHAT WE DO : PUBLICATION END -------------------- */

    /* -------------------- ANNUAL EVENT : PARENT CONFRENCE  -------------------- */
    #content-annual-3 #intro-1 .quote4 .text {
        width: 80% !important;
    }

    #content-annual-3 #intro-1 .title-h1 {
        font-size: 30px;
        line-height: 40px;
    }

    #content-annual-3 #intro-1 .title-h4 {
        font-size: 18px !important;
        line-height: 24px;
    }

    #content-annual-3 #intro-1 .title-h4 br {
        display: none !important;
    }
    /* -------------------- ANNUAL EVENT : PARENT CONFRENCE END -------------------- */
}

@media screen and (max-width:1024px) {

    /* -------------------- ALL -------------------- */
    .description-fsize-l {
        font-size: 26px;
        line-height: 36px;
    }

    #back-top {
        bottom: 40px !important;
    }

    #back-top .btn-back-top {
         font-size: 6px !important;
         gap: 10px !important;
    }
    
    #back-top .btn-back-top img {
        width: 30px;
    }
    /* -------------------- ALL END -------------------- */
    
    /* -------------------- HOME -------------------- */
    #home-section-1 .quote-mark img {
        width: 80px;
    }

    #home-intro-1 .left {
        margin-top: 20px;
    }

    #home-intro-1 .content {
        padding-left: 105px;
    }

    #home-intro-1 .content .text {
        font-size: 30px;
    }  

    #home-intro-1 .right img {
        margin-top: 79px;
    }

    #home-intro-1 {
        padding: 45px 53px 60px;
    }

    .box-wrapper {
        width: 80%;
    }
    /* -------------------- HOME END -------------------- */

    /* -------------------- WHO WE ARE : HISOTRY -------------------- */
    #content-3 #intro-1 .history-list .item > div:nth-child(2) {
        flex-wrap: wrap;
    }

    #content-3 #intro-1 .history-list .item .desc {
        width: 100%;
    }
    
    /* -------------------- WHO WE ARE : HISOTRY END -------------------- */

    
    /* -------------------- WHAT WE DO END : R&D -------------------- */
    .quote1 .inner { 
        margin: 40px auto;
    }

    .title-large {
        font-size: 54px;
        line-height: 54px;
    }

    .content-quote2 p,
    .content-quote2 strong,
    .content-quote strong,
    .content-quote p,
    .content-quote li,
    #contentw-2 #intro-1 p,
    #contentw-2 #intro-1 strong,
    .quote2 .title-h4,
    .quote1 .title-h4 {
        font-size: 18px !important;
        line-height: 28px;
    }

    .quote1::before,
    .quote1::after {
        height: 236px;
    }

    .quote3 .title h2 {
        font-size: 22px;
        line-height: 30px;
    }

    .pub-list .desc {
        width: 80%;
    }

    .quote3 .quote-close {
        width: 100px;
        bottom: -48px;
    }

    .quote3 {
        margin-bottom: 100px !important;
    }
    /* -------------------- WHAT WE DO END : R&D END -------------------- */
    
    /* -------------------- ANNUAL EVENT -------------------- */
    #intro-3-ea #intro-picture-3 {
        height: 400px !important;
    }
    /* -------------------- ANNUAL EVENT END -------------------- */

    /* -------------------- ANNUAL EVENT : NEWS -------------------- */
    #news-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-sm.social-media {
        top: 100px !important;
    }
    /* -------------------- ANNUAL EVENT : NEWS END -------------------- */

    /* -------------------- ANNUAL EVENT : NEWS DETAIL -------------------- */
  
      #news-detail {
        width: 91%;
    }
    /* -------------------- ANNUAL EVENT : NEWS DETAIL END -------------------- */

}

@media screen and (max-width:991px) {
    /* footer .mid {
        flex-wrap: wrap;
    }

    footer .mid .left {
        width: 100%;
    }
    
    footer .mid .right {
       margin-top: 60px;
    } */

    footer .inner {
        display: flex;
        flex-wrap: wrap;
    }

    footer .inner .top,
    footer .inner .mid {
        width: 50% !important;
    }

    footer .inner hr,
    footer .inner .bottom {
        width: 100% !important;
    }

    footer .logo img {
        width: 160px;
    }

    footer .mid {
        flex-wrap: wrap;
        gap: 50px;
    }
    
    footer .mid .right {
        order: 1;
    }

    footer .mid .left {
        order: 2;
    }
    
    footer .mid .left,
    footer .mid .right {
        width: 100% !important;
    }
    /* SWIRL GIF */
    #home-pattern-1 {
        bottom: -219px !important;
        left: -150px !important;
    }
    
    #home-pattern-1 img {
        width: 390px !important;
    }

    #home-pattern-2 img, #home-pattern-3 img, #home-pattern-4 img {
        width: 180px !important;
    }

    #home-pattern-3 {
        top: -226px !important;
        right: -126px !important;
    }
    
    /* -------------------- WHO WE ARE -------------------- */
    #content-1 .all,
    #content-1 #intro-3 .top,
    #content-1 #intro-4 .bottom {
        flex-wrap: wrap;
    }

    #content-1 .all .left,
    #content-1 #intro-3 .left,
    #content-1 #intro-4 .left {
        width: 100%; 
    }

    #content-1 .all .right,
    #content-1 #intro-3 .right,
    #content-1 #intro-4 .right {
        width: 100%;
        margin-top: 30px;
    }
    
    #content-1 #intro-1 .right .section-cta,
    #content-1 #intro-3 .section-cta {
        margin-top: 30px;
    }

    #content-1 #intro-2 {
        height: 522px;
    }

    #content-1 #intro-2 .inner {
        width: 64%;
    }

    #content-1 #intro-4 .cta-desktop {
        display: none !important;
    }

    #content-1 #intro-4 .cta-mobile {
        margin-top: 30px;
        display: flex !important;
        justify-content: end;
    }


    .icon-text-list .item .head .text {
        width: 137px !important;
    }

    .icon-text-list .item .head {
        justify-content: center;
    }

    #content-1 #intro-4 .bottom .section-desc .description-fsize {
        padding-bottom: 20px;
    }
    
    #content-1 #intro-1 .section-title,
    #content-1 #intro-4 .bottom .left > div {
        text-align: center;
    }

    #content-1 #intro-1 .section-title .title,
    #content-1 #intro-3 .section-title .title {
        text-align: center;
        margin: 0 auto;
    }
 
    /* -------------------- WHO WE ARE END -------------------- */

    /* -------------------- WHO WE ARE : HISTORY -------------------- */
    #content-3 #intro-2 .top {
        flex-wrap: wrap;
        gap: 20px;
    }

    #content-3 #intro-2 .top .section-title,
    #content-3 #intro-2 .top .section-desc {
        width: 100%;
    }
    
    #content-3 #intro-2 .top .section-desc {
        padding-bottom: 60px;
    }
    
    #content-3 #intro-2 .image img {
        width: 80%;
    }

    #content-3 #intro-2 .mid h3 {
        font-size: 14px !important;
        line-height: 20px;
    }

    #content-3 #intro-2 .mid .description-fsize {
        font-size: 12px !important;
    }

    .box-container {
        height: auto;
        padding: 80px 0 60px;
    }

    #content-3 #intro-4 {
        margin-bottom: 0 !important;
        padding-bottom: 60px;
    }

    #content-3 #intro-4::before {
        height: 100%;
    }

    #content-3 #intro-4 .section-content { 
        flex-wrap: wrap;
    }
    
    #content-3 #intro-4 .section-content .left,
    #content-3 #intro-4 .section-content .right { 
        width: 100%;
    }

    #content-3 #intro-4 .section-content .left img {
        width: 100%;
    }

    #content-3 #intro-4 .section-content .section-title { 
        text-align: center;
        margin-top: 40px;
    }  

    #content-3 #intro-4 .section-content .section-title { 
        text-align: center;
        margin-top: 40px;
    }  
    
    #content-3 #intro-4 .section-content .description-fsize { 
        text-align: center;
        width: 70%;
        margin: 20px auto 0;
    }

    #content-3 .partner-detail {
        flex-wrap: wrap;
    }

    #content-3 .partner-detail .item {
        width: 100% !important;
    } 

    #content-3 .partner-detail .item .title { 
        height: unset !important;
        margin-bottom: 40px;
    }
    /* -------------------- WHO WE ARE : HISTORY END -------------------- */

    
    /* -------------------- WHO WE ARE : OUR PARTNER -------------------- */
    #content-4 #intro-3 .section-desc, #content-4 #intro-5 .section-desc {
        flex-wrap: wrap;
    }

    #intro-5 .section-detail {
        width: 100%;
    }

    #content-4 #intro-2 .section-content {
        width: 90%;
    }

    /* -------------------- WHO WE ARE : OUR PARTNER END -------------------- */

    /* -------------------- WHAT WE DO -------------------- */
    #contentw-1 #intro-5 .sm-list {
        width: 80%;
    }

    #contentw-1 #intro-2 .section-content {
        padding: 40px 50px;
    }

    #contentw-1 #intro-2 {
        padding: 83px 0;
    }

    #contentw-1 #intro-4 .section-main-content {
        width: 95%;
    }

    #contentw-1 #intro-3 .section-content {
        flex-wrap: wrap;
        text-align: center;
    }

    #contentw-1 #intro-3 .section-content .left, 
    #contentw-1 #intro-3 .section-content .right {
        width: 100%;    
    }
    /* -------------------- WHAT WE DO END -------------------- */

    
    /* -------------------- WHAT WE DO END : R&D -------------------- */
    #contentw-2 #intro-3 .section-content {
        flex-wrap: wrap;
    }

    #contentw-2 #intro-3 .section-content .left,
    #contentw-2 #intro-3 .section-content .right {
        width: 100%;
        text-align: center;
    }

    #contentw-2 #intro-3 .section-content .left img {
        width: 300px;
        margin: 0 auto;
    }

    .title-large {
        font-size: 44px;
        line-height: 44px;
    }

    .content-quote2 p,
    .content-quote2 strong,
    .content-quote strong,
    .content-quote p,
    .content-quote li,
    #contentw-2 #intro-2 strong,
    #contentw-2 #intro-1 p,
    #contentw-2 #intro-1 strong,
    .quote2 .title-h4,
    .quote1 .title-h4 {
        font-size: 14px !important;
        line-height: 24px;
    }

    .quote2 .title {
        width: 100%;
    }

    .quote2 .quote-close {
        bottom: -55px;
        width: 100px;
    }
    /* -------------------- WHAT WE DO END : R&D END -------------------- */

    /* -------------------- WHAT WE DO END : TEACHER TRAINING -------------------- */
    #contentw-3 #intro-2 .section-content,
    #contentw-3 #intro-3 .bottom  {
        flex-wrap: wrap;
    }
    
    #contentw-3 #intro-3 .bottom {
        gap: 20px;
    }

    #contentw-3 #intro-2 .left,
    #contentw-3 #intro-2 .right,
    #contentw-3 #intro-3 .section-title,
    #contentw-3 #intro-3 .section-desc {
        width: 100%;
        text-align: center;
    }

    #contentw-3 #intro-2 .left img {
        width: 400px;
        margin: 0 auto;
    }
    /* -------------------- WHAT WE DO END : TEACHER TRAINING END -------------------- */

    /* -------------------- WHAT WE DO END : SCHOOL MANAGEMENT -------------------- */
    #contentw-3 #intro-2 .sm-detail {
        width: 100%;
    }

    /* -------------------- WHAT WE DO END : SCHOOL MANAGEMENT -------------------- */
    .quote2  {
        margin-top: 140px !important;
    }
    /* -------------------- WHAT WE DO END : SCHOOL MANAGEMENT END -------------------- */

    /* -------------------- WHAT WE DO : PUBLICATION -------------------- */
    .pub-list .pub-box { 
        width: 300px;
        max-width: 90%;
    }

    #contentw-4 #intro-1::before {
        height: 350px;
    }

    /* -------------------- WHAT WE DO : PUBLICATION END -------------------- */

    /* -------------------- ANNUAL EVENT  -------------------- */
    #annual-events-content #content-1 #intro-1 {
        height: auto !important;
        padding: 40px 0px;
    }

    .top-content-1 h2 {
        width: 66% !important;
    }

    #annual-events-content .top-content-1 img {
        width: 126px !important;
    }

    #annual-events-content #content-1 #intro-1 .top-content-1 .mb40 {
        margin-bottom: 20px !important;
    }

    #annual-events-content #intro-1 .title-h1 {
        font-size: 28px;
        line-height: 38px;
    }

    #annual-events-content #intro-1 .title-h4 {
        font-size: 16px !important;
        line-height: 21px;
    }

    #annual-events-content #content-1 #intro-1 .container {
        gap: 40px !important;
    }

    
    #annual-events-content #intro-2-ae .inner,
    #annual-events-content #intro-3-ea .container {
        flex-wrap: wrap;
    }

    #annual-events-content #intro-2-ae .left,
    #annual-events-content #intro-2-ae .right,
    #annual-events-content #intro-3-ea .left,
    #annual-events-content #intro-3-ea .right {
        text-align: center !important;
        width: 100%;
    }

    #intro-2-ae .container .left .box {
        width: 300px !important;
        margin: auto !important; 
    }

    #intro-2-ae .container #i2-desc {
        width: 100% !important;
    }

    #intro-2-ae .container .right .title-desc #i2-title {
        margin-top: 0px !important;
    }

    #intro-2-ae .container .right .title-desc {
        height: auto !important;
    }

    #intro-2-ae .container .right .title-desc #i2-title {
        justify-content: center;
    }

    #intro-2-ae .container .right .button-area {
        width: 100%;
        justify-content: end;
        margin-top: 40px;
    }

    #intro-3-ea .container .right .desc {
        height: auto !important;
    }

    #intro-3-ea .container .right {
        margin-top: 20px;
    }

    #intro-3-ea .container .right .button-div {
        margin-top: 40px !important;
        display: flex;
        justify-content: end !important;
    }
    /* -------------------- ANNUAL EVENT END -------------------- */

    /* -------------------- ANNUAL EVENT : PARENT CONFRENCE  -------------------- */
    .speaker-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .parent-ws {
        flex-wrap: wrap !important;
        gap: 20px !important;
    
    }
    .parent-ws > div {
        width: 100% !important;
    }
    /* -------------------- ANNUAL EVENT : PARENT CONFRENCE END -------------------- */

    footer .mid .left {
        flex-wrap: wrap;
        gap: 20px;
    }

    footer .mid {
        margin-top: 60px;
    }
} 

@media screen and (max-width:930px) {
    /* -------------------- WHAT WE DO -------------------- */
    #contentw-1 #intro-2 {
        margin-top: -50px !important;
    }
    /* -------------------- WHAT WE DO END -------------------- */
} 

/* -------------------- MENU MOBILE APPEAR -------------------- */
@media screen and (max-width:800px) { 
    #navbar {display: none !important;}
    #navbar-mobile {
        display: block !important;
        padding: 0;
    }
    
    #banner {
        margin-top: 82px;
    }

    /* -------------------- HOME -------------------- */
    .title-h2 {
        font-size: 30px !important;
        line-height: 40px !important;
    }

    .title-h4 {
        font-size: 18px;
    }

    #slider-home .slider-bg {
        height: 668px;
    }

    #banner .slider-counter {
        top: 240px;
    }

    #banner .social-media {
        top: 286px;
    }

    #slider-home .slider-arrow.arrow-r {
        right: 30px !important;
    }

    #slider-home .slider-arrow.arrow-l {
        right: 90px !important;
    }
    /* -------------------- HOME END -------------------- */
}

@media screen and (max-width:768px) {
    /* SWIRL GIF */
    #home-pattern-3 {
        top: -226px !important;
        right: -126px !important;
    }

    /* -------------------- HOME -------------------- */
    #home-intro-1 .content .text {
        font-size: 20px;
        line-height: 25px;
    }

    #home-intro-1 .right img {
        margin-top: 70px;
    }

    #home-intro-2 img {
        width: 205px;
    }

    .our-strength {
        width: 77%; 
    }

    .box-list1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .box-list1 .item { 
        height: auto;
        padding: 20px 20px 30px;
    }

    #home-intro-4, #home-intro-7 {
        flex-wrap: wrap;
    }

    #home-intro-4 .left, #home-intro-7 .left {
        width: 100%;
    }

    #home-intro-4  .section-title, #home-intro-7  .section-title {
        text-align: center;
    }

    #home-intro-4  .section-cta, #home-intro-7  .section-cta { 
        margin-top: 40px;
    }

    #home-intro-4 .right, #home-intro-7 .right {
        width: 100%;
    }

    #home-intro-6 .section-desc {
        width: 89%;
    }

    #home-intro-7 .section-cta {
        justify-content: end;
    }

    #slider-home .slider-arrow.arrow-r {
        display: none !important;
    }
    
    #slider-home .slider-arrow.arrow-l {
        display: none !important;
    }

    #slider-home .slick-dots {
        display: none !important;
    }

    .treatment .logo img {
        width: 400px;
    }

    
    /* -------------------- HOME END -------------------- */

    /* -------------------- WHAT WE DO -------------------- */
    #contentw-1 #intro-2 .section-content,
    #contentw-1 #intro-4 .section-content  {
        flex-wrap: wrap;
    }

    #contentw-1 #intro-2 .section-content .left, 
    #contentw-1 #intro-2 .section-content .right,
    #contentw-1 #intro-4 .section-content .left, 
    #contentw-1 #intro-4 .section-content .right {
        text-align: center;
        width: 100%;    
    }

    
    #contentw-1 #intro-4 .section-content .left {
        order: 2;
    }

    #contentw-1 #intro-4 .section-content .right {
        order: 1;
    }
    
    #contentw-1 #intro-2 .section-content .left img {
        width: 50%;
        margin: 0 auto;
    }

    #contentw-1 #intro-4 .section-content .right img  {
        width: 50%;
        margin: 0 auto;
    }
    
    #contentw-1 #intro-2 .section-content .description-fsize {
        width: 100%;
    }

    #contentw-1 #intro-1 h2 {
        width: 80%;
    }

    /* -------------------- WHAT WE DO END -------------------- */

    /* -------------------- WHAT WE DO : SCHOOL MANAGEMENT -------------------- */
    
    #contentw-3 #intro-3 #book-cover {
        flex-wrap: wrap !important;
    }

    #contentw-3 #intro-3 #book-cover > div {
        width: 100% !important;
    }

    #contentw-3 #intro-3 #book-cover img {
        width: 300px;
        margin: 0 auto;
    }

    #contentw-3.school #intro-3  .mid {
        text-align: center !important;
        margin-top: 20px !important;
    }
    
    #contentw-3.school #intro-3  .bottom {
        margin-top: 10px !important;
    }
    /* -------------------- WHAT WE DO : SCHOOL MANAGEMENT END -------------------- */

    /* -------------------- PAGE NOT FOUND -------------------- */
    #page-not-found .section-content {
        flex-wrap: wrap;
    }

    #page-not-found .section-content .left,
    #page-not-found .section-content .right {
        width: 100% !important;
    }

    .img-404 {
        margin: 0 auto !important;
        width: 300px !important;
    }

    #page-not-found {
        padding-top: 20px !important;
    }
    /* -------------------- PAGE NOT FOUND END -------------------- */

    /* -------------------- SCHOOL NETWORK -------------------- */
    /* #intro-4-sn .container #list {
        row-gap: 40px !important;
    } */
    /* -------------------- SCHOOL NETWORK END -------------------- */
} 

@media screen and (max-width:700px) { 
    /* -------------------- ALL -------------------- */

    .title-h4 {
        font-size: 12px !important;
        line-height: 18px;
    }

    .title-h1 {
        font-size: 24px;
        line-height: 38px;
    }

    .description-fsize {
        font-size: 12px; 
    }

    /* -------------------- ALL END -------------------- */

    /* -------------------- HOME -------------------- */
    .title-h4 {
        font-size: 14px;
    }

    #home-intro-1 .right {
        float: none;
        position: absolute;
        right: 0px;
        bottom: 0px;
    }

    #home-section-1 .quote-mark img {
        width: 39px;
    }

    #home-intro-1 .content {
        padding-left: 56px;
    }

    #home-intro-1 {
        padding: 20px 40px 60px;
    }

    .card-list1 {
        grid-template-columns: repeat(1, 1fr);
    }

    #search-wrapper .inner .search-input-wrapper {
        width: 75%;
    } 

    #search-wrapper .inner .search-btn-wrapper {
        width: 25%;
    }

    #search-wrapper .inner #search-btn {
        font-size: 16px;
    }

    #search-wrapper .inner #search-btn,
    #search-wrapper .inner .search-input-wrapper input {
        height: 54px;
    }
    /* -------------------- HOME END -------------------- */

    /* -------------------- WHO WE ARE -------------------- */
    .icon-text-list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .icon-text-list .item {
        width: 100%;
    }
    
    #subnav ul {
        gap: 30px;
        padding: 15px 0 5px;
    }
    
    #subnav ul li a {
        font-size: 12px;
    }

    #content-1 #intro-1 h3 {
        font-size: 10px !important;
    }

    #content-1 #intro-1 .subtitle {
        margin-bottom: 0px !important;
    }

    #content-1 .all {
        margin-top: 40px !important;
    }

    #content-1 .all .right .section-main-content {
        flex-wrap: wrap;
        gap: 15px;
    }

    #content-1 .all .right .section-main-content div {
        width: 100%;
    } 
    
    #content-1 #intro-2 .container {
        padding: 20px 0 20px !important;
    }
 
    #content-1 #intro-2  { 
        margin-top: 40px !important;
    }

    #content-1 #intro-2 {
        height: 322px !important;
    }

    #content-1 #intro-3,
    #content-1 #intro-4 {
        margin-top: 40px !important;
    }

    #content-1 #intro-4 .bottom {
        margin-top: 40px !important;
    }

    .icon-text-list .item .head .icon {
        width: 40px;
        height: 40px;
    }

    .icon-text-list .item .head .text {
        height: 33px !important;
        font-size: 12px;
    }

    .icon-text-list {
        gap: 30px;
    }

    #content-1 #intro-4 {
        margin-bottom: 40px !important;
    }
 
    /* -------------------- WHO WE ARE END -------------------- */
    
    /* -------------------- WHO WE ARE : PROFILE -------------------- */
    #content-2 #intro-1 {
        padding-top: 40px;
    }

    #content-2 .section-desc {
        width: 100%;
        margin: 40px auto 60px;
    }

    #content-2 #intro-1::before {
        height: 215px;
    }
    
    /* -------------------- WHO WE ARE : PROFILE END -------------------- */

    /* -------------------- WHO WE ARE : HISTORY -------------------- */
    #content-3 #intro-1 {
        margin-top: 40px;
    }

    #content-3 #intro-1 .history-list .item .w40 {
        gap: 2px;
    }

    #content-3 #intro-1 .history-list .item > div:nth-child(2) {
        gap: 20px;
    }
    
    #content-3 .people-wrapper { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
    /* -------------------- WHO WE ARE : HISTORY END -------------------- */

    
    /* -------------------- WHO WE ARE : OUR PARTNER -------------------- */
    .counter-custom .counter {
        font-size: 40px;
    }

    .counter-custom {
        padding: 40px 0 40px;
    }

    #content-4 #intro-2::before {
        height: 230px;
    }

    #content-3 .partner-detail .item,
    #content-4 .section-detail {
        padding: 25px 35px !important;
        margin-top: 20px;
    }

    .our-partner-hsi img {
        width: 120px;
    }

   
    /* -------------------- WHO WE ARE : OUR PARTNER END -------------------- */

    /* -------------------- WHAT WE DO -------------------- */ 
    #contentw-1 #intro-7 .section-content  {
        flex-wrap: wrap;
    }

    #contentw-1 #intro-7 .section-content .left, 
    #contentw-1 #intro-7 .section-content .right {
        text-align: center;
        width: 100%;    
    }

    #contentw-1 #intro-7 .cta-desktop {
        display: none !important;
    }

    #contentw-1 #intro-7 .cta-mobile {
        margin-top: 30px;
        display: block !important; 
        width: 91% !important;
        margin: 0 auto;
    } 
    
    .container-right-custom {
        width: 100%;
    }

    #contentw-1 #intro-7 .left {
        width: 91% !important;
        margin: 0 auto;
    }

    #slider-publication {
        width: 96%;
        margin-left: auto;
        margin-top: 40px;
    }

    .title-f64 {
        line-height: 38px;
        font-size: 38px;
    }

    #contentw-1 #intro-1 .main-image img {
        width: 100px;
    }
    
    .title-f64 {
        line-height: 28px;
        font-size: 28px;
    }
    
    #contentw-1 #intro-1 .name {
        margin-top: 30px;
    }

    #contentw-1 #intro-1 {
        height: 480px;
    }

    #sub-what-we-do #subnav {
        overflow-x: scroll;
    }

    #sub-what-we-do #subnav ul {
        width: 700px;
    }

    #contentw-1 #intro-1 {
        padding-top: 40px;
    }

    #contentw-1 #intro-2 .section-content {
        padding: 40px 20px;
    }

    #contentw-1 #intro-2 .section-content .left img {
        width: 220px;
        max-width: 90%;
    }

    #contentw-1 #intro-2 {
        padding: 43px 0;
    }

    #contentw-1 #intro-4 .section-content .right img {
        width: 220px;
        max-width: 90%;
    }

    
    #contentw-1 #intro-3 {
        margin-top: 40px !important;
    }
    /* -------------------- WHAT WE DO END -------------------- */


    /* -------------------- WHAT WE DO END : R&D -------------------- */    
    .title-large {
        font-size: 34px;
        line-height: 34px;
    }

    .quote1::after { 
        height: 236px;
    }

    .quote1::before,
    .quote1::after { 
        height: 236px;
    }

    .quote1 .inner {
        margin: 20px auto 0;
    }

    .quote1 .main-image img {
        width: 80px;
    }

    .quote1 .inner .right {
        margin-left: 20px;
    }

    .quote1 .bottom {
        gap: 20px;
    }
    /* -------------------- WHAT WE DO END : R&D END -------------------- */    

    
    /* -------------------- WHAT WE DO END : SCHOOL MANAGEMENT -------------------- */
    #contentw-3 #intro-2 .sm-detail {
        margin-top: 40px;
        flex-wrap: wrap;
        justify-content: center;
    }

    #contentw-3 #intro-2 .sm-detail .item {
        width: 90%;
    }

    #contentw-3 #intro-2 .sm-detail .item img {
        width: 120px;
        margin: 0 auto 20px;
    }

    #contentw-3 #intro-2 .sm-detail .item {
        padding: 20px 20px 40px;
    }

    #contentw-3 #intro-3.sm-bottom .bottom  {
        gap: 30px;
    }

    .quote2 .name {
        margin-top: 20px;
    }

    #contentw-3 #intro-3.sm-bottom {
        overflow: hidden;
    }

    /* -------------------- WHAT WE DO END : SCHOOL MANAGEMENT END -------------------- */

    /* -------------------- WHAT WE DO : PUBLICATION -------------------- */
    .pub-list .desc {
        width: 100%;
    }

    .pub-list .pub-box {
        width: 250px;
        max-width: 90%;
    }

    #contentw-4 #intro-1::before {
        height: 320px;
    }

    .pub-list .pub-box {
        padding: 20px;
    }

    .pub-list .desc {
        margin: 30px auto 20px;
    }

    .title-medium {
        font-size: 18px;
        line-height: 18px;
    }

    #contentw-4 .quote1 .inner {
        gap: 15px;
        width: 100%;
    }

    #contentw-4 #intro-2 {
        padding-top: 60px;
    }

    .quote3 .top img {
        width: 120px;
    }
    
    .quote3 {
        margin-top: 140px !important;
        padding-bottom: 20px !important;
    }

    .quote3 .top {
        top: -58px;
    }

    .quote3 .title h2 {
        font-size: 14px;
        line-height: 20px;
    }

    .quote3 .title {
        margin: 20px auto 20px;
    } 
    
    .quote3 .name {
        margin-top: 40px;
    }

    .quote3 .quote-close {
        width: 70px;
        bottom: -40px;
        right: 20px;
    }

    .pub-list .desc {
        width: 100% !important;
    }

    .pub-list .line {
        width: 100% !important;
        margin: 40px 0 60px !important;
    }
    /* -------------------- WHAT WE DO : PUBLICATION END -------------------- */

    /* -------------------- ANNUAL EVENT -------------------- */
    #annual-events-content #intro-1 .title-h1 {
        width: 100% !important;
        font-size: 22px;
        line-height: 27px;
    }

    #annual-events-content #intro-1 .title-h4 {
        font-size: 12px !important;
        line-height: 18px !important;
    }

    .container {
        gap: 20px !important;
    }

    #annual-events-content .top-content-1 img {
        width: 106px !important;
    }

    #intro-2-ae {
        margin: 45px 0 0 !important;
    }

    #intro-2-ae .container .left .box {
        width: 250px !important;
        margin: auto !important;
        max-width: 90%;
    }

    #intro-2-ae .container .left .box {
        padding: 10px 12px 60px !important;
    }
    
    #intro-2-ae .container .inner {
        gap: 40px !important;
    }

    #intro-2-ae .container .right .title-desc {
        gap: 20px !important;
    }

    #intro-3-ea #intro-picture-3 {
        height: 200px !important;
    }

    #intro-3-ea #intro-picture-3 {
        margin-top: 100px !important;
    }

    #intro-3-ea .container {
        margin-top: 40px !important;
        margin-bottom: 60px !important;
    }

    #intro-3-ea .container .right {
        margin-top: 0px !important;
    }

    #annual-events-content #content-1 #intro-1 {
        background-position: bottom !important;
    }

    /* -------------------- ANNUAL EVENT END -------------------- */

    /* -------------------- ANNUAL EVENT : PARENT CONFRENCE  -------------------- */
     #content-annual-3 #intro-1 .quote4 .text {
        width: 100% !important;
    }

    #content-annual-3 #intro-1 .title-h1 {
        font-size: 18px;
        line-height: 22px;
    }
    /* -------------------- ANNUAL EVENT : PARENT CONFRENCE END -------------------- */

}

@media screen and (max-width:600px) { 
    


    #contentw-3 #intro-3 .section-title img {
        width: 150px !important;
        margin: 0 auto !important;
    }

    #contentw-3 #intro-3.sm-bottom .bottom {
        gap: 20px !important;
    }

    .mob-text-justify {
        text-align: justify !important;
    }

    .mob-w100 {width: 100% !important;}


    /* footer .inner .top {
        width: 45% !important;
    }

    footer .inner .mid {
        width: 55% !important;
    } */

    footer .footer-logo-3 {
        width: 120px;
    }
    /* SWIRL GIF */
    #home-pattern-1 {
        bottom: -96px !important;
        left: -77px !important;
    }

    #home-pattern-1 img {
        width: 190px !important;
    }

    #home-pattern-2 {
        left: -20px !important; 
        top: -95px !important;
    }

    #home-pattern-2 img, #home-pattern-3 img, #home-pattern-4 img {
        width: 100px !important;
    }

    #home-pattern-3 {
        top: -123px !important;
        right: -56px !important;
    }

    #home-pattern-4 {
        right: 9px !important;
        bottom: -87px !important;
    }

    #content-2 #who-profile-pattern-1 {
        top: -111px !important;
        left: 0px !important;
    }

    #content-2 #who-profile-pattern-1 img,
    #content-2 #who-profile-pattern-2 img,
    #content-2 #who-profile-pattern-3 img {
        width: 100px !important;
    }

    #content-2 #who-profile-pattern-2 {
        right: -102px !important;
        top: -156px !important;  
    }

    #content-2 #who-profile-pattern-3 {
        bottom: -48px !important;
        left: -31px !important;
    } 

    #who-history-pattern-5 {
        bottom: -75px !important;
        right: 8px !important;
    }    

    
    #who-history-pattern-5 img {  
        width: 100px !important;
    }

    
    #content-4 #who-profile-pattern-1 img,
    #content-4 #who-profile-pattern-2 img {
        width: 100px !important;
    }
    
    #content-4 #who-profile-pattern-1 {
        top: -111px !important;
        left: 0px !important;
    }

    #content-4 #who-profile-pattern-2 {
        right: -102px !important;
        top: -156px !important;  
    }

    #school-network-content #who-profile-pattern-1 img,
    #school-network-content #who-profile-pattern-2 img {
        width: 100px !important;
    }
    
    #school-network-content #who-profile-pattern-1 {
        top: -111px !important;
        left: 0px !important;
    }

    #school-network-content #who-profile-pattern-2 {
        right: -102px !important;
        top: -156px !important;  
    }

    #what-pattern-1 {
        left: -8px !important;
        bottom: -100px !important;
    }


    #what-pattern-1 img,
    #what-pattern-2 img {
        width: 100px !important;
    }

    #what-pattern-2 {
        right: -20px !important;
        top: -103px !important;
    }    


    #what-teacher-pattern-4 img {
        width: 100px !important;
    }

    #what-teacher-pattern-4 {
        left: -44px !important;
        top: -50px !important;
    }    


    #what-sm-pattern-6 {
        top: -40px !important;
        right: -40px !important; 
    }

    #what-sm-pattern-6 img {
        width: 100px !important;
    }

    #contentw-4 #who-profile-pattern-1 img,
    #contentw-4 #who-profile-pattern-2 img {
        width: 100px !important;
    }

    #contentw-4 #who-profile-pattern-1 {
        top: -111px !important;
        left: 0px !important;
    }

    #contentw-4 #who-profile-pattern-2 {
        right: -102px !important;
        top: -156px !important;  
    }

    #annual-conf-pattern-2 {
        right: -34px !important;
        top: -100px !important;  
    }

    #annual-conf-pattern-2 img {
       width: 100px !important;
    }

    #back-top {
        bottom: 28px !important;
    }

 
    
    /* #back-top .btn-back-top img {
        width: 20px;
    } */

    #who-history-pattern-4 img {
        width: 500px !important;
    }
    
    #what-sm-pattern-7-1 {
        bottom: -32px !important;
    }    

    #what-teacher-pattern-5 img {
        width: 400px !important;
    }

    #what-teacher-pattern-5 {
        bottom: -65px !important;
    }

    #school-network-content #who-profile-pattern-3 {
        width: auto;
        right: -150px !important;
        top: -78px !important;
    }

    #school-network-content #who-profile-pattern-3 img {
        width: 100px !important;
    }

    #annual-conf-pattern-1 {
        left: -208px !important;
        top: 186px !important;
    }

    #annual-conf-pattern-1 img {
        transform: rotate(256deg) !important;
        width: 500px !important;
    }

    #what-rnd-pattern-3 {
        left: -208px !important;
        top: 186px !important;
    }

    #what-rnd-pattern-3 img {
        transform: rotate(256deg) !important;
        width: 500px !important;
    }
    
    /* -------------------- ALL -------------------- */
    .mob-mt5 {margin-top: 5px;}
    .mob-mt10 {margin-top: 10px;}
    .mob-mt15 {margin-top: 15px;}
    .mob-mt20 {margin-top: 20px;}
    .mob-mt25 {margin-top: 25px;}
    .mob-mt30 {margin-top: 30px;}
    .mob-mt35 {margin-top: 35px;}
    .mob-mt40 {margin-top: 40px;}
    .mob-mt45 {margin-top: 45px;}
    .mob-mt50 {margin-top: 50px;}
    .mob-mt55 {margin-top: 55px;}
    .mob-mt60 {margin-top: 60px;}
    .mob-mt65 {margin-top: 65px;}
    .mob-mt70 {margin-top: 70px;}
    .mob-mt75 {margin-top: 75px;}
    .mob-mt80 {margin-top: 80px;}
    .mob-mt85 {margin-top: 85px;}
    .mob-mt90 {margin-top: 90px;}
    .mob-mt95 {margin-top: 95px;}
    .mob-mt100 {margin-top: 100px;}

    .mob-mb5 { margin-bottom: 5px !important; }
    .mob-mb10 { margin-bottom: 10px !important; }
    .mob-mb15 { margin-bottom: 15px !important; }
    .mob-mb20 { margin-bottom: 20px !important; }
    .mob-mb25 { margin-bottom: 25px !important; }
    .mob-mb30 { margin-bottom: 30px !important; }
    .mob-mb35 { margin-bottom: 35px !important; }
    .mob-mb40 { margin-bottom: 40px !important; }
    .mob-mb50 { margin-bottom: 50px !important; }
    .mob-mb55 { margin-bottom: 55px !important; }
    .mob-mb60 { margin-bottom: 60px !important; }
    .mob-mb65 { margin-bottom: 65px !important; }
    .mob-mb70 { margin-bottom: 70px !important; }
    .mob-mb75 { margin-bottom: 75px !important; }
    .mob-mb80 { margin-bottom: 80px !important; }
    .mob-mb85 { margin-bottom: 85px !important; }
    .mob-mb90 { margin-bottom: 90px !important; }
    .mob-mb95 { margin-bottom: 95px !important; }
    .mob-mb100 { margin-bottom: 100px !important; }


    .title-h3 {
        font-size: 14px;
    }

    .description-fsize {
        line-height: 20px;
        font-size: 12px;
    }
    
    .description-fsize-l {
        line-height: 16px;
        font-size: 12px;
    }

    .btn {
        font-size: 10px;
        width: max-content;
        height: 21px;
        padding: 3px 0px 4px 15px;
    }

    .btn div:nth-child(2) {
        margin-left: 5px;
    }

    .btn.center { 
        padding: 3px 0px 4px 0px;
    }

    .btn img {
        /* display: none; */
        width: 4px !important;
    }

    .btn.arrow { 
        padding: 6px 15px 6px 23px;
    }

    .title-h2 {
        font-size: 14px !important;
        line-height: 20px !important; 
    }

    /* -------------------- ALL END -------------------- */

    /* -------------------- HOME -------------------- */
    .treatment .logo img {
        margin: 20px auto 40px;
    }

    .treatment .logo img {
        width: 250px;
    }

    .treatment .content { 
        border-bottom: 21px solid var(--light-blue); 
        padding: 23px 20px;
        margin-bottom: 60px;
    }

    .treatment .content p {
        width: 100%;
    }

    #banner .subtitle {
        font-size: 14px !important;
        line-height: 20px;
    }

    #home-section-1 .title-h4 {
        font-size: 8px !important;
    }

    #home-intro-1 .content .text {
        font-size: 14px;
        line-height: 18px;
    }

    #home-intro-1 {
        padding: 20px 30px 40px;
    }

    #banner {
        margin-top: 68px;
    }

    #banner .social-media {
        display: none;
    }

    #banner .slider-counter {
        /* top: 70px; */
        top: 195px;
    }

    #slider-home .subtitle {
        margin-top: 11px;
    }

    #slider-home .slider-inner {
        margin-bottom: 40px;
    }
     
    #home-pattern-1 img {
        width: 130px;
    }

    #home-section-1 {
        margin-top: 35px;
    }

    /* #home-pattern-2 {
        bottom: -156px !important;
    }     */

    /* #home-pattern-2 img {
        width: 80px;
    }

    #home-pattern-3 {
        bottom: -97px !important; 
    } */

    #home-pattern-3 img {
        width: 100px;
    }

    #home-intro-2 img {
        width: 113px;
    }

    .box-wrapper {
        width: 100% !important;
    }

    .box-list1 .item h3 {
        font-size: 12px;
    }

    .box-list1 .item h3 {
        margin: 10px 0 5px;
    }

    .box-list1 .item {
        padding: 20px 20px 15px;
        border-radius: 5px;
    }

    #intro-home-2 {
        margin-top: 60px;
    }

    .box-list1 {
        gap: 15px;
    }

    #home-intro-3 { 
        border-radius: 5px;
        padding: 10px;
    }

    #home-intro-3 .section-title {
        margin: 20px 0 25px !important;
    } 
    
    .card-list1 .item {
        border-radius: 5px;
    }

    .card-list1 .item .head img {
        width: 55px;
        margin: 0 auto;
    }

    .card-list1 .item .title {
        text-align: center;
    }

    #intro-home-4 .container {
        width: 100% !important;
    }

    #intro-home-4 .right {
        width: 86%;
        margin: 0 auto;
    }


    #home-intro-4 .right .section-cta {
        margin-top: 30px !important;
    }

    #bg-intro-5 {
        background: url(../../img/home/intro5-mob.png) no-repeat !important;
        height: 373px;
        background-size: cover !important;
    }

    #home-intro-5 .section-desc {
        margin-bottom: 25px;
        margin-top: 10px;
    }

    #home-intro-5 {
        width: 51%;
        margin-bottom: 40px;
    }

    #home-intro-6 {
        padding: 20px 0 60px;
    }

    #home-intro-6 .section-desc {
        width: 91%;
        margin-bottom: 30px;
    } 

    /* #home-pattern-4 {
        bottom: -33px !important;
    } */

    #home-pattern-4 img {
        width: 140px;
    }
    
    #home-intro-7 { 
        padding-top: 50px;
    }

    #home-section-7::before {
        height: 182px;
    }
    /* -------------------- HOME END -------------------- */
    
    /* -------------------- MENU -------------------- */
    #navbar-mobile .logo img {
        width: 69px;
    }

    #navbar-mobile .icon-search {
        width: 20px;
    }

    #navbar-mobile .icon-menu {
        width: 24px;
    }

    #navbar-mobile .right {
        gap: 30px;
    }

    #nav-mobile-open .searchbar input {
        padding-left: 38px;
        font-size: 14px;
    }

    #search-btn-mobile {
        bottom: 10px;
    }

    #nav-mobile-open a,
    .lang-wrapper-mobile select {
        font-size: 20px;
    }

    .lang-wrapper-mobile .lang-icon img {
        width: 19px;
    }

    .lang-wrapper-mobile select {
        padding-right: 20px;
        background-size: 14px;
    }

    #nav-mobile-open .searchbar {
        margin-top: 30px;
    }

    #nav-mobile-open li {
        margin-top: 55px;
    }

    #banner .slider-counter .container {
        gap: 9px !important;
    }
    /* -------------------- MENU END -------------------- */

    /* -------------------- FOOTER -------------------- */
    footer .logo img {
        width: 100px;
    }

    .footer-info a {
        gap: 10px !important;
        align-items: center;
    }

    footer .mid {
        flex-wrap: wrap;
    }

    footer .mid > div {
        width: 100%;
    }

    footer a {
        font-size: 12px;
    }

    footer .top .left {
        width: 50%;
    }

    footer .top .right {
        width: 50%;
    }

    footer .mid {
        margin-top: 40px; 
        gap: 20px;
        margin-bottom: 80px !important;
    }

    footer .mid .partner {
        gap: 10px;
    }


    footer .mid .left > div:nth-child(2) h6 {
        margin-bottom: 10px !important;
    }

    .container {
        width: 89%;
    }

    footer .bottom p {
        text-align: center;
        font-size: 10px;
    }
    
    footer .top {
        padding-top: 40px;
    }

    footer .bottom { 
        padding-top: 10px;
        padding-bottom: 29px;
    }

    #back-top .btn-back-top img {
        width: 20px;
    }

    footer .mid .left {
        gap: 20px;
        flex-wrap: wrap;
    }

    footer .mid .right {
        margin-top: 0px;
    }

    .btn-rounded {
        font-size: 14px;
        padding: 4px 16px;
    }

    /* -------------------- FOOTER END -------------------- */

    
    /* -------------------- WHO WE ARE : HISTORY -------------------- */

    #content-3 #intro-2 .people-wrapper {
        flex-wrap: wrap;
    }

    #content-3 #intro-2 .people-wrapper .item {
        width: 46% !important;
        margin-bottom: 40px;
    }

    #content-3 #intro-1 .history-list .item .w60 {
        width: 100%;
    }

    #content-3 #intro-1 .history-list .item > div:nth-child(2) {
        padding-bottom: 40px;
    }

    #content-3 #intro-1 .history-list {
        row-gap: 30px;
    }

    #content-3 #intro-2 .people-wrapper .item {
        width: 100% !important; 
    }

    #content-3 #intro-2 .image img {
        width: 200px;
    }
    
    .box-container { 
        padding: 40px 0 10px;
    }

    #content-3 #intro-4 h2 br {
        display: none !important;
    }

    #content-3 #intro-2 .image img {
        width: 100px;
    }

    #content-3 #intro-2 .bottom {
        padding: 60px 0 40px !important;
    }

    #content-3 .box-container {
        padding: 60px 0 10px;
        height: unset;
    }

    /* #content-3 #intro-4 .section-content .description-fsize {
        width: 90% !important;
    } */

    /* -------------------- WHO WE ARE : HISTORY END -------------------- */

    
    /* -------------------- WHO WE ARE : OUR PARTNER -------------------- */
    #content-4 #intro-2 .section-content {
        width: 100%;
    }

    .counter-custom .counter {
        font-size: 25px;
        line-height: 25px;
    }
    
    .counter-custom {
        margin-top: 30px;
    }

    #content-4 #intro-2 {
        padding-top: 30px !important;
    }

    #content-4 #intro-4 .section-title {
        padding: 40px 0 !important;
    }

    #content-4 #intro-4 .img-floating img {
        width: 122px !important;
    } 

    #content-4 #intro-4 .img-floating {
        bottom: 20px !important;
    }

    #content-4 #intro-4 .content-img {
        width: 100% !important;
    } 

    #content-4 #intro-3::before {
        height: 530px;
    }

    #content-4 #intro-3 .si-white .icon-text-list {
        padding-left: 0;
    }

    #content-4 #intro-3 {
        margin-top: 35px;
    }

    
    /* -------------------- WHO WE ARE : OUR PARTNER END -------------------- */
    
    /* -------------------- WHAT WE DO -------------------- */
    #contentw-1 #intro-3 .section-cta, #contentw-1 #intro-4 .section-cta, #contentw-1 #intro-7 .cta-mobile .section-cta {
        justify-content: end;
    }

    #contentw-1 #intro-5 .sm-list {
        width: 100%;
        flex-wrap: wrap;
        row-gap: 60px;
        justify-content: center;
    }

    #contentw-1 #intro-5 .sm-list .item {
        width: 90%;
    }
    
    #contentw-1 #intro-5 .section-main-content {
        margin-top: 40px;
    }

    #contentw-1 #intro-5 .sm-list .item img { 
        width: 140px;
        max-width: 80%;
    }

    #contentw-1 #intro-5 {
        margin: 40px 0 60px;
    }
    
    #contentw-1 #intro-6 .section-content {
        padding: 20px;
    }

    #contentw-1 #intro-7 {
        margin-top: 40px;
    }

    #contentw-1 #intro-7 .section-desc {
        margin-top: 10px;
    }


    /* -------------------- WHAT WE DO END -------------------- */

    
    /* -------------------- WHAT WE DO END : R&D -------------------- */    
    .title-large {
        font-size: 18px;
        line-height: 18px;
    }

    .quote1::before, .quote1::after {
        height: 102px;
    }
    
    #contentw-2 #intro-1 {
        padding-top: 40px;
    }
    
    .quote1::before { 
        border-top-right-radius: 60px;
        top: 35px;
    }
    
    .quote1::after { 
        bottom: -30px;
        border-bottom-left-radius: 60px;
    }

    .quote1 .bottom {
        margin-top: 20px;
    }

    .quote1 .left img {
        width: 40px;
    }

    .quote1 .inner .right {
        margin-left: 5px;
    }

    .content-quote2 p,
    .content-quote2 strong,
    .content-quote strong,
    .content-quote p,
    .content-quote li,
    #contentw-2 #intro-2 li,
    #contentw-2 #intro-2 strong,
    #contentw-2 #intro-1 p,
    #contentw-2 #intro-1 strong,
    .quote2 .title-h4, .quote1 .title-h4 {
        font-size: 10px !important;
        line-height: 18px;
    }

    .quote1 .bottom {
        gap: 15px;
    }

    .quote1 .inner {
        width: 100%;
    }

    .quote1 {
        width: 90%;
    }

    .quote1::before,
    .quote1::after {
        width: 95%;
    }
    
    .quote1 .main-image img {
        width: 70px;
    }

    .quote1 .inner .left {
        width: 17%;
    }

    .quote1 .inner .right {
        width: 83%;
    }

    .quote2 {
        width: 100%;
        padding: 20px 20px 40px;
    } 

    #contentw-2 #intro-2 .quote2 {
        margin-top: 100px;
    }

    
    .quote2 .left .wrapper-img  {
        margin-top: -56px;
    }
    
    .quote2 .left .wrapper-img .bg-img-quote {
        width: 80px !important;
        height: 80px !important;
    }
    
    .quote2 .left img {
        width: 80px;
        margin-top: -56px;
    }

    .quote2 .quote-close {
        bottom: -29px;
        width: 50px;
        right: 20px;
    }

    #contentw-2 #intro-3 {
        margin-top: 40px;
        padding-top: 60px;
        padding-bottom: 40px;
    }

    #contentw-2 #intro-3 .section-content {
        gap: 40px;
    }

    #contentw-2 #intro-3 .section-desc {
        margin-top: 20px;
    }

    #contentw-2 #intro-3 .section-content .left img {
        width: 250px;
        max-width: 80%;
    }
    
    /* -------------------- WHAT WE DO END : R&D END -------------------- */    

    /* -------------------- WHAT WE DO END : TEACHER TRAINING -------------------- */   
    #contentw-3 #intro-2 .left img {
        width: 250px;
        max-width: 90%;
        margin: 0 auto;
    } 

    #contentw-3 #intro-2 .section-content {
        gap: 40px;
    }
     
    #contentw-3 #intro-3 .container .section-content {
        padding: 20px !important;
    }

    #contentw-3 #intro-3 .bottom {
        margin: 30px 0 0px;
    }

    #contentw-3 #intro-3 {
        margin: 40px 0 0px;
        padding-bottom: 50px;
    }

    
    #contentw-3 #intro-1 .quote2 {
        margin-top: 60px !important;
    }

    #contentw-3 #intro-2 {
        margin-top: 60px;
    }

    #contentw-3 #intro-4 {
        padding-top: 30px !important;
    }
    
    /* -------------------- WHAT WE DO END : TEACHER TRAINING END -------------------- */ 

    /* -------------------- WHAT WE DO END : PUBLICATION -------------------- */ 
    .pub-list .desc {
        text-align: justify !important;
    }

    .quote3 .bg-img-quote {
        width: 120px !important;
        height: 120px !important; 
    }

    .bg-img-quote,
    .quote1 .main-image .bg-img-quote { 
        width: 106px !important;
        height: 106px !important; 
    }
    /* -------------------- WHAT WE DO END : PUBLICATION END -------------------- */ 

    /* -------------------- WHAT WE DO END : SCHOOL MANAGEMENT -------------------- */ 
    #contentw-3 #intro-3 #book-cover img {
        width: 200px;
        margin: 0 auto;
    }
    /* -------------------- WHAT WE DO END : SCHOOL MANAGEMENT END -------------------- */ 

    /* -------------------- ANNUAL EVENT : PARENT CONFRENCE  -------------------- */
    #content-annual-3 #intro-1 {
        padding-top: 40px !important;
    }

    .quote4 img {
        width: 106px !important;
    }

    #content-annual-3 #intro-1 .title-h4 {
        font-size: 12px !important;
        line-height: 18px;
    }

    #content-annual-3 #intro-1 .quote4 .text {
        margin-bottom: 20px !important;
    }
    
    .quote4 {
        padding-bottom: 40px !important;
    }

    #content-annual-3 #intro-2 .title-h4 br {
        display: none !important;
    }

    #content-annual-3 #intro-2 .right, #content-annual-3 #intro-3 .bottom .right {
        margin-top: 20px !important;
    }

    #content-annual-3 #intro-3 {
        margin-top: 60px !important;
        padding-bottom: 60px !important;
    }
    /* -------------------- ANNUAL EVENT : PARENT CONFRENCE END -------------------- */

    /* -------------------- PAGE NOT FOUND -------------------- */
    .title-62 {
        font-size: 22px !important;
        line-height: 30px !important;
    }

    .title-32 {
        font-size: 12px !important;
        line-height: 20px !important;
    }

    #page-not-found ul {
        padding-left: 20px;
    }

    #page-not-found .section-desc div {
        margin: 20px 0 30px !important;
    }

    .img-404 {
        margin: 40px auto 0 !important;
        width: 250px !important;
    }

    #page-not-found .section-title {
        margin-top: 22px !important;
    }
    /* -------------------- PAGE NOT FOUND END -------------------- */

    /* -------------------- SCHOOL NETWORK  -------------------- */
    #intro-1-sn {
        padding: 25px 0 30px !important; 
    }
    
    #content-1-sn .container {
        gap: 10px !important;
    }
    /* -------------------- SCHOOL NETWORK END -------------------- */

    /* -------------------- CONTACT -------------------- */
    #cu-intro .container form .info .infoData .info-le .lokasi, .email {
        align-items: start !important;
    }
    /* -------------------- CONTACT END -------------------- */

      /* -------------------- ANNUAL EVENT : NEWS -------------------- */
      #news-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .news-sm.social-media a {
        width: 34px !important;
        height: 34px !important;
    }

    .news-sm.social-media a img {
        width: 15px;
    }

    .news-sm.social-media .container {
        display: flex;
        justify-content: end;
    }

    .news-sm.social-media {
        top: 15px !important;
    }

    #news-list .item .body {
        margin: 15px 0 25px;
        height: auto;
        width: 100%;
    }

    #content-annual-4 .arrow-wrapper img {
        width: 30px;
    }

    #content-annual-4 #intro-1 h1 {
        font-size: 20px;
        line-height: 20px;
    }

    #content-annual-4 #intro-1 .title-f28 {
        font-size: 16px !important;
    }
    /* -------------------- ANNUAL EVENT : NEWS END -------------------- */

       /* -------------------- ANNUAL EVENT : NEWS DETAIL -------------------- */
  
       #news-detail ul { 
        font-size: 12px !important;
        flex-wrap: wrap;
        gap: 4px;
    }

    #news-detail .title-f40 {
        font-size: 20px;
        line-height: 25px;
    }

    #news-detail .breadcrumb {
        padding: 25px 0 40px;
    }

    #news-detail .news-info {
        margin: 20px 0 30px;
    }
    /* -------------------- ANNUAL EVENT : NEWS DETAIL END -------------------- */

}
@media screen and (max-width:500px) { 

    /* -------------------- HOME -------------------- */
    #home-intro-1 {
        padding: 20px 15px 40px;
    }

    #slider-home .slider-bg {
        /* height: 348px !important; */
        height: 240px !important;
    }

    #banner .slider-counter {
        font-size: 9px;
    }

    #banner .slider-counter .current {
        width: 24px !important;
        height: 24px !important;
    }

    #slider-home .title-h2 {
        font-size: 24px !important;
        line-height: 27px !important;
    }

    #slider-home .slider-inner {
        margin-bottom: 60px;
        width: 80%;
    }
    
    #slider-home .subtitle {
        /* width: 57%; */
        width: 100%;
    }
    
    #slider-home .subtitle br {
        display: none;
    }

    .title-h4 {
        font-size: 12px;
    }

    #slider-home .slider-bg {
        height: 348px;
    }

    /* -------------------- HOME END -------------------- */
}


@media screen and (max-width:375px) {
    /* -------------------- HOME  -------------------- */
    #slider-home .slider-inner {
        width: 90% !important;
    }
    /* -------------------- HOME END -------------------- */
} 

@media screen and (max-width:460px) {
    
    footer .cta .btn-rounded {
        font-size: 8px !important;
        padding: 2px 8px !important;
    }

    
    footer .mid .left .partner > div:nth-child(1) img {
        width: 33px !important;
    }

    footer .mid .left .partner > div:nth-child(2) img {
        width: 106px !important;
    }

    
    footer h6 {
        margin-top: 0px !important;
        font-size: 8px !important;
        margin-bottom: 13px !important;
    }

    
    .footer-info a .text {
        line-height: 12px !important;
        font-size: 8px !important;
    }
    
}