
/******* Fonts Face CSS Start ******/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* 
	Fonts::
	font-family: "Plus Jakarta Sans", sans-serif;
*/

/******* Common Element CSS Start ******/
body 							{ background-color: #ffffff; font-family: "Plus Jakarta Sans", sans-serif; }
*, *:before, *:after 			{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*								{ margin: 0px; padding: 0px; }
img								{ border: 0px; max-width: 100%; height: auto; vertical-align: middle; }
ul,ol							{ list-style: none; }
a,a:hover,a:focus,
a:focus, a:active,a:visited		{ outline: none; border: 0px; text-decoration: none;}
.heading-one,h1					{ font-size: 48px; line-height: 58px; font-weight: 700; color: var(--white-color); }
h2 								{ font-size: 34px; line-height: 34px; font-weight: 700; }
h3								{ font-size: 30px; line-height: 32px; font-weight: 500; }
h4								{ font-size: 24px; line-height: 28.8px; } 
h5								{ font-size: 22px; line-height: 28px; color: #141B2A; font-weight: 700; }
h6								{ font-size: 20px; line-height: 30px; }
p								{ font-size: 16px; line-height: 22.4px; }
h1,h2,h3,h4,h5,h6,p,ul,ol,figure { margin: 0px; padding: 0; }



.full-blocking .bottom-bar {
    color: #ec3737; /* Red text */
}



/* ================== Header Start ================== */
.top-header  { background: #1E1655 url(../images/top-pattern.svg) no-repeat 0 50% / 70% 100%; border-radius: 0px 0px 20px 20px; padding: 20px 0; position: fixed; top: 0; width: 100%; left: 0; z-index: 9999; }
.align-items-center { align-items: center; }
.icon-desc { align-items: center; display: flex; }
.logo-content { color: #ffffff; margin-left: 20px; }
.cmn-border-block { background: linear-gradient(to right, rgba(255,255,255,0.10), rgba(255,255,255,0.5),rgba(153,153,153,0.1)); border-radius: 12px; padding: 1px; }
.topcmn-block-cabins { background: #2c255f; border-radius: 12px; padding: 9px 18px; display: flex; align-items: center; justify-content: space-between; }
.block-coins { min-width: 150px; display: flex; align-items: center; min-height: 50px; margin-right: 10px;}
.block-coins h2 { color: #8DD3B1; margin-bottom: 4px; }
.block-coins p { font-weight: 600; color: #ffffff; margin-left: 10px; font-size: 14px; line-height: 20px; }
.total-coins h2 { color: #42B1DD; }
.refresh-button-block { text-align: right; }
.button-refresh { background: #E7E2FC; font-size: 16px; line-height: 20px; color: #1E1655; font-weight: 600; padding: 16px; border-radius: 10px; display: inline-flex; align-items: center; 
					border: 1px solid #E7E2FC; text-transform: capitalize; transition: 0.5s; }
.button-refresh figure { margin-right: 7px; }
.button-refresh figure img { transition: 0.5s; }
.button-refresh:hover figure img { transform: rotate(45deg); filter: brightness(0) invert(1);}
.button-refresh:hover { background-color: transparent; color: #E7E2FC; border: 1px solid #E7E2FC }
.cabin-sec { display: flex; align-items: center; gap: 30px; }
.luncharea-block,
.cabins-block { width: calc(100% / 2 - 110px); }
.luncharea-block { margin-right: auto; }
/* main Block Area */
.cmn-block-area { margin: 30px 0; position: relative; padding-top: 110px;}
.block-cabins-area { border: 1px solid #F2F2F2; border-radius: 10px; margin-bottom: 30px; }
.title-bar { background-color: #F7F6FE; border-radius: 10px 10px 0 0; padding: 10px 16px; min-height: 55px; }
.title-bar h5 { margin-right: 10px;}
.title-bar figure { width: 34px; height: 34px; border-radius: 50px; background-color: #F7F6FE; border: 1px solid #876FFF; display: flex; align-items: center; justify-content: center; }
.middle-block-cabin { padding: 16px;}
.middle-block-cabin li { display: inline-flex; align-items: center; }
.middle-block-cabin li:not(:last-child) { margin-bottom: 10px;}
.capacity-block { border: 1px solid #333333; border-radius: 30px; }
.capacity-block figure { border: 1px solid #876FFF; border-radius: 50px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background-color:#F7F6FE;}
.capacity-block p { padding: 0px 23px 0px 10px; color: #333333; font-size: 18px; line-height: 21.6px; font-weight: 600; }
.available-blocking .title-bar { background-color: #EDF8F2; }
.available-blocking .capacity-block figure,
.available-blocking .title-bar figure { border-color: #008A2B; }
.bottom-bar { background-color: #E7E2FC; padding: 13px; text-align: center; color: #876fff; border-radius: 0 0 10px 10px; }
.bottom-bar h6 { font-weight: 700; }
.available-blocking .bottom-bar { background-color: #D6EFE3; color: #008A2B; }
.middle-block-cabin li.location-seat { align-items: flex-start;}
.location-seat figure { min-width: 24px; text-align: center; margin-top: 5px; }
.location-seat p { margin-left: 8px; color: #666666; font-size: 18px; line-height: 28px; font-weight: 500; }

.ml-auto { margin-left: auto; }
/* ================== Media Start ================== */

/* -------- Desktop Device Start ------- */
@media (min-width: 1400px) and (max-width: 1599px) {
	.luncharea-block,
	.cabins-block { width: calc(100% / 2 - 110px); }
}
@media (min-width: 1200px) and (max-width: 1399px) {
	.cabin-sec { gap: 15px; }
	.block-coins p { font-size: 12px; line-height: 20px; margin-left: 7px; }
	.luncharea-block, .cabins-block { width: calc(100% / 2 - 91px); }
	.topcmn-block-cabins figure img { max-width: 35px; }
}
@media (min-width: 992px) and (max-width: 1199px) {

/* Comman */
h2  { font-size: 30px; line-height: 34px; }
h3 	{ font-size: 25px; line-height: 32px; }
h4 	{ font-size: 22px; line-height: 28.8px; } 
h5 	{ font-size: 18px; line-height: 25px; }
h6 	{ font-size: 16px; line-height: 26px; }
.location-seat p,.capacity-block p,
p 	{ font-size: 14px; line-height: 22.4px; }

/*  */
.block-cabins-area { margin-bottom: 20px;}
.refresh-me a { font-size: 0px; line-height: 0; padding: 10px; }
.topcmn-block-cabins figure img { max-width: 30px; }
.luncharea-block,
.cabins-block { width: calc(100% / 2 - 10px); }
.button-refresh figure { margin: 0; }
.cabin-sec { gap: 15px; }
.block-coins p { font-size: 12px; line-height: 20px; margin-left: 7px; }

}

/* -------- Tablet Device Start ------- */
@media (min-width: 768px) and (max-width: 991px) {
/* Comman */
h2  { font-size: 30px; line-height: 34px; }
h3 	{ font-size: 25px; line-height: 32px; }
h4 	{ font-size: 22px; line-height: 28.8px; } 
h5 	{ font-size: 18px; line-height: 25px; }
h6 	{ font-size: 16px; line-height: 26px; }
.location-seat p,.capacity-block p,
p 	{ font-size: 14px; line-height: 22.4px; }
/* Top */
.icon-desc img { max-width: 30px;}
.logo-content { margin-left: 10px;}
.block-coins { min-width: unset; flex-direction: column; align-items: flex-start; }
.top-header { border-radius: 0px 0px 10px 10px; }
.topcmn-block-cabins { padding: 10px; }
.block-coins p { margin-left: 00px; font-size: 10px; line-height: 16px; }
.topcmn-block-cabins figure img { max-width: 30px;}
.refresh-me a { font-size: 0px; line-height: 0; padding: 10px; }
.refresh-me a figure { margin: 0 }
.luncharea-block,
.cabins-block { width: calc(100% / 2 - 30px); }
.block-coins p br { display: none; }
/* Main */
.cmn-block-area { padding-top: 132px; }
.cmn-block-area .row > div:last-of-type > .block-cabins-area { margin-bottom: 0px;}
.cmn-block-area { margin: 25px 0;}
.block-cabins-area { margin-bottom: 25px;}
.capacity-block figure { width: 32px; height: 32px; }


}

/* -------- Mobile Device Start ------- */
@media (max-width: 767px) {
/* Comman */
h2  { font-size: 30px; line-height: 34px; }
h3 	{ font-size: 25px; line-height: 32px; }
h4 	{ font-size: 22px; line-height: 28.8px; } 
h5 	{ font-size: 18px; line-height: 25px; }
h6 	{ font-size: 16px; line-height: 26px; }
.location-seat p,.capacity-block p,
p 	{ font-size: 14px; line-height: 22.4px; }
/* Top */
.header-gap { gap: 15px;}
.icon-desc { margin-left: 15px;}
.icon-desc img { max-width: 30px; }
.logo-content { margin-left: 10px; }
.top-header { border-radius: 0px 0px 7px 7px; background-size: 200% 100%; }
.topcmn-block-cabins figure img { max-width: 40px;}
.refresh-me { margin-left: auto; }
.button-refresh { padding: 7px; }
.button-refresh figure { margin: 0; }
.cabin-sec { flex-direction: column; align-items: flex-start; gap: 10px; }
.luncharea-block,
.cabins-block { width: 100%; }
.block-coins p br { display: none; }
/* Main */
.cmn-block-area { margin: 15px 0; padding-top: 262px; }
.block-cabins-area { margin-bottom: 15px;}
.capacity-block figure { width: 32px; height: 32px; }

}
