@media (max-width:1024px) {
    .article-1>.container>div{
        padding: 40px 30px;
    }
    .article-2>.content{
        padding: 0px 30px;
    }
    .article-2>.content>h2{
        font-size: 2.4rem;
        transform: translateY(20px);
    }
    .article-2>.content>p{
        margin-bottom: 0px;
        transform: translateY(-20px);
    }
    .article-3>h2{
        font-size: 3rem;
        width: 70%;
    }
}
@media (max-width:900px) {
    .header_div{
        height: 100vh;
    }
    .header_div>header{
        grid-template-columns: 1fr 1fr;
    }
    .header_div>header>nav{
        display: none;
    }
    .header_div>header>.btn{
        display: none;
    }
    .menu-btn{
        display: flex;
    }
    .header_div>.content{
        justify-content: start;
    }
    .header_div>.content>h2{
        font-size: 4rem;
        text-align: center;
        margin-top: 30px;
    }
    .article-1>.container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 30px;
    }
    .article-1>.container>:nth-child(3){
        grid-column: span 2;
        width: 50%;
        margin: 0 auto;
    }
    .article-1>.container>div{
        padding: 50px 40px;
    }

    .article-2{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 2fr 1fr 1fr;
    }
    .article-2>.content{
        grid-column: span 2;
        grid-row: span 1;
    }

    .article-8{
        flex-direction: column;
    }
    .article-8>img{
        width: 100%;
    }
    .article-8>.content{
        width: 100%;
        height: 400px;
        padding: 50px;
    }
}
@media (max-width:650px) {
    .header_div>.content>h2{
        font-size: 3rem;
    }
    .article-1>.container{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 30px;
    }
    .article-1>.container>:nth-child(3){
        grid-column: span 1;
        width: 100%;
    }
    .article-1>.container>div{
        padding: 30px 20px;
    }
    .article-1>.logos{
        grid-template-columns: 1fr 1fr;
        grid-template-rows:  1fr 1fr;
    }

    .article-2>.content>h2{
        font-size: 1.6rem;
        transform: translateY(10px);
    }
    .article-2>.content>p{
        transform: translateY(-10px);
    }

    .article-3>h2{
        font-size: 2.5rem;
        width: 80%;
    }

    
    .article-5{
        height: 150vh;
    }
    .article-5>.text>h2{
        margin-bottom: 15px;
        font-size: 3rem;
    }
    .article-5>.container{
        grid-template-columns: 1fr 1fr;
        margin: 20px 0px;
        grid-template-rows:  1fr;
        column-gap: 20px;
        row-gap: 150px;
        padding: 0px 20px;
    }
    .article-5>.container>:nth-child(3){
        width: 50%;
        margin: 0 auto;
        grid-column: span 2;
    }

    .article-6{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }


    .article-7{
        padding: 100px 30px;
    }
    .article-7>.container{
        gap: 20px;
    }

    .article-9{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50px 0;
        gap: 30px;
    }
    .article-9>.box{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .footer>footer{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        column-gap: 20px;
        row-gap: 50px;
    }
}
@media (max-width:450px) {
    .my-btn{
        padding: 13px 20px;
    }
    .header_div>header>.logo>img{
        width: 100px    ;
    }
    .header_div>.content>h2{
        font-size: 2rem;
    }
    .article-1>.logos{
        grid-template-columns: 1fr ;
        grid-template-rows: 90px 90px 90px 90px;
    }

    .article-2{
        grid-template-columns: 1fr !important;
        grid-template-rows: 2fr 1fr 1fr 1fr;
    }
    .article-2>.content{
        grid-column: span 2;
    }
    .article-2>[class^="box"]{
        grid-column: span 2;
    }


    .article-3>h2{
        font-size: 1.5rem;
    }

    .article-4>h2{
        font-size: 2rem;
    }
    .article-4>.icon{
        padding: 15px;
        font-size: 1rem;
    }

    .article-5{
        height: 150vh;
        margin: 30px 0px;
    }
    .article-5>.text>h2{
        margin-bottom: 15px;
        font-size: 2rem;
    }
    .article-5>.text>p{
        font-size: 12px;
    }
    .article-5>.container{
        grid-template-columns: 1fr;
        margin: 20px 0px;
        grid-template-rows:  1fr 1fr;
        column-gap: 20px;
        row-gap: 30px;
        padding: 0px 20px;
    }
    .article-5>.container>:nth-child(3){
        width: 100%;
        grid-column: span 1;
    }
    .article-5>.container>div{
        height: 100%;
    }
    .article-5>.container>div>h2{
        font-size: 3rem;
    }


    .article-6{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }


    .article-7>.title>h2{
        font-size: 2rem;
    }
    .article-7>.container{
        grid-template-columns: 1fr ;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }
    .article-7>.container>.person>p{
        padding: 0;
    }

    .article-8>.content{
        width: 100%;
        height: 500px;
        padding: 30px;
    }
    .footer>footer{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        row-gap: 20px;
    }
    .footer>footer>div>h2{
        font-size: 20px;
    }
}