@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Mulish: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;
}

:root{

	--c1-h: 197;
	--c1-s: 90%;
	--c1-l: 51%;

	--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: 54;
	--c2-s: 100%;
	--c2-l: 50%;

	--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) * .8)
	);

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

	--static-c1:#0b1d33;
	--pink:#e5589c;

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

}

*{
	box-sizing:border-box;
}

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

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

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

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

.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.center{
	margin-inline:auto;
}

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

.btn-wht:hover{
	background:var(--c1-darken);
	color:#fff;
}

.btn-wt{
	color: #fff;
}

span.c2{
	color:var(--c2);
}

.section{
	padding:4em;
	padding-inline:2em;
	background-size:cover;
	background-position: center;
}

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

/*typography*/

.s-t{
	font-size:3em;
	line-height:1.25em;
	font-weight:700;
}

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

.s-sh{
	font-size:1.15em;
	line-height:1.25em;
	font-weight:500;
}

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

.disclaimer{
	text-align:center;
	color:#666;
}

/*herobanner*/

.hero-banner{
	position: relative;
	isolation:isolate;
	text-align:center;
	color:#fff;
	padding-block:6em;
}


.hero-banner .s-t,
.hero-banner .s-h{
	text-shadow:.035em .065em .075em rgba(0,0,0,.4);
	margin-bottom: .25rem;
}

.hero-banner .s-h{
	font-weight:600;
}

.hero-banner::before{
	content:'';
	position: absolute;
	inset:0;
	background:hsla(0,0%,0%,.4);
	z-index:-1;
}

.hero-slider{
	position: absolute;
	isolation:isolate;
	inset:0;
	background:#000;
	z-index:-2;
}

.hero-slider > img{
	position: absolute;
	display:block;
	height:100%;
	width:100%;
	z-index:-1;
	opacity:0;
	object-fit: cover;
	transition:2s opacity;
}

.hero-slider > img.active{
	opacity:1;
	z-index:-1;
}

/*mainform*/

.hero-form-container{
	display:grid;
	grid-template-columns: 1fr auto;
	gap:1.5em;
	margin-top:5em;
}

.hero-form-container .btn-s{
	max-width:100%;
	padding-block:1em;
	font-size:1.2em;
}

.main-form-row{
	display:grid;
	grid-template-columns: 1fr 1fr .5fr .5fr 1fr;
	gap:5px;
}

.main-form-row > div{
/*	background:#fff;*/
	position: relative;
	isolation:isolate;
}

.main-form-row > div > input[type="text"]{
	background:#fff;
	position: relative;
	border:none;
	outline:none;
	padding:2.25em 1em 1em 1em;
	width:100%;
	border:1px solid #bbb;
	border-radius:.3em;
}

.main-form-row .form-label{
	position: absolute;
	top:1em;
	left:1.33em;
	color:#333;
	font-weight:700;
	font-size:.8em;
	z-index:1;
	pointer-events: none;
}

/*section2*/

.s-h{
	margin-bottom:.5rem;
}

.locations-row{
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(0,1fr));
	gap:2em;
	margin-block:2em;
}

.locations-row a{
	text-decoration: none;
	color:inherit !important;
}

.img-thumb{
	overflow: hidden;
	isolation:isolate;
	position: relative;
	margin-bottom:.5em;
	border-radius:.75em;
}

.img-thumb::after{
	content:'';
	position: absolute;
	inset:0;
	background:rgba(0,0,0,.2);
	transition:.5s ;
}

.img-thumb > img{
	display:block;
	width:100%;
	aspect-ratio:1/1;
	transition:.5s ;
}

.img-thumb:hover > img{
	transform:scale(1.1);
}

.img-thumb:hover::after{
	opacity: .2;
}

.loc-name{
	font-weight:900;
	font-size:1.2em;
}

.spacer{
	height:3em;
}

/*banner with cta*/

.banner-with-cta{
	background-size: cover;
	background-position: center;
	border-radius:.75em;
	color:#fff;
	text-align:center;
	padding:2em 15%;
}

.banner-with-cta .s-t{
	font-size:2em;
	margin-bottom:.75rem;
	text-shadow:.035em .065em .075em rgba(0,0,0,.4);
}

.banner-with-cta .btn-cta{
	font-weight:800;
	font-size:1.5em;
	padding-block:.75em;
}

/*footer*/

.footer{
	background:#001117;
	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;
}

/*topbar*/

.tb-sticky{
	position: fixed;
	top:0;
	left:0;
	padding:1.5em 1.5em;
	width:100%;
	z-index:100;
	background:rgba(0,0,0,.0);
	transition:.5s background;
}

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

.tb-row{
	display:flex;
	flex-wrap:wrap;
	gap:2em;
	justify-content: space-between;
	align-items: center;
}

.tb-btn{
	font-size:1.25em;
	font-weight:700;
	padding-block:.5em;
}

.tb-sticky.scrolled{
	backdrop-filter: blur(3px);
	background:rgba(0,0,0,.5);
}

.sticky-contact{
	position: fixed;
	z-index:100;
	bottom:5em;
	right:12%;
}

.sticky-contact a.contact-toggle{
	display:flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width:2em;
	background:var(--c1);
	font-size:2em;
	aspect-ratio:1/1;
	margin-right: 0px;
	margin-left:auto;
	border-radius:100%;
	color:#fff;
}

.sticky-contact a.contact-toggle .bi{
	transform: translateY(10%);
}

/*modal*/

.modal{
	position: fixed;
	inset:0;
	background:rgba(0,0,0,.5);
	z-index:100;
	backdrop-filter: blur(.5em);
	padding:0 10%;
	transform:translateY(-100%);
	opacity:0;
	transition:.5s opacity;
	font-size:1.2em;
}

.modal.active{

	transform:translateY(0%);
	opacity:1;
}

.modal-panel{
	background:#fff;
	text-align: center;
	position: relative;
	top:calc(50% - 4em);
	transform:translateY(-50%);
	max-width:20em;
	margin-inline:auto;
	box-shadow:0 0 .5em .1em rgba(0,0,0,.3);
}

.modal-upper{
	padding:.5em 1em;
	background:var(--c1);
	color:#fff;
	font-weight:700;
	font-size:1.5em;
}

.modal-inner{
	padding:1.5em 1em;
}



.modal-inner a{
	text-decoration: none;
}

.modal-inner a:hover{
	text-decoration: underline;
	color:var(--c1);
}

.modal-upper .inner-toggle{
	position: absolute;
	right:.5em;
	color:#fff;
}

/*result page*/

.recommended .s2{
	background:#e4e4e4;
}

.recommended .tb-sticky,
.recommended .footer{
	background:var(--static-c1) !important;
}

.recommended .tb-sticky{
	position: sticky;
}

.result-column{
	background:#fff;
	box-shadow: 0px 8px 24px 0px hsla(0, 0%, 0%, 0.15);
	padding:1.75em;
	display:block;
	border-radius:1em;
	transition:.3s background;
}

.result-h{
	font-size:1.35em;
	margin-bottom:1em;
	font-weight:600;
}

.result-value{
	font-size:2em;
	font-weight:800;
	color:inherit;
}

.result-column:hover{
	background:#f7f7f7;
}

.result-column:not(.emp) .result-value{
	color:var(--c1);
}

.result-column.emp{
	background:var(--static-c1);
	color:#fff !important;

}

.flight-row{
	display:grid;
	grid-template-columns: minmax(0,1fr) minmax(0,3fr);
	gap:1px;
	background:#d4d3d3;
	box-shadow: 0px 8px 24px 0px hsla(0, 0%, 0%, 0.15);
	overflow:hidden;
	border-radius:1em;
	margin-bottom:3em;
}

.flight-row > div{
	padding:1.5em;
	background:#fff;
	text-align:center;
}

.flight-astrip{
	display:grid;
	grid-template-columns: minmax(0,3fr) minmax(0,1fr);
	gap:.75rem 1rem;
	font-size:1.5em;
	color:#696969;
}

.flight-astrip > :not(.flight-cta){
	grid-column: 1;
	text-align:left;
}

.flight-value{
	font-weight:700;
	font-size:1.75em;
	color:var(--static-c1);
}

.flight-cta{
	background:var(--static-c1);
	color:#fff;
	max-width:100%;
	font-size:1.1em;
	padding:1rem;
	font-weight:700;
	text-transform: capitalize;
	grid-column: 2;
	grid-row: 1 / span 2;
}

.panel-imgcol .flight-cta{
	max-width:max-content;
}

.flight-cta:hover{
	background:var(--c1);
}

.flight-info{
	
}

.flight-eta{
	display:grid;
	grid-template-columns: minmax(0,1fr) 7em minmax(0,1fr);
	align-items: center;
	display:none;
}

.flight-time{
	font-size:1.75em;
	font-weight:500;
	letter-spacing: -.1em;
	text-align:center;
}

.stopover-display{
	height:.15em;
	background:var(--static-c1);
	position: relative;
	gap:.5em;
}

.stopover-eta,
.stopover-label{
	position: absolute;
	left:0;
	width:100%;
	font-size:.8rem;
}

.stopover-eta{
	bottom:.75em;
}

.stopover-label{
	top:.75em;
	color:var(--pink);
}


.stopover-circle{
	position: absolute;
	width:100%;
	display:flex;
	justify-content: center;
	align-items: center;
	gap:.5em;
	top:50%;
	transform:translateY(-50%);
}

.stopover-circle > div{
	width:.5em;
	aspect-ratio:1/1;
	background:var(--pink);
	border-radius:100%;
}

.mid-banner{
	display:block;
	width:100%;
	height:auto;
	border-radius:1em;
	margin-block:3em;
}

.panel-imgcol{
	display:grid;
	grid-template-columns: minmax(0,3fr) minmax(0,2fr);
	background:#f5f5f5;
	box-shadow: 0px 8px 24px 0px hsla(0, 0%, 0%, 0.15);
	border-radius:1em;
	overflow:hidden;
	margin-block:3em;
}

.col-img{
	position: relative;
}

.col-img img{
	position: absolute;
	width:100%;
	height:100%;
	display:block;
	object-fit: cover;
}

.panel-imgcol > div:not(.col-img){
	padding:2em;
}

.flight-airlines img{
	display:block;
	aspect-ratio:16/9;
	object-fit: contain;
	width:100%;
}

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

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

@media(max-width:768px){

	.hero-form-container{
		grid-template-columns: 1fr;
		gap:10px;
	}

	.main-form-row{
		grid-template-columns: 1fr 1fr;
	}

	.main-form-row > div.form-inline{
		grid-column: span 1;
		grid-row-start:4;
	}

	.main-form-row > div:not(.form-inline){
		grid-column: span 2;
	}

	.main-form-row > div > input[type="text"]{
		padding-bottom:1em;
	}
}

@media(max-width:767px){
	.locations-row a{
		position: relative;
		display:block;
	}

	.locations-row,
	.flight-astrip{
		grid-template-columns: 1fr;
	}

	.flight-astrip > *{
		grid-column: 1;
		grid-row:auto;
		text-align:center !important;
	}

	.flight-airlines img{
		aspect-ratio:21/9;
	}

	.loc-name{
		position: absolute;
		bottom:1em;
		left:1em;
		color:#fff;
		font-size:5vw;
		padding-right:2em;
		text-shadow:.1em .2em .2em rgba(0,0,0,.4);
	}

	.locations-row .img-thumb{
		aspect-ratio:16/9;
	}

	.img-thumb::after{
		background:rgba(0,0,0,.4);
	}

	.flight-row,
	.flight-info{
		grid-template-columns: 1fr;
	}

	.flight-info{
		gap:3em;
		padding-bottom:3em !important;
	}

	.flight-airlines{
		font-size:1.25em;
		font-weight:500;
		letter-spacing: -.025em;
	}
}

@media(max-width:600px){
	.tb-sticky{
		font-size:.9em;
	}
}