.container{
    margin: auto;
    max-width: 100%;
    padding: 0 10px;
}

@media screen and (min-width: 576px){
    .container{
        max-width: 540px;
    }

}

@media screen and (min-width: 768px){
    .container{
        max-width: 720px;
    }
}


@media screen and (min-width: 992px){
    .container{
        max-width: 960px;
    }


}

@media screen and (min-width: 1200px){
    .container{
        max-width: 1140px;
    }
}

@media screen and (min-width: 1400px){
    .container{
        max-width: 1320px;
    }
}


@media screen and (max-width: 1200px){
    .navigation, .support-btn{
        display: none;
    }

    .header-action, .menu-nav{
        width: 40px;
        justify-content: end;
    }

    .menu-nav{
        display: block;
    }

    .banner-text{
        max-width: 450px;
    }

    .banner-text-subtitle{
        font-size: 12px;
    }

    .banner-text-title{
        font-size: 30px;
        margin-bottom: 10px;
    }

    .banner-text-desc{
        font-size: 12px;
    }

    .primary-button{
        letter-spacing: 0;
        text-transform: capitalize;
    }

}

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

    .section{
        padding: 30px 0;
    }

    .header-top{
        height: 35px;
        line-height: 35px;
    }
    .sv-home-grid{
        grid-template-columns: repeat(2,1fr);
    }

    .sv-home-icon{
        height: 80px;
    }

    .header-top-social{
        display: none;
    }

    .header-top-text, .header-top-info{
        font-size: 10px;
    }

    .header-top-info i{
        font-size: 11px;
    }

    .header-top-info::after{
        display: none;
    }

    .banner-text-title {
        font-size: 26px;
        max-width: 350Px;
    }

    .wrapper-introduce{
        padding-top: 10px;
    }

    .wrapper-title .subtitle{
        font-size: 12px;
    }

    .wrapper-title .title{
        font-size: 36px;
    }

    .projects-new{
        grid-template-columns: 1fr;
    }

    .projects-nav-list{
        flex-wrap: wrap;
    }

    .projects-body{
        grid-template-columns: repeat(2,1fr);
    }

    .activities-body{
        grid-template-columns: repeat(3,1fr);
    }

    .contact-body{
        grid-template-columns: 1fr;
    }

    .banner-text-desc, .box-button {
        display: none;
    }

    .introduce-block .intro-inner:nth-child(1){
        grid-area: image;
    }
    .introduce-block .intro-inner:nth-child(2){
        grid-area: text;
    }

    .introduce-block{
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "image";
    }

    .wrapper-first{
        flex-direction: column;
    }
    .first-context, .first-image{
        width: 100%;
    }

    .map-vietnam > svg{
        width: 85%;
    }

    .ft-row{
        flex-direction: column;
        gap: 40px;
    }

    .copyright-content{
        flex-direction: column;
        flex-direction: column-reverse;
        gap: 20px;
    }

    .ft-col{
        width: 100%;
    }

    .block-mission{
        grid-template-columns: 1fr;
    }

    .block-mission-2 .mission-content:nth-child(1){
        grid-area: image;
    }
    .block-mission-2 .mission-content:nth-child(2){
        grid-area: text;
    }

    .block-mission-2{
        grid-template-areas:
            "text"
            "image";
    }

    .testimonials{
        flex-direction: column;
        gap: 30px;
        flex-direction: column-reverse;
    }

    .testimonials-left, .testimonials-right{
        width: 100%;
    }

}

@media screen and (max-width: 768px){
    .header-top-text{
        display: none;
    }

    .header-top-main{
        width: 100%;
        justify-content: space-between;
    }

    .logo{
        height: 60px;
    }

    .logo img{
        width: 80px;
    }

    .banner-text-title {
        font-size: 24px;
        max-width: 320Px;
    }

    .projects-body{
        grid-template-columns: repeat(1,1fr);
    }

    .activities-body{
        grid-template-columns: repeat(2,1fr);
    }
}

@media screen and (max-width: 576px){
    .logo{
        gap: 5px;
    }
    .logo img{
        width: 70px;
    }

    .logo-text h4{
        font-size: 13px;
    }
    .logo-text p{
        font-size: 10px;
    }
    
    .banner-text{
        max-width: 200px;
    }
   .banner-text-subtitle {
        font-size: 9px;
    }
    .banner-text-title {
        font-size: 15px;
    }

    .wrapper-title{
        margin: 20px 0;
    }

    .wrapper-title .title{
        font-size: 30px;
    }

    .introduce__list{
        grid-template-columns: 1fr;
    }

    .intro-inner-small{
        max-width: 190px;
    }

    .intro-inner-counter{
        top: 35px;
        min-width: 110px;
    }

    .ct-counter-number{
        font-size: 36px;
    }

    .ct-counter-title{
        font-size: 20px;
    }

    .sv-home-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .introduce-more{
        font-size: 14px;
        padding: 10px 32px;
    }

    .intro-list{
        grid-template-columns: repeat(2,1fr);
        justify-items: center;
    }

    .intro-item{
        width: 130px;
    }

    .intro-item__icon>img{
        width: 60px;
    }

    .map-vietnam > svg{
        max-height: 500px;
    }

    .projects-nav-list{
        gap: 10px;
    }
    .projects-nav-item{
        padding: 12px 22px;
        font-size: 12px;
    }

    .default-btn{
        padding: 12px 30px;
        font-size: 13px;
    }

    .activities-body{
        gap: 8px;
    }

    .partner-data{
        grid-template-columns: repeat(3,1fr);
    }

    .group-input{
        gap: 10px;
        margin-bottom: 10px;
    }

    .nav_mobile-list{
        width: 100%;
    }

    .activities-data{
        left: 8px;
    }

    .activities-subtitle{
        margin-bottom: 5px;
    }

    .activities-title{
        font-size: 14px;
    }
	
	.mission-pad{
        padding: 30px 10px 0;
    }
}