@media (max-width:1366px) {

}
@media (min-width: 768px) and (max-width: 1024px){

/* .container{padding: 0 30px} */
.wrapper-main{padding-top: 100px}
header .logo-area{padding: 20px 0; height: 100px;}
header .logo-area .logo{width: 110px; margin-left: -55px; top: -3px;}
header .logo-area ul.main-menu{display: none}
header .logo-area .container{height: 42px}
header .btn-menu{display: block; margin: 10px 0 0 0px}
header.fixed .logo-area .logo{width: 110px; margin-left: -55px; top: -3px;}
header.fixed .logo-area{height: 100px;}

.slider-area{height: 420px}
.slider-area .main-slider{height: 420px}
.slider-area .main-slider .item{height: 420px}
.slider-area .main-slider .content-area{height: 100%; padding: 0 20px}
.slider-area .main-slider .content-area h1{font-size: 28px; line-height: 32px; margin: 0 0 10px 0;}

.about-section{padding: 50px 0 0 0}
.about-section .container{padding: 0 30px}
.about-section .about-content{display: block; z-index: 4;}
.about-section .about-content .leftside{width: 100%; height: 310px; position: relative;}
.about-section .about-content .rightside{width: 100%; padding: 30px 0 0 0; overflow: hidden;}
.about-section .about-content .rightside h2 {font-size: 32px; margin: 0 0 30px 0; line-height: 38px;}
.about-section .about-content .rightside .line-animation::before {right: 0px;}
.about-section .about-content .rightside .line-animation::after {left: 0;margin-left: 0px;}

.number-section {padding: 60px 0;}

.multi-nationalities  {padding: 0 0 60px 0;}
.multi-nationalities::before {background-size: cover; top: -200px;}
.multi-nationalities .main-slider-block .leftside {width: 50%;}
.multi-nationalities .main-slider-block .leftside h2 {font-size: 32px; line-height: 38px; width: 220px;}
.multi-nationalities .main-slider-block .slider-block {width: 50%;}
.multi-nationalities .main-slider-block .slider-block .nationalitie-slider {height: 232px;}
.multi-nationalities .main-slider-block .item{height: 232px; position: relative;}

.news-section{padding-bottom: 30px}
.news-section .container{padding: 0 30px}
.news-section .title-area h2{font-size: 32px; line-height: 38px;}
.news-section .news-block .news-img{height: 180px;}

footer .footer-main::before {bottom: 420px;}
footer .footer-main .footer-block {flex-wrap: wrap; padding-bottom: 40px;}
footer .footer-main .footer-block .info-area,
footer .footer-main .footer-block .link-area,
footer .footer-main .footer-block .contact-area,
footer .footer-main .footer-block .contact-form {width: 50%; border-right:none; min-height: auto; padding: 40px 40px 0 0;}
footer .footer-main .footer-block .info-area p,
footer .footer-main .footer-block .contact-area p {padding: 0 90px 0 0;}
footer .footer-main .copyright{padding: 25px 0}

.inner-title-area .container{padding: 0 30px}
.inner-title-area .inner-area{height: 340px; }
.inner-title-area .inner-area h1 {font-size: 42px; line-height: 48px;}

.side-content-area {padding: 60px 0 40px 0;}
.side-content-area .leftside {width: 30%;}
.side-content-area h2 {font-size: 32px; line-height: 38px;}
.side-content-area .rightside {width: 70%;}

.ceo-section .about-content{display: block; z-index: 4;}
.ceo-section .about-content .leftside{width: 100%; height: 310px; position: relative;}
.ceo-section .about-content .rightside{width: 100%; padding: 30px 0 0 0; overflow: hidden;}
.ceo-section .about-content .rightside h2 {font-size: 32px; margin: 0 0 30px 0; line-height: 38px;}
.ceo-section .about-content .rightside .line-animation::before {right: 0px;}
.ceo-section .about-content .rightside .line-animation::after {left: 0;margin-left: 0px;}

.mission-statement {padding: 0 0 60px 0;}
.mission-statement .mission-statement-block{display: block; z-index: 2;}
.mission-statement .mission-statement-block .left-content {width: 100%; padding: 25px}
.mission-statement .mission-statement-block .left-content h2 {font-size: 32px; line-height: 38px;}
.mission-statement .mission-statement-block .right-photo {width: 100%; height: 300px;}
.mission-statement .mission-statement-block .right-photo img{height: 100%; width: 100%; object-fit: cover;}

.values-section {padding-bottom: 10px;}
.values-section h2 {font-size: 32px; line-height: 38px;}


.charity-number-section {padding: 0 0 60px 0;}

.quote-section .quote-box {padding: 70px 180px;}
.quote-section .quote-box h2 {font-size: 32px; line-height: 38px;}

.gcf-section {padding-top: 60px; padding-bottom: 55px;}
.gcf-section .title-area h2 {font-size: 32px; line-height: 38px; width:180px ;}
.gcf-section .news-block .news-img {height: 200px;}

.companies-list {padding: 60px 0;}
.companies-list .companies-block {margin-bottom: 60px;}
.companies-list .companies-block .leftside {height: 415px;}
.companies-list .companies-block .rightside{padding: 0px 0 0 30px} 
.companies-list .companies-block .rightside h2 {font-size: 32px; line-height: 38px; width: 100%;}
.companies-list .companies-block .rightside p {display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;}
.companies-list .companies-block:nth-of-type(2n+2) .rightside  {padding-right: 30px;}

.companies-list .coming-soon .content-area {padding: 0 45px;}
.companies-list .coming-soon .content-area .logo-box {width: 180px; margin: 0 auto;}
.companies-list .coming-soon .content-area .logo-box img {width: 100%;}
.companies-list .coming-soon h3 {font-size: 28px;}

.news-page {padding: 60px 0 0 0;}
.news-page h2 {font-size: 32px; line-height: 38px;}
.news-page .news-block {margin-bottom: 40px;}
.news-page .pagination {margin-top: 10px;}
.news-page.media-updates {padding: 60px 0;}

.global-offices-page {padding:60px 0 30px 0;}
.global-offices-page .office-block {margin: 0 0 40px 0;}
.global-offices-page .office-block .detail .info {font-size: 18px;}
.global-offices-page .line {margin: 10px 0 50px 0;}

.map-section h2 {font-size: 32px; line-height: 38px;}


}

/** responsive **/
@media (max-width: 767px) {
    .container{padding: 0 30px}
    .wrapper-main{padding-top: 100px}
    header .logo-area{padding: 20px 0; height: 100px;}
    header .logo-area .logo{width: 110px; margin-left: -55px; top: -3px;}
    header .logo-area ul.main-menu{display: none}
    header .logo-area .container{height: 42px}
    header .btn-menu{display: block; margin: 10px 0 0 0px}
    header.fixed .logo-area .logo{width: 110px; margin-left: -55px; top: -3px;}
    header.fixed .logo-area{height: 100px;}

    .slider-area{height: 420px}
    .slider-area .main-slider{height: 420px}
    .slider-area .main-slider .item{height: 420px}
    .slider-area .main-slider .content-area{height: 100%; padding: 0 20px}
    .slider-area .main-slider .content-area h1{font-size: 20px; line-height: 24px; margin: 0 0 10px 0;}
    .slider-area .main-slider::before {content: none}
    .slider-area .main-slider .owl-prev,
    .slider-area .main-slider .owl-next{display: none}
    .slider-area .main-slider .content-area p{min-height: 60px; line-height: 20px;}

    .about-section{padding: 50px 0 0 0}
    .about-section .container{padding: 0 30px}
    .about-section .about-content{display: block;}
    .about-section .about-content .leftside{width: 100%; height: 310px;}
    .about-section .about-content .rightside{width: 100%; padding: 30px 0 0 0; overflow: hidden;}
    .about-section .about-content .rightside .line-animation::before {right: 0px;}
    .about-section.is-visible .about-content .rightside .line-animation::after{left: 0%; margin-left: 0px; animation: rightcircle 4s;  transition: all .5s ease;}

    .number-section{padding: 40px 0 0 0}
    .number-section .d-flex{flex-wrap: wrap; align-items: baseline;}
    .number-section .number-box{width: 50%; margin-bottom: 40px}

    .multi-nationalities{padding-bottom: 40px}
    .multi-nationalities .container{padding: 0 30px}
    .multi-nationalities .main-slider-block{display: block;}
    .multi-nationalities .main-slider-block .leftside{width: 100%; padding-right: 0; padding-bottom: 36px;}
    .multi-nationalities .main-slider-block .slider-block{width: 100%}
    .multi-nationalities .main-slider-block .item{height: 232px; position: relative;}
    .multi-nationalities .main-slider-block .item img {height: 100%; width: 100%; -webkit-transition: 0.5s; transition: 0.5s; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; object-fit: cover;}
    .multi-nationalities .owl-dots{display: none}

    .news-section{padding-bottom: 30px}
    .news-section .container{padding: 0 30px}
    .news-section .title-area{display: block; padding-bottom: 0;}
    .news-section .title-area::before {bottom: 50px}
    .news-section .title-area h2{font-size: 35px; line-height: 35px; margin: 0px 0px 60px 0px}
    .news-section .d-flex{display: block !important; margin: 0;}
    .news-section .news-block {padding: 0; width: 100%; margin-bottom: 30px}

    footer .footer-main .footer-block{display: block; border: none}
    footer .footer-main .footer-block .info-area,
    footer .footer-main .footer-block .link-area,
    footer .footer-main .footer-block .contact-area,
    footer .footer-main .footer-block .contact-form{width: 100%; border-right: none; min-height: auto; padding: 20px 0px}
    footer .footer-main .copyright{padding: 15px 0 25px 0}
    footer .footer-main::before {bottom: 760px;}

    .inner-title-area .container{padding: 0 30px}
    .inner-title-area .inner-area{height: 374px; }
    .inner-title-area .inner-area h1 {font-size: 38px; line-height: 48px;}
    .inner-title-area .inner-area .full {max-width: 220px;}

    .side-content-area{padding: 60px 0 20px 0}
    .side-content-area .container{display: block;}
    .side-content-area .leftside{width: 100%}
    .side-content-area .rightside{width: 100%}
    .side-content-area h2{margin-bottom: 20px; font-size: 35px; line-height: 35px;}

    .ceo-section .about-content{display: block;}
    .ceo-section .about-content .leftside{width: 100%; height: 234px}
    .ceo-section .about-content .rightside{width: 100%; padding: 25px 0 0 0}
    .ceo-section .about-content .rightside .line-animation::before {right: 0px}
    .ceo-section .about-content.is-visible .rightside .line-animation::before {width: 100%;}
    
    .ceo-section .about-content .rightside h2 {font-size: 38px; line-height: 36px; color: #fff; margin: 0 0 34px 0;}

    @keyframes line-animation{
        0%{
            width: 0%;
        }
        100%{
            width: 100%;
        }
    }

    .mission-statement{padding-bottom: 40px}
    .mission-statement .mission-statement-block{display: block;}
    .mission-statement .mission-statement-block .left-content {width: 100%; padding: 25px}
    .mission-statement .mission-statement-block .right-photo {width: 100%; height: 300px;}
    .mission-statement .mission-statement-block .right-photo img{height: 100%; width: 100%; object-fit: cover;}

    .values-section .value-block{margin-bottom: 30px}
    .values-section .value-block p{padding: 0px}

    .charity-number-section{padding: 0px}
    .charity-number-section .d-flex{flex-wrap: wrap; align-items: baseline;}
    .charity-number-section .number-box {width: 50%; margin-bottom: 40px}

    .quote-section .quote-box{padding: 60px 25px}

    .gcf-section{padding: 35px 0}

    .gcf-section .title-area{display: block; padding-bottom: 0;}
    .gcf-section .title-area::before {bottom: 50px}
    .gcf-section .title-area h2{font-size: 35px; line-height: 35px; margin: 0px 0px 60px 0px}


    .detail-popup #sync2{display: none}
    .detail-popup .main-image{height: 240px}
    .detail-popup .owl-prev {position: absolute; top: auto; margin-top: 10px; z-index: 1; left: 50%; margin-left: -50px;}
    .detail-popup .owl-next {position: absolute; top: auto; margin-top: 10px; z-index: 1; right: 50%; margin-right: -50px;}
    .detail-popup h2{font-size: 32px; line-height: 36px;}
    .detail-popup .large-slider .btn-close{width: 30px; height: 30px; }
    .detail-popup .large-slider .btn-close svg{width: 100%; height: 100%}

    .companies-list{padding: 40px 0}
    .companies-list .companies-block{display: block; margin-bottom: 40px;}
    .companies-list .companies-block .leftside{width: 100%; height: 240px}
    .companies-list .companies-block .rightside{width: 100%; padding: 25px 0 0 0}
    .companies-list .companies-block .rightside h2 {font-size: 35px; line-height: 35px; width: 100%;}
    .companies-list .companies-block .rightside .line-animation::before { right: 0px}
    .companies-list .companies-block .rightside .line-animation::after {left: 0px}
    .companies-list .companies-block.is-visible .rightside .line-animation::before{width: 100%;}
    .companies-list .companies-block:nth-of-type(2n+2) .rightside{width: 100%; padding: 25px 0 0 0}
    /* .companies-list .companies-block:nth-of-type(2n+2) .rightside .line-animation::before {right: 0px;} */
    .companies-list .companies-block:nth-of-type(2n+2) .rightside .line-animation::before {left: auto; right: 0px;}
    .companies-list .companies-block:nth-of-type(2n+2) .rightside .line-animation::after {left: 0px; right: auto; margin-right: auto; margin-right: -7px}

    @keyframes rightcircle{
        0%{
            left: 100%;
        }
        100%{
            left: 0%;
        }
    }

    @keyframes left140circle{
        0%{
            left: 0%;
        }
        100%{
            left: 100%;
        }
    }

    .companies-list .coming-soon{display: block;}
    .companies-list .coming-soon .photo-area{width: 100%; height: 300px;}
    .companies-list .coming-soon .photo-area img{height: 100%; width: 100%; object-fit: cover;}
    .companies-list .coming-soon .content-area{width: 100%; padding: 30px 30px 40px 30px; text-align: center;}
    .companies-list .coming-soon h3{font-size: 30px; line-height: 30px}
    .companies-list .coming-soon .logo-box{width: 200px; margin: 0 auto;}
    .companies-list .coming-soon .logo-box img{width:100%;}

    .news-page{padding: 30px 0 0 0}
    .news-page h2{font-size: 34px; line-height: 34px}
    .news-page .news-block{margin-bottom: 20px}
    .pagination{margin: 0px}
    .news-page.media-updates{padding: 30px 0}

    .global-offices-page{padding: 40px 0}
    .global-offices-page .office-block .detail .info{font-size: 16px; line-height: 24px;}
    .global-offices-page .line{display: none}
    .global-offices-page .office-block{margin-bottom: 30px }

    .map-section .map-box{height: 500px}

    .swal-modal{width: 90%; padding: 30px 30px 40px 30px;}
    .swal-icon:first-child{margin-top: 0px;}
    .swal-text {font-size: 20px; line-height: 26px;}
    
    .error-page{text-align:center;}
    .error-page h1 {font-size: 100px; line-height: 130px;}
    .error-page h2 {font-size: 32px; line-height: 42px;}

}