body{
    padding-left:57px !important;
}

.main-display-section {
    .container {
        .row {
            .col-md-3 {
                .meal-container {
                    cursor: pointer;
                    overflow: hidden;
                    position: relative;

                    .meal-name-container {
                        position: absolute;
                        inset: 0;
                        background-color: rgba(255, 255, 255, 0.523);
                        transform: translateY(100%);
                        transition: all 0.5s ease-out;
                    }

                    &:hover .meal-name-container {
                        transform: translateY(0);
                    }
                }

                .category-container {
                    cursor: pointer;
                    overflow: hidden;
                    position: relative;

                    .category-name-container {
                        position: absolute;
                        inset: 0;
                        background-color: rgba(255, 255, 255, 0.523);
                        transform: translateY(100%);
                        transition: all 0.5s ease-out;
                    }

                    &:hover .category-name-container {
                        transform: translateY(0);
                    }
                }

                .ingrediant-container {
                    cursor: pointer;
                    overflow: hidden;
                    position: relative;

                    .ingrediant-name-container {
                        position: absolute;
                        inset: 0;
                        background-color: rgba(255, 255, 255, 0.523);
                        transform: translateY(100%);
                        transition: all 0.5s ease-out;
                    }

                    &:hover .ingrediant-name-container {
                        transform: translateY(0);
                    }
                }
                .area-container{
                    cursor: pointer;
                }
            }

            &#searchForm {
                .col-md-5 {
                    input {
                        background-color: transparent;
                        color: white;

                        &::placeholder {
                            color: rgba(255, 255, 255, 0.6);
                        }
                    }
                }
            }

            &#contactForm {
                margin-block: 100px;
            }
        }
    }
}

.offcanvas-handle {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: white;
    padding: 5px;
    border: none;
    z-index: 1045;
    transition: transform 0.3s ease-in-out;

    button#offcanvasHandle {
        border: 0;
        background-color: transparent;

    }

    .yummy-brand {
        img {
            width: 40px;
            height: 40px;
            display: block;
            margin-inline: auto;
        }
    }

    i {
        cursor: pointer;
    }

}

.offcanvas {
    ul {
        overflow: hidden;
        margin-block: 20px;
        list-style: none;

        li {
            margin-block: 10px;

            button {
                border: 0;
                background-color: transparent;
                text-align: start;
                width: 100%;
                color: rgba(255, 255, 255, 0.8);
                transition: all 0.3s ease;

                &:hover {
                    color: rgb(85, 85, 247);
                }
            }
        }
    }
}

.offcanvas.show~.offcanvas-handle {
    transform: translateX(399px);
}

.offcanvas-handle.is-open {
    transform: translateX(399px);
}

.spinner-container{
    position: fixed;
    z-index: 2;
    inset: 0;
    background-color: rgba(0,0,0,0.523);
}
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 3px;
  background: 
    radial-gradient(farthest-side,#ffa516 95%,#0000) 50% 0/12px 12px no-repeat,
    radial-gradient(farthest-side,#0000 calc(100% - 5px),#ffa516 calc(100% - 4px)) content-box;
  animation: l6 2s infinite ;
}
@keyframes l6 {to{transform: rotate(1turn)}}

.addS{
    padding: 20px;
    position: absolute;
    bottom: 20px;
}