@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Outfit:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css');

body,html{
	font-family: var(--mainfont);
	font-size:16px;
	letter-spacing: -.025em;
}

:root{

	--c1-h: 266;
	--c1-s: 75%;
	--c1-l: 25%;

	--c1: hsl(var(--c1-h),
	 var(--c1-s), 
	var(--c1-l));

	/* light color version*/
	--c1-lighten: hsl(
	    var(--c1-h),
	    var(--c1-s),
	    calc(var(--c1-l) * 1.2)
	);

	/* dark color version*/
	--c1-darken: hsl(
	    var(--c1-h),
	    var(--c1-s),
	    calc(var(--c1-l) * .8)
	);

	--c1-desate: hsl(
	    var(--c1-h),
	    calc(var(--c1-s) * .6),
	    calc(var(--c1-l) * 1.4)
	);

	--c2-h: 266;
	--c2-s: 100%;
	--c2-l: 64%;

	--c2: hsl(var(--c2-h),
		 var(--c2-s), 
		var(--c2-l));

	/* light color version*/
	--c2-lighten: hsl(
	    var(--c2-h),
	    var(--c2-s),
	    calc(var(--c2-l) * 1.2)
	);

	/* dark color version*/
	--c2-darken: hsl(
	    var(--c2-h),
	    var(--c2-s),
	    calc(var(--c2-l) * .7)
	);

	--c2-desate: hsl(
	    var(--c2-h),
	    calc(var(--c2-s) * .6),
	    calc(var(--c2-l) * 1.4)
	);

	--c3-h: 47;
	--c3-s: 100%;
	--c3-l: 84%;

	--c3: hsl(var(--c3-h),
	 var(--c3-s), 
	var(--c3-l));

	/* light color version*/
	--c3-lighten: hsl(
	    var(--c3-h),
	    var(--c3-s),
	    calc(var(--c3-l) * 1.2)
	);

	/* dark color version*/
	--c3-darken: hsl(
	    var(--c3-h),
	    var(--c3-s),
	    calc(var(--c3-l) * .8)
	);

	--c3-desate: hsl(
	    var(--c3-h),
	    calc(var(--c3-s) * .6),
	    calc(var(--c3-l) * 1.4)
	);

	--mainfont: 'Inter', sans-serif;
	--subfont: 'Outfit', sans-serif;
	--serif: 'Playfair Display', serif;

}

*{
	box-sizing:border-box;
}

.cw{
	width:100%;
	max-width:1200px;
	margin:0px auto;
}

.btn-s{
	display:block;
	width:100%;
	text-align:center;
	text-decoration: none;
	max-width:max-content;
	padding:.25em 1em;
	transition:.3s background;
}

.btn-s.c1{
	background:var(--c1);
	color:#fff;
}

.btn-s.btn-fw{
	max-width:100%;
}

.btn-s.c1-lighten:hover{
	background:var(--c1-lighten);
}

.btn-s.c1-darken:hover{
	background:var(--c1-darken);
}

.btn-s.c1-desate:hover{
	background:var(--c1-desate);
}

.btn-s.c2{
	background:var(--c2);
	color:#fff;
}

.btn-s.c2-lighten:hover{
	background:var(--c2-lighten);
}

.btn-s.c2-darken:hover{
	background:var(--c2-darken);
}

.btn-s.c2-desate:hover{
	background:var(--c2-desate);
}

.btn-s.center{
	margin-inline:auto;
}

.btn-wht{
	background:#fff;
}

.btn-wt{
	color: #fff;
}

.section{
	padding:4em;
	padding-inline:2em;
}

.grid-row{
	--col:2;
	display:grid;
	grid-template-columns: repeat(var(--col),minmax(0,1fr));
}

/*typography*/

.s-t{
	font-size:2.5em;
	line-height:1.25em;
	font-weight:800;
	font-family:var(--subfont);
}

.s-h{
	font-size:1.3em;
	line-height:1.25em;
	font-weight:700;
}

.s-sh{
	font-family:var(--subfont);
	font-size:1.15em;
	line-height:1.25em;
	font-weight:600;
}

.p{
	font-weight:300;
	line-height:1.5em;
}

/*topbar*/

body{
	margin-top:11em;
}

.tb-sticky{
	position: fixed;
	top:0;
	left:0;
	height:11em;
	width:100%;
	z-index:100;
	background:#fff;
	box-shadow:0 0 .3em .15em rgba(0,0,0,.25);
	font-family:var(--subfont);
}

.topbar{
	height:calc(100% - 3em);
	padding:.5em 0 0;
	padding-inline:5%;
}

.tb-lower{
	height:3em;
	padding-inline:2em;
	background:var(--c1);
	color:#fff;
	font-weight:500;
	font-family:var(--subfont);
/*	text-transform: uppercase;*/
	display:flex;
	align-items: center;
}

.tb-lower .tb-grid{
	font-size:1.2em;
}

.tb-grid{
	display:grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap:1em;
	align-items: center;
}

.tb-grid > *:last-child{
	text-align:right;
}

.tb-grid > a{
	color:#fff;
	text-decoration: none;
	text-transform: capitalize;
}

.tb-logo{
	display:block;
	aspect-ratio:21/9;
	width:50%;
	object-fit: contain;
}

.tb-cta{
	font-weight:300;
	color:#777;
	margin-bottom:.2em;
}

.tb-contact{
	color:var(--c1);
	font-weight:700;
	font-size:2em;
	margin-bottom:.5em;
}

.tb-contact .bi{
	display: inline-block;
/*	transform: scaleX(-1);*/
}

.tb-btn{
	padding:.3em 1.5em;
	font-weight:700;
	margin-right:0;
	margin-left:auto;
	border-radius:.3em;
}

/*herobanner*/

.hero-banner{
	position: relative;
	color:#fff;
	padding-block:7.5%;
	padding-inline:7.5%;
	margin-bottom:2em;
}

.hero-banner > .hero-bg{
	position: absolute;
	width:100%;
	height:100%;
	z-index:-2;
	inset:0;
	object-fit: cover;
	pointer-events: none;
}

.hero-banner.gradient::before{
	content:'';
	inset:0;
	z-index:-1;
	position: absolute;
	background: linear-gradient(90.04deg, var(--c1) 10%, hsla(var(--c1-h), var(--c1-l), var(--c1-l), 0) 99.96%);
}

.banner-content{
	width:50%;
}

.banner-content .p > span:last-child{
	display:none;
}

.hero-btn{
	padding:1.5em 15% .75em;
	font-size:1.5em;
	font-weight:800;
	border-radius:.15em;
	margin-bottom:1.5em;
	position: relative;
}

.hero-banner .s-t{
	font-size:3.5em;
	margin-bottom:.5rem;
}

.hero-btn > .smol{
	position: absolute;
	top:.5em;
/*	margin-top:.5em;*/
	width:100%;
	left:0;
	text-align:center;
	font-size:.6em;
	font-family:var(--serif);
	font-weight:700;
	letter-spacing: initial;
	font-style: italic;
}

.hero-panel{
	background:var(--c3);
	padding:1em 2.5%;
	border-radius:1em;
	color:#000;
	width:60%;
	margin-inline:auto;
	transform: translateY(-4.5em);
	display: grid;
	grid-template-columns: minmax(0,1fr) auto;
	align-items: center;
}

.hero-panel .s-h{
	font-family:var(--subfont);
	grid-column: 1;
	margin-bottom: .5rem;
}

.hero-panel .s-h > span:last-child,
.hero-panel .s-sh > span:last-child{
	display:none;
}

.hero-panel .s-sh{
	font-size:.8em;
	font-weight:300;
	font-family:var(--serif);
	grid-column: 1;
}

.hero-panel .s-sh:first-letter{
	text-transform: capitalize;
}

.hero-panel .btn-s{
	grid-column: 2;
	grid-row:-1 / span 5;
}

/*section2*/

.s2{
	padding-top:0;
}

.s2 .p{
	margin-bottom:1em;
}

.s2 .s-t{
	margin-bottom: .5rem;
}

.s2-row1{
	display:grid;
	grid-template-columns: minmax(0,3fr) minmax(0,5fr);
	gap:0 2em;
	margin-bottom:2em;
}

.s2-row1 .s-t{
	color:var(--c1);
}

.s2-row1 > div:not(.col2){
	grid-column: 1;
}

.s2-row1 > .col2{
	grid-column: 2;
	grid-row:1 / span 5;
}

.s2-row1 > div{
	position: relative;
}

.s2-row1 > .col2 img{
	display: block;
	position: absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit: cover;
	border-radius:.3em;
}

.s2-row2{
	display:grid;
	grid-template-columns: repeat(auto-fit,minmax(0,1fr));
	gap:2em;
}

.s2-row2 .s-sh{
	color:var(--c2);
	margin-bottom:.5rem;
	text-transform: capitalize;
}

.s2-row2 > div{
	display:grid;
	grid-template-columns: 5em minmax(0,1fr);
	gap:0 1.5em;
}

.s2-row2 .p{
	font-size:.9em;
}


.s2-row2 .p > span{
	font-weight:500;
	color:var(--c2-darken);
}

.s2-row2 .col1 svg{
	aspect-ratio:1/1;
	width:100%;
	fill:var(--c1);
	margin-top:1em;
	transition:.3s;
}

.s2-row2 > div svg:hover{
	background:var(--c1);
	padding:15%;
	fill:#fff;
}

.s2-btngrid{
	display:grid;
	grid-template-columns: repeat(auto-fit,minmax(0,1fr));
	gap:1.5em;
	font-size:1.2em;
}

.s2-btngrid > .btn-s{
	display:flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.btn1{
	padding-block:.75em;
	margin-bottom:1.5em;
	font-weight:600;
	text-transform: capitalize;
	border-radius:.3em;
}

.btn2{
	border:2px solid #000;
	color:#000;
	border-radius:99em;
	font-size:1.2em;
	font-weight:700;
	padding-block:.5em;
}

.btn2:before,
.hero-btn:before{
	content: "\f5b4";
	display: inline-block;
    font-family: bootstrap-icons!important;
    font-style: normal;
    font-weight: 400!important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right:.5em;
}

.s-banner{
	position: relative;
	isolation: isolate;
	text-shadow: 1px 1px 5px rgba(255,255,255,.8);
	padding:4em 5%;
	font-size:.8em;
	margin-block:2em;
}

.s-banner .s-t{
	color:#000 !important;
}

.s-banner.style2 a{
	text-shadow: initial !important;
	position: absolute;
	top:50%;
	transform:translateY(-50%);
	right:5%;
	padding-inline:2.5em;
}


.s-banner:before{
	content:'';
	inset:0;
	position: absolute;
	background: linear-gradient(90.06deg, #D9D9D9 0.05%, rgba(217, 217, 217, 0) 99.5%);
	z-index:-1;
	border-radius: .5em;
}

.s-banner .banner-bg{
	display:block;
	position: absolute;
	inset:0;
	width:100%;
	height:100%;
	z-index:-2;
	object-fit: cover;
	border-radius: .5em;
}

.s-banner .banner-content{
	font-size:1em;
}

.s-banner .s-h,
.s-banner .p{
	font-family: var(--serif);
	font-weight:300;
	text-transform: capitalize;
	margin-bottom:.5em;
}

.s-banner .p{
	color:#666;
}

.s2-row3{
	display:grid;
	grid-template-columns: minmax(0,3fr) minmax(0,4fr);
	gap:2em;
}

.s2-row3 > .col2{
	display:grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap:2em;
}

.s2-row3 > .col2 .s-h svg{
	object-fit: contain;
	width:2.5em;
	height:2.5em;
	display:block;
	fill:var(--c1);
	float:left;
}

.s2-row3 > .col2 .s-h{
	display:flex;
	align-items: center;
	gap:.5em;
}

.s2-row3 .s-t{
	color:var(--c1);
	text-transform: capitalize;
}

@keyframes nudge {

	0% {
		transform: rotate(-7deg);
	}

	33% {
		transform: rotate(7deg);
	}

	66% {
		transform: rotate(-7deg);
	}

}

.s2-row2 > div:hover svg{
	animation: nudge .4s linear;
}

.s2-row3{
	padding-block:2em;
}

.s2-row3 .col2 .s-h{
	color:var(--c1);
	text-transform: capitalize;
	font-weight:800;
	margin-bottom:.25em;
}

.s2-row3 .col2{
	font-size:.9em;
}

.s2-row3 .col1{
	padding-right:10%;
}

.s2-row3 .col1 .s-sh{
	font-family:var(--serif);
	font-weight:300;
	line-height:1.5em;
}

.btn-fw.style2{
	padding-block:.5em;
	font-size:1.5em;
	text-transform: uppercase;
	font-weight:800;
	border-radius:.3em;
}

.cta-link{
	color:var(--c2);
	font-weight:700;
	text-transform: capitalize;
	text-decoration: none;
	font-size:1.4em;
}

/*section3*/

.s3 .s-sh{
	font-weight:300;
	font-family:var(--serif);
	line-height:1.5em;
}

.s3 .s-t{
	text-transform: capitalize;
	margin-bottom:.5em;
	color:var(--c1);
}

.s3-row{
	display:grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap:3em;
	font-size:.9em;
	padding-block:2em;
	margin-bottom:1em;
}

.s3-row a{
	text-decoration: none;
	color:inherit;
}

.s3-row a:hover .s3-col-thumbnail img{
	transform:scale(1.05);
	opacity:1;
}

.s3-row .s-sh{
	font-weight:700;
	font-family:var(--subfont);
	text-transform: capitalize;
	color:var(--c1);
	margin-bottom:.2em;
}

.s3-col-thumbnail{
	display:block;
	width:100%;
	aspect-ratio:5/3;
	margin-bottom:.5em;
	position: relative;
	isolation:isolate;
	overflow:hidden;
	background:#000;
}

.s3-col-thumbnail img{
	opacity:.85;
	position:absolute;
	inset:0;
	height:100%;
	width:100%;
	display:block;
	object-fit: cover;
	transition:.3s;
}

/*footer*/

.footer{
	background:#353333;
	color:#fff;
}

.footer .s-h{
	font-size:1.2em;
}

.footer-flex{
	display:flex;
	gap:2em;
}

.footer-logo{
	display:block;
	aspect-ratio:21/9;
	object-fit: contain;
	width:10em;
}

.footer-flex > div:first-child{
	margin:0 auto 0 0;
}

.footer-flex > div:last-child{
	margin:0 0 0 auto;
	text-align: right;
}

.footer-links{
	display:flex;
	flex-direction: column;
	gap:1em;
}

.footer-links a{
	color:#fff;
}

/*faq*/

.faq .s-t{
	margin-bottom:1em;
}

.faq .p{
	font-weight:400;
}

.faq-panel{
	display:grid;
	grid-template-columns: 1fr;
	background: var(--c3);
	border-radius:.5em;
	padding-block:1em;
	gap:.5em;
	padding-inline:1.5em;
	margin-bottom: 1.5em;
}

.faq-panel > .panel-toggle{
	font-weight:800;
	display:block;
	color:#000 !important;
	text-decoration: none;
	text-transform: capitalize;
	font-size:1.2em;
	position: relative;
	padding-right:2em;
}

.panel-toggle:after{
	content:'';
	position: absolute;
	top:50%;
	transform:translateY(-50%);
	right:.5em;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .4em .4em 0 .4em;
	border-color: #000 transparent transparent transparent;
}

.faq-panel.active .panel-toggle:after{

	transform:translateY(-50%) rotate(180deg);
}

.faq-panel .p:not(:last-child){
	margin-bottom:1em;
}

.p.ul > div{
	padding-left:1.5em;
	position: relative;
	margin-bottom:.2em;
}

.p.ul > div:before{
	content:'';
	width:.4em;
	aspect-ratio:1/1;
	position: absolute;
	top:.6em;
	left:.6em;
	background:#000;
	border-radius:99em;
}

.faq-content{

	transition:.3s opacity;
}

.faq-panel:not(.active) .faq-content{
	position: fixed;
	transform:translateY(-100%);
	opacity:0;
}

.faq-panel.active .faq-content{
	display:block;
	position: relative;
	transform:translateY(0%);
	opacity:1;
}

@media(max-width: 1200px){
	body{
		font-size: 14px;
	}
}

@media(max-width:1024px){
	.s3-row{
		gap:2em;
	}
}

@media(max-width:900px){
	body{
		font-size:12px;
	}

	.hero-panel{
		width:70%;
		font-size:1.5vw;
		transform: translateY(-3.5em);
	}
}

@media(max-width:660px){

	.hero-panel{
		width:100%;
		font-size:1em;
		grid-template-columns: 1fr;
		gap:.5em;
		padding-inline:5%;
	}

	.hero-panel > *{
		grid-column: initial !important;
		grid-row: initial !important;
		margin-bottom:0 !important;
	}

	.hero-panel > .btn-s{
		max-width: 100%;
	}

	.section{
		padding-inline:1em;
	}

	.tb-sticky{
		height:9em;
	}

	.tb-lower{
		padding-inline:1em;
	}

	.tb-logo{
		width:70%;
	}

	body{
		margin-top:9em;
		font-size:calc(1.5vw + .5em)
	}

	.tb-btn{
		display:none;
	}

	.tb-contact {
	    font-size: 4.5vw;
	}

	.banner-content{
		width:100%;
	}

	.s-banner.style2 a{
		position: relative;
		top:initial;
		right:initial;
		transform: initial;
		color:#fff !important;
	}

	.s-banner.style2 .smol{
		color:#fff !important;
	}

	.s2-row2{
		grid-template-columns: 1fr;
	}
	
	.s2-row1{
		display:block;
	}

	.s2-row1 .col2{
		aspect-ratio:21/9;
		margin-bottom:1em;
	}

	.s3-row,
	.s2-row3{
		grid-template-columns: 1fr;
	}

	.s3-row > a{
		display:grid;
		grid-template-columns: 7em minmax(0,1fr);
		gap:0 1.5em;
	}

	.s3-row > a > *:not(.s3-col-thumbnail){
		grid-column:2;
	}

	.s3-row > a > .s3-col-thumbnail{
		grid-column:1;
		grid-row: span 5;
	}

	.s3-col-thumbnail{
		aspect-ratio:1/1;
		border-radius:.3em;
	}

	.s-banner::before{
		backdrop-filter: blur(5px);
	}

	.s-banner{
		font-size:1em;
	}

	.s-banner *{
		font-weight:700 !important;
		color:#000 !important;
	}

	.hero-panel .s-h > span:last-child,
	.hero-panel .s-sh > span:last-child,
	.banner-content .p > span:last-child{
		display:block;
	}

	.hero-panel .s-h > span:first-child,
	.hero-panel .s-sh > span:first-child,
	.banner-content .p > span:first-child{
		display:none;
	}

	.s2-btngrid{
		display:none;
	}
}


@media(max-width:480px){
	.s2-row1 .col2{
		aspect-ratio:5/3;
	}
}