/**
 * Created with PhpStorm.
 * User: Satoshi
 * Date: 2025/02/09
 * Time: 21:06
 * To change this template use File | Settings | File Templates.
 */

/**
 * Custom Properties
 */
:root {
	--theme-color-darker: #6e2e00;
	--theme-color-dark: #9d5011;
	--theme-color-deeper: #c05b0a;
	--theme-color-deep: #e06d12;
	--theme-color: #f18129;
	--theme-color-light: #f88e3c;
	--theme-color-lighter: #fab37d;
	--theme-color-pale: #f5d0b3;
	--theme-color-paler: #fdecdd;
	--theme-color-palest: #fffbf8;
	--sub-color-darker: #002e60;
	--sub-color-dark: #044185;
	--sub-color-deeper: #035cbe;
	--sub-color-deep: #0069de;
	--sub-color: #1b7dea;
	--sub-color-light: #338ff3;
	--sub-color-lighter: #53a3fd;
	--sub-color-pale: #73b5ff;
	--sub-color-paler: #98c9ff;
	--sub-color-palest: #bddefd;
	--accent-color-dark: #7e022b;
	--accent-color: #cc0047;
	--accent-color-pale: #ffb4cf;
	--text-color-dark: #111111;
	--text-color: #595959;
	--text-color-light: #838383;
	--text-color-pale: #bebebe;

	--section-color: #9a1010;
	--section-exp-color: white;

	--content-color: #383852;
	--content-exp-color: white;

	--cta-color: #f18129;
	--cta-text-color: white;
	--cta-exp-color: white;
	--cta-frame: #8d4e15;

	--logoimage-bg: #c9c9c9;
	--logoimage-text: white;

	--dummyimage-bg: #84adda;
	--dummyimage-text: black;

	--footer-btn-bg: #ffb600;
	--footer-btn-text: #565656;

	--border-width: 1rem;
	--buide-border-style: solid;

	--size-1: 1vw;
	--size-2: 2vw;
	--size-3: 3vw;
	--size-4: 4vw;

	font-size: 1vw;
}

/**
 * FOUNDATION
 */
html {
	scroll-behavior: smooth;
}

body {
	position: relative;
	font-family: serif;
	line-height: 1.6;
	background-color: #fff;
	color: var(--text-color);
	font-size: 4rem;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 4rem;
}

a {
	text-underline-offset: 1rem;
}
a:visited {
	/*color: inherit;*/
}
figure {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
iframe {
	box-sizing: border-box;
}


/**
 * LAYOUTS
 */
.lHeader {
	margin: 0;
}
.lMain {
	margin: 0;
}
.lFooter {
	position: sticky;
	z-index: 9999;
	width: 100%;
	bottom: 0;
	margin: 10rem 0 0;
}

/**
 * Components
 */

/**
 * Section Component
 */
.cSection {
	position: relative;
	margin: 1rem 1rem 20rem;
	padding: 1rem;
	border: var(--border-width) var(--buide-border-style) var(--section-color);
}
.cSection__exp {
	position: absolute;
	top: -1rem;
	left: -1rem;
	z-index: 999;
	display: block;
	padding: 2rem;
	background: var(--section-color);
	color: var(--section-exp-color);
	font-size: 3rem;
}

/**
 * Section Heading
 */
.cSectionHeading {
	border-bottom: 1rem solid silver;
	text-align: center;
}

/**
 * Dummy Image Component
 */
.cDummyImage {
	position: relative;
	display: block;
	width: 100%;
	min-height: 40rem;
	margin: 0 0 var(--size-2);
	/*background: var(--dummyimage-bg) url(../../img/image.png);*/
	background-size: 10%;
	color: var(--dummyimage-text);
}
.cDummyImage--hero {
	height: 70rem;
}
.cDummyImage--big {
	height: 100rem;
}
.cDummyImage--smallFloat {
	width: 30rem;
	float: left;
	margin: 0 4rem 4rem 0;
}
.cDummyImage__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 58rem;
	height: 26rem;
	margin: 0 auto;
	background-color: var(--logoimage-bg);
	color: var(--logoimage-text);
}
.cDummyImage__overText {
	position: relative;
	display: block;
	text-align: center;
	border: var(--buide-border-style) var(--border-width) var(--content-color);
}
.cDummyImage__overTextExp {
	position: absolute;
	display: block;
	top: -5rem;
	font-size: 3rem;
	background: var(--content-color);
	color: var(--content-exp-color);
	height: 5.5rem;
	padding: 0.25rem 4rem;
	left: 5rem;
}
.cDummyImage__overText--tagline {
	position: absolute;
	bottom: 1rem;
	left: 0;
	right: 0;
}
.cDummyImage__exp {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	font-size: 3rem;
	justify-content: center;
	align-items: center;
}
.cDummyImage__expInside {
	background: rgba(255, 255, 255, 0.3);
	padding: var(--size-1);
}
.cContent {
	position: relative;
	margin: 1rem;
	padding: 2rem;
	border: var(--border-width) var(--buide-border-style) var(--content-color);
}
.cContent__exp {
	position: absolute;
	display: block;
	bottom: 0;
	font-size: 3rem;
	background: var(--content-color);
	color: var(--content-exp-color);
	height: 5.5rem;
	padding: 0.25rem 4rem;
	right: 5rem;
}
.cCTA {
	position: relative;
	display: block;
	margin: 4rem auto;
	padding: 4rem 6rem;
	width: 50rem;
	text-align: center;
	text-decoration: none;
	background-color: var(--cta-color);
	border: var(--border-width) var(--buide-border-style) var(--cta-frame);
	color: var(--cta-text-color);
}
.cCTA__exp {
	position: absolute;
	right: -1rem;
	bottom: -1rem;
	display: block;
	font-size: 3rem;
	background: var(--cta-frame);
	color: var(--content-exp-color);
	height: 5.5rem;
	min-width: 28rem;
	padding: 0.25rem 2rem;
}

.cCTA__arrow {
	display: inline-block;
	width: 3rem;
	height: 3rem;
	border-bottom: var(--border-width) solid var(--cta-text-color);
	border-right: var(--border-width) solid var(--cta-text-color);
	transform: rotate(45deg);
	animation: bounce 2s infinite;
	position: absolute;
	right: 4rem;
}

.pLang {
	position: fixed;
	display: flex;
	right: 0;
	top: 0;
	width: 15rem;
	height: 15rem;
	justify-content: center;
	align-items: center;    background: #86d77c7a;
}

.pFooterBtn {
	display: block;
	width: 100%;
	padding: 1rem 0;
	text-align: center;
	background-color: var(--footer-btn-bg);
	color: var(--footer-btn-text);
}

/**
 * Services
 */
.service-nav ul {
	list-style: none;
	padding: 0;
	margin-bottom: 8rem;
}

.service-nav li {
	margin: 2rem 0;
}

.service-nav a {
	text-decoration: none;
	color: #0066cc;
}

.service-block {
	margin-bottom: 12rem;
	padding: 4rem;
	background: #f9f9f9;
	border-radius: 1rem;
}

.service-block h3 {
	font-size: 5rem;
	margin-bottom: 2rem;
}

.service-block h4 {
	margin-top: 4rem;
	font-weight: bold;
}

ol {
	margin-left: 8rem;
}

/**
 * FAQ
 */
.faq-categories {
	display: block;
	margin-bottom: 4rem;
}

.faq-categories button {
	width: 90%;
	margin: 0 0 1rem;
	padding: 2rem 2rem;
	background: #eee;
	border: none;
	cursor: pointer;
	font-size: 4rem;
}

.faq-category {
	display: none;
}

.faq-question {
	margin-bottom: 2rem;
}

.faq-question button {
	width: 90%;
	text-align: left;
	background: #f5f5f5;
	border: none;
	padding: 2rem;
	font-size: 4rem;
	cursor: pointer;
}

.faq-answer {
	display: none;
	padding: 2rem;
	background: #fff;
	border-left: 3px solid #0077cc;
}

/**
 * Users Voice
 */
.user-voices h2 {
	font-size: 5rem;
	margin-bottom: 5rem;
	text-align: center;
}

.voice-card {
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	padding: 4rem;
	margin-bottom: 6rem;
}

.voice-text {
	font-weight: normal;
	margin-bottom: 2rem;
}

.voice-name {
	font-size: 3.5rem;
	color: #555;
	text-align: right;
}

/**
 * Prebooking
 */
.pPrebooking {}
.pPrebooking__form {}
.pPrebooking__fieldset {
	margin: 4rem 0;
	padding: 2rem;
	background: #f3f2ec;
}
.pPrebooking__label {
	display: block;
	border-top: 0.25rem solid;
	font-weight: bold;
	color: #888;
}

.pPrebookingModal {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.6);
	justify-content: center;
	align-items: center;
	overflow: auto;
}
.pPrebookingModal__content {
	background: white;
	margin-top: 10rem;
	padding: 2rem;
	border-radius: 10px;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
}
.pPrebookingModal__close {
	position: fixed;
	bottom: 12rem;
	margin: auto;
	font-size: 5rem;
	background: none;
	cursor: pointer;
	left: 0;
	right: 0;
	width: 6rem;
	height: 6rem;
	background: white;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 3rem;
	border: 0.25rem solid #5e5e5e;
}


/* Guide */
.hideGuide .pGuideBorder {
	border-color: transparent;
}
.hideGuide .pGuideBlock {
	display: none;
	visibility: hidden;
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0) rotate(45deg);
	}
	50% {
		transform: translateY(10px) rotate(45deg);
	}
}

/*== The Area Below is Generated Automatically. Don't Edit it Manually! ==*/

@media (min-width: 800px) {
	:root {
		--border-width: 8px;
		--size-1: 8px;
		--size-2: 16px;
		--size-3: 24px;
		--size-4: 32px;
		font-size: 8px;
	}

	/**
	 * FOUNDATION
	 */
	body {
		width: 800px;
		margin: 0 auto;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
	}

	.pPrebookingModal__content {
		width: 780px;
		margin: 10rem 0 18rem 2rem;
	}
}