@charset "UTF-8";
.selection {
	user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
}
* {
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: transparent;
	font-display: swap;
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 16px;
	font-optical-sizing: auto;
	-webkit-text-size-adjust: 100% !important;
	text-size-adjust: 100% !important;
	color: #000;
	caret-color: #A9C8FB;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	scroll-behavior: smooth;
}
.material-symbols-outlined {
    font-display: swap;
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 16px;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 16;
	&.fill {
		font-variation-settings:
		'FILL' 1;
	}
}
html {
	background-color: #142032;
}
body {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #FFF;
	background: linear-gradient(135deg,rgba(255, 255, 255, 1) 0%, rgba(216, 218, 223, 1) 100%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	overflow: hidden;
	overflow-y: auto;
	& * {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
	}
}
h1, h2 { font-weight: 700 }
h3 { font-weight: 600 }
h1 { font-size: 2.5rem }
h2 { font-size: 2rem }
h3 { font-size: 1.5rem }
div#overlay {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    backdrop-filter: blur(1px) brightness(50%);
    -webkit-backdrop-filter: blur(1px) brightness(50%);
    pointer-events: none;
    transition: all 0.25s ease-in-out;
    z-index: 50;
    &.open {
        opacity: 1;
        pointer-events: auto;
    }
}
div#contact {
    opacity: 0;
    width: auto;
    height: auto;
	display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
	background-color: #FFF;
	border: 1px solid #EEE;
	padding: 20px;
	gap: 10px;
    transition: all 0.25s ease-in-out;
	transform: translate(-50%, -50%);
	pointer-events: none;
    z-index: 50;
    &.open {
        opacity: 1;
        pointer-events: auto;
    }
	& section {
		width: 100%;
		display: flex;
		align-items: flex-end;
		& span {
			cursor: pointer;
		}
	}
	& hr {
		width: 100%;
		height: 1px;
		background-color: #EEE;
		border: none;
	}
	& div {
		width: 50%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		position: relative;
		background-color: #FFF;
		border: 1px solid #CCC;
		border-radius: 10px;
		cursor: pointer;
		padding: 10px;
		gap: 5px;
		transition: all 0.25s ease;
		&:hover {
			background-color: rgba(169,200,251,0.25);
			border: 1px solid #1388FE;
		}
		& * {
			color: #000;
			pointer-events: none;
		}
	}
	& a {
		text-decoration: none;
	}
	& button {
		display: flex;
		flex-direction: row;
		background-color: #FFF;
		color: #000;
		border: 3px solid #EEE;
		border-radius: 10px;
		outline: none;
		cursor: pointer;
		padding: 5px 20px;
		gap: 5px;
		transition: all 0.25s ease;
		&:hover {
			background-color: #EEE;
			border: 3px solid transparent;
		}
	}
}
div#top {
	opacity: 0;
	width: 40px;
	height: 40px;
	display: flex;
	position: fixed;
	bottom: 50px;
	right: 50px;
	border: 1px solid #FFF;
	border-radius: 20px;
	background-color: #D4C5A3;
	cursor: pointer;
	z-index: 25;
	overflow: hidden;
	transition: all 0.25s ease-out;
	pointer-events: none;
	&.show {
		opacity: 1;
		pointer-events: auto;
	}
	& .material-symbols-outlined {
		font-size: 32px;
		font-variation-settings:
			'FILL' 1,
			'opsz' 32;
		color: #FFF;
	}
}
nav {
	width: 100%;
	position: sticky;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #142032;
	box-shadow: 1px 1px 10px 1px rgba(0,0,0,1.0);
	padding: 10px 20px;
	gap: 20px;
	transition: all 0.25s ease;
	z-index: 100;
	&::after {
		content: '';
		width: 100%;
		height: 100%;
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #142032;
	}
	&.open {}
	& a {
		display: flex;
		cursor: pointer;
		transition: all 0.25s ease;
		z-index: 100;
	}
	& img {
		width: 200px;
		pointer-events: none;
	}
	& button#menu {
		display: none;
		background: transparent;
		border: none;
		border-radius: 5px;
		outline: none;
		cursor: pointer;
		z-index: 100;
		& .material-symbols-outlined {
			color: #FFF;
			font-size: 24px;
			font-variation-settings:
				'opsz' 24;
			pointer-events: none;
		}
	}
	& div#menu {
		display: flex;
		flex-direction: row;
		gap: 20px;
		& > div {
			display: flex;
			position: relative;
			z-index: 110;
			& > p {
				width: auto;
				color: #FFF;
				cursor: pointer;
			}
			& > div {
				display: flex;
				align-items: flex-start;
				position: absolute;
				top: 100%;
				right: 0;
				background-color: #142032;
				box-shadow: 1px 1px 10px 1px rgba(0,0,0,1.0);
				padding: 20px;
				gap: 20px;
				transition: all 0.25s ease;
				transform: scaleY(0);
				transform-origin: top;
				overflow: hidden;
				pointer-events: none;
				& a {
					width: 100%;
					align-items: flex-start;
					white-space: nowrap;
				}
			}
			&.active > div {
				transform: scaleY(1);
				pointer-events: auto;
			}
		}
		& a {
			position: relative;
			font-size: 16px !important;
			text-decoration: none;
			color: #FFF;
			transition: all 0.25s ease;
			&::after {
				width: 100%;
				height: 2px;
				position: absolute;
				left: 0;
				bottom: -5px;
				content: '';
				background-color: #D4C5A3;
				transform: scaleX(0);
				transform-origin: bottom left;
				transition: transform 0.25s ease-out;
			}
			&:hover {
				transform: scale(1.05);
				&::after {
					transform: scaleX(1);
				}
			}
			&.active {
				font-weight: 600;
				pointer-events: none;
			}
		}
		color: #FFF;
	}
}
div.hero {
	width: 100%;
	height: calc(100vh - 68px);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: url('img/hero.webp') center / cover no-repeat;
	overflow: hidden;
	padding: 0 10%;
	gap: 40px;
	&.min {
		height: 33vh;
		& h1 {
			opacity: 1;
			transform: translateX(0);
		}
	}
	& h1 {
		opacity: 0;
		text-align: center;
		font-size: 3rem;
		color: #D4C5A3;
		color: #F7F7F7;
		text-shadow: 1px 1px 5px rgba(0,0,0,1.0);
		letter-spacing: -0.033em;
		text-transform: uppercase;
		transition: transform 0.5s ease-out, opacity 0.5s ease;
		transform: translateX(-100%);
		&.int {
			opacity: 1;
			transform: translateX(0);
		}
	}
	& h2 {
		width: 100%;
		opacity: 0;
		text-align: center;
		font-size: 1.5rem;
		font-weight: 300;
		color: #FFF;
		text-shadow:
			-1px -1px 0 rgba(0,0,0,0.33),
			 1px -1px 0 rgba(0,0,0,0.33),
			-1px  1px 0 rgba(0,0,0,0.33),
			 1px  1px 0 rgba(0,0,0,0.33);
		letter-spacing: -0.025em;
		padding: 0 20%;
		transition: transform 0.5s ease-out, opacity 0.25s ease;
		transform: translateX(100%);
		&.int {
			opacity: 1;
			transform: translateX(0);
		}
	}
	& a {
		text-decoration: none;
	}
	& button {
		opacity: 0;
		display: flex;
		flex-direction: row;
		background-color: #FFF;
		color: #000;
		border: 3px solid #EEE;
		border-radius: 10px;
		outline: none;
		cursor: pointer;
		padding: 5px 20px;
		gap: 5px;
		transition: transform 0.5s ease-out, opacity 0.5s ease;
		transform: translateY(150px);
		&.int {
			opacity: 1;
			transform: translateY(0);
		}
		&:hover {
			background-color: #EEE;
			transition: all 0.25s ease;
			& .material-symbols-outlined {
				font-variation-settings:
					'FILL' 1;
			}
		}
		& .material-symbols-outlined {
			color: #000;
			font-variation-settings:
				'wght' 300;
		}
	}
}
main {
	width: 100%;
	display: flex;
	padding: 40px 0;
	gap: 40px;
	& section {
		opacity: 0;
		width: 100%;
		display: flex;
		align-items: flex-start;
		padding: 0 20%;
		gap: 20px;
		transition: all 1.0s ease;
		transform: translateY(-50px);
		&.int {
			opacity: 1;
			transform: translateY(0);
		}
		&.s {
			background-color: #FFF;
			padding: 20px 20%;
		}
		&.faq {
			& > div {
				width: 100%;
				display: flex;
				align-items: flex-start;
				border: 1px solid transparent;
				border-radius: 10px;
				cursor: pointer;
				transition: all 0.25s ease;
				padding: 10px;
				&:hover {
					background-color: rgba(169,200,251,0.25);
					border: 1px solid #1388FE;
				}
				&.open {
					& > span > span {
						transform: rotateZ(180deg);
					}
					& > div {
						max-height: 200vh;
						transition: all 0.5s ease;
					}
				}
				& > span {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					gap: 20px;
					& > span {
						transition: all 0.25s ease;
					}
				}
				& > div {
					width: 100%;
					max-height: 0;
					display: flex;
					align-items: flex-start;
					gap: 10px;
					overflow: hidden;
					transition: none;
					&.card {
						opacity: 1;;
						transform: none;
					}
				}
			}
			& hr {
				width: 100%;
				height: 1px;
				background-color: rgba(0,0,0,0.25);
				border: none;
			}
		}
		&.cql {
		    & * {
            	user-select: text;
            	-webkit-user-select: text;
            	-ms-user-select: text;
		    }
		    & h1 {
		        font-size: 2rem;
		        & * {
		            font-size: 2rem;
		        }
		    }
		    & h2 {
		        font-size: 1.5rem;
		        & * {
		            font-size: 1.5rem;
		        }
		    }
		    & h3 {
		        font-size: 1.25rem;
		        & * {
		            font-size: 1.25rem;
		        }
		    }
		    & strong {
		        font-weight: 900;
		    }
		    & u {
		        text-decoration: underline;
		    }
		    & em {
		        font-style: italic;
		    }
		    & a {
		        cursor: pointer;
		        color: #1388FE;
		    }
		    & .ql-align-center {
		        width: 100%;
		        text-align: center;
		    }
		    & .ql-align-right {
		        width: 100%;
		        text-align: right;
		    }
		    & .ql-align-justify {
		        width: 100%;
		        text-align: justify;
		    }
		    & img {
		        width: auto;
		        height: auto;
		        max-width: 100%;
		        pointer-events: auto;
		    }
		}
		& hr {
			width: 100%;
			height: 1px;
			background-color: rgba(0,0,0,0.25);
			border: none;
		}
		& span.h {
			width: 100%;
			display: flex;
		}
		& span.v {
			width: 100%;
			display: flex;
			flex-direction: row;
			gap: 10px;
		}
		& span.sb {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			gap: 10px;
		}
		& h2 {
			text-align: center;
		}
		div.imgframe {
			width: 100%;
			position: relative;
			& p {
				position: absolute;
				bottom: 10px;
				left: 3.5px;
				font-size: 12px;
				background-color: rgba(255,255,255,0.5);
				border: 1px solid rgba(255,255,255,0.25);
				border-radius: 50px;
				backdrop-filter: blur(20px);
				-webkit-backdrop-filter: blur(20px);
				padding: 0 	10px;
			}
		}
		div.portraitframe {
			width: 100%;
			display: flex;
			& img {
				width: 50%;
				border: 1px solid #CCC;
				border-radius: 50%;
				pointer-events: none;
			}
		}
		img {
			width: 100%;
			pointer-events: none;
		}
		& div.lines {
			display: flex;
			align-items: flex-start;
			gap: 5px;
			overflow: hidden;
		}
		& div.card {
			opacity: 0;
			width: 100%;
			display: flex;
			align-items: flex-start;
			background-color: #FFF;
			padding: 20px;
			gap: 10px;
			transition: all 0.5s ease;
			transform: translateY(-50px);
			&.int {
				opacity: 1;
				transform: translateY(0);
			}
		}
		& div.ccard {
			width: 100%;
			display: flex;
			align-items: flex-start;
			gap: 10px;
		}
		& b {
			font-weight: 450;
		}
		& span.line {
			opacity: 0;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			padding-left: 20px;
			gap: 10px;
			transition: all 0.25s ease;
			transform: translateX(-75%);
			&.int {
				opacity: 1;
				transform: translateX(0);
			}
		}
		& span.m-v {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: stretch;
			gap: 20px;
			& i.img {
				width: 50%;
				display: flex;
				flex-shrink: 0;
				background: url('img/2.webp') center / cover no-repeat;
				overflow: hidden;
			}
			& > div {
				display: flex;
				gap: 20px;
			}
		}
		& span.w {
			width: 100%;
			& > div {
				flex: 1;
			}
		}
		div.benefits {
			width: 100%;
			display: flex;
			align-items: flex-start;
			border: 1px solid #CCC;
			padding: 10px;
			gap: 10px;
			overflow: hidden;
		}
		& swiper-container.whyus {
			--swiper-navigation-color: #D4C5A3;
			--swiper-pagination-color: #D4C5A3;
			width: 100%;
			-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 1%, rgba(0,0,0,1) 99%, rgba(0,0,0,0) 100%);
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: 100% 100%;
			mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 1%, rgba(0,0,0,1) 99%, rgba(0,0,0,0) 100%);
			mask-repeat: no-repeat;
			mask-size: 100% 100%;
			& swiper-slide {
				width: 70%;
				padding-bottom: 55px;
				& > div {
					display: flex;
					align-items: flex-start;
					border: 1px solid #CCC;
					padding: 10px;
					gap: 10px;
					overflow: hidden;
				}
			}
		}
		& a {
			text-decoration: none;
		}
		& button {
			display: flex;
			flex-direction: row;
			background-color: #FFF;
			color: #000;
			border: 3px solid #CCC;
			border-radius: 10px;
			outline: none;
			cursor: pointer;
			padding: 5px 20px;
			gap: 5px;
			transition: all 0.25s ease;
			&:hover {
				background-color: #CCC;
				border: 3px solid transparent;
			}
		}
		& div.blog {
			width: 100%;
			display: flex;
			gap: 20px;
			& button {
				display: flex;
				flex-direction: row;
				background-color: #FFF;
				color: #000;
				border: 3px solid #EEE;
				border-radius: 10px;
				outline: none;
				cursor: pointer;
				padding: 5px 20px;
				gap: 5px;
				transition: all 0.25s ease;
				&:hover {
					background-color: #EEE;
					border: 3px solid transparent;
				}
			}
			& p {
				color: #1388FE;
			}
			& > div {
				opacity: 0;
				width: 50%;
				display: flex;
				align-items: flex-start;
				position: relative;
				background-color: #FFF;
				border: 1px solid #CCC;
				border-radius: 10px;
				cursor: pointer;
				padding: 10px;
				transition: all 0.25s ease;
				transform: scale(0.1);
				&:hover {
					background-color: rgba(169,200,251,0.25);
					border: 1px solid #1388FE;
				}
				&.int {
					opacity: 1;
					transform: scale(1);
				}
				& * {
					color: #000;
					pointer-events: none;
				}
				& > i {
					color: rgba(0,0,0,0.25);
				}
			}
		}
		& div.cta {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			position: relative;
			background-color: #FFF;
			border: 1px solid #CCC;
			border-radius: 10px;
			cursor: pointer;
			padding: 10px;
			gap: 5px;
			transition: all 0.25s ease;
			&:hover {
				background-color: rgba(169,200,251,0.25);
				border: 1px solid #1388FE;
			}
			& * {
				color: #000;
				pointer-events: none;
			}
		}
	}
}
footer {
	width: 100%;
	min-height: 300px;
	display: flex;
	justify-content: flex-start;
	background-color: #142032;
	padding: 20px;
	gap: 20px;
	& section {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 20px;
		& > img {
			width: 150px;
			pointer-events: none;
		}
	}
	& div {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		& img {
			pointer-events: none;
		}
	}
	& span {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		gap: 10px;
	}
	& p {
		color: #FFF;
	}
	& b {
		color: #FFF;
		font-weight: 600;
	}
	& a {
		color: #FFF;
		cursor: pointer;
		transition: all 0.25s ease;
	}
}
.underlined {
	position: relative;
	white-space: nowrap;
	&:after {
		content: '';
		width: 100%;
		height: 8px;
		position: absolute;
		left: 0;
		bottom: -5px;
		border-top: solid 3px #D4C5A3;
		border-radius: 75%;
		transition: all 0.5s ease-out;
		transform: scaleX(0);
		transform-origin: bottom right;
		z-index: -1; 
	}
	&.int {
		&:after {
			transform: scaleX(1);
		}
	}
}
@media (hover: hover) and (pointer: fine) {
	div#menu > div:hover > div {
		transform: scaleY(1);
		pointer-events: auto;
	} 
}
@media (max-width: 1100px) {
	h1 { font-size: 2rem }
	h2 { font-size: 1.5rem }
	h3 { font-size: 1.25rem }
	div#top {
		bottom: 20px;
		right: 20px;
	}
	nav img {
		width: 150px;
	}
	button#menu {
		display: flex !important;
	}
	div#menu {
		height: auto ! important;
		flex-direction: column !important;
		align-items: flex-start;
		justify-content: space-between;
		position: fixed;
		top: 56.44px;
		left: 0;
		right: 0;
		background-color: #142032;
		border: 0;
		padding: 0;
		box-shadow: 1px 1px 10px 1px rgba(0,0,0,1.0);
		transition: all 0.25s ease;
		transform: translateY(calc(-100% - 56.44px));
		overflow: hidden;
		z-index: 0 !important;
		&.open {
			transform: translateY(0);
		}
		& > div {
			width: 100%;
			align-items: flex-start;
			border-top: 1px solid #FFF;
			padding-top: 20px;
			padding-left: 10px;
			& > div {
				width: auto;
				max-width: 90%;
				left: 10px;
				right: auto;
				& a {
					white-space: normal !important;
					border: none;
					padding: 0;
					&:last-child {
						padding-bottom: 0;
					}
				}
			}
		}
		& a {
			width: 100%;
			display: block;
			font-size: 16px !important;
			text-align: left;
			border-top: 1px solid #FFF;
			padding-top: 20px;
			padding-left: 10px;
			transform: none ! important;
			&:hover {
				transform: none !important;
			}
			&:last-child {
				padding-bottom: 20px;
			}
			&::after {
				display: none;
			}
		}
	}
	div.hero {
		height: calc(100vh - 56px);
		padding: 0 10px;
		gap: 20px;
		h1 {
			font-size: 1.5rem;
		}
		h2 {
			font-size: 1.25rem;
			padding: 0 20px;
		}
	}
	main > section {
		padding: 0 20px;
		&.s {
			padding: 20px;
		}
		& span.w > div {
			width: 100%;
		}
		& swiper-container.whyus {
			--swiper-navigation-color: transparent;
			mask-image: none !important;
			-webkit-mask-image: none !important;
			& swiper-slide {
				width: 100%;
			}
		}
		& span.m-v {
			flex-direction: column;
			align-items: center;
			& i.img {
				width: 100%;
				aspect-ratio: 16/9;
			}
		}
		& div.blog {
			& > div {
				width: 100%;
			}
		}
	}
	footer section {
		align-items: flex-start;
		flex-direction: column;
	}
	div#contact {
		width: 90%;
		& div {
			width: 100%;
		}
	}
}
@media (max-width: 400px) {
	h1 { font-size: 1.75rem }
	h2 { font-size: 1.25rem }
	h3 { font-size: 1rem }
	div.hero {
		h1 {
			font-size: 1.25rem;
		}
		h2 {
			font-size: 1rem;
		}
	}
}
@media (max-height: 500px) {
	div.hero {
		height: calc(100vh - 56.44px) !important;
		&.min {
			height: 70vh !important;
		}
	}
}