body,
.specials {
    background: #f5f2e8;
    background-color: #f5f2e8; 
}

a {
    text-decoration: none;
    border: none !important;
    outline: none !important;
}

a:focus {
    color: inherit;
    outline: none !important;
}

.home {
    background-image: url(../img/CustomCake/home-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    height: 500px;
    padding: 60px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 40px;

    position: relative;

    margin-top: 90px;
}

.home .text-div {
    display: flex;
    width: 800px;
    flex-direction: column;
    margin: auto;
    text-align: center;
    height: 100%;
    justify-content: center;
}

.home .text-div h1 {
    color: var(--lavonne-surface, #F5F2E8);
    font-family: Raleway;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.home .text-div p {
    color: var(--lavonne-surface, #F5F2E8);
    text-align: center;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 180%;
    /* 32.4px */
}

.body {
    overflow: hidden;
}

.wrapper {
    overflow: hidden;
}

.carousels {
    overflow: hidden;
    height: 450px;
}

.imageContainer {
    display: flex;
    flex-direction: row;
    gap: 25px;
    width: 200%;
}

.imageContainer .image {
    height: 360px;
    width: 320px;
    /* background-image: url('https://images.unsplash.com/photo-1538947151057-dfe933d688d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80');
    background-size: cover; */
}

#carouselContainer{
    height: 500px !important;
}

.imageContainer .img,
.marquee_text .img {
    width: 320px;
    height: 360px;
    border-radius: 16px;
    margin-right: 24px;
    display: inline-block;
}

.marquee {
    width: 100%;
    overflow: hidden;
    background-color: #f5f2e8;
    padding-top: 40px;
    padding-bottom: 16px;
    height: 450px;
    overflow: hidden;
    white-space: nowrap;
}

.marquee_text {
    font-size: 6rem;
    font-weight: bold;
    line-height: 7rem;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.marquee_text img{
    width: 320px;
    height: 360px;
    border-radius: 16px;
    margin-right: 24px;
    display: inline-block;
}

.carousels #mergedMarquee{
    margin-top: -50px;
}

#mergedImagesMarquee {
    background-color: #f5f2e8;
    padding-top: 40px;
    padding-bottom: 16px;
    height: 500px !important;
    display: flex;
}

.marquee .js-marquee {
    margin-bottom: 20px;
}

.marquee_text {
    font-size: 6rem;
    font-weight: bold;
    line-height: 7rem;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.cake-type-btn {
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 24px;

    color: var(--lavonne-base, #412110);
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;

    margin: auto;
    background: inherit;

    width: fit-content;
    background-color: #f5f2e8;
    border: none;

}

.dropdown {
    background-color: #f5f2e8;
}

.cake-type-btn.dropdown-toggle::after {
    content: '';
    background-image: url(../img/ion_chevron-down-sharp.png);
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button-bevel;
}

/* customize */
.customize {
    background: var(--lavonne-surface, #F5F2E8);
    padding: 100px 0px;
}

.customize .max-width {
    max-width: 800px;
    padding-inline: 0px;
}

.customize .insta-logo {
    width: 28px;
    height: 28px;
}

.customize .head-div {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;

    margin-bottom: 56px;
}

.customize .head-div div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
}

.customize .head-div h1 {
    color: var(--lavonne-base, #412110);
    font-family: Raleway;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.customize .head-div h5 {
    color: var(--lavonne-base, #412110);
    font-family: Raleway;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 28px */
    max-width: 500px;
}

.customize .head-div .insta-btn {
    border-radius: 32px;
    border: 1px solid rgba(65, 33, 16, 0.32) !important;

    display: flex;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Form */
.form-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
}

.form-div h5 {
    margin-bottom: 24px;
}

.form-div .budget div {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.form-div .budget label {
    border-radius: 32px;
    border: 1px solid rgba(65, 33, 16, 0.12) !important;

    display: flex;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;

    border-radius: 32px;
    border: 1px solid rgba(65, 33, 16, 0.12);

    color: var(--lavonne-base, #412110);
    font-variant-numeric: lining-nums proportional-nums;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    width: fit-content;
}

.form-div .budget .btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    border-radius: 32px;
    background: var(--lavonne-base, #412110);

    color: var(--lavonne-surface, #F5F2E8);
    font-variant-numeric: lining-nums proportional-nums;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    padding: 8px 20px;

}

.form-div input::file-selector-button {
    font-weight: bold;
    color: rgba(65, 33, 16, 0.60);
    padding: 0.5em;
    border: none;
    border-radius: 0px;
    background: inherit !important;
    border-right: 2px solid rgba(65, 33, 16, 0.40);
    padding-bottom: 0px;
    padding-top: 0px;
}

#reference {
    width: 70%;
}

.form-div .form-control,
textarea,
.choose-flavour {
    display: flex;
    height: 44px;
    padding: 8px 8px 16px 8px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

    color: rgba(65, 33, 16, 0.60);
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    /* 111.111% */

    background: inherit;
    border: 0;

    border-bottom: 1px solid rgba(65, 33, 16, 0.16);

    outline: none !important;
    box-shadow: none !important;
    border-radius: 0px;
}

.form-div .form-select,
.form-div option {
    color: rgba(65, 33, 16, 0.60);
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;

    background-color: #F5F2E8;
    border: 0;
    border-radius: 0px;

    border-bottom: 1px solid rgba(65, 33, 16, 0.16);

    outline: none !important;
    box-shadow: none !important;

    padding-left: 8px;
}

.form-div .choose-cake option {
    height: 300px;
}

.form-div label {
    color: #412110;
    font-variant-numeric: lining-nums proportional-nums;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    /* 111.111% */
}

.form-div h4 {
    color: #412110;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    /* 111.111% */
}


.form-div .ui-widget-content {
    color: #412110;
    background: #F5F2E8 !important;
}

.form-div .ui-widget.ui-widget-content {
    border: none !important;
}

.ui-timepicker-standard .ui-state-hover {
    background-color: #F5F2E8 !important;
}

.ui-timepicker-standard a {
    color: rgba(65, 33, 16, 0.60) !important;
}

.ui-timepicker-standard a:hover,
.ui-timepicker-standard a:visited,
.ui-timepicker-standard a:focus {
    background: #F5F2E8 !important;
    background: #E7E2D8 !important;
}

.form-div .ui-widget-header {
    border: none !important;
    background: #412110 !important;
    color: #ffffff;
    font-weight: bold;
}

.ui-widget-content {
    border: none !important;
    background: #F5F2E8 !important;
    color: #333333;
}

.form-div .collapse .btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    background: var(--lavonne-base, #E7E2D8);
    border-radius: 0px;
    /* border: none; */
}

.form-div .choose-flavour {
    display: flex;
    height: 44px;
    padding: 8px 12px 8px 12px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

    color: rgba(65, 33, 16, 0.7);
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    /* 111.111% */

    background: inherit;
    border: 0;

    border: 1px solid rgba(65, 33, 16, 0.16);

    outline: none !important;
    box-shadow: none !important;

    margin-top: 24px;
}

.form-div .choose-flavour img {
    color: rgba(0, 0, 0, 1) !important;
    opacity: 1 !important;
    width: 17px;
    height: 17px;
}

.form-div .note-label span {
    margin-top: 16px;
    color: var(--lavonne-base, #412110);
    font-family: Alverata;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.form-div .note-label {
    color: var(--lavonne-base, #412110);
    font-family: Alverata;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    font-weight: 100;
    margin-top: 16px;
}

.form-div .flavor-div {
    padding: 16px;
    gap: 19.496px;

    flex: 1 0 0;
    border: 1px solid rgba(65, 33, 16, 0.16);
}

.form-div .flavor-div label {
    border: none;
}

.form-div .flavor-div img {
    /* width: 214px;
    height: 324px; */
}

.form-div .additional-label {
    color: rgba(65, 33, 16, 0.60);
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    /* 111.111% */
}

.form-submit-btn {
    border-radius: 400px;
    border: 1px solid rgba(65, 33, 16, 0.24);

    display: flex;
    padding: 20px 120px;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;

    color: var(--lavonne-surface, #F5F2E8);
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;

    width: -webkit-fill-available;

    margin-top: 56px;

    background: var(--lavonne-base, #412110);

    background-color: #693c22;
    background-image: #693c22;
    background-image: -moz-linear-gradient(top, #412110 0%, #412110 100%);
    background-image: -webkit-linear-gradient(top, #412110 0%, #412110 100%);
    background-image: linear-gradient(to bottom, #412110 0%, #412110 100%);
    background-size: 800px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.form-submit-btn:hover {
    background-position: 800px;
    transition: background 300ms ease-in-out;
}

/* Specials */

.specials-div {
    display: flex;
    flex-direction: column;
    gap: 72px;
}

.specials h1 {
    color: var(--lavonne-base, #412110);
    font-variant-numeric: lining-nums proportional-nums;
    font-family: Raleway;
    font-size: 32px;
    /* Changes */
    font-style: normal;
    font-weight: 600;
    line-height: normal;

    margin-bottom: 24px;
}

.specials .imgs-div {}

.specials .imgs-div img {
    width: 296px;
    height: 296px;

    margin-bottom: 24px;

    border-radius: 25px;
}

.specials .imgs-div h6 {
    color: var(--lavonne-base, #412110);
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    margin-bottom: 12px;
}

.specials .imgs-div p {
    color: var(--lavonne-base, #412110);
    font-variant-numeric: lining-nums proportional-nums;
    font-family: Raleway;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.pt-72 {
    padding-top: 72px;
}

.pb-80 {
    padding-bottom: 80px;
}

/* Location */
.loc-div {
    display: flex;
    padding: 120px 0px;
    align-items: center;
    gap: 80px;
}

.loc-div .img-div {
    width: 600px;
}

.loc-div .img-div img {
    width: 600px;
    height: 600px;
    object-fit: cover;
    border-radius: 32px;
}

.loc-div .g-lg-5,
.gx-lg-5 {
    --bs-gutter-x: 80px;
}

.loc-div .loc-description {
    margin: auto;
}

.loc-div .loc-description h1 {
    color: var(--lavonne-base, #412110);
    font-family: Raleway;
    font-size: 44px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    /* 70.4px */

    margin-bottom: 16px;
}

.loc-div .loc-description p {
    color: var(--lavonne-base, #412110);
    font-variant-numeric: lining-nums proportional-nums;
    font-family: Raleway;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 180%;
    /* 36px */
}

.loc-div .loc-description .timings {
    margin: 40px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.loc-div .loc-description .timings h6 {
    color: var(--lavonne-base, #412110);
    font-variant-numeric: lining-nums proportional-nums;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    display: flex;
    gap: 16px;
}

.loc-div .loc-description .timings h6 span {
    opacity: 0.8;
}

.loc-div .loc-description .button-div {
    display: flex;
    gap: 24px;
}

.loc-div .loc-description .button-div .direction-btn {
    border-radius: 400px;
    border: 1px solid rgba(65, 33, 16, 0.24) !important;

    display: flex;
    padding: 16px 24px;
    gap: 8px;

    color: var(--lavonne-base, #412110);
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;

    background-color: #E7E2D8;
    background-image: #E7E2D8;
    background-image: -moz-linear-gradient(top, #F5F2E8 0%, #F5F2E8 100%);
    background-image: -webkit-linear-gradient(top, #F5F2E8 0%, #F5F2E8 100%);
    background-image: linear-gradient(to bottom, #F5F2E8 0%, #F5F2E8 100%);
    background-size: 400px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.loc-div .loc-description .button-div .direction-btn:hover {
    background-position: -200%;
    transition: background 300ms ease-in-out;
}

.loc-div .loc-description .button-div .direction-btn img {
    width: 24px;
    height: 24px;
}

.loc-div .loc-description .button-div .menu-btn {
    color: var(--lavonne-surface, #F5F2E8);
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;

    border-radius: 400px;
    border: 1px solid rgba(65, 33, 16, 0.24);
    background: var(--lavonne-base, #412110);

    display: flex;
    padding: 16px 24px;
    gap: 8px;

    background-color: #693c22;
    background-image: #693c22;
    background-image: -moz-linear-gradient(top, #412110 0%, #412110 100%);
    background-image: -webkit-linear-gradient(top, #412110 0%, #412110 100%);
    background-image: linear-gradient(to bottom, #412110 0%, #412110 100%);
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.loc-div .loc-description .button-div .menu-btn:hover {
    background-position: -200%;
    transition: background 300ms ease-in-out;
}

.swal2-confirm {
    border: 0;
    border-radius: 25px;
    background: initial;
    background-color: #412110 !important;
    color: #fff;
    font-size: 1em;
    padding: 10px 20px;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

div:where(.swal2-container) h2:where(.swal2-title), div:where(.swal2-container) .swal2-html-container {
    color: #412110;
}

.custom-select {
    background-color: #e0f7fa; /* Background color */
    color: #006064; /* Text color */
    border-color: #004d40; /* Border color */
}
.custom-select:focus {
    box-shadow: 0 0 5px 2px rgba(0, 150, 136, .5); /* Focus outline */
}

/* Mobile */

@media (max-width: 992px) {

    .margin-top-40 {
        margin-top: 40px;
    }

    .max-width {
        max-width: auto;
        padding-inline: 0px;
    }

    .home {
        background-image: url(../img/CustomCake/Mobile/home-img.png);

        margin: 0;

        display: flex;

        padding: 0px 24px;
        padding-bottom: 24px;
    }

    .home .text-div {
        margin-top: auto;
        display: flex;
        width: 100%;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
        gap: 16px;
        margin: auto;
        position: relative;
        bottom: 0%;
        left: 0%;
        transform: none;

        padding-inline: 0px;

        margin-bottom: 0;
    }

    .home .text-div p {
        text-align: left;
    }

    .home .text-div h1 {
        color: var(--lavonne-surface, #F5F2E8);
        font-family: Raleway;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;

        text-align: left;
        width: -webkit-fill-available;
    }

    .home .text-div p {
        color: var(--lavonne-surface, #F5F2E8);
        font-family: Raleway;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 180%;
        /* 28.8px */
    }

    .customize {
        background: var(--lavonne-surface, #F5F2E8);
        padding: 80px 24px;
    }

    .customize .head-div {
        display: block;

        margin-bottom: 80px;
    }

    .customize .head-div h1 {
        color: var(--lavonne-base, #412110);
        font-family: Raleway;
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .customize .head-div h5 {
        color: var(--lavonne-base, #412110);
        font-family: Raleway;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 140%;
        /* 25.2px */

        text-align: left;
    }

    .customize .head-div .insta-btn {
        border-radius: 32px;
        border: 1px solid rgba(65, 33, 16, 0.32);
        display: flex;
        padding: 10px 16px;
        justify-content: start;
        align-items: center;
        gap: 8px;

        width: fit-content;
        margin-top: 24px;
    }

    /* Form */
    .form-div {
        gap: 40px;
    }

    .form-div .row {
        --bs-gutter-x: 0rem;
        /* gap: 40px; */
    }

    .form-div .flavor-div img {
        width: 100%;
        height: 100%;
    }

    .form-div .note-label {
        font-family: Alverata;
        font-size: 14px;
        font-weight: 400;
        line-height: 140%;

        margin-top: 8px;
    }

    .form-div .note-label span {
        font-weight: 600;
    }

    .form-div .budget label {
        font-size: 16px;
    }

    .form-div .budget .btn-check:checked+.btn,
    .btn.active,
    .btn.show,
    .btn:first-child:active,
    :not(.btn-check)+.btn:active {
        font-size: 16px;
    }

    #reference {
        width: 77%;
    }

    .form-submit-btn {
        border-radius: 400px;
        border: 1px solid rgba(65, 33, 16, 0.24);
        background: var(--lavonne-base, #412110);
        display: flex;
        padding: 16px 24px;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;

        color: var(--lavonne-surface, #F5F2E8);
        font-family: Raleway;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        width: -webkit-fill-available;
        margin-top: 56px;
    }

    /* Specials */
    .specials {
        padding-inline: 24px;
    }

    .specials h1 {
        color: var(--lavonne-base, #412110);
        font-variant-numeric: lining-nums proportional-nums;
        font-family: Raleway;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;

        margin-bottom: 16px;
    }

    .specials .imgs-div img {
        width: 215px;
        height: 215px;
    }

    .specials .carousel-cell {
        width: 215px;
        height: 300px;
        margin-right: 20px;
    }

    /* cell number */
    .specials .carousel-cell:before {
        display: block;
    }

    .specials .imgs-div img {
        margin-bottom: 16px;
    }

    .specials .imgs-div h6 {
        margin-bottom: 8px;

        color: var(--lavonne-base, #412110);
        font-family: Raleway;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .specials .imgs-div p {
        color: var(--lavonne-base, #412110);
        font-variant-numeric: lining-nums proportional-nums;
        font-family: Raleway;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .specials .pt-72 {
        margin-top: 32px;
    }

    /* Location  */

    .loc-div {
        display: block;
        padding: 100px 0px;
        align-items: center;
        gap: 80px;

        padding-inline: 24px;
    }

    .loc-div .img-div {
        width: -webkit-fill-available;
    }

    .loc-div .img-div img {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: cover;
    }

    .loc-div .loc-description h1 {
        color: var(--lavonne-base, #412110);
        font-family: Raleway;
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: 160%;
        /* 44.8px */

        margin-top: 32px;
    }

    .loc-div .loc-description p {
        color: var(--lavonne-base, #412110);
        font-variant-numeric: lining-nums proportional-nums;
        font-family: Raleway;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 180%;
        /* 28.8px */
    }

    .loc-div .loc-description .timings {
        margin: 40px 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }

    .loc-div .loc-description .timings h6 {
        color: var(--lavonne-base, #412110);
        font-variant-numeric: lining-nums proportional-nums;
        font-family: Raleway;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;

        display: flex;
        gap: 16px;
    }

    .loc-div .loc-description .timings h6 span {
        opacity: 0.8;
    }

    .loc-div .loc-description .button-div {
        display: grid;
        gap: 16px;
    }

    .loc-div .loc-description .button-div .direction-btn {
        border-radius: 400px;
        border: 1px solid rgba(65, 33, 16, 0.24) !important;
        display: flex;
        padding: 16px 24px;
        gap: 8px;
        justify-content: center;
    }

    .loc-div .loc-description .button-div .menu-btn {
        color: var(--lavonne-surface, #F5F2E8);
        font-family: Raleway;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;

        border-radius: 400px;
        border: 1px solid rgba(65, 33, 16, 0.24);
        background: var(--lavonne-base, #412110);

        display: flex;
        padding: 16px 24px;
        gap: 8px;

        justify-content: center;
    }
}

/* Tablet to 1440px */
@media (min-width: 992px) and (max-width: 1240px) {

    .specials .imgs-div img {
        width: 296px;
        height: 296px;
    }

    .specials .carousel-cell {
        width: 296px;
        height: 400px;
        margin-right: 20px;
    }

    /* cell number */
    .specials .carousel-cell:before {
        display: block;
    }

}

/* Small Devices */
@media (max-width: 576px) {
    .home {
        height: 600px;
        display: flex;
        padding: 24px;
    }

    .home .text-div {
        margin-top: auto;
        display: flex;
        width: -webkit-fill-available;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
        gap: 16px;
        margin: auto;
        position: relative;
        bottom: 0%;
        left: 0%;
        transform: none;

        margin-bottom: 0;
    }

    .home .text-div p {
        text-align: left;
    }

    .form-div .flavor-div label {
        width: 100%;
        /* Changes */
    }
}

* {
    box-sizing: border-box;
}

.row>.column {
    padding: 0 8px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.column {
    float: left;
    width: 25%;
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 12;
    /* padding-top: 100px; */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(31, 31, 31, 0.60);

    padding: 0px;
}

/* Modal Content */
.modal-content {
    position: relative;
    margin: auto;
    padding: 0;
    width: 46%;
    /* Changes */
    background-color: initial;
    border: none;
    top: 18.25%;

    position: absolute;
    top: 50%;
    left: 27.5%;
    /* Changes */
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* The Close Button */
.close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}

.mySlides,
.mySlides1,
.mySlides2,
.mySlides3,
.mySlides4,
.mySlides5 {
    display: none;
    height: 80%;

}

.mySlides img,
.mySlides1 img,
.mySlides2 img,
.mySlides3 img,
.mySlides4 img,
.mySlides5 img {
    width: 500px;
    /* Changes */
    height: 562px;
    margin: auto;

    border-radius: 24px;
    border: 3px solid #FFF;
}

.cursor {
    cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin-top: -45px;
    color: white !important;
    font-weight: bold;
    font-size: 12px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;

    border-radius: 400px !important;
    border: 1px solid rgba(245, 242, 232, 0.60) !important;
    background: rgba(245, 242, 232, 0.24) !important;
    backdrop-filter: blur(20px) !important;
}

.prev img,
.next img {
    width: 24px;
    height: 24px;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

img {
    margin-bottom: -4px;
}

.caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
}

.demo {
    opacity: 0.6;
}

.active,
.demo:hover {
    opacity: 1;
}

img.hover-shadow {
    transition: 0.3s;
}

.hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* Change placeholder color for all input fields */
.custom-placeholder::placeholder {
    color: rgba(65, 33, 16, 0.60); 
}

.custom-placeholder::placeholder {
    color: rgba(65, 33, 16, 0.60); 
}

/* Vendor prefixes for cross-browser compatibility */
.custom-placeholder::-webkit-input-placeholder {
    color: rgba(65, 33, 16, 0.60);
}

.custom-placeholder:-moz-placeholder {
    color: rgba(65, 33, 16, 0.60);
}

.custom-placeholder::-moz-placeholder {
    color: rgba(65, 33, 16, 0.60);
}

.custom-placeholder:-ms-input-placeholder {
    color: rgba(65, 33, 16, 0.60);
}

.choose-flavour{
    color: rgba(65, 33, 16, 0.60);
}

.form-div .input-normal {
    border-bottom: 1px solid rgba(65, 33, 16, 0.16);
}

/* Add this CSS to your stylesheet */
.form-div .input-empty::placeholder {
    color: red;
}

.form-div .input-empty {
    color: red;
}