@charset "utf-8";
/* Font style */

@font-face {
    font-family: "lato";
    src: url("/assets/fonts/Lato-Bold.ttf");
    src: url("/assets/fonts/Lato-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "lato";
    src: url("/assets/fonts/Lato-Light.ttf");
    src: url("/assets/fonts/Lato-Light.ttf") format("truetype");
}

@font-face {
    font-family: "lato";
    src: url("/assets/fonts/Lato-Regular.ttf");
    src: url("/assets/fonts/Lato-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "lobster";
    src: url("/assets/fonts/Lobster-Regular.ttf");
    src: url("/assets/fonts/Lobster-Regular.ttf") format("truetype");
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-UltraLight.ttf') format('truetype');
	font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-UltraLightItalic.ttf') format('truetype');
	font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-Light.ttf') format('truetype');
	font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-LightItalic.ttf') format('truetype');
	font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-Regular.ttf') format('truetype');
	font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-RegularItalic.ttf') format('truetype');
	font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-Medium.ttf') format('truetype');
	font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-MediumItalic.ttf') format('truetype');
	font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-SemiBold.ttf') format('truetype');
	font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-SemiBoldItalic.ttf') format('truetype');
	font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-Bold.ttf') format('truetype');
	font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-BoldItalic.ttf') format('truetype');
	font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-ExtraBold.ttf') format('truetype');
	font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'Gilroy';
	src: url('/assets/fonts/Gilroy/Gilroy-ExtraBoldItalic.ttf') format('truetype');
	font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* General Styling */

:root {
    --main-color: #ce2828;
    --second-color: #b29d75;
    --font-color1: #ffffff;
    --font-color2: #f7f7f7;
    --font-color3: #676767;
    --font-color4: #000000;
    /* --primary-font: '{{ theme_option('primary_font', 'Roboto') }}', sans-serif; */
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

.main-color {
    color: var(--main-color);
}

.second-color {
    color: var(--second-color);
}

.font-color {
    color: var(--font-color3);
}

.title {
    font-weight: bold;
    position: relative;
}

.desktop {
    display: block;
}

.mobile {
    display: none;
}

.collapse-hyperlink {
    color: blue;
}

.collapse-hyperlink:hover {
    color: rgb(255, 0, 0)
}

.lobster-title {
    font-family: "lobster";
}

.title.main-color.underline::after,
.lobster-title.main-color.underline::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    transform: translateX(-50%);
    background: var(--main-color);
    height: 2px;
    width: 15%;
}

.title.main-color.text-center.underline::after,
.lobster-title.text-center.main-color.underline::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--main-color);
    height: 2px;
    width: 15%;
}

.title.second-color.text-center.underline::after,
.lobster-title.second-color.text-center.underline::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--second-color);
    height: 2px;
    width: 15%;
}

html {
    height: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    position: relative;
    margin: 0;
    min-height: 100%;
    background: var(--font-color1);
    color: #3f3f3f;
    font-size: 15px;
    font-family: "lato", sans-serif;
    font-weight: normal;
}

img {
    max-width: 100%;
}

a {
    color: #000000;
}

a:hover,
a:focus {
    color: var(--main-color);
    text-decoration: none;
}

a.btn:hover {
    color: var(--main-color);
    background-color: var(--font-color1);
}

.header-modal a:not([href]):not([tabindex]) {
    color: var(--font-color1);
}

.header-modal a:not([href]):not([tabindex]):hover {
    color: var(--font-color1);
}

button:focus {
    outline: 0;
}

ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

label {
    font-size: 13px;
}

p {
    margin-bottom: 0;
}

iframe {
    max-width: 100%;
}

.form-control {
    border-color: #afafaf;
}

.form-control:focus,
.form-control:hover {
    border-color: #f26c24 !important;
}

.discount-corporate-table {
    width: 75%;
}

.discount-corporate-table th, .discount-corporate-table td {
    border: 1px solid black !important;
}

.form-control,
.form-control:focus {
    outline: none;
    box-shadow: none;
    color: #000;
    font-size: 14px;
}

.form-control.error {
    border: 1px solid red !important;
}

.error {
    color: red;
    font-size: 14px !important;
    font-weight: 300 !important;
    margin-bottom: 0;
}

.swal2-popup {
    width: auto;
    padding: 5px 20px 10px;
    max-width: 32rem;
}

.swal2-title {
    font-size: 16px;
    font-weight: 400;
}

.swal2-popup.swal2-toast .swal2-title {
    font-size: 17px;
}

.relative {
    position: relative;
}

.no-padding {
    padding: 0;
}

.not-available {
    color: #a5a2a2 !important;
}

.pb12 {
    padding-bottom: 12px !important;
}

.pt0 {
    padding-top: 0 !important;
}

.pl10 {
    padding-left: 10px;
}

/* Google reCAPTCHA Styling */
.grecaptcha-badge {
    visibility: hidden;
}

/* Header Styling */

.header-area {
    position: relative;
    width: 100%;
    background: var(--font-color1);
    z-index: 9;
    transition: all 1s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.header-area.custom-menu_fixed {
    position: fixed;
}

.header-top {
    overflow-x: hidden;
    padding: 0px 0;
}

.header-service {
    display: inline-block;
}

.header-service ul {
    display: flex;
    align-items: center;
}

.header-service-img {
    display: inline-block;
}

.header-service-img.delivery {
    width: 35px;
    margin-right: 3px;
}

.header-service-img.safety {
    width: 25px;
}

.header-service-img.chat {
    width: 25px;
    margin-right: 5px;
}

.header-service li {
    margin-right: 80px;
}

.header-service li:last-child {
    margin-right: 0;
}

.header-service li span {
    font-size: 12px;
}

.header-item {
    float: right;
}

.header-item-img {
    position: relative;
    display: inline-block;
    margin-right: 13px;
}

.header-item-img:last-child {
    margin-right: 0;
}

.header-item-img.search {
    width: 25px;
}

.header-item-img.cart {
    width: 27px;
}

.header-icon {
    padding: 0 10px;
    font-size: 28px;
}

.header-service-show {
    width: 100000px;
    margin-left: 0px;
    animation: 25.68s linear 0s infinite normal none running roadshow;
}

.cart-count {
    position: absolute;
    left: 20px;
    top: -3px;
    font-size: 9px;
    padding: 1px 6px;
    background: var(--main-color);
    color: var(--font-color1);
    border-radius: 50%;
}

.header-bottom {
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    transition: all 0.5s;
}

.header-logo-img {
    max-width: 180px;
}

.header-listing,
.header-listing ul,
.header-menu ul {
    display: inline-flex;
    align-items: center;
}

.header-listing ul,
.header-menu ul {
    padding: 0 10px;
}

.header-listing ul li {
    padding: 0 10px;
}

.header-menu {
    float: right;
    padding-top: 20px;
}

.header-area .header-menu ul > li {
    padding: 0 5px;
}

.header-bottom.sticky-header {
    position: fixed;
    left: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: var(--font-color1);
}

.header-modal li {
    padding-bottom: 1em;
}

.header-modal .header-modal-title {
    font-size: 18px;
    font-weight: 600;
}

.header-modal .header-modal-sub-title {
    font-size: 15px;
}

.header-area.sticky-header .header-menu {
    /* float: unset; */
}

@media (min-width: 1200px) {
    .modal-lg {
        max-width: 1200px;
    }
}

.close {
    opacity: 0.9;
}

.close img {
    width: 50px;
    height: 50px;
    background-color: var(--main-color);
    border-radius: 50%;
}

.btn-red-white {
    font-size: 13px;
    border: 2px solid var(--main-color);
    cursor: pointer;
    border-radius: 5px;
    padding: 5px 10px;
    color: var(--font-color1);
    background-color: var(--main-color);
    background-image: linear-gradient(var(--main-color), #991e1e);
    box-shadow: 3px 3px 10px #00000070;
}

.btn-red-white:hover,
.btn-red-white:focus {
    border: 2px solid var(--main-color);
    color: var(--main-color) !important;
    background-color: var(--font-color1);
    background-image: unset;
}

.cta-btn h2 {
    font-size: 15px;
    cursor: pointer;
    color: var(--font-color1);
    background-color: transparent;
    padding: 5px 10px;
    font-weight: 400;
    line-height: 1.5;
}

a.btn.cta-btn:hover h2,
a.btn.cta-btn:focus h2 {
    color: var(--main-color) !important;
    background-color: transparent;
}

.btn-red-outline {
    cursor: pointer;
    font-size: 13px;
    border: 2px solid var(--main-color);
    border-radius: 5px;
    padding: 5px 10px;
    color: var(--main-color);
    box-shadow: 3px 3px 10px #00000070;
    background-color: var(--font-color1);
}

.btn-red-outline:hover {
    border: 2px solid var(--main-color);
    color: var(--font-color1);
    background-color: var(--main-color);
    background-image: linear-gradient(var(--main-color), #991e1e);
}

.btn-menu {
    color: var(--main-color);
}

/* Footer Styling */

.footer-content {
    background: #2d2926;
    color: var(--font-color1);
    padding: 25px 0;
}

.footer-desc p,
.footer-desc a {
    font-size: 16px;
}

.footer-desc p {
    padding-bottom: 15px;
}

.footer-desc a {
    color: var(--main-color);
}

.footer-desc a:hover {
    color: #f7f7f7;
}

.footer-title {
    position: relative;
    margin-bottom: 15px;
}

.footer-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    background: #ce2828;
    height: 2px;
    width: 10%;
}

.twitter-icon-link div {
    width: 20px;
    height: 100%;
    background-image: url('../../images/icons/twitter-x-white.png') !important;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.twitter-icon-link div:hover {
    background-image: url('../../images/icons/twitter-x-red.png') !important;
}

.xiaohongshu-icon-link div {
    width: 20px;
    height: 100%;
    background-image: url('../../images/icons/xiaohongshu-white.png') !important;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.xiaohongshu-icon-link div:hover {
    background-image: url('../../images/icons/xiaohongshu-red.png') !important;
}

.footer-bio {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-contact-info {
    padding-bottom: 35px;
}

.footer-contact-info p {
    padding-bottom: 3px;
}

.footer-contact-info p:last-child {
    padding-bottom: 0;
}

.footer-contact-info a,
.footer-media a {
    color: var(--font-color1);
}

.footer-contact-info a:hover,
.footer-media a:hover {
    color: #ce2828;
}

.footer-media ul {
    display: flex;
}

.footer-media li {
    margin-right: 15px;
}

.footer-media li:last-child {
    margin-right: 0;
}

.footer-icon {
    font-size: 23px !important;
}

.footer-bottom {
    background: #ce2828;
    color: var(--font-color1);
    padding: 15px 0;
    font-family: "lato";
    font-size: 14px;
}

.footer-copyright {
    display: inline-block;
}

.footer-link {
    float: right;
}

.footer-link a {
    color: var(--font-color1);
}

.footer-link a:hover {
    color: var(--font-color4);
}

.footer-link ul {
    display: flex;
}

.footer-link li {
    position: relative;
    padding-right: 10px;
    margin-right: 10px;
}

.footer-link li:last-child {
    padding-right: 0;
    margin-right: 0;
}

.footer-link li::after {
    content: "";
    position: absolute;
    background: var(--font-color1);
    top: 3px;
    bottom: 2px;
    right: 0;
    width: 1px;
}

.footer-link li:last-child::after {
    height: 0;
}

.icon {
    min-width: 20px;
    height: 20px;
}

.red-white-link {
    color: var(--main-color);
}

.red-white-link:hover {
    color: var(--font-color1);
}

.one-column {
    max-width: 100%;
    width: 100%;
}

.home-hero-image-wrap {
    max-width: 100%;
}

.home-hero-image-size {
    /* max-height: calc(100vh - 136px); */
    /* overflow: hidden; */
}

.home-hero-image-wrap > div {
    position: relative;
}

.home-hero-image-wrap img {
    position: relative;
    width: 100%;
    height: auto;
    /* max-height: calc(100vh - 136px); */
    margin: auto;
}

.btn-attachment {
    position: absolute;
    bottom: 0;
    padding: 12px 20px;
    background: transparent;
    margin-bottom: 10px;
}

.btn-contact-us-attach {
    bottom: 0;
    padding: 12px 20px;
    background: transparent;
    place-self: center;
}

.btn-send {
    padding: 12px 30px;
}

.banner-wrap img {
    /* max-height: calc(100vh - 136px); */
    /* max-height: 100%; */
    /* max-width: 100%; */
    height: auto;
    width: 100%;
    margin: auto;
}

/* .careers-banner img {
    max-height: 100%;
    height: auto;
    width: auto;
} */

.slide-arrow {
    background-color: transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    font-size: 3em;
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.prev-arrow {
    left: 5%;
    z-index: 1;
    background-image: url("../images/home/Direc2Left.png");
    background-size: cover;
    padding: 0.5em;
}

.next-arrow {
    right: 5%;
    background-image: url("../images/home/Direc2Right.png");
    background-size: cover;
    padding: 0.5em;
}

.cake-prev-arrow {
    left: -5%;
    z-index: 1;
    background-image: url("../images/home/Direc3Left.png");
    background-size: cover;
    padding: 0.5em;
}

.cake-next-arrow {
    right: -5%;
    background-image: url("../images/home/Direc3Right.png");
    background-size: cover;
    padding: 0.5em;
}

.cake-custom-dots {
    display: inline-flex;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    content: "";
}

.cake-custom-dots li button {
    font-size: 0;
    border: none;
    border-radius: 5px;
    padding: 2px 5px;
    margin: 0 5px;
    background-color: rgba(150, 150, 150, 0.5);
}

.cake-custom-dots .slick-active button {
    border-radius: 5px;
    padding: 2px 10px;
    background-color: rgba(255, 255, 255, 0.7);
}

.custom-dots {
    display: inline-flex;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    content: "";
}

.custom-dots li button {
    font-size: 0;
    border: none;
    border-radius: 5px;
    padding: 2px 5px;
    margin: 0 5px;
    background-color: rgba(150, 150, 150, 0.5);
}

.custom-dots .slick-active button {
    border-radius: 5px;
    padding: 2px 10px;
    background-color: rgba(255, 255, 255, 0.7);
}

.learn-more-section {
    /*text-align: right !important;*/
    text-align: center;
    justify-items: center;
}

.hero-content-wrap {
    z-index: 1;
    position: absolute;
    top: 35%;
    left: 16%;
    color: var(--font-color1);
    background-color: rgba(150, 150, 150, 0.5);
    padding: 15px;
    border-radius: 5px;
    min-width: 38%;
}

.home-hero-image-wrap .slick-slide {
    position: relative;
}

.hero-content-wrap h1,
.hero-content-wrap h2 {
    font-size: 2.3rem;
}

.hero-content-wrap p,
.hero-content-wrap h3 {
    padding: 1em 0;
    font-size: 1.1rem;
}

.hero-content-wrap a {
    margin-top: 10px;
}

.hero-content-wrap span {
    font-size: large;
}

.square-arrow-right {
    padding: 1px;
    display: inline-flex;
    padding: 0 1em;
}

.square-arrow-right img {
    /* margin-left: 2em; */
    max-height: 35px;
    align-self: center;
    width: auto;
}

.square-arrow-right:hover {
    color: var(--font-color1) !important;
    background-color: var(--main-color) !important;
    background-image: linear-gradient(var(--main-color), #991e1e) !important;
}

.square-arrow-right:hover img {
    animation: myturn 1.5s infinite;
}

.square-arrow-right span {
    padding: 10px 15px;
}

.latest-offer-wrap {
    max-width: 100%;
}

.latest-offer-wrap .slick-slide {
    /* padding: 10%; */
    /* max-width: 200px; */
    overflow: hidden;
    opacity: 0.5;
    transition: 0.2s;
    transform: scale(0.9);
}

.latest-offer-wrap .slick-slide.slick-active {
    transform: scale(1);
    opacity: 1;
    /* max-width: unset; */

    /* padding: unset; */
}

.latest-offer-wrap .prev-arrow {
    background-image: url("../images/home/Direc3Left.png");
}

.latest-offer-wrap .next-arrow {
    background-image: url("../images/home/Direc3Right.png");
}

.latest-offer-wrap .custom-dots {
    padding-top: 10px;
    position: relative;
}

.latest-offer-wrap .custom-dots li button {
}

.latest-offer-wrap .custom-dots .slick-active button {
    background-color: var(--main-color);
}

.read-more {
    text-transform: uppercase;
    padding: 10px 50px;
}

.our-outlet-wrap {
    /* background-image: url('../images/home/OurOutlet.jpg'); */
    min-height: 500px;
    position: relative;
    background-position: left;
    background-repeat: no-repeat;
}

.our-outlet-bg {
    background-image: url("../images/Web/Home-Our-Outlet.jpg");
    background-attachment: scroll;
    background-size: cover;
}

.our-outlet-wrap .our-outlet-content p {
    line-height: 2em;
    margin-top: 1em;
}

.our-outlet-wrap .image-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: linear-gradient(to left, white, transparent 50%);
}

.our-story-wrap {
    background-image: url("../images/Web/Home-Our-Story-2.jpg");
    background-repeat: no-repeat;
    background-position: right;
    background-attachment: scroll;
    background-size: cover;
    min-height: 500px;
    position: relative;
}

.our-story-bg {
    /* background-image: url('../images/home/OurStory.jpg'); */
}

.our-story-wrap .our-story-content p {
    line-height: 2em;
    margin-top: 1em;
}

.our-story-wrap .image-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: linear-gradient(to right, white, transparent 50%);
}

.contact-us-wrap {
    background-image: url("../images/Web/contact_us_section_bg.jpg");
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: contain;
    background-color: var(--font-color2);
    min-height: 500px;
    position: relative;
}

.contact-us-wrap label span {
    color: #ce2828;
}

.contact-us-bg {
    /* background-image: url('../images/home/ContactUs@2x.jpg');
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover; */
}

.corporate-sales-bg {
    background-image: url("../images/Corporate\ Voucher\ Image.jpeg");
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    background-color: var(--font-color2);
    min-height: 500px;
    position: relative;
}

.contact-us-bg {
    /* background-image: url('../images/home/ContactUs@2x.jpg'); */
}

.bg-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
}

.field-black-blank {
    color: #000000;
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
}

.contact-us-wrap {
}

.scroll-up {
    /* position: fixed;
    z-index: 99;
    bottom: 10px;
    right: 20px; */
    cursor: pointer;
    transition: 0.5s;
    justify-content: end;
    display: flex;
}

.scroll-up img {
    max-width: 100%;
    max-height: 100%;
    width: 64px;
    border-radius: 50%;
    height: auto;
}

.scroll-up img:hover {
    background-color: var(--second-color);
    /* filter: grayscale(100%); */
}

.scroll-up.end-page {
    /* bottom: 60px; */
}

.floating-container {
    position: fixed;
    z-index: 99;
    bottom: 10%;
    right: 20px;
}

.hidden-buttons {
    display: none;
    transition: all 0.3s ease-in-out;
}

.hidden-buttons.active {
    display: block;
}

.food-allergy-float,
.btn-float-order,
.btn-meow-float,
.btn-thai-tea {
    display: flex;
    justify-content: end;
    padding-bottom: 10px;
}

.btn-menu-close {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
    cursor:pointer;
}

.btn-menu-close div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #DA2828;
}

.food-allergy-float img {
    max-width: 100%;
    max-height: 100%;
    width: 65px;
    height: auto;
}

.btn-menu-close img {
    max-width: 100%;
    max-height: 100%;
    width: 35px;
    height: auto;
}

.btn-menu-close {
    display: none;
}

.bs-tooltip-top .arrow::before {
    border-top-color: #DA2828 !important;
}
.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #DA2828 !important;
}
.bs-tooltip-left .arrow::before {
    border-left-color: #DA2828 !important;
}
.bs-tooltip-right .arrow::before {
    border-right-color: #DA2828 !important;
}

.tooltip-inner {
    background-color: #fff !important;
    color: #000 !important;
    border: 2px solid #DA2828 !important;
    max-width: 300px;
    text-align: left;
    font-size: 14px;
    padding: 10px 12px;
}

.red-text {
    color: red;
    font-weight: bold;
}

.btn-float-order img {
    max-width: 100%;
    max-height: 100%;
    width: 70px;
    animation: myfirst 1s infinite;
    height: auto;
}

.btn-meow-float img {
    max-width: 100%;
    max-height: 100%;
    width: 70px;
    animation: myfirst 1s infinite;
    height: auto;
}

.btn-thai-tea img {
    max-width: 100%;
    max-height: 100%;
    width: 70px;
    animation: myfirst 1s infinite;
    height: auto;
}

.btn-menu-dots {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
    cursor: pointer;
    margin-right: 5px;
}

.btn-menu-dots div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #DA2828;
    box-shadow: 2px 2px 3px #999;
}

.btn-menu-dots img {
    max-width: 100%;
    max-height: 100%;
    width: 65px;
    animation: myfirst 1s infinite;
    height: auto;
}

.hidden-buttons.active > div {
    animation: popUp 0.3s ease forwards;
}

@keyframes popUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.form-group {
    display: flex;
    min-height: 55px;
    /* width: 500px; */
    margin: 0px auto;
}

.control-label {
    font-size: 16px;
    font-weight: 400;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    transform: translate3d(0, 22px, 0) scale(1);
    transform-origin: left top;
    transition: 240ms;
    line-height: 29px;
}

.form-group.focused .control-label {
    opacity: 1;
    transform: scale(0.75);
    color: var(--font-color3);
}

.form-control {
    align-self: flex-end;
}

.form-control::-webkit-input-placeholder {
    color: transparent;
    transition: 240ms;
}

.form-control:focus::-webkit-input-placeholder {
    transition: none;
}

.form-group.focused .form-control::-webkit-input-placeholder {
    color: #bbb;
}

/* CSS from Bootstrap Start */

.form-control {
    display: block;
    width: 100%;
    height: 37px;
    padding: 6px 16px;
    font-size: 13px;
    line-height: 1.846;
    color: #666666;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}

.form-control::-moz-placeholder {
    color: #bbbbbb;
    opacity: 1;
}

.form-control:-ms-input-placeholder {
    color: #bbbbbb;
}

.form-control::-webkit-input-placeholder {
    color: #bbbbbb;
}

.form-control::-ms-expand {
    border: 0;
    background-color: transparent;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: transparent;
    opacity: 1;
}

.form-control[disabled],
fieldset[disabled] .form-control {
    cursor: not-allowed;
}

textarea.form-control {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: none;
}

textarea,
textarea.form-control,
input.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
[type="text"].form-control,
[type="password"].form-control,
[type="email"].form-control,
[type="tel"].form-control,
[contenteditable].form-control {
    padding: 0;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-box-shadow: inset 0 -1px 0 #dddddd;
    box-shadow: inset 0 -1px 0 #dddddd;
    font-size: 16px;
}

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
[type="text"].form-control:focus,
[type="password"].form-control:focus,
[type="email"].form-control:focus,
[type="tel"].form-control:focus,
[contenteditable].form-control:focus {
    -webkit-box-shadow: inset 0 -2px 0 var(--font-color3);
    box-shadow: inset 0 -2px 0 var(--font-color3);
}

textarea[disabled],
textarea.form-control[disabled],
input.form-control[disabled],
input[type="text"][disabled],
input[type="password"][disabled],
input[type="email"][disabled],
input[type="number"][disabled],
[type="text"].form-control[disabled],
[type="password"].form-control[disabled],
[type="email"].form-control[disabled],
[type="tel"].form-control[disabled],
[contenteditable].form-control[disabled],
textarea[readonly],
textarea.form-control[readonly],
input.form-control[readonly],
input[type="text"][readonly],
input[type="password"][readonly],
input[type="email"][readonly],
input[type="number"][readonly],
[type="text"].form-control[readonly],
[type="password"].form-control[readonly],
[type="email"].form-control[readonly],
[type="tel"].form-control[readonly],
[contenteditable].form-control[readonly] {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 1px dotted #ddd;
}

textarea.input-sm,
textarea.form-control.input-sm,
input.form-control.input-sm,
input[type="text"].input-sm,
input[type="password"].input-sm,
input[type="email"].input-sm,
input[type="number"].input-sm,
[type="text"].form-control.input-sm,
[type="password"].form-control.input-sm,
[type="email"].form-control.input-sm,
[type="tel"].form-control.input-sm,
[contenteditable].form-control.input-sm {
    font-size: 12px;
}

textarea.input-lg,
textarea.form-control.input-lg,
input.form-control.input-lg,
input[type="text"].input-lg,
input[type="password"].input-lg,
input[type="email"].input-lg,
input[type="number"].input-lg,
[type="text"].form-control.input-lg,
[type="password"].form-control.input-lg,
[type="email"].form-control.input-lg,
[type="tel"].form-control.input-lg,
[contenteditable].form-control.input-lg {
    font-size: 17px;
}

select,
select.form-control {
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 0;
    padding-right: 0 \9;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEVmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmaP/QSjAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
    -webkit-background-size: 13px 13px;
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: right center;
    -webkit-box-shadow: inset 0 -1px 0 #dddddd;
    box-shadow: inset 0 -1px 0 #dddddd;
    font-size: 16px;
    line-height: 1.5;
}

select::-ms-expand,
select.form-control::-ms-expand {
    display: none;
}

select.input-sm,
select.form-control.input-sm {
    font-size: 12px;
}

select.input-lg,
select.form-control.input-lg {
    font-size: 17px;
}

select:focus,
select.form-control:focus {
    -webkit-box-shadow: inset 0 -2px 0 var(--font-color3);
    box-shadow: inset 0 -2px 0 var(--font-color3);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEUhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISF8S9ewAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
}

select[multiple],
select.form-control[multiple] {
    background: none;
}

.btn-menu {
    background-color: none;
    cursor: pointer;
}

.modal-menu-wrap {
    background-color: #2d2926;
    padding: 2em 3em;
}

.modal-menu-wrap ul li a {
    color: var(--font-color1);
}

.about-us-wrap p,
.concept-wrap p,
.value-wrap p,
.keep-in-touch-wrap p {
    font-size: 16px;
    color: var(--font-color3);
    line-height: 26px;
}

.about-us-wrap .title.main-color.underline::after {
}

.inline-logo {
    vertical-align: bottom;
}

.inline-logo img {
    max-height: 28px;
    width: auto;
}

.concept-wrap img {
    height: 350px;
    position: relative;
    z-index: 1;
}

.concept-wrap .concept-row {
    margin-top: -30%;
}

.concept-wrap #cafe-concept-content {
    border: 12px double var(--main-color);
    padding: 6rem 35px;
}

@media (max-width: 1199.5px) {
    .concept-wrap .concept-row {
        margin-top: -35%;
    }
}

@media (max-width: 991.5px) {
    .concept-wrap img {
        height: 250px;
    }

    .concept-wrap #cafe-concept-content {
        padding: 3rem 15px;
    }
}

@media (max-width: 767.5px) {
    .concept-wrap img {
        display: none;
    }

    .concept-wrap .concept-row {
        margin-top: 0;
    }
}

.concept-wrap h1 {
    font-size: 26px;
    font-weight: bold;
}

.value-wrap {
    background-color: var(--font-color2);
}

.brand-value {
    padding-left: 1em;
    padding-bottom: 1em;
    font-weight: bold;
}

.timeline-wrap img {
    width: auto;
    height: 100px;
}

.timeline__content {
    background-color: unset;
    border: unset;
    border-radius: 10px;
    color: #333;
}

.timeline__content:after,
.timeline__content:before {
    content: unset;
}

.timeline:not(.timeline--horizontal):before {
    background-color: var(--main-color);
}

.timeline__item:after {
    background-color: var(--main-color);
    border: 2px solid var(--main-color);
    border-radius: 0%;
    height: 70px;
    width: 1px;
}

.timeline--horizontal .timeline-divider {
    background-color: var(--main-color);
}

.timeline--horizontal .timeline__item:after {
    top: calc(100% - 35px);
    left: 10%;
}

.timeline--horizontal .timeline__item--bottom:after {
    top: 33px;
}

.timeline-wrap .title.main-color.underline::after,
.lobster-title.main-color.underline::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 16px;
    transform: translateX(calc(-50%));
    background: var(--main-color);
    height: 5px;
    width: 10%;
}

@media only screen and (min-width: 991px) {
    .timeline-wrap .timeline__item--bottom .title.main-color.underline::after {
        content: unset;
    }

    .timeline-wrap .timeline__item--bottom .title.main-color.underline::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 16px;
        transform: translateX(calc(-50%));
        background: var(--main-color);
        height: 5px;
        width: 10%;
    }
}

.timeline__item--bottom .timeline__content {
    padding-top: 1.75em;
}

.timeline-wrap .square-arrow-right {
    float: right;
    margin-right: 20px;
}

.timeline-wrap .square-arrow-right span {
    padding: 10px 30px 10px 15px;
}

.timeline-nav-button--prev:before {
    background-image: url("../plugins/timeline/images/arrow-left.png");
    background-size: cover;
    padding: 22px;
}

.timeline-nav-button--next:before {
    background-image: url("../plugins/timeline/images/arrow-right.png");
    background-size: cover;
    padding: 22px;
}

.timeline-wrap h2 {
    font-size: 35px;
}

.timeline-wrap p {
    font-size: 15px;
}

.feedback-wrap {
    background-color: var(--font-color2);
}

.feedback-wrap h2 {
    font-size: 22px;
    color: var(--font-color3);
    font-weight: 600;
}

.keep-in-touch-wrap .title.main-color.underline::after {
    left: 50%;
    width: 100%;
}

.btn-black-blank,
.card-header {
    color: var(--font-color3);
    background-color: unset;
    border: none;
}

.team-card {
    padding: 15px 0;
}

.team-wrap .btn:focus {
    box-shadow: unset;
}

.team-wrap .team-card-title,
.team-wrap .card-body-content,
.team-wrap .card-body {
    border: 1px solid #dddddd;
    border-radius: 0;
}

.team-wrap .team-card-title {
    padding: 1.5em;
}

.team-wrap .team-card-title h3 {
    /* text-align: left; */
}

.team-wrap .team-card-title span {
    font-size: 22px;
}

.team-wrap .card-body-content {
    font-weight: 600;
}

.team-wrap .card-body {
    background-color: var(--font-color2);
    color: var(--font-color3);
    font-size: 13px;
}

.card-body ol {
    padding-left: 10px;
}

.team-wrap .card-header a::after {
    content: "";
    background-image: url("../images/Career/DirecCareerRight.png");
    position: absolute;
    right: 25px;
    height: 20px;
    width: 20px;
    background-size: cover;
    transition: all 0.5s;
    transform: rotate(90deg);
}

.team-wrap .card-header .collapsed:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(0deg);
}

.btn-home_arrow > img {
    transition: all 0.3s;
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

.btn-home_arrow.collapsed > img {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);

    transition: all 0.3s;
}

.faq-wrap .card-header a::before {
    content: "";
    background-image: url("../images/close.png");
    position: absolute;
    left: 25px;
    top: 9px;
    height: 20px;
    width: 20px;
    background-size: cover;
    transition: all 0.5s;
    transform: rotate(180deg);
}

.faq-wrap .card-header .collapsed::before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    background-image: url("../images/open.png");
    transform: rotate(0deg);
}

.faq-wrap h2 {
    font-weight: 600;
}

.faq-wrap h3 {
    padding-left: 25px;
    color: var(--font-color4);
    white-space: break-spaces;
    font-size: 18px;
}

.faq-wrap .card-body {
    background: var(--font-color2);
}

.faq-wrap p {
    color: var(--font-color4);
}

.faq-wrap .card-body p:not(:first-of-type) {
    padding-top: 15px;
}

.faq-wrap .card-header {
    padding: 0 1.25rem;
}

.faq-wrap .faq-list {
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 8em;
}

.faq-wrap .faq-list > .row:not(:last-of-type) {
    border-bottom: 1px solid var(--font-color4);
    padding-bottom: 3em;
}

.faq-list .btn {
    box-shadow: none;
}

.apply-from-wrap {
    background-color: var(--font-color2);
}

.outlet-wrap .form-group,
.search-container .form-group {
    width: 100%;
    padding: 0 1em;
}

.outlet-wrap .search-group .icon,
.search-group .icon {
    position: absolute;
}

.outlet-wrap #Search,
.search-container #Search,
.outlet-wrap #search,
.search-container #search,
.search-container #search_outlet {
    position: relative;
    padding-left: 20px;
}

.outlet-wrap .search,
.search-container .search {
    left: 30px;
    top: 30px;
}

.outlet-wrap .gps,
.search-container .gps {
    right: 30px;
    top: 35px;
}

.outlet-wrap .control-label[for="Search"],
.search-container .control-label[for="Search"],
.search-container .control-label[for="search_outlet"] {
    padding-left: 25px;
}

.outlet-wrap iframe {
    width: 100%;
}

.outlet-container {
    padding: 2em;
}

.outlet-container .outlet-name {
    padding-bottom: 5px;
}

.outlet-container {
    font-size: 15px;
    border-bottom: solid 1px var(--font-color2);
}

.outlet-container.select {
    background-color: var(--font-color2);
}

.outlet-container h5 {
    font-size: 17px;
    font-weight: bold;
}

.outlet-app img {
    height: 35px;
    width: auto;
}

.outlet-container ul li:last-child {
    padding-left: 10px;
}

.outlet-list {
    /* overflow-y: scroll; */
    /* overflow-x: hidden; */
    /* max-height: 550px; */
}

.our-outlet_list {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 550px;
}

.outlet-list .list-top {
    border-bottom: 1px solid var(--font-color4);
    padding-bottom: 10px;
}

.outlet-list .list-content {
    padding-top: 15px;
}

.search-group {
    border-bottom: 2px solid var(--main-color);
}

.outlet-wrap .search-container {
    border-left: solid 1px var(--font-color2);
    border-right: solid 1px var(--font-color2);
    box-shadow: 5px 0 10px -2px #888;
}

.slick-initialized .slick-slide {
    border-radius: 15px;
}

.bg-gray {
    background: #ebebeb;
}

.our-item-wrap .menu-list a,
.our-menu-wrap .menu-list a,
.cake-anatomy-wrap .cake-list a {
    position: relative;
    margin: 15px 0;
    display: block;
    background-size: cover;
    border-radius: 10px;
}

.menu-list,
.menu-item-list,
.card-item-list,
.cake-list {
    justify-content: center;
}

.our-menu-wrap .menu-list h5,
.cake-anatomy-wrap .cake-list h5 {
    position: absolute;
    bottom: 25px;
    left: 50%;
    color: black;
    transform: translateX(-50%);
    text-align: center;
    width: max-content;
}

.our-menu-wrap .menu-list h3,
.cake-anatomy-wrap .cake-list h3 {
    position: absolute;
    bottom: 25px;
    left: 50%;
    color: black;
    transform: translateX(-50%);
    text-align: center;
    width: max-content;
}

.learn-more-section {
    text-align: center !important;
}

@media only screen and (max-width: 1000px) {
    .our-menu-wrap .menu-list h5,
    .cake-anatomy-wrap .cake-list h5 {
        width: auto;
    }
}

.menu-item {
    /* border: 3px solid var(--main-color); */
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}

.menu-item.meal-item {
    box-shadow: 0px -2px 15px #888;
}

.menu-item .menu-head {
    padding-top: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.menu-item-wrap .menu-body {
    padding: 1.5em;
}

.menu-body p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: left;
}

.menu-body .menu-item-title {
    font-size: 1.1rem;
    text-align: center;
    font-weight: bold;
}

.outlet-content {
    padding-left: 25% !important;
}

.cake-title {
    /*height: 30px;*/
}

.learn-more-btn {
    background-color: #D13737;
    color: white;
    width: 120px;
    font-size: 13px;
}

.learn-more-btn:hover, .learn-more-btn:focus {
    background-color: white;
    color: #D13737;
    border: 1px solid #D13737;
}

@media (min-width: 768px) {
    .custom-container {
        padding: 0px 40px !important;
    }
}

@media (min-width: 992px) {
    .custom-container {
        padding: 0px 60px !important;
    }
}

@media (min-width: 1200px) {
    .custom-container {
        padding: 0px 80px !important;
    }
}

.custom-container {
    padding: 0px 15px;
    width: 100%;
}

.menu-item {
    margin: 15px 0;
}

.category-content {
    margin-top: 3rem;
}

.category-content h2 {
    font-family: "lobster";
    color: var(--second-color);
    margin-bottom: 10px;
}

.category-content a {
    text-decoration: underline;
}

.category-content a:hover {
    text-decoration: underline;
}

.text-black {
    color: black !important;
}

.menu-description {
    color: #3f3f3f;
    font-size: 15px;
    font-family: "lato", sans-serif;
    font-weight: normal;
    line-height: 1.5;
}

.csr-list {
    justify-content: center;
}

.csr-wrap .csr-list a {
    position: relative;
    margin: 15px 0;
    display: block;
    background-size: cover;
    background-position: center center;
}

.csr-wrap .csr-list img {
    width: 100%;
    height: 30vh;
}

.csr-wrap .csr-list h5 {
    position: absolute;
    font-size: 15px;
    bottom: 25px;
    width: 100%;
    left: 50%;
    color: var(--font-color1);
    transform: translateX(-50%);
    padding: 0 10px;
    text-align: center;
}

.csr-main-image a {
    object-fit: cover;
    height: auto;
    width: 100%;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat;
}

.csr-main-image .csr-main-image-padding{
    padding-top: 32%
}

.fancybox-caption__body {
    padding: 0 15%;
}

.fancybox-caption__body h4,
.fancybox-caption__body p:not(:last-of-type) {
    padding-bottom: 1.5em;
}

.card-item-wrap {
}

.card-body {
    padding: 1.5em;
}

.card-item {
    margin: 15px 0;
    border: 3px solid var(--main-color);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}

.card-footer {
}

.card-footer a {
    width: 100%;
}

.card-footer .square-arrow-right img {
    right: 50px;
    position: absolute;
}

.promotion-detail-wrap .promotion-detail-top img {
    /* width: 50%; */
    border-radius: 10px;
    margin-top: 3em;
}

.promotion-detail-wrap .promotion-detail-body p,
.promotion-detail-wrap .promotion-detail-bottom p {
    color: var(--font-color3);
}

.promotion-detail-wrap .promotion-detail-bottom {
    padding-top: 3em;
}

.promotion-detail-wrap .promotion-detail-bottom li {
    padding-left: 10px;
}

.promotion-detail-wrap .promotion-detail-bottom li::before {
    content: "🥤";
}

.voucher-outlet-wrap {
    /* padding: 0 15%; */
}

.voucher-outlet-wrap a {
    /* background-color: var(--font-color2); */
    display: inline-block;
}

.operating-hours-wrap p {
    padding: 0.5em 0;
}

.operating-hours-wrap td {
    padding: 20px;
    border-bottom: 1px solid #e1e1e1;
}

.scroll-fixed {
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
}

.description-wrap {
    background: white;
    min-height: 300px;
    position: relative;
    padding-top: 30px;
}

.faqs-wrap {
    background: white;
    min-height: 300px;
    position: relative;
    padding: 30px 0px;
}

.scroll-fixed-20 {
    position: -webkit-sticky;
    position: sticky;
    top: -180px;
}

.top-fixed {
    /* padding-top: 100px; */
}

.dot-list {
    list-style: unset;
    list-style-position: inside;
}

.dot-list li {
    padding: 5px;
}

a.link-underline {
    position: relative;
    color: #ce2828;
}

.link-underline::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    background: #ce2828;
    height: 2px;
    width: 100%;
}

.app-wrap {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
}

.app-wrap {
    background-image: url("../images/app/SR-App-Page-v5.jpg");
}

.associate-wrap {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 28vw;
    background-image: url("../images/Web/Associate.jpg");
}

.mobile-app {
    width: 200px;
    height: auto;
}

.app-icon-position {
    position: absolute;
    right: 10%;
    bottom: 50%;
    transform: translateY(-50%);
}

.egift-container {
    height: 90vh;
}

.egift-bg {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
}

.latest-offer-wrap .slick-slide img {
    max-width: 500px;
}

.feedback-wrap span {
    color: #ce2828;
}

.feedback-wrap .fileupload span {
    /* color: inherit ; */
}

.timeline-wrap ul {
    max-height: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.clearfix {
    *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
    clear: both;
}

.hide-text {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.input-block-level {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btn-file {
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}

.btn-file > input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translate(-300px, 0) scale(4);
    font-size: 23px;
    direction: ltr;
    cursor: pointer;
}

.fileupload-corporate {
    display: block;
}

.fileupload {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.fileupload .uneditable-input {
    display: inline-block;
    margin-bottom: 0px;
    vertical-align: middle;
    cursor: text;
}

.fileupload .thumbnail {
    overflow: hidden;
    display: inline-block;
    margin-bottom: 5px;
    vertical-align: middle;
    text-align: center;
}

.fileupload .thumbnail > img {
    display: inline-block;
    vertical-align: middle;
    max-height: 100%;
}

.fileupload .btn {
    vertical-align: middle;
}

.fileupload-exists .fileupload-new,
.fileupload-new .fileupload-exists {
    display: none;
}

.fileupload-inline .fileupload-controls {
    display: inline;
}

.fileupload-new .input-append .btn-file {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

.thumbnail-borderless .thumbnail {
    border: none;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.fileupload-new.thumbnail-borderless .thumbnail {
    border: 1px solid #ddd;
}

.control-group.warning .fileupload .uneditable-input {
    color: #a47e3c;
    border-color: #a47e3c;
}

.control-group.warning .fileupload .fileupload-preview {
    color: #a47e3c;
}

.control-group.warning .fileupload .thumbnail {
    border-color: #a47e3c;
}

.control-group.error .fileupload .uneditable-input {
    color: #b94a48;
    border-color: #b94a48;
}

.control-group.error .fileupload .fileupload-preview {
    color: #b94a48;
}

.control-group.error .fileupload .thumbnail {
    border-color: #b94a48;
}

.control-group.success .fileupload .uneditable-input {
    color: #468847;
    border-color: #468847;
}

.control-group.success .fileupload .fileupload-preview {
    color: #468847;
}

.control-group.success .fileupload .thumbnail {
    border-color: #468847;
}

.home_slider-bg {
    /* min-height: 80vh; */
    min-height: calc(100vh - 70px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.promotion-detail-wrap ul {
    list-style: unset;
    padding-left: 1.5em;
}

.outlet-list h3 {
    font-size: 18px;
}

.title.title-bg {
    position: absolute;
    font-size: 4rem;
    color: var(--font-color1);
    font-weight: normal;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -25px);
}

#loadingDiv {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, 0.6);
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}

/* Cake Anatomy */
.cake-anatomy-wrap .cake-list span {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5%;
    border-radius: 0 10px 0 20px;
    background-color: rgba(150, 150, 150, 0.3);
    color: var(--font-color1);
}

.open-pop {
    border-radius: 5px;
    padding: 19px 10px;
    transition: 0.5s ease all;
    line-height: 1;
    min-width: 243px;
    font-size: 20px;
    text-align: center;
    letter-spacing: -0.5px;
    color: #fff;
    background: var(--main-color);
    border: 1px solid var(--main-color);
    /* width: 70%; */
    display: block;
    margin-bottom: 2rem;
    margin-top: 3rem !important;
}

.new-detail-center .btn-red-white:hover {
    background: white !important;
    color: var(--main-color) !important;
}

.new-detail .row {
    margin-bottom: 1.5em;
}

.new-detail-center {
    margin: 0 auto;
    display: flex;
    padding-top: 1rem !important;
    /* justify-content: space-evenly; */
    align-items: baseline;
}

.new-detail-center span {
    font-size: large;
}

@media only screen and (max-width: 991px) and (min-width: 400px) {
    .promotion-detail-wrap .promotion-detail-top img {
        width: 70%;
    }

    .item-detail {
        display: flex;
        justify-content: center;
    }

    .csr-main-image a {
        width: 100%;
    }

    .csr-main-image .csr-main-image-padding{
        padding-top: 70%
    }

}

@media only screen and (max-width: 400px) {
    .csr-main-image a {
        width: 100%;
    }

    .csr-main-image .csr-main-image-padding{
        padding-top: 70%
    }
}

/*
.row.no-gutter>[class*=col-] {
    padding-right: 0;
    padding-left: 0
}

input[type=checkbox] {
    position: relative;
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    margin: 2px 0;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: top
}

input[type=checkbox] {
    -webkit-transition: border-color .2s;
    -o-transition: border-color .2s;
    -moz-transition: border-color .2s;
    transition: border-color .2s
}

input[type=checkbox] {
    border: 1px solid #ccc;
    background-color: #fff;
    color: #842525;
    margin-top: 1px
}

input[type=checkbox] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

input[type=checkbox]:checked:before {
    content: "";
    position: absolute;
    font-size: 14px;
    left: 0;
    bottom: 0;
    text-align: center;
    width: 25px;
    height: 25px;
    background: url(../images/checked.png)
}

input[type=radio] {
    position: relative;
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    margin: 0;
    margin-right: 5px;
    vertical-align: top
}

input[type=radio] {
    -webkit-transition: border-color .2s;
    -o-transition: border-color .2s;
    -moz-transition: border-color .2s;
    transition: border-color .2s
}

input[type=radio] {
    border: 1px solid #ccc;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    background-color: #fff;
    color: #0e3642
}

input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

input[type=radio]:checked:before {
    content: " ";
    display: block;
    position: absolute;
    font-size: 24px;
    left: 4px;
    top: 4px;
    text-align: center;
    width: 10px;
    height: 10px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    background: #000
}

.btn-live {
    box-shadow: 0 0 50px red;
    text-shadow: 0 10px 50px red;
    border: 1px solid #fff;
    background: rgba(255, 0, 4, .5);
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 1.2em;
    color: #fff;
    animation: myfirst 1s infinite;
    animation-direction: alternate;
    -webkit-animation: myfirst 1s infinite;
    -webkit-animation-direction: alternate;
    transition: all 1s ease-out
}

.btn-live:hover {
    box-shadow: 0 0 50px red;
    text-shadow: 0 10px 50px red;
    background: red;
    border-radius: 10px;
    padding: 5px 10px;
    color: #fff
}

.btn-live1 {
    border: 1px solid #fff;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 1.2em;
    color: #fff
}

.btn-live1:hover {
    box-shadow: 0 0 50px #000;
    text-shadow: 0 10px 50px #000
}

.live-mag {
    margin-left: 30px
}

#intro {
    background: url(../images/banner.jpg) no-repeat fixed;
    background-size: cover
}

#about {
    background: url(../images/banner1.jpg) no-repeat fixed;
    background-size: cover
}

#faith {
    background: url(../images/banner2.jpg) no-repeat fixed;
    background-size: cover
}

@media(max-width:768px) {
    #about {
        background: url(../images/banner1-wap.jpg) no-repeat fixed;
        background-size: cover
    }
    #faith {
        background: url(../images/banner2-wap.jpg) no-repeat fixed;
        background-size: cover
    }
}

.top-nav-collapse {
    background-color: #000!important;
    padding-bottom: 60px!important
}

.navbar:not(.top-nav-collapse) {
    background: 0 0!important
}

.navbar {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .16), 0 0 0 0 rgba(0, 0, 0, .12);
    padding-left: 0!important;
    padding-right: 0!important;
    font-size: 16px
}

.nav-item a.nav-link {
    padding: 15px
}

.nav-item a:hover {
    background: #fff;
    color: #000!important
}

.nav-item:hover a {
    background: #fff;
    color: #000!important
}

.nav-drown {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    padding: 3%;
    z-index: 9;
    background: #fff;
    display: none;
    box-shadow: 1px 1px 20px #000
}

.navbar .dropdown-menu {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    padding: 3%;
    z-index: 9;
    background: #fff;
    display: none;
    box-shadow: 1px 1px 20px #000
}

@media(max-width:768px) {
    .navbar .dropdown-menu {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        padding: 3%;
        z-index: 9;
        background: #fff;
        display: none;
        box-shadow: 1px 1px 20px #000
    }
}

.nav-drown dl dt {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 700
}

.tlinks {
    text-indent: -9999px;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden
}

.sun-drown dl {
    float: left
}

.sun-drown dl dd {
    display: block;
    width: 100%;
    font-size: 13px;
    margin-bottom: 1px
}

.sun-drown dl dd img {
    display: block;
    width: 100%
}

@media(max-width:768px) {
    .nav-drown {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding: 0;
        z-index: 9;
        padding-top: 55px;
        background: #fff;
        display: none;
        box-shadow: 1px 1px 20px #000
    }
    .live-mag {
        margin-left: 0
    }
    .live-wap {
        padding: 10px;
        margin-top: 20px
    }
    .live-wap a {
        padding: 10px 0;
        width: 100%;
        text-align: center
    }
    .btn-live {
        box-shadow: 0 0 50px red;
        text-shadow: 0 10px 50px red;
        border: 1px solid #fff;
        background: #ff0004;
        border-radius: 10px;
        padding: 5px 10px;
        font-size: 1.2em;
        color: #fff
    }
    .btn-live:hover {
        box-shadow: 0 0 50px red;
        text-shadow: 0 10px 50px red;
        background: red;
        border-radius: 10px;
        padding: 5px 10px;
        color: #fff
    }
    .top-nav-collapse {
        background-color: #000!important;
        padding-bottom: 10px!important
    }
    .navbar:not(.top-nav-collapse) {
        background: #000!important
    }
}

.login_info {
    display: block;
    clear: both;
    float: none!important;
    position: absolute;
    width: 82%;
    padding: 0;
    text-align: right;
    top: 63px;
    right: 9%;
    border-top: 2px solid #fff
}

.login_info li {
    display: inline-block
}

.login_info li a.nav-link {
    padding: 10px 15px
}

.login_info .form-group {
    margin-bottom: 0
}

.login_info .navbar-form button {
    background: 0;
    height: 30px;
    margin-top: 6px;
    border: 0;
    color: #fff;
    margin-left: -30px;
    position: relative;
    z-index: 2;
    cursor: pointer
}

.login_info .form-group {
    padding: 0;
    margin: 0;
    margin-top: 6px;
    position: relative;
    z-index: 1
}

.login_info .form-group input[type=text] {
    position: relative;
    z-index: -1
}

@media(max-width:768px) {
    .login_info {
        display: none;
        clear: both;
        float: none!important;
        position: absolute;
        width: 100%;
        padding: 0 2%;
        bottom: 0;
        left: 0;
        text-align: left;
        top: auto;
        right: auto;
        border-top: 2px solid #fff
    }
    .login_info li {
        display: block
    }
    .login_info .form-group {
        margin-bottom: 0
    }
    .login_info .navbar-form button {
        background: 0;
        height: 40px;
        border: 0;
        color: #000;
        margin-left: -30px
    }
    .login_info from {
        padding: 0;
        margin: 0
    }
}

.video-index {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%
}

.video-index:after {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: calc(100% - 6px);
    background: rgba(0, 0, 0, .4);
    content: ' ';
    display: block;
    top: 0;
    left: 0
}

.video-index video {
    width: 100%;
    height: 100wh;
    top: 0;
    left: 0
}

.nav-sub {
    background: #000!important;
    padding-bottom: 60px!important
}

@media(max-width:768px) {
    .navbar {
        padding: 5px 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9
    }
    .nav-sub {
        background: #000!important;
        padding-bottom: 5px!important
    }
}

.nav-sub:not(.top-nav-collapse) {
    background: #000!important
}

#intro .h6 {
    font-weight: 300;
    line-height: 1.7
}

#about .h4 {
    font-weight: 300;
    line-height: 1.7
}

.hm-gradient .full-bg-img {
    background: rgba(0, 0, 0, .3);
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5) 100%)
}

.full-height, .full-height body, .full-height header, .full-height .view {
    height: 100%
}

.view {
    height: 100%;
    position: relative
}

.full-height header {
    height: auto!important
}

.height-full {
    height: 100vh
}

@media(max-width:450px) {
    .margins {
        margin-right: 1rem;
        margin-left: 1rem
    }
}

#pricing .lead {
    opacity: .7
}

#pricing .card-image {
    background: url(../img/architecture.jpg) no-repeat center center
}

#pricing ul li {
    font-size: 1.1em
}

.news {
    padding: 5% 0
}

.news ul {
    padding: 0;
    list-style: none
}

.news li {
    padding: 0;
    padding-bottom: 10px;
    font-size: 1.2em
}

.news li .news-time {
    padding-right: 40px
}

.news li {
    color: #000;
    display: block;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.news li:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
}

@media(max-width:768px) {
    .news li .news-time {
        padding-right: 0;
        display: block
    }
    .wap-hide {
        display: none
    }
}

.Insist {
    padding: 5% 0
}

.Insist .h5 {
    line-height: 1.8
}

.faith .h5 {
    line-height: 1.8
}

#about .h5 {
    line-height: 1.8
}

.page-footer {
    background: #333;
    padding-top: 3%!important;
    margin-top: 0%!important;
    position: relative;
    z-index: 9
}

.page-footer dl {
    padding-right: 0;
    width: 25%
}

.page-footer dl dt {
    margin-bottom: 20px;
    font-size: 16px
}

.page-footer dl dd {
    padding: 5px 0;
    font-size: 13px
}

.page-footer .link-ink {
    font-size: 16px;
    line-height: 30px;
    font-weight: 700
}

.page-footer .link-ink div {
    padding-top: 5px;
    padding-bottom: 5px
}

.page-footer .link-ink img {
    width: 30px;
    height: 30px
}

.page-footer .link-ink svg {
    font-size: 48px
}

.breadcrumb>li+li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0"
}

.sub-loation ol {
    background: 0 0!important;
    color: #000;
    padding-left: 0
}

.sub-loation ol a {
    text-decoration: underline;
    color: #000
}

.products-key {
    padding: 1% 0
}

.products-key h1 {
    display: inline-block;
    padding-right: 3%
}

.products-key i {
    color: #666;
    font-style: normal
}

.products-nav-top {
    display: none
}

.products-nav, .products-nav a {
    color: #000
}

.products-nav ul {
    padding: 0
}

.list-nav .list-dropdown {
    position: relative;
    list-style: none;
    font-size: 1.1em;
    display: inline-block;
    z-index: 3;
    border: 1px solid transparent;
    margin-right: 10px
}

.list-dropdown-toggle {
    padding: 0 20px;
    line-height: 40px;
    height: 40px;
    display: block;
    border: 1px solid transparent;
    position: relative;
    z-index: 2!important
}

.list-nav li:hover .list-dropdown-toggle, .list-dropdown-toggle:hover {
    border: 1px solid #000;
    border-bottom: 1px solid #fff
}

.list-nav>li .list-dropdown-menu {
    position: absolute;
    top: 39px;
    left: 0;
    width: 290px;
    background: #fff;
    border: 1px solid #000;
    padding: 1%;
    z-index: -1;
    display: none
}

.list-nav>li:hover .list-dropdown-menu {
    display: block
}

.products-nav .size-check dl {
    margin: 0;
    padding: 0
}

.products-nav .size-check dd {
    width: 48%;
    margin: 1%;
    display: block;
    float: left;
    position: relative;
    border: 1px solid #000
}

.products-nav .size-check dd a {
    display: block;
    border-bottom: 1px solid #fff;
    padding: 5px 0;
    text-align: center
}

.products-nav .size-check dd a.active, .products-nav .size-check dd a:hover {
    border-bottom: 1px solid #000
}

.products-nav .color-check dl {
    margin: 0;
    padding: 0
}

.products-nav .color-check dd {
    margin: 10px;
    display: block;
    float: left;
    position: relative
}

.products-nav .color-check dd a {
    display: block;
    height: 24px;
    width: 24px;
    text-align: center
}

.products-nav .color-check dd a i {
    display: none;
    height: 24px;
    width: 24px;
    line-height: 24px;
    position: absolute;
    top: 0;
    left: 0
}

.products-nav .color-check dd a.active i {
    display: block
}

.products-nav .link-check ul {
    padding: 0;
    list-style: none
}

.products-nav .link-check ul li {
    padding: 5px 8px;
    list-style: none
}

.products-nav .link-check ul li i {
    padding: 0 8px;
    font-style: normal;
    font-size: .9em;
    color: #999
}

.products-nav .link-check ul li a {
    padding: 10px 8px;
    display: block
}

.products-nav .link-check ul li a:hover {
    background: #f1f1f1
}

@media(max-width:768px) {
    .page-footer .link-ink {
        font-size: 16px;
        line-height: 30px
    }
    .page-footer .link-ink div {
        padding-top: 5px;
        padding-bottom: 5px
    }
    .page-footer .link-ink img {
        width: 30px;
        height: 30px
    }
    .page-footer .link-ink svg {
        font-size: 48px
    }
    .products-nav-top {
        padding: 15px 10px;
        border-bottom: 1px solid #ccc;
        display: block
    }
    .products-nav-top:after {
        content: " ";
        display: block;
        clear: both
    }
    .products-nav {
        position: fixed;
        display: none;
        height: 100vh;
        width: 100%;
        overflow: :auto;
        background: #fff;
        z-index: 9;
        left: 0;
        top: 0
    }
    .products-nav, .products-nav a {
        color: #000
    }
    .products-nav ul {
        padding: 0
    }
    .list-nav .list-dropdown {
        position: relative;
        list-style: none;
        font-size: 1.1em;
        display: block;
        z-index: 3;
        border: 0 solid transparent;
        border-bottom: 1px solid #ccc;
        margin-right: 0;
        width: 100%;
        float: left
    }
    .list-dropdown-toggle {
        padding: 0 20px;
        line-height: 50px;
        height: 50px;
        display: block;
        border: 0 solid transparent;
        border-bottom: 1px solid #ccc;
        position: relative;
        z-index: 2!important
    }
    .list-nav li:hover .list-dropdown-toggle, .list-dropdown-toggle:hover {
        border: 0 solid transparent;
        background: #f1f1f1
    }
    .list-nav>li .list-dropdown-menu {
        position: relative;
        top: auto;
        left: 0;
        width: 100%;
        background: #fff;
        border: 0 solid transparent;
        padding: 1%;
        z-index: -1;
        display: none
    }
    .list-nav>li .list-dropdown-menu:after {
        content: " ";
        display: block;
        clear: both
    }
    .list-nav>li:hover .list-dropdown-menu {
        display: block
    }
    .list-nav>li .list-dropdown-toggle span {
        float: right;
        padding: 10px;
        margin: 5px 0
    }
    .products-nav .size-check dl {
        margin: 0;
        padding: 0
    }
    .products-nav .size-check dd {
        width: 48%;
        margin: 1%;
        display: block;
        float: left;
        position: relative;
        border: 1px solid #000
    }
    .products-nav .size-check dd a {
        display: block;
        border-bottom: 1px solid #fff;
        padding: 5px 0;
        text-align: center
    }
    .products-nav .size-check dd a.active, .products-nav .size-check dd a:hover {
        border-bottom: 1px solid #000
    }
    .products-nav .color-check dl {
        margin: 0;
        padding: 0
    }
    .products-nav .color-check dd {
        margin: 10px;
        display: block;
        float: left;
        position: relative
    }
    .products-nav .color-check dd a {
        display: block;
        height: 24px;
        width: 24px;
        text-align: center
    }
    .products-nav .color-check dd a i {
        display: none;
        height: 24px;
        width: 24px;
        line-height: 24px;
        position: absolute;
        top: 0;
        left: 0
    }
    .products-nav .color-check dd a.active i {
        display: block
    }
    .products-nav .link-check ul {
        padding: 0;
        list-style: none
    }
    .products-nav .link-check ul li {
        padding: 5px 8px;
        list-style: none
    }
    .products-nav .link-check ul li i {
        padding: 0 8px;
        font-style: normal;
        font-size: .9em;
        color: #999
    }
    .products-nav .link-check ul li a {
        padding: 10px 8px;
        display: block
    }
    .products-nav .link-check ul li a:hover {
        background: #f1f1f1
    }
}

.color-black {
    color: #fff!important;
    background: #000
}

.color-white {
    color: #000;
    background: #fff;
    border: 2px solid #767677
}

.color-gray {
    color: #000;
    background: gray
}

.color-red {
    color: #000;
    background: red
}

.color-pink {
    color: #000;
    background: #f6c
}

.color-yellow {
    color: #000;
    background: #fff200
}

.color-orange {
    color: #000;
    background: #f90
}

.color-blue {
    color: #000;
    background: #00c
}

.color-green {
    color: #000;
    background: #3c0
}

.color-turquoise {
    color: #000;
    background: #0fc
}

.color-purple {
    color: #000;
    background: #93c
}

.color-beige {
    color: #000;
    background: #deb887
}

.color-brown {
    color: #000;
    background: #960
}

.color-gold {
    color: #000;
    background: linear-gradient(45deg, #bdb76b, khaki 50%, #bdb76b)
}

.color-silver {
    color: #000;
    background: linear-gradient(45deg, #999, #eee 50%, #999)
}

.color-Multicolor {
    color: #000;
    background: linear-gradient(45deg, #f6c, #fff200 50%, #0fc)
}

.sub .label-default {
    padding: 3px;
    margin: 5px
}

.sub .label-default, .sub .label-default a {
    background: #f1f1f1;
    color: #000;
    border-radius: 3px
}

.live-index {
    width: 100%;
    height: 90vh;
    background: #000
}

.live-index iframe {
    border: 0;
    width: 100%;
    height: 90vh
}

.live-pro {
    padding-top: 30px!important;
    padding-bottom: 10px!important;
    background: #fff;
    color: #000!important
}

.chou-btn button {
    color: #000!important;
    font-size: 1.8em!important;
    padding: 40px 80px!important;
    text-shadow: 0 1px 1px #000
}

.chou-btn {
    padding: 5%
}

.chou-btn-fix {
    position: fixed;
    right: 0;
    top: 25%;
    z-index: 999
}

.chou-btn-fix button, .chou-btn-fix .btn {
    color: #000!important;
    font-size: 1.4em!important;
    padding: 20px 15px!important;
    text-shadow: 0 1px 1px #000
}

.live-pro hr {
    border-color: #000!important;
    margin-bottom: 30px
}

.chou-table {
    margin-bottom: 30px
}

.chou-table table {
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc
}

.chou-table table th, .chou-table table td {
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center
}

.chou-table table td {
    font-size: 1.2em;
    color: #000
}

.chou-table table th {
    font-size: 1.2em;
    color: #333
}

.btn-yellow1 {
    background: #ebb600
}

.chou-content {
    padding: 10px;
    line-height: 1.4em
}

.chou-content b {
    color: #ebb600;
    padding: 0 8px
}

@media(max-width:768px) {
    .page-footer dl {
        padding-right: 0;
        width: 50%
    }
    .live-index {
        width: 100%;
        height: 90vh;
        background: #000
    }
    .live-index iframe {
        border: 0;
        width: 100%;
        height: 45vh
    }
    .live-pro {
        padding-top: 30px!important;
        padding-bottom: 10px!important;
        background: #fff;
        color: #000!important
    }
    .chou-btn button {
        color: #000!important;
        font-size: 1.8em!important;
        padding: 40px 80px!important;
        text-shadow: 0 1px 1px #000
    }
    .chou-btn {
        padding: 5%
    }
    .live-pro hr {
        border-color: #000!important;
        margin-bottom: 30px
    }
    .chou-table {
        margin-bottom: 30px
    }
    .chou-table table {
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc
    }
    .chou-table table th, .chou-table table td {
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        text-align: center
    }
    .chou-table table td {
        font-size: 1.2em;
        color: #000
    }
    .chou-table table th {
        font-size: 1.2em;
        color: #333
    }
    .btn-yellow1 {
        background: #ebb600
    }
    .chou-content {
        padding: 10px;
        line-height: 1.4em
    }
    .chou-content b {
        color: #ebb600;
        padding: 0 8px
    }
}

.index-sales {
    font-size: 1.5em
}

.index-sales .h1 {
    font-size: 2.8em;
    margin-top: 40px
}

@media(max-width:1540px) {
    .index-sales .h1 {
        font-size: 2em;
        margin-top: 40px
    }
}

@media(max-width:480px) {
    .index-sales {
        font-size: 1.2em
    }
    .index-sales .h1 {
        font-size: 1.4em;
        margin-top: 40px
    }
}

.index-sales h1 {
    margin-bottom: 20px
}

.scroll-fixed {
    position: -webkit-sticky;
    position: sticky;
    top: 120px
}

.height-full .full-bg-img, .height-full .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.index-card-white {
    background: #fff!important;
    position: relative;
    z-index: 9
}

.card-box {
    padding: 10% 0!important
}

.live-time .date-tiem-span, .live-time .date-s-span {
    background: #000;
    color: #fff;
    padding: 5px 10px;
    border: 1px solid #666;
    margin-right: 8px
}

.live-time {
    margin-top: 30px
}

@media(max-width:768px) {
    .scroll-fixed {
        position: -webkit-sticky;
        position: sticky;
        top: 50px
    }
    .help-content {
        margin-top: 30px
    }
    .help-content h1 {
        font-size: 1.8rem
    }
    .index-card-white {
        background: #fff!important;
        position: relative;
        z-index: 9
    }
    .card-box {
        padding: 10% 0!important
    }
    .live-time .date-tiem-span, .live-time .date-s-span {
        background: #000;
        color: #fff;
        padding: 5px 10px;
        border: 1px solid #666;
        margin-right: 8px
    }
    .live-time {
        margin-top: 30px
    }
    .live-time .h1 {
        font-size: 1.8rem!important
    }
} */

.menu-faq .btn {
    box-shadow: none;
}

.menu-faq.faq-wrap h3 {
    padding-left: 15px;
    color: var(--font-color4);
    white-space: break-spaces;
    font-size: 15px;
}

.menu-faq.faq-wrap .card-header .collapsed::before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    background-image: url("../images/open.png");
    transform: rotate(0deg);
}

.menu-faq.faq-wrap .card-header a::before {
    content: "";
    background-image: url("../images/close.png");
    position: absolute;
    left: 25px;
    top: 9px;
    height: 15px;
    width: 15px;
    background-size: cover;
    transition: all 0.5s;
    transform: rotate(180deg);
}

.content-wrapper .new-detail {
    min-height: 58vh;
}

.menu-show-img {
    padding-bottom: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 540px;
    border-radius: 10px;
    margin-top: 3em;
}

.menu-list i {
    position: absolute;
    bottom: 23px;
    right: 11px;
    font-size: 40px;
}

.menu-item-list i {
    position: absolute;
    bottom: 160px;
    right: 23px;
    font-size: 40px;
}

.menu-hover:hover {
    box-shadow: 7px 7px 7px #1010105c !important;
    transform: translateX(-5px) translateY(-8px);
    transition: 0.3s;
}

.btn-grey {
    border: 1px solid #a69a9a70;
    box-shadow: 2px 2px 2px #88888838;
}

.blog-card.card-item {
    border: none;
}

.blog-card {
    box-shadow: 0px -2px 15px #888;
}

.card-image {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 100%;
}

.blog-card p,
.blog-card h5 {
    overflow-wrap: anywhere;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: left;
}

.bg-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.vertical-align-list {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.img-shadow {
    box-shadow: 3px 4px 7px #0000005c !important;
    transform: translateX(-5px) translateY(-8px);
    transition: 0.3s;
}

.text-box-shadow {
    box-shadow: 5px 4px 7px #6627275c !important;
    transform: translateX(-5px) translateY(-8px);
    transition: 0.3s;
}

.blog-description p img {
    margin: auto;
}

.blog-preview_image img {
    max-width: 600px
}

.btn-read_more {
    display: none;
}

.btn-read_more.collapsed {
    display: block;
}


/* fancy button */

/* @import url("https://fonts.googleapis.com/css?family=Fascinate+Inline&display=swap"); */
/* html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

* {
  box-sizing: border-box;
  position: relative;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #14192C;
} */

.treat-button {
    font-family: "Fascinate Inline", cursive;
    font-size: 4vmin;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: linear-gradient(to bottom, #f46001, #e14802);
    border: none;
    color: #fff;
    border-radius: 2em;
    padding: 0.6em 1.5em;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 0 1em rgba(255, 255, 255, 0.2);
    transition: transform 0.1s cubic-bezier(0.5, 0, 0.5, 1), box-shadow 0.2s;
    outline: none;
}

.treat-button:hover {
    box-shadow: 0 0 2em rgba(255, 255, 255, 0.3);
}

.treat-button:active {
    transform: scale(0.8) translateY(10%);
    transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}

.treat {
    --scale-x: 0;
    --scale-y: 0;
    pointer-events: none;
    display: block;
    position: absolute;
    top: 0;
    left: calc(50% - 0.5rem);
    border-radius: 50%;
    width: 1em;
    height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5vmin;
    transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) translate(-50%, -50%);
    pointer-events: none;
    -webkit-animation: treat-enter 0.1s ease-in backwards,
    treat-exit 300ms linear calc((var(--lifetime, 3000) * 1ms) - 300ms) forwards;
    animation: treat-enter 0.1s ease-in backwards,
    treat-exit 300ms linear calc((var(--lifetime, 3000) * 1ms) - 300ms) forwards;
}

@-webkit-keyframes treat-enter {
    from {
        opacity: 0;
    }
}

@keyframes treat-enter {
    from {
        opacity: 0;
    }
}

@-webkit-keyframes treat-exit {
    to {
        opacity: 0;
    }
}

@keyframes treat-exit {
    to {
        opacity: 0;
    }
}

.treat .inner {
    -webkit-animation: inner-rotate 0.6s linear infinite;
    animation: inner-rotate 0.6s linear infinite;
    transform: rotate(calc(-1turn * var(--direction)));
}

@-webkit-keyframes inner-rotate {
    to {
        transform: none;
    }
}

@keyframes inner-rotate {
    to {
        transform: none;
    }
}

@media screen and (max-width: 800px) {
    .outlet-content {
        padding-left: 20% !important;
    }
}

@media screen and (max-width: 600px) {
    .cake-prev-arrow {
        left: 0%;
    }

    .cake-next-arrow {
        right: 0%;
    }

    .padding-sm {
        padding: 0px 30px;
    }

    .menu-item-title {
        font-size: 0.8rem !important;
    }

    .outlet-content {
        padding-left: 20% !important;
    }

    .discount-corporate-table {
        width: 100%;
    }

}

@media screen and (max-width: 500px) {

    .menu-item-title {
        font-size: 0.8rem !important;
    }

    .outlet-content {
        padding-left: 10% !important;
    }

    .learn-more-btn {
        width: 80px;
        font-size: 10px;
    }
}

/* sweetmaoments section */
.sweetmaoments {
    font-family: 'Gilroy', sans-serif;
}

.sweetmaoments .left-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
}

.sweetmaoments .section-title {
    color: var(--main-color);
    font-weight: bold;
    line-height: 100%;
    font-size: 3rem;
}

.sweetmaoments .section-desc {
    color: #1e1e1e;
    font-weight: 600;
    line-height: 100%;
    font-size: 1.5rem;
    margin: 50px 0;
}

.sweetmaoments .outlet-availability-section .section-title {
    color: var(--main-color);
}

.sweetmaoments .monthly-rewards-section .section-title {
    color: #1e1e1e;
}

.sweetmaoments .cta-button {
    color: var(--font-color1);
    background: var(--main-color);
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    font-weight: 600;
    margin-top: 1.5rem;
}

.sweetmaoments .cta-button-2 {
    color: var(--main-color);
    background: var(--font-color1);
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    font-weight: 600;
    margin-top: 1.5rem;
}

.sweetmaoments .cta-button-2:hover {
    color: var(--font-color1) !important;
    background-color: var(--main-color) !important;
}

.sweetmaoments .banner-title {
    color: #fff;
    font-weight: bold;
    font-size: 3rem;
    text-align: center;
}

.sweetmaoments .video-responsive-container,
.sweetmaoments .plushie-responsive-container,
.sweetmaoments .footer-banner-container {
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio for desktop */
    position: relative;
}

.sweetmaoments .plushie-responsive-container > *,
.sweetmaoments .video-responsive-container video,
.sweetmaoments .footer-banner-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sweetmaoments .reward-container {
    width: 100%;
    height: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

@media (max-width: 767.98px) {
    .sweetmaoments .section-title {
        font-size: 1.5rem;
    }

    .sweetmaoments .cta-button {
        width: 80%;
        max-width: 250px;
        margin: 0 auto;
    }

    .sweetmaoments .banner-title {
        font-size: 1.5rem;
    }

    .sweetmaoments .plushie-responsive-container,
    .sweetmaoments .video-responsive-container,
    .sweetmaoments .footer-banner-container {
        padding-bottom: 100%; /* 1:1 ratio for mobile */
    }

    .sweetmaoments .reward-container {
        padding: 1.5rem;
    }
}

.sweetmaoments .outlet-availability-section .carousel-control-prev,
.sweetmaoments .outlet-availability-section .carousel-control-next {
    display: none !important;
}

.sweetmaoments .aspect-1-1-container {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}

.sweetmaoments .aspect-16-9-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio for desktop */
    overflow: hidden;
}

.sweetmaoments .aspect-16-9-container img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.sweetmaoments .bg-custom-light {
    background-color: #FFF6EB;
}

.sweetmaoments .carousel-indicators li {
    background-color: white;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: 0.5;
}
.sweetmaoments .carousel-indicators .active {
     opacity: 1;
}

.sweetmaoments .product-showcase-section .carousel-control-prev {
    left: unset !important;
    right: 40px !important;
    width: unset !important;
}
.sweetmaoments .product-showcase-section .carousel-control-next {
    width: unset !important;
}


.sweetmaoments .product-showcase-section .carousel-control-prev-icon {
    background-image: url('/assets/images/sweetmaoments/prev_icon.png');
    background-color: var(--main-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% 60%;
    width: 40px;
    height: 40px;
}
.sweetmaoments .product-showcase-section .carousel-control-next-icon {
    background-image: url('/assets/images/sweetmaoments/next_icon.png');
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% 60%;
    width: 40px;
    height: 40px;
}

.sweetmaoments .product-showcase-section .carousel-indicators {
    bottom: 0px;
    left: 0px;
    margin-left: 10%;
    margin-bottom: 0;
    justify-content: start;
}