@media (max-width:1100px){
    header.open .logo{
        z-index: 100;
        color: var(--text-color-darker);
    }

    header nav{
        display: none;
    }

    header.open nav{
        display: grid;
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: white;
        grid-auto-rows: max-content;
        justify-items: end;
        padding: 0 40px;
        opacity: 0;
        animation: slideDown 0.6s ease-out forwards;
    }

    header .burger{
        display: block;
        width: 20px;
        position: relative;
        justify-self: end;
        cursor: pointer;
    }

    header .burger>div{
        width: 20px;
        height: 2px;
        background-color: var(--text-color-lightest);
    }

    header.open .burger>div,
    header.sticky .burger>div
    {
        background-color: var(--text-color-darker);
        transition: 0.4s ease-in-out;
    }

    header.open nav >*{
        color: var(--text-color-darker);
        animation:showMenu 0.5s linear forwards 0.4s;
        font-size: 18px;
        margin: 4px 0;
    }

    header.open nav > i{
        margin-top: 10px; 
    }

    .burger-line1{
        position: absolute;
        top: -6px;
    }

    .burger-line3{
        position: absolute;
        top: 6px;
    }

    header.open .burger-line1{
        transform:rotate(45deg) translate(4px,5px);
    }

    header.open .burger-line2{
        transform: translateX(5px);
        opacity: 0;
    }

    header.open .burger-line3{
        transform:rotate(-45deg) translate(4px,-5px);
    }

    @keyframes slideDown {
        from{
            height: 0;
            opacity: 0;
        }
        to{
            height: 100vh;
            padding-top: 80px;
            opacity: 1;
        }
        
    }

    @keyframes showMenu{
        from{
            opacity: 0;
            transform: translateY(-1vh);
        }
        to{
            opacity: 1;
            transform: translateY(0);
        }
    }

    .service-title{
        font-size: 20px;
    }

    .service-content{
        font-size: 14px;
    }

    .team-members{
        grid-template-columns: 1fr 1fr;
        row-gap: 36px;
        column-gap: 6vw;
    }
    
    .team-intro .intro{
        padding-left: 20px;
        padding-right: 20px;
    }


    .activities{
        grid-template-columns: 1fr 1fr;
        row-gap: 36px;
        column-gap: 6vw;
    }

}

@media (max-width:992px){
    .slide_caption h1{
        font-size: 48px;
    }

    .slide_caption h3{
        font-size: 18px;
    }

    .features,.services{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: unset;
    }

    .data-section{
        grid-template-columns: repeat(2,minmax(200px,auto));
        padding: 24px 0;
        height: auto;
        row-gap: 24px;
        background-size: 200% 200%;
    }

    .showcases .case-item{
        width: calc(100% / 3 );
    }

    .footer-menus{
        padding: 0 20px;
        gap: 10px;
    }

    section{
       padding-left:20px;
       padding-right:20px;

    }
}

@media (max-width:768px){
    .section ,.footer-menus{
        padding: 0 40px;
    }

    .footer-menus{
        grid-template-columns: 2fr 1fr 1fr;
        row-gap: 24px;
    }

    .contact-us{
        grid-row: 1 / 3;
    }

    .footer-menu{
        justify-self: right;
    }

    .activities{
        grid-template-columns: 1fr;
        row-gap: 36px;
    }

    .data-section{
        grid-template-columns: 1fr;
        background-size: 300%;
    }

    .team-members{
        grid-template-columns: minmax(200px,400px);
    }

    .features,.services{
        grid-template-columns: 1fr;
    }

    .showcases .case-item{
        width:calc(100vw / 2);
        height: 100px;
    }
}

@media(max-width:576px){
    .slide_caption h1{
        font-size: 28px;
    }

    .explore-btn{
        font-size: 14px;
        padding: 8px 18px;
    }

    .showcases .case-item{
        width: 100vw;
        height: 100px;
    }

    .footer-menus{
        grid-template-columns: 1fr;
    }

    .footer-menu{
        text-align: left;
        justify-self: start;
    }


}