@media (max-width: 768px) {
    #theme-toggle{
        margin-top: 13px;
    }
    .nav-button{
        display: block;
        padding: 20px 20px;
        border: none;
        font-weight: 800;
        padding-left: 40px;
    }
    nav .nav-list{
        display:flex;
        flex-direction: column;
        flex:1;
        overflow: hidden;
        max-height: 0;
        transition: all 0.3s ease;
    }
    nav .nav-list .nav-item{
        border-bottom: solid 1px var(--color--black);
    }
    nav .nav-list .nav-item .nav-link{

    }
    nav .nav-list.active{
        max-height: 1000px;
        transition: all 0.3s ease;
    }
    .activity{
        flex-wrap: wrap;        
    }
    .activity .card{
        flex: 0 0 100%;
    }
    .page-wrapper{
        padding: 20px 30px;
    }
    .blog .blog-card{
        flex-basis: 100%;
    }
    footer{
        flex-wrap: wrap;
    }
    .location-wrapper > * {
        width: 100%;
        flex-basis:100%;
    }
    .achievement,.comment{
        flex-wrap: wrap;
        flex-basis: 100%;
    }
    .contact .contact-form{
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "name"
            "email"
            "phone" 
            "subject"
            "message";
    }
    .contact > *,
    .journey-wrapper > *,
    .stand-for-wrapper >*,
    .employee{
        flex-basis: 100%;
    }
    .order{
        padding: 0px 20px;
    }

}
@media (min-width: 768px) and (max-width:1024px) {
    .page-wrapper{
        padding: 20px 30px;
    }
    .blog .blog-card{
        flex-basis: 45%;
    }
    .contact-img{
        flex-basis: 35%;
    }
}
@media (max-width:1024px) {
    .story-1 > *{
        flex-basis: 100%;
    }
    .story-1-img{
        padding-top:50px;
    }
    .story-1-other-img{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;   
        grid-template-areas:
            "pic-a pic-b"
            "pic-c pic-d"
            "pic-c pic-d";
    }
    .menu .flex-wrapper{
        flex-wrap: wrap; 
        flex-basis: 100%;
    }
    .menu .flex-wrapper .big-pic,
    .menu .flex-wrapper ul{
        flex-basis:100%;
    } 
    .menu .flex-wrapper li{
        padding-top:20px;
        margin-left:-20px;
    }
    .order .order-item{
        flex: 0 0 50%;
    }

}