
/* width */
::-webkit-scrollbar {
  width:5px;
  height:5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #4d4d4d; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #7c7b7b; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #959595; 
}

*{margin:0px;padding:0px;}
body{color: #38424F;font-family: "Onest", sans-serif;font-size: 14px;background: #EEF2F5;min-height:calc(100vh - 130px);box-shadow: 0px 0px 10px rgba(0,0,0,0.2);position: relative;}
body.overflow_hidden{overflow: hidden;}

h1, h2, h3, h4, h5{font-weight: 300;}
p{margin-bottom:20px}
.img-fluid{max-width:100%;height:auto;}
.p-0{padding:0px !important;}

header{text-align: center;padding: 30px 0px 20px 0px;width: 100%;background: #EEF2F5;border-radius: 25px 25px 0px 0px;z-index: 999;position: relative;margin-top: -30px;}
header a.logo-brand{width: 100%;max-width: 270px;display:inline-block;}

.hero-banner{min-height: 204px;padding: 40px 30px 40px 30px;background: url("../img/hero-banner-03.jpg") no-repeat bottom center;background-size: cover;box-shadow: 0px 0px 40px rgb(255 255 255 / 18%);position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.hero-banner:before{content:"";width: 100%;height: 100%;background: linear-gradient(360deg, black 10%, transparent);opacity: .55;position: absolute;top: 0;left: 0;}
.hero-banner .page_title{text-align: center;position: relative;z-index: 9;}
.hero-banner .page_title h1{font-size: 21px;font-weight:500;}
.hero-banner .page_title h1 span{font-size: 30px;}
.hero-banner .page_title p{font-size: 16px;}

.hero-banner .page_title .btn-know_more{cursor: pointer;color: #0c6e5e;font-size: 15px;font-weight: 600;text-transform: uppercase;display: inline-block;position: relative;transition:all 500ms ease-in-out;}
.hero-banner .page_title .btn-know_more span{padding: 10px 20px;display: inline-block;position: relative;z-index: 9;transition: all 500ms ease-in-out;}
.hero-banner .page_title .btn-know_more:before{content:"";width: 100%;height: 100%;background: #ffffff;border-radius: 4px;position: absolute;top: 0;left: 0;z-index: 1;transition:all 500ms ease-in-out;}
.hero-banner .page_title .btn-know_more:after{content:"";width: 100%;height: 0%;background: #0c6e5e;border-radius: 4px;position: absolute;bottom: 0;left: 0;z-index: 5;transition:all 500ms ease-in-out;}

.hero-banner .page_title .btn-know_more:hover{transition:all 500ms ease-in-out;}
.hero-banner .page_title .btn-know_more:hover span{color: #ffffff;transition:all 500ms ease-in-out;}
.hero-banner .page_title .btn-know_more:hover:before{height: 0%;transition:all 500ms ease-in-out;}
.hero-banner .page_title .btn-know_more:hover:after{height: 100%;transition:all 500ms ease-in-out;}

#html5lightbox-watermark {display: none !important;}

.position-relative {position: relative;}

/*** Buttons ***/


.back {cursor: pointer;width: 30px;height: 20px;background: url('../img/close-icon.png') no-repeat center center;position: fixed;top: 30px;left:-100px;z-index: 999999;filter: invert(1);transition: all 500ms ease-in-out;}
.back.active{left: 25px;transition:all 500ms ease-in-out;}

.btn_popup{cursor: pointer;font-size: 16px;line-height: 1;text-align: center;background: #2F2F2F;padding: 12px 10px;border-radius: 3px;}
.btn_popup.active{border: 1px solid #000000;border-radius: 3px 3px 0px 0px;}

/*** Buttons ***/

section.page-make_a_reservation button.btn-submit,
section.page-make_a_reservation button.btn-verify{cursor: pointer;color: #ffffff;font-size: 16px;font-weight: 600;border-radius: 3px;margin: auto;display: block;width: 100%;padding: 15px;margin-top: 20px;transition:all 500ms ease-in-out;}

section.page-make_a_reservation button.btn-submit span,
section.page-make_a_reservation button.btn-verify span{}

section.page-make_a_reservation button.btn-submit{background: #0C6E5E;border: none;}
section.page-make_a_reservation button.btn-verify{background: #000000;border: 1px solid #1b1b1b;}

section.page-make_a_reservation button.btn-submit{margin-bottom:20px;}

section.page-make_a_reservation button.btn-submit:hover{background: #02372e;transition:all 500ms ease-in-out;}
section.page-make_a_reservation button.btn-verify:hover{background: #fa4c4c;transition:all 500ms ease-in-out;}


.story.btn-play{position:relative}
.story.btn-play:before{content: "";width: 50px;height: 50px;background:url("../img/play-video-01.png") no-repeat center center;background-size:contain;position: absolute;top: 42%;left: 50%;transform: translate(-50%, -50%);transition:all 500ms ease-in-out;}
.story.btn-play:hover:before{transform: translate(-50%, -50%) scale(1.2);transition:all 500ms ease-in-out;}

.g_thumb.btn-play{position:relative}
.g_thumb.btn-play:before{content: "";width: 40px;height: 40px;background:url("../img/play-video-02.png") no-repeat center center;background-size:contain;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transition:all 500ms ease-in-out;}
.g_thumb.btn-play:hover:before{transform: translate(-50%, -50%) scale(1.2);transition:all 500ms ease-in-out;}

/*** Buttons ***/


section.main_page{padding:0px 25px 70px 25px;}
section.main_page .accordion{gap: 10px;display: flex;flex-direction: column;}
section.main_page .accordion .accordion-item{overflow: hidden;border-radius: 10px;}
section.main_page .accordion .accordion .accordion-item{font-size: 21px;text-align: center;}
section.main_page .accordion .accordion-item .accordion-header {color: #ffffff;font-size: 16px;font-weight: 600;line-height: 1;text-align: center;background: #0C6E5E;padding: 12px 10px;cursor: pointer;border-radius: 3px;}
section.main_page .accordion .accordion-item .accordion-content {display: none;padding: 20px;background: #ffffff;}
section.main_page .accordion .accordion-item.active .accordion-header {border: 1px solid #198775;border-radius: 8px 8px 0px 0px;}

section.main_page .accordion .accordion-item .accordion-content p:nth-last-child(1){margin-bottom:5px;}
 

/*** Upcoming Exhibition List ***/
.upcoming_exhibition_list {display: flex;overflow-x: auto;scroll-snap-type: x mandatory;gap: 10px;padding: 0px 0px 10px 0px;list-style: none;scroll-behavior: smooth;}
.upcoming_exhibition_list > li {flex: 0 0 auto;scroll-snap-align: start;padding: 0px;width: 100%;}
.upcoming_exhibition_list > li .ue_thumb{display:block;overflow: hidden;border-radius: 5px;}
.upcoming_exhibition_list > li .ue_thumb img {max-width: 100%;display: block;}

.upcoming_exhibition_list .services{background: black;display: inline-block;max-width: 165px;}
.upcoming_exhibition_list .services .ue_thumb{position: relative;}
.upcoming_exhibition_list .services .ue_thumb img{}
/*** gallery_list ***/
  

section.page-wishlist.active{padding: 80px 30px 30px 30px;height: calc(100% - 160px);top: 0px;visibility:visible;overflow: scroll;opacity:1;transition:all 500ms ease-in-out;}

section.page-make_a_reservation{padding: 80px 30px 70px 30px;overflow: hidden;height: calc(100% - 150px);background: linear-gradient(180deg, #EEF2F5 42.46%, #FFFFFF 136.05%);text-align:left;position: fixed;top: 0%;left:0px;right: 0px;visibility:hidden;opacity:0;z-index: 0;transition:all 500ms ease-in-out;}
section.page-make_a_reservation.active{/* padding: 80px 30px 30px 30px; *//* height: calc(100% - 110px); *//* top: 0px; */overflow-y: scroll;visibility:visible;opacity:1;z-index: 9999;transition:all 500ms ease-in-out;}


section.page-offer_and_discount{overflow: hidden;height: 0%;background: linear-gradient(180deg, #000 42.46%, #4C4A4A 136.05%);text-align:left;position: fixed;top:100%;left:0px;right: 0px;visibility:hidden;opacity:0;z-index: 99;transition:all 500ms ease-in-out;}

   
/*** story ***/
.story-container {position: relative;width: 100%;height: 390px;overflow: hidden;}
.story-carousel {display: flex;width: 100%;height: 100%;transition: transform 0.5s ease;will-change: transform;}
.story{min-width: 100%;background-size: 100%;background-position: top center;position: relative;}
.story .para_about {color: #ffffff;font-size: 14px;font-weight: 600;position: absolute;bottom: 0;left: 0;width: calc(100% - 40px);background: #00000082;padding: 15px 20px 20px 20px;backdrop-filter: blur(5px);z-index: 1;}
.story .btn-play{}
.story .btn-play:before{}
.progress-bars {position: absolute;top: 20px;left: 10px;right: 10px;display: flex;gap: 5px;z-index: 10;}
.progress {flex: 1;height: 3px;background: rgba(255,255,255,0.3);position: relative;overflow: hidden;}
.progress::before {content: '';position: absolute;width: 0%;height: 100%;background: white;animation: progress 4s linear forwards;animation-delay: calc(var(--i) * 4s);}

@keyframes progress {
    0% { width:   0%; }
  100% { width: 100%; }
}
.story-nav {position: absolute;bottom: 70px;width: 100%;text-align: center;/* display: none; */}
.story-nav button {background: rgba(255,255,255,0.2);border: none;padding: 10px 15px;color: white;font-size: 18px;cursor: pointer;}

/*** story ***/


section.page-make_a_reservation{}
section.page-make_a_reservation .step_by_step{/* text-align:center; */}
section.page-make_a_reservation .step_by_step #favourites_list{margin-bottom:15px;}
section.page-make_a_reservation .step_by_step p{margin-bottom: 15px;}
section.page-make_a_reservation .step_by_step p.resend_otp{color: #908b8b;font-size: 12px;margin-top: 10px;}
section.page-make_a_reservation .step_by_step p.resend_otp strong{color: #ffffff;}
section.page-make_a_reservation .step_by_step hr{margin: 15px 0px;border-color: #3b3b3b;}
section.page-make_a_reservation .step_by_step ul.otp_numbers{margin: 0px 0px 20px 0px;padding: 0px;list-style-type: none;gap: 15px;display: flex;flex-direction: row;justify-content: space-between;}
section.page-make_a_reservation .step_by_step ul.otp_numbers li{width: 20%;padding: 15px 10px;background: #2f2f2f;border: 1px solid #2f2f2f;border-radius: 5px;}

section.page-make_a_reservation .step_by_step label.visit_us{font-size: 15px;width: calc(100% - 30px);background: #2F2F2F;border: 1px solid #3d3d3d;border-radius: 3px;padding: 15px;margin-bottom: 13px;display: flex;flex-direction: row;align-items: center;justify-content: center;position:relative;transition: all 500ms ease-in-out;}
section.page-make_a_reservation .step_by_step label.visit_us input[type="checkbox"]{opacity: 0;position: absolute;}
section.page-make_a_reservation .step_by_step label.consent{font-size: 12px;line-height: 1.3;text-align: left;gap: 16px;margin: 15px 0px 20px 0px;display: flex;justify-content: flex-start;align-items: flex-start;}
section.page-make_a_reservation .step_by_step label.consent input[type="checkbox"]{}
section.page-make_a_reservation .step_by_step label.visit_us.self_check{background: #000000;transition: all 500ms ease-in-out;}
section.page-make_a_reservation .step_by_step input[type="text"],
section.page-make_a_reservation .step_by_step input[type="tel"],
section.page-make_a_reservation .step_by_step input[type="email"]{color: #fff;font-size: 15px;width: calc(100% - 30px);background: #e4e9ed;border: 1px solid #b4bfc7;border-radius: 3px;padding: 15px;display: flex;flex-direction: column;align-items: stretch;}

section.page-make_a_reservation .step_by_step input[type="text"]:hover,
section.page-make_a_reservation .step_by_step input[type="text"]:focus,
section.page-make_a_reservation .step_by_step input[type="text"]:active,
section.page-make_a_reservation .step_by_step input[type="text"]:-internal-autofill-selected,

section.page-make_a_reservation .step_by_step input[type="tel"]:hover,
section.page-make_a_reservation .step_by_step input[type="tel"]:focus,
section.page-make_a_reservation .step_by_step input[type="tel"]:active,
section.page-make_a_reservation .step_by_step input[type="tel"]:-internal-autofill-selected,

section.page-make_a_reservation .step_by_step input[type="email"]:hover,
section.page-make_a_reservation .step_by_step input[type="email"]:focus,
section.page-make_a_reservation .step_by_step input[type="email"]:active,
section.page-make_a_reservation .step_by_step input[type="email"]:-internal-autofill-selected{background-color: #000000 !important;box-shadow: none;outline: none;}

.visit_us.active {background-color: #000000 !important;border: 1px solid #333 !important;transition: all 500ms ease-in-out;}



.hidden {display: none;}
.input_box {position: relative;}
.error {color: #ff0000;font-size: 10px;text-transform: uppercase;padding: 2px 4px;background: #b5b5b5;position: relative;bottom: 2px;}
#otpSuccess.success {color: #ffffff;font-size: 10px;text-transform: uppercase;padding: 2px 4px;background: green;position: relative;top: 2px;}
.resend_otp {margin-top: 10px;font-size: 14px;}
.resend_otp strong {color: blue;cursor: pointer;}


form .position-relative{margin-top: 20px;}

div#resultMsg {}
div#resultMsg .success{width: calc(100% - 60px);height: calc(100% - 150px);background: linear-gradient(180deg, #000 42.46%, #4C4A4A 136.05%);position: absolute;top: 0;left: 0;z-index: 9;padding: 150px 30px 0px 30px;text-align: center;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;}
div#resultMsg .success h2{font-size:28px;margin-bottom:30px;}
div#resultMsg .success p{font-size:18px;}
div#resultMsg .success hr {width: 100%;border-color: #666;margin: 30px 0px 20px 0px;}
div#resultMsg .success p:nth-child(4) {color: #666;font-size: 13px;}


#datetimeContainer{width:100%;text-align:center;}
#datetimeContainer label.date_time {width: 100%;display: flex;flex-direction: column;align-items: center;}
#datetimeContainer span{font-size:12px;}
#datetimeContainer input#datetimeInput {color: #ffffff;font-size:14px;width: calc(100% - 30px);min-width: calc(100vw - 90px);max-width:100%;height:50px;background: #2F2F2F;border: 1px solid #3d3d3d;border-radius: 3px;padding: 0px 15px;}

input[type="radio"] {position: absolute;opacity: 0;}
form#otpForm {position: relative;}

#btn-make_a_reservation {cursor: pointer;text-align: center;position: fixed;bottom: 0;left: 0;width: calc(100% - 77px);padding: 18px 15px 18px 15px;background: #fa4c4c;z-index: 100;}

ul.differentiator_list{margin: 0px;padding: 0px;list-style-type: none;}
ul.differentiator_list li{padding: 4px 0px 4px 25px;position: relative;}
ul.differentiator_list li:before{content:"";width: 12px;height: 6px;position: absolute;top: 8px;left: 0;box-shadow: -2px 1px 0px #000;transform: rotate(-45deg);}

.products_list{}
.products_list ul{margin: 0px;padding: 0px;list-style-type: none;}
.products_list > ul > li{position: relative;padding-top: 10px;padding-bottom: 10px;border-bottom: 1px solid #ccc;transition:all 500ms ease-in-out;}
.products_list ul > li .pro_title{color: #000000;font-size: 15px;font-weight: 600;padding-right: 15px;position:relative;}
.products_list ul > li .pro_title:before{content:"";width: 12px;height: 1px;background:#000000;position: absolute;top: 8px;right: 0px;transform: rotate(90deg);transition:all 500ms ease-in-out;}
.products_list ul > li .pro_title:after{content:"";width: 12px;height: 1px;background:#000000;position: absolute;top: 8px;right: 0px;transform: rotate(0deg);transition:all 500ms ease-in-out;}

.products_list ul > li .pro_content{display: none;padding: 0px 0px;height: 1px;overflow: hidden;transition:all 500ms ease-in-out;}
.products_list ul > li .pro_content h5{color: #8b8b8b;font-size: 14px;font-weight: 600;margin-top: 10px;margin-bottom: 10px;}
.products_list ul > li .pro_content ul{margin: 0px;padding: 0px;list-style-type: none;}
.products_list ul > li .pro_content ul li{padding: 5px 0px 5px 12px;position: relative;}
.products_list ul > li .pro_content ul li:before{content:"";width: 6px;height: 6px;background: #62bdae;border-radius: 100px;position: absolute;top: 12px;left: 0px;}

.products_list ul > li:hover,
.products_list ul > li:focus,
.products_list ul > li:active{transition:all 500ms ease-in-out;}

.products_list ul > li:hover  .pro_content,
.products_list ul > li:focus  .pro_content,
.products_list ul > li:active .pro_content{display: block;height:100%;transition:all 500ms ease-in-out;}

.products_list ul > li:hover  .pro_title:before,
.products_list ul > li:focus  .pro_title:before,
.products_list ul > li:active .pro_title:before{transform: rotate(0deg);transition:all 500ms ease-in-out;}


@media only screen and (min-width: 768px){
	body{max-width: 500px;margin: auto;}
}
