header{
    .nav{
        background-color: var(--primary-color);
        height: 30px;
    }
}
.about-container{
    height: fit-content;
    background-image: url(../public/sack2.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.about-container .overlay{
    height: 100%;
    background-color: rgb(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}
.top-section{
    display: flex;
    flex-direction: row;
    height: 256.8px;
}

.top-section .text-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 537.19px;
    background-color: var( --secondary-color);
    h1{
        font-family: "Goblin One", serif;
        font-style: normal;
        font-weight: 500;
        font-size: 40.4px;
        line-height: 55.44px;
        text-align: center;
        color: #0C2D37;
    }
}
.top-section .img-section{
    background-image: url(../public/foods/6dad7cc4db1027af1820f10e23a3d819.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 805.8px;
}
.bottom-section{
    display: flex;
    flex-direction: row;
    min-height: 256.8px;
}
.bottom-section .img-section{
    background-image: url(../public/foods/3af179a31428f8ef2344d0f3c659a599.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 537.19px;
}
.bottom-section .text-section{
    padding: 40px 48.344px 40px 48.344px ;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 705.8px;
    h1{
        font-family: "Goblin One", serif;
        font-style: normal;
        font-weight: 500;
        font-size: 40.4px;
        line-height: 55.44px;
        text-align: center;
        color: #FFFAF3;
    }
    p{
        font-family: Figtree, sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 18.2px;
        line-height: 26px;
        color: #FFFAF3;
        text-align: center;
    }
}

.map-container {
  iframe {
    width: 100%;
  }
}
@media (max-width: 768px) {
    .top-section{
        flex-direction: column;
       
    }
    .top-section .text-section{
        width: 100%;
    }
    .top-section .img-section{
        height: 500px;
        width: 100%;
    }
    .bottom-section{
        flex-direction: column;
        width: 100%;

    }
    .bottom-section .text-section{
        padding: 0;
        width: 100%;
    }
    .bottom-section .img-section{
        width: 100%;
        height: 200px;
    }
}