/* Header Logo */
.main-header {z-index:2; position:absolute; top:0; left:0; width:100%; display:flex; justify-content:space-between; padding:30px;}
.main-header .logo {display:block; max-width:350px;}

/* Header Buttons Desktop */
.main-header .buttons {margin-right:100px;}
.main-header .buttons div {display:flex;}

/* The 2 Big Buttons that are repeated in several places */
.main-header .buttons a, .floating-header-open .top .buttons a, .page-hero.hero-type-homepage .content .buttons a {
	display:block; text-decoration:none; padding:15px 30px; border-radius:30px; margin-left:15px;
	background:var(--color-brand); color:#fff;
	text-transform:uppercase; font-size:16px; font-weight:bold; letter-spacing:.05em;
	white-space:nowrap;
}
.main-header .buttons a.sale, .page-hero.hero-type-homepage .content .buttons a.sale {background:#fff; color:var(--color-headline);}
.floating-header-open .top .buttons a.sale {
	background:var(--color-headline); color:#fff;
}


@media (max-width:1080px){
	.main-header .buttons {
		margin-right: 80px;
	}
	.main-header .buttons a{
		padding: 15px 15px;
		font-size: 14px;
		white-space: revert;
		margin-left: 9px;
	}
	.main-header .logo{
		max-width: 30%;
		min-width: 270px;
	}
}
@media (max-width:900px){
	.main-header .buttons {
		margin-right: 50px;
	}
}
@media (max-width:700px) {
	.main-header .logo {max-width:270px;}
}


/*@media (max-width:810px) {*/
/*	.main-header .buttons {display:none;}*/
/*}*/


@media (max-width:700px) {
	.main-header .buttons a, .floating-header-open .top .buttons a, .page-hero.hero-type-homepage .content .buttons a {
		padding:10px;
	}
}


/*//This is the CSS for the Single Yacht Layouts*/
/* Header Logo and Buttons */
.main-header-single {
    z-index: 2;
    position: absolute; /* Ensure the header is positioned absolutely at the top */
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center; /* Spaces children (logo and the container of buttons) on opposite ends */
    /*padding: 30px;*/
    align-items: center; /* Align items vertically in the center */
    color: #f4f4f4;

	/*padding-top: 36px; padding-bottom: 10px;*/
	left:50%; transform:translateX(-50%);
	margin-left: auto; margin-right: auto;
	background: transparent;
	padding-top:36px;
	padding-bottom:10px;
	padding-left:50px;
	padding-right: calc(var(--sticky-header-offset) + var(--sticky-header-offset) - 30px);
}
.main-header-single-wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:100%;
	max-width: 1600px;
}

.main-header-single .logo {
    display: flex; /* Adjusted to flex to keep the logo aligned */
    align-items: center; /* Center logo vertically */
    max-width: 350px;
}

/* Header Buttons Desktop */
.main-header-single .buttons {
    display: flex;
    justify-content: flex-end; /* Align the buttons div to the end */
    width: 100%; /* Ensure the buttons div takes up the remaining space */
    align-items: center; /* Align the buttons vertically in the center */

}





/* Hide buttons on mobile devices */


.main-header-single .buttons > div {
    display: flex; /* Ensure the inner div also displays its children inline */
}

/* The 2 Big Buttons that are repeated in several places */
.main-header-single .buttons a, 
.floating-header-open .top .buttons a, 
.page-hero.hero-type-homepage .content .buttons a {
    display: block;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 30px;
    margin-left: 15px; /* Adjust spacing between buttons */
    background: var(--color-brand-light);
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: .05em;
    white-space: nowrap;
}

.main-header-single .buttons a.sale, 
.page-hero.hero-type-homepage .content .buttons a.sale {
    background: #fff;
    color: var(--color-headline);
}

.floating-header-open .top .buttons a.sale {
    background: var(--color-headline);
    color: #fff;
}




/* Right sidebar menu thingy */
.floating-header-closed {
	z-index:30; position:fixed; top:0; right:0; width:80px; height:100vh; background:rgba(0, 42, 58, .52); backdrop-filter:blur(10px); padding:30px 15px;
	display:flex; flex-direction:column; justify-content:space-between; align-items:center;
}
.floating-header-closed .logo {max-width:50px; margin-top:auto;}
@media (max-width:810px) {
	.floating-header-closed {padding:30px 10px; width:50px;}
}
@media (max-width:700px) {
	.floating-header-closed {padding:10px 5px; width:auto;}
	.floating-header-closed .menu {width:30px;}
	.floating-header-closed .logo {max-width:30px;}
}

/* Right side menu deployed */
.floating-header-open {z-index:40; position:fixed; top:0; right:0; width:auto; height:100vh; background:#fff; padding:30px 15px; display:none; overflow-y:auto;}
.floating-header-open .top {display:flex; margin-bottom:30px;}
.floating-header-open .top .menu {margin-left:90px;}
.floating-header-open .top .buttons div {display:flex;}
.floating-header-open nav {padding:0 90px 30px 30px; text-align:right;}
.floating-header-open nav > ul {list-style:none;}
.floating-header-open nav > ul > li > a {display:block; font-size:36px; font-weight:bold; text-decoration:none; padding:15px 0;}
.floating-header-open nav > ul > li > a:hover, .floating-header-open nav > ul > li > ul > li > a:hover {text-decoration:underline;}
.floating-header-open nav > ul > li > button {padding:15px 0; width:100%; display:flex; justify-content:flex-end; align-items:center;}
.floating-header-open nav > ul > li > button span.label {font-size:36px; font-weight:bold; text-align:right;}
.floating-header-open nav > ul > li > button span.icon {margin-left:5px;}
.floating-header-open nav > ul > li > ul {list-style:none; display:none;}
.floating-header-open nav > ul > li > ul > li > a {display:block; font-size:24px; font-weight:bold; text-decoration:none; padding:10px 0;}
@media (max-width:700px) {
	.floating-header-open {padding:10px 5px; width:100%;}
	.floating-header-open .top .menu {margin-left:auto;}
	/*.floating-header-open .top .buttons {display:none;}*/
	.floating-header-open nav {padding:0 30px;}
	.floating-header-open nav > ul > li > a, .floating-header-open nav > ul > li > button span.label {font-size:24px;}
	.floating-header-open nav > ul > li > ul > li > a {font-size:16px;}
	.floating-header-open nav > ul > li > button span.icon {flex:0 0 20px;}
}


/* The mandatory hero on all pages */
.page-hero {z-index:1; position:relative; background:var(--color-headline); color:#fff; bottom:1px;}
.page-hero .background-image {z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position: center;}
.page-hero .overlay {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 42, 58, 0.32);
}



.home .page-hero .content h1 {font-size:53px; font-weight:bold;}
.page-hero .content {z-index:3; position:relative; padding:200px 0 100px;}
.page-hero .content h1 {font-size:53px; font-weight:bold;}
.page-hero .content h1:after {content:url('../img/line.svg'); display:block; margin:-30px 0 0;}
.page-hero .content p.description {font-size:22px; letter-spacing:.01em; line-height:1.6em;}
.page-hero .content .hero-normal-buttons {margin-top:15px;}
.page-hero .content .hero-normal-buttons .btn {border-color:#fff; margin:0 10px 10px 0;}
@media (max-width:1080px){
	.page-hero .content h1{
		font-size: 55px;
	}
	.page-hero .content p.description{
		font-size: 18px;
	}
    .main-header-single .buttons{
		font-size:15px;
	}
	.main-header-single .buttons a{
		padding:15px;
	}
}
@media (max-width:1400px){
	.main-header-single{
		/*padding-left:60px;*/
	}
}
@media (max-width:810px) {
	.page-hero .content {padding:110px 0 110px;}
	.page-hero.hero-type-homepage .content {padding-bottom:0;}
}
@media (max-width:700px) {
	.page-hero .content h1 {font-size:32px;text-shadow: 0 2px 11px #000;}
	.page-hero .content h1:after {margin-top:-10px;}
	.page-hero .content h2{
		text-shadow: 0 2px 11px #000;
	}
	.page-hero .content p.description {font-size:14px;text-shadow: 0 2px 11px #000;}
	.main-header-single{
		padding-left:20px;
	}

}

.page-hero .hero-wave {z-index:4; position:absolute; bottom:0; left:calc(((100vh - 1200px + 260px) / 2) - 500px);}
.page-hero .hero-wave img {display:block;}
@media (max-width:1200px) {
	.page-hero .hero-wave {left:calc(((100vh - 1200px) / 2) - 500px);}	
}
@media (max-width:810px) {
	.page-hero .hero-wave {display:none;}
}


/* Homepage Specific Shit */
.page-hero.hero-type-homepage .content .buttons {display:none;}
@media (max-width:900px) {
		.main-header-single .buttons {
			display: none;
		}


	.page-hero.hero-type-homepage .content .buttons {display:block; margin-top:30px;}
	.page-hero.hero-type-homepage .content .buttons a {display:inline-block; margin:0 0 10px;}
	.page-hero.hero-type-homepage .content .buttons a.sale{margin-right:10px;}
}

.page-hero.hero-type-homepage .metrics-wrapper {
    z-index: 3;
    position: relative;
    min-height: 150px; /* Adjust based on the expected height of metrics */
}
.page-hero.hero-type-homepage .metrics {
    display: flex;
    min-height: 100px; /* Ensuring there's space for metrics before content loads */
}
.page-hero.hero-type-homepage .metrics .metric {
    margin: 27px 0;
    display: flex;
    align-items: center;
    min-height: 50px; /* Ensuring each metric has a minimum height */
}
.page-hero.hero-type-homepage .metrics .metric .blue {
    font-size: 42px;
    color: var(--color-brand-light);
    font-weight: bold;
    min-width: fit-content;
}
.page-hero.hero-type-homepage .metrics .metric .white {
    flex: 0 0 60%;
    margin-left: 10px;
}
@media (max-width: 1600px) {
    .page-hero.hero-type-homepage .metrics {
        justify-content: flex-end;
    }
    .page-hero.hero-type-homepage .metrics .metric .blue {
        font-size: 30px;
    }
}
@media (max-width: 1150px) {
    .page-hero.hero-type-homepage .metrics {
        padding-left: 15%;
    }
}
@media (max-width: 1080px) {
    .page-hero.hero-type-homepage .metrics {
        margin-left: 0;
        margin-bottom: 20px;
        padding-top: 30px;
    }
    .page-hero.hero-type-homepage .metrics .metric {
        justify-content: center;
    }
    .page-hero.hero-type-homepage .metrics .metric .blue {
        font-size: 24px;
    }
    .page-hero.hero-type-homepage .metrics .metric .white {
        font-size: 14px;
    }
}
@media (max-width: 700px) {
    .page-hero .content h1 {
        font-size: 30px !important;
    }
    .page-hero .content h2 {
        text-shadow: 0 2px 11px #000;
    }
    .page-hero .content h1:after {
        margin-top: -10px;
    }
    .page-hero .content p.description {
        font-size: 14px;
        text-shadow: 0 2px 11px #000;
    }
    .page-hero.hero-type-homepage .content .buttons a{
        font-size: 13px;
    }
}
@media (max-width: 600px) {
    .page-hero.hero-type-homepage .metrics-wrapper {
        padding: 10px 0;
    }
    .page-hero.hero-type-homepage .metrics {
        display: block;
        padding: 0px 0 100px;
        margin: 0;
    }
    .page-hero.hero-type-homepage .metrics .metric {
        justify-content: flex-start;
    }
}