footer{
    padding: 70px 0;
    background-color: var(--secondary-color);
}
footer h2{
    font-size: 50px;
    text-align: center;
}
.grid_container{
    margin: 60px auto;
    width: 1500px;
    max-width: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 300px 300px;
    gap: 15px;
    grid-template-areas: 
    "item3 item3 item3 item3"
;
}

.grid_item{
    background-color: var(--light-secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    gap: 50px;

}
.grid_item img{
    height: 150px;
    width: 150px;
}

#item3{
    grid-area: item3;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

@media(max-width: 1300px){
    .grid_container{
        grid-template-columns: 1fr;
        grid-template-rows: 300px;
        grid-template-areas: 
       "item3";
    }
    .grid_portfolio{
        grid-template-columns: 1fr;
        grid-template-rows: 300px;
        grid-template-areas: 
        "pic1 pic1 pic1"
        "pic2 pic2 pic2"
        "pic3 pic3 pic3"
        "pic4 pic4 pic4"
        "pic5 pic5 pic5"
        "pic6 pic6 pic6";
    }
}
@media(max-width: 900px){
    .grid_container{
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "item3";
    }
    .grid_portfolio{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: 
        "pic1 pic1"
        "pic5 pic5"
        "pic2 pic4"
        "pic3 pic3";
    }
}
@media(max-width: 650px){
    footer h2{
        font-size: 9vw;
    }
    .grid_item img{
        height: 100px;
        width: 100px;
    }
    .grid_item h3{
        font-size: 24px;
    }
    .grid_pic img{
        height: 100px;
        width: 100px;
    }
}
.bexaly{
    height: 600px;
    width: 600px;

    max-height: 80vw;
    max-width: 80vw;

    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.bexaly img{
    width: 100%;
}

.grid_portfolio{
    margin: 60px auto;
    width: 1500px;
    max-width: 90%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 300px 300px 300px 300px 300px 300px;
    gap: 15px;
    grid-template-areas: 
    "pic1 pic1 pic1"
    "pic1 pic1 pic1"
    "pic2 pic2 pic2"
    "pic2 pic2 pic2"
    "pic3 pic3 pic3"
    "pic3 pic3 pic3"
    "pic4 pic4 pic4"
    "pic4 pic4 pic4"
    "pic5 pic5 pic5"
    "pic5 pic5 pic5"
    "pic6 pic6 pic6"
    "pic6 pic6 pic6";
}

.grid_pic{
    background-color: var(--light-secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    gap: 50px;

}
.grid_pic img{
    max-width: 800px;
    max-height: 600px;
    height: auto;
    width: auto;
}
#pic1{
    grid-area: pic1;
}
#pic2{
    grid-area: pic2;
}
#pic3{
    grid-area: pic3;
}
#pic4{
    grid-area: pic4;
}
#pic5{
    grid-area: pic5;
}
#pic6{
    grid-area: pic5;
}

#portfolio_section{
    padding: 100px 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap:wrap;
}