body {
    overflow-x: hidden;
    background-color: #f4f4f4;
    color: #333;
}
.ids {
    .section {
        box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.15);
        -webkit-box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.15);

        @media (max-width: 769px) {
            h2 {
                font-size: 2.5em;
            }
        }

        &.drink {
            .category {
                border-top: 1px solid #ffffff40;

                .category-items {
                    .item {
                        border-top: 1px solid #ffffff40;

                        &:first-child {
                            border-top: 0;
                        }
                    }
                }
            }
        }
    }
    .category {
        @media (max-width: 769px) {
            h3 {
                font-size: 3em;
                margin-top: 0.1em;
                margin-bottom: 0.2em;
            }
        }
    }
    .catering,
    .menu {
        margin: 0 auto;
    }
    header {
        position: relative;
        display: flex;
        justify-content: space-between;
        gap: 0.3em;
        width: 100%;
        padding: 1em 1em;

        @media (max-width: 768px) {
            position: relative;
        }

        /* &:after {
            content: "";
            position: absolute;
            top: 3.4em;
            left: 0;
            width: 100%;
            height: 1px;
            background: #2d90ce;
        } */
        .logo {
            img {
                height: 6em;
                width: auto;
                margin-top: -0.3em;
                margin-left: -0.3em;

                @media (max-width: 768px) {
                    margin-top: -0.6em;
                    margin-left: -0.4em;
                    height: 5em;
                }
            }
        }
        .social {
            display: flex;
            gap: 0.2em;
            font-size: 0.85em;

            img {
                max-width: 2em;
                opacity: 0.8;
                transition: opacity 0.3s ease;
                margin-top: -0.15em;

                &:hover {
                    opacity: 1;
                    transition: opacity 0s ease;
                }
            }
            .phone {
                font-weight: 500;
                background-color: #f0f0f0;m
                padding: 0.3em 0.5em 0.4em 0.5em;
                border-radius: 0.3em;
                margin-left: 0.4em;
            }
        }
        .nav {
            display: flex;
            gap: 2em;
            text-align: center;
            margin-top: 0.25em;

            @media (max-width: 768px) {
                gap: 0.8em;
                margin-left: 0;
            }

            p {
                font-family: "ST Brigantina", serif;
                font-size: 3em;
                letter-spacing: 0.15em;
                background-color: #0098fe;
                padding-left: 0.15em;

                @media (max-width: 768px) {
                    font-size: 2.5em;
                }

                &.current {
                    text-decoration: wavy underline;
                    text-decoration-color: rgb(82, 233, 66);
                    text-decoration-thickness: 0.05em;
                    text-underline-offset: 0.6em;
                    color: #fff;
                }
            }
            a {
                color: #fff;
                text-decoration: none;

                &:hover {
                    text-decoration: wavy underline;
                    text-decoration-color: rgb(82, 233, 66);
                    text-decoration-thickness: 0.05em;
                    text-underline-offset: 0.2em;
                }
            }
            .logo {
                a {
                    color: #0098fe;
                    text-decoration: none;
                    transition: opacity 0.3s ease;
                    &:hover {
                        opacity: 0.3;
                        transition: opacity 0s ease;
                    }
                }
            }
        }
    }
    .ids__gallery {
        margin-top: 0.75em;
    }
    h1 {
        color: #107ec2;
        font-weight: 400;
        margin-top: -0.2em;
        margin-bottom: 0em;
        font-size: 6.5em;
        text-align: center;

        @media (max-width: 768px) {
            font-size: 4.5em;
        }
    }
    h2 {
        font-size: 4em;
        font-weight: 400;
        margin-top: -0.2em;
        margin-bottom: 0.2em;
        letter-spacing: 0.08em;
    }
    p {
        font-family: "Rubik";
    }

    footer {
        margin-top: 4em;
        margin-bottom: 3em;

        text-align: center;
    }

    .third-to-one {
        display: flex;
        gap: 0.4em;

        @media (max-width: 768px) {
            flex-wrap: wrap;
        }
        .third {
            width: 70%;

            @media (max-width: 768px) {
                width: 100%;
            }
        }
        .one {
            width: 30%;

            @media (max-width: 768px) {
                width: 100%;
            }
        }
    }
    .main-illustration {
        position: relative;

        &::after {
            top: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            background: #ededed;
            z-index: 4;
            content: "";
            opacity: 0.1;
        }
    }
}