@media (max-width: 1230px){
    .navigation ul{
        display: none;
    }
    .nav-btn{
        display: block !important;
        width: 20px;
    }

    .navigation ul{
        display: flex;
        flex-direction: column;
        padding: 46px 30px 0px;
        gap: 30px;
        position: fixed;
        top: 0;
        bottom: 0;
        right: -375px;
        box-shadow: 80px 0px 100px #090909;
        min-width: 375px;
        background-color: white;
        z-index: 1;
        transition: right 0.2s ease-in;
    }
    .navigation a{
        font-weight: 600;
        font-size: 34px;
        line-height: 51px;
        /* identical to box height */
        transition: color 0.1s ease-in;
        color: #828282;
    }
    .navigation.open ul{
        right: 0
    }
    .navigation.open a.active{
        color: #090909 !important;
    }
    .nav-btn{
        position: fixed;
        width: 40px;
        z-index: 9;
        top: 46px;
        right: 30px;
    }

    .header-info{
        flex-direction: column;
        margin-top: 50px;
        gap: 20px;
    }
    .header-text{
        margin-top: 0px;
    }

    .header-info img{
        align-self: center;
    }
}

@media (max-width: 700px){
    .header-text h1{
        font-size: 34px;
        line-height: 51px;
    }
    .header-text span{
        font-size: 28px;
        line-height: 42px;
    }

    .services{
        padding: 60px 0;
    }
    
    main{
        padding: 60px 0;
    }
    .portfolio-title{
        padding-bottom: 50px;
    }
    .portfolio-column{
        gap: 50px;
    }
    .portfolio-card a{
        margin-top: 30px;
    }
    .footer{
        padding: 60px 0;
    }
    .call-back{
        gap: 20px;
    }

    .social-media{
        margin: 70px 0 21px;
        gap: 50px;
    }
}