﻿
/* Category brands and logo */
.Landing_title {
    font-size: 30px;
    font-family: 'DM Serif Display', serif !important;
    color: black;
}

.Landing_para {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 0.2px;
    font-weight: 400;
}

.category {
    font-family: 'Varela Round', sans-serif;
    font-size: 14px;
    margin: 20px;
    border: none;
    border-bottom: 2px solid;
    background-color: transparent;
    padding: 0px;
    color: grey;
}

.view_more {
    position: absolute;
    font-family: 'Varela Round', sans-serif;
    font-size: 15px;
    margin: 20px;
    border: none;
    background-color: transparent;
    padding: 0px;
    margin-top: -24px !important;
    margin-right: 40px !important;
    color: black !important;
}

.arrow {
    position: absolute;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    width: 36px;
    padding: 2px;
}

.next_category, .next_logo, .next_dines {
    position: absolute;
    background-repeat: no-repeat;
    padding: 2px;
    transform: rotate(90deg);
    width: 24px;
    height: 24px;
}

.next_category {
    top: calc(45%);
    right: calc(5% - 25px);
}

.next_logo {
    margin-top: calc(-10%);
    right: calc(-4%);
    width: 40px;
    height: 40px;
}

.prev_dines {
    width: 40px;
    height: 40px;
    bottom: -3px;
}
.next_dines {
    bottom:4px;
    /*top: calc(85% - 6px);*/
    /*right: calc(66% - 25px);*/
}

p {
    font-family: 'Inter', sans-serif !important;
}




.category {
    color: grey;
    margin-bottom: 0px;
    margin: 0px !important;
    padding: 1px;
    transition-duration: 0.4s;
    border-bottom: none;
}

    .category:hover {
        color: black;
    }

.category_type {
    position: relative;
    /* height:43px;   */
}


/*.next_category {
    margin-top: 120px !important;
    opacity: 0;
    transition-duration: 0.4s;
}*/

.next_category:hover {
    opacity: 1.2;
}

.prev_category, .prev_logo, .prev_dines {
    position: relative;
    background-repeat: no-repeat;
    padding: 2px;
    transform: rotate(-90deg);
    width: 24px;
    height: 24px;
    transition-duration: 0.4s;
}

.prev_category {
    top: calc(45%);
    left: calc(5% - 25px);
}

.prev_dines {
    /*top: calc(85%);
    left:calc(28% - 25px);*/
}

.prev_logo {
    margin-top: calc(-10%);
    left: calc(-5%);
    width: 40px;
    height: 40px;
}

.prev_category:hover {
    opacity: 1.2;
}

.category_arrow_bg {
    background-color: #ffffff;
    opacity: 0.7;
    height: 28px !important;
    width: 28px !important;
    border-radius: 2px;
}

.prev_dines, .next_dines {
    width: 32px;
    height: 32px;
    position: relative;
}

    .prev_dines .category_arrow_bg, .next_dines .category_arrow_bg {
        height: 35px !important;
        width: 35px !important;
    }

.arrow {
    margin-right: 0px !important;
    margin-top: -30px !important;
    width: 32px !important;
}

a {
    text-decoration: none !important;
}

.category_img {
    width: 300px !important;
    height: 300px !important;
    object-fit: cover;
}

.tabs__link {
    cursor: pointer;
    /* border-bottom: thin solid black;*/
    text-decoration: none;
    transition: 0.5s ease;
    padding-bottom: 10px;
}

    .tabs__link:hover {
        background: white;
        /*font-weight: 600;*/
    }

.tabs__content--active .category {
    color: black;
}

.tabs--active {
    color: black;
}

.category_tabs {
    background: white;
    position: relative;
}

.tabs_header ul {
    list-style: none;
    display: grid;
    /*display: table;*/
    padding: 0;
    margin: 0;
    width: auto;
}

#tabslist li {
    display: table-cell;
    text-align: center;
}

    #tabslist li .a {
        display: block;
        padding: 24px;
        border-bottom: none;
    }

    #tabslist li .p {
        display: block;
        padding: 24px;
        border-bottom: none;
    }

.tabs__line-container {
    display: block;
    height: 4px;
    position: relative;
    width: 100%;
}

.tabs__line {
    height: 3px;
    background: black;
    position: absolute;
    width: auto;
    transition: 0.25s ease;
}

.tabs__content {
    display: none;
    padding-top: 24px;
}

.tabs .tabs__content--active {
    display: block;
}

.tabs_header {
    width: 55%;
    position: relative;
    margin-left: 7px;
}

.brandsLogo {
    width: 168px;
    object-fit: none;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 160px;
    padding: 15px;
    /*border: 1px solid gray;*/
    margin: 0px;
}

@media (max-width: 576px) {
    .prev_logo, .prev_category {
        left: calc(30%);
    }

    .prev_category {
        top: calc(94%);
    }

    .next_logo, .next_category {
        right: calc(30%);
    }

    .next_category {
        top: calc(90%);
    }


    .tabs_header {
        overflow-x: scroll;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

        .tabs_header ul {
            display: block;
        }
}


/* Cullinary Delights-2  */

.dine-left-container {
    height: 100%;
    width: 46%;
    position: relative;
    float: left;
    /*background-image: url('../images/HomePage/cinnabon.jpg');*/
}

#dine-left-img {
    background-image: url('../images/HomePage/cinnabon.jpg');
    background-size: cover;
}

.dine-right-container {
    position: absolute;
    height: 100%;
    width: 69%;
    top: 0;
    right: 0;
    /*background-image: url('../images/HomePage/cinnabon.jpg');*/
}

.dine-main-container {
    width: 100%;
    height: 600px; /* Adjust this to your desired height */
    position: relative;
}

#dine-heading {
    color: white;
    letter-spacing: 0.5px;
    width: 85%;
}

#dine-title {
    color: white !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-family: 'Varela Round', sans-serif;
}


.background {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reserve-btn-card {
    padding: 7px 25px !important;
    font-size: 14px;
    background: rgb(236, 176, 112);
    background: linear-gradient(117deg, rgba(236, 176, 112, 1) 0%, rgba(212, 168, 103, 1) 69%, rgba(222, 199, 110, 1) 100%);
    color: black;
    font-weight: 500;
}

    .reserve-btn-card:hover {
        color: black;
        font-weight: 500;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }

.swiper-pagination {
    position: static;
    width: auto !important;
}

.swiper-pagination-bullet {
    background-color: black;
}

.swiper-pagination-bullet-active {
    border: 1px solid black;
}

.swiper-wrapper {
    height: 100% !important;
}

.dines-swiper-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* space between arrows and dots */
    position: absolute;
    left: calc(25%);
    bottom: calc(15%);
    /*bottom: calc(5%);*/
}

@media only screen and (min-width: 769px) {

    .dines-title {
        padding-left: 25%;
        transform: translateY(0px);
        margin-top: 2rem;
    }

    .cullinary-delight-2 .title-wrap, .cullinary-delight-2 .dine-sub-title {
        display: none;
    }

    .dine-right-container .dines-title {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    .dine-left-container {
        height: 100%;
        width: 100%;
        position: relative;
        float: left;
    }

    .fine-dine-maincontainer {
        width: 100%;
        /*height: 700px;*/ /* Adjust this to your desired height */
        height: 600px; /* Adjust this to your desired height */
        position: relative;
    }

    .dine-right-container {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 15%;
        right: 0;
    }

    .dines-title {
        padding-left: 30%;
        transform: translateY(-85px);
        margin-top: 2rem;
    }

    .restSecSlide-wrap {
        overflow: hidden;
        height: 75%;
    }

    .cullinary-delight-2 .title-wrap {
        display: flex;
    }

    .cullinary-delight-2 .dine-sub-title {
        display: block;
        text-align: center;
        margin-bottom: 1rem;
    }

    .dine-right-container .dines-title {
        display: none;
    }

    .next_dines {
        /*top: calc(55% - 6px);
        right: calc(45% - 25px);*/
    }

    .prev_dines {
        /* top: calc(55%);
        left: calc(45% - 25px);*/
    }

    .swiper-pagination {
        bottom: 38% !important;
        left: calc(40% - 25px) !important;
    }

    .swiper-pagination-bullet {
        background-color: white;
    }

    .swiper-pagination-bullet-active {
        border: 1px solid white;
    }

    .dines-swiper-controls {
        position: absolute;
        bottom: 40%;
        width:100%;
        left:0;
    }
    .newMallServices {
        margin-top: 30% !important;
    }
}



@media only screen and (max-width: 576px) {
    .fine-dine-maincontainer {
        width: 100%;
        height: 450px; /* Adjust this to your desired height */
        position: relative;
    }
}

.dine-main-container {
    background-image: url('../images/HomePage/dine-container-background.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 600px auto;
    /*background-position: right -20px top -20px;*/
    background-position: right -150px top -35px;
}

.new-title {
    font-size: 40px;
    font-family: 'Varela Round', sans-serif;
}

.background-content {
    position: relative; /* Ensure the pseudo-element is positioned correctly */
    z-index: 0; /* Set a lower z-index to make sure it stays behind the content */
}

    .background-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        /*   background: linear-gradient(181deg, rgba(52, 52, 52, 0.0) 11.8%, rgba(0, 0, 0, 0.8) 88.8%);*/

        background: linear-gradient( 181deg, rgba(52, 52, 52, 0) 0%, rgba(52, 52, 52, 0.3) 33.3%, rgba(52, 52, 52, 0.6) 66.6%, rgba(0, 0, 0, 0.9) 100% );
        /*  opacity: 1;*/
        z-index: -1; /* Ensure the background stays behind the text */
    }

/*.dines-swiper .card{
    border-radius:5%;
    position:relative;
}*/
.dine-card-img {
    border-radius: 4%;
    height: 182px !important;
    /*width: 245px !important;*/
    object-fit: cover;
}


.dine-card-text-wrap {
    /* position:absolute;*/
    width: 100%;
    bottom: 5%;
    /*left:10%;*/
}

.dine-card-label {
    color: black;
    font-size: 16px;
}

.dines-cards-logo {
    height: 40px !important;
    width: 40px !important;
    margin-right: 10px !important;
}

.dines-card {
    background: white !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease-in-out !important;
    height: 250px !important; /* Initial height without the button */
    padding: 10px !important;
    /*width: 100%;*/
    width: 265px !important;
    display: inline-block !important;
    border-radius: 5px !important;
    margin: 10px !important;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

    .dines-card:hover {
        /*height: 100% !important;*/ /* Height when hovered to include the button */
        height: 290px !important; /* Height when hovered to include the button */
        cursor: pointer !important;
        transform: translateY(-3px);
        box-shadow: 0px 0px 12px #8c8c8c;
    }

    .dines-card div {
        z-index: 1 !important;
        position: relative;
    }

.reserve-btn-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.dines-card:hover .reserve-btn-container {
    display: flex;
    opacity: 1;
}


.view-all-btn {
    border-bottom: 1px solid black;
    color: black !important;
    width: fit-content;
    font-size:16px;
}

/*.dine-card-img-div {
    width: 245px;
}*/

.springcollSection {
    margin-top: 100px;
}

@media (min-width: 1152px) and (max-width: 1919px) {
    .springcollSection {
        margin-top: 80px;
    }
}

@media screen and (max-width: 500px) {
    .springcollSection {
        margin-top: 120px;
    }
    .dines-swiper .swiper-slide {
        display: flex;
        justify-content: center;
    }
}
