@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: local('Nunito'), 
	url('../fonts/nunito-variablefont_wght.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('../fonts/nunito-variablefont_wght.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	}

@font-face {
	font-family: 'Courgette';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: local('Courgette'), 
	url('../fonts/courgette-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('../fonts/courgette-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	}

:root {
	--darkest: #001B3A;
	--dark: #03256c;
	--med: #2541b2;
	--light: #2159f3;
	--v-light: #40e0d0;
	--off-white: #f8f8f8;
	--silver: a8a8a8;
	--white: #ffffff;	
	--red: #ff0000;
	--available: var(--white);
	--confirmed: var(--red);
	--tentative: var(--light);
	--global-padding: 2rem;
	}

/* GLOBAL SETTINGS */

*, *::before, *::after {box-sizing: border-box; padding: 0; margin: 0; border: none; outline: none;}
img, video {display: block; max-width: 100%; height: auto; margin: auto; }
html {font-family: 'Nunito', sans-serif; font-size: 15px; line-height: 1.75; color: var(--med); width: 100%; height: 100%; min-width: 320px; background: var(--white);}
	
/* TYPOGRAPHY */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {font-family: 'Courgette', script; font-weight: normal;}
h1, .h1 {font-size: 3rem; line-height: 1.10; padding:0;}
h2, .h2 {font-size: 2.25rem; line-height: 1.20; padding: 1.45rem 0 0.85rem 0;}
h3, .h3 {font-size: 1.5rem; line-height: 1.25; padding: 1rem 0 0.65rem 0;}
h4, .h4 {font-size: 1.25rem; line-height: 1.25; padding: 1rem 0 0.65rem 0;}
p {padding-bottom: 0.95rem;}
a {text-decoration: none; font-weight: bold; color: var(--light);}
a:hover {color: var(--med);}
.logo {text-transform: uppercase; color: var(--dark);}
.small {font-size: 80%;}
.lowercase {text-transform: lowercase;}
.silver {color: var(--silver);} 
.highlight {background: var(--light); color: var(--white); padding: 1rem 2rem 0 2rem; margin-bottom: 2rem; font-size: 1.1rem; outline: 1px solid var(--white); outline-offset: -5px;}
.highlight a {color: var(--white); }
.highlight a:hover {color: var(--med);}
.menu a {display: block; font-weight: normal;}
.tag {color: var(--v-dark); text-transform: uppercase; line-height: 1.25; transform: scale(1, 0.75); letter-spacing: 2px; }

.red-highlight {background: red; color: var(--white); padding: 2rem; margin-bottom: 2rem; font-size: 1.1rem; outline: 3px solid var(--white); outline-offset: -10px; text-align: center;}

.red-highlight a:hover {color: green;}
.red-highlight btn {background: var(--white); color: red;}
.red-highlight btn:hover {color: green;}

/* GLOBAL LAYOUT */
.row {display: flex; width: 100%; flex-wrap: wrap;}
.no-wrap {flex-wrap: nowrap;}
.align-middles {align-items: center;}
.align-tops {align-items: top;}
.justify-start {justify-content: start;}
.justify-end {justify-content: end;}
.justify-between {justify-content: space-between;}
.justify-around {justify-content: space-around;}
.align-left {text-align: left;}
.align-center {text-align: center; margin: auto;}
.align-right {text-align: right;}
.one-third {width: 33.333%;}
.one-half {width: 50%;}
.full-width {width: calc(100% + calc(2 * var(--global-padding))); margin-left: calc(-1 * var(--global-padding));}
.plr-2 {padding: 0 2rem;}
.ptb-2 {padding: 2rem 0;}
ul, ol {margin: 0 2.5rem; padding-bottom: 2rem;}
li {padding: 0.25rem 1rem;}

/* SPECIFIC LAYOUT */
.header-content {padding: 2rem;}
.mobile-header img {margin: 0; margin-right: 1rem;}
.main-content {padding: 0 var(--global-padding) 3rem var(--global-padding);}
.footer-content {background: var(--off-white);}
.copyright {background: var(--dark); color: var(--white);}
.fade {animation-name: fade; animation-duration: 2s;}
	@keyframes fade {from {opacity: .001} to {opacity: 1}}
	
/* ASPECT RATIOS */
.ratio-1-1 {aspect-ratio: 1 / 1;}
.ratio-2-1 {aspect-ratio: 2 / 1;}
.ratio-3-2 {aspect-ratio: 3 / 2;}
.ratio-3-4 {aspect-ratio: 3 / 4;}
.ratio-4-3 {aspect-ratio: 4 / 3;}
.ratio-5-3 {aspect-ratio: 5 / 3;}
.ratio-16-9 {aspect-ratio: 16 / 9;}
.ratio-120-75 {aspect-ratio: 120 / 75;}
.ratio-200-105 {aspect-ratio: 200 / 105;}
	
/* ACCORDION */
details {border: solid 1px var(--off-white); box-shadow: 2px 2px 4px var(--silver); margin-bottom: 1rem; cursor: pointer; color: var(--light);}
details:hover {box-shadow: 1px 1px 4px var(--dark); color: var(--med);}
summary {font-weight: bold; list-style-position: outside; margin-left: 2rem; padding: 1rem;}
.answer {padding: 0.25rem 3rem 1rem 3rem; color: var(--med);}

/* BREADCRUMBS */
.breadcrumb-block {background: var(--off-white); padding: 0.5rem 2rem; font-size: 0.8rem; margin-bottom: 1rem;}
.breadcrumbs {margin-right: auto;}
.breadcrubs a {padding: 0; line-height: 1;}
.breadcrumb {text-decoration: none; color: var(--light); font-weight: normal;}
.breadcrumb:hover {color: var(--med);}
.breadcrumb:first-child::before {content:""; padding: 0;}
.breadcrumb::before {content: "/"; padding: 0 1rem; color: var(--light);}
.breadcrumb.current {color: var(--med);}

/* BUTTONS */
.btn {border: none; outline:none; padding: 0.5rem 0.75rem; font-size: 1rem; text-transform: uppercase; margin: 1rem 0.5rem;}
.btn:hover {box-shadow: 1px 1px 3px var(--silver);}
.primary-btn {background: var(--white); border: 3px double var(--light); color: var(--light);}
.primary-btn:hover {border: 3px double var(--med); color: var(--med);}
.primary-btn.active, .secondary-btn {background: var(--light); color: var(--white); outline: 1px solid var(--white); outline-offset: -2px;}
.secondary-btn:hover {background: var(--med); color: var(--white);}
.red-highlight-btn {background: var(--white); outline: 2px solid var(--red); outline-offset: -5px; color: red;}
.red-highlight-btn:hover {outline: 2px solid green; color: green;}

#mobile-menu-btn {position: fixed; top: 1rem; right: 2rem;}
#go-to-top {position: fixed; bottom: 2rem; right: 2rem; display: none;}

/* CARDS */	
.card {padding: 1rem;}
.card-content {padding: 1rem; padding-bottom: 2rem; border: solid 1px var(--off-white); box-shadow: 2px 2px 4px var(--silver); text-align: center;}
.filter {display: none; /* Hide all cards by default */}
.filter.show-card {display: block; /* Show only cards with the "show-card" class */}

/* GALLERY & LIGHTBOX */
.gallery {display: flex; flex-wrap: wrap;}
.gallery > div, .gallery::after {--ratio: calc(var(--w) / var(--h)); --row-height: 10rem; flex-basis: calc(var(--ratio) * var(--row-height));}
.gallery > div {margin: 0.25rem; flex-grow: calc(var(--ratio) * 100);}
.gallery::after {--w: 2; --h: 1; content: ''; flex-grow: 1000000;}
.gallery > div > img {display: block; width: 100%; cursor: pointer;}
.lightbox-content {position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: var(--darkest);}
.lightbox-content img {padding: 0; max-height: 100%; max-width: 100%; object-fit: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden;}
.lightbox-photo {display: none; overflow: hidden; opacity: 0;
transition: opacity 0.5s ease-in-out; /* Smooth fade effect */}
.lightbox-photo.show {opacity: 1; /* Display when "show" class is added */}

.caption {position: absolute; bottom: 1rem; left: 1rem; color: var(--white); z-index: 200; max-width: 50%;}
.photo-title {font-size: 1.45rem; line-height: 1; padding: 1rem; font-weight: bold;  text-shadow:
    2px 2px 0 var(--darkest),
    -2px 2px 0 var(--darkest),
    -2px -2px 0 var(--darkest),
    2px -2px 0 var(--darkest);}
.photo-descr {font-size: 1.15rem; line-height: 1.25; padding: 0rem 1rem 1rem 1rem; text-shadow:
    2px 2px 0 var(--darkest),
    -2px 2px 0 var(--darkest),
    -2px -2px 0 var(--darkest),
    2px -2px 0 var(--darkest);}

/* MODALS */	
.modal {display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: var(--white);}
.menu-modal-content {margin: auto; padding: 2rem; position: relative; text-align: center;}
.menu-modal-content img {margin: auto; text-align: center; max-width: 450px;}
.modal-menu a {font-size: 1.35rem; padding: 0.5rem 0;}
.modal-button {color: var(--light); cursor: pointer; position: absolute; font-size: 2rem;}
.modal-button:hover {color: var(--v-med);}
.close-menu {top: 2rem; right: 2rem;}
.close-lightbox {top: 0.5rem; right: 1rem; -webkit-text-stroke: 1px var(--white);}
.next {right: 0.5rem; top: 48%; -webkit-text-stroke: 1px var(--white);}
.prev {left: 0.5rem; top: 48%; -webkit-text-stroke: 1px var(--white);}

/* PROMOTIONAL POP-UP */

.promo-modal {
    display: none;
    position: fixed;
    z-index: 200;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.promo-modal-content {
    background: var(--white);
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-sizing: border-box;
    border-radius: 5px;
}

.promo-close {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-size: 2rem;
    color: var(--light);
    cursor: pointer;
}

.promo-close:hover {
    color: var(--v-med);
}

.promo-modal-content h2 {
    margin-top: 0;
}

.promo-discount {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 1rem 0;
}

.promo-link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    background: var(--dark);
    color: var(--white);
    text-decoration: none;
}

@media (max-width: 480px) {
    .promo-modal-content {
        padding: 2.5rem 1.5rem;
    }
}

/* OVERLAYS */
.overlay {display: flex; align-items: center; justify-content: center; position: relative; width: 100%;}
.overlay-text {position: absolute; padding: 2rem 3rem; background: rgba(255, 255, 255, 0.65); max-height: 90%; max-width: 90%; overflow: hidden; text-align: center; color: var(--dark);}

/* SLIDESHOW */
.slideshow {position: relative; width: 100%; height: 500px; /* Adjust height as needed */ overflow: hidden;}
.slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease-in-out;}
.slide-content {position: relative; width: 100%; height: 100%;}
.slide img {height: 100%; width: 100%; object-fit: cover;}
.slide-text {
  position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);   padding: 2rem 3rem; background: rgba(255, 255, 255, 0.65); max-height: 90%; width: 90%; overflow: hidden; text-align: center; color: var(--dark);}
/* Show the first image */
.slide.active {opacity: 1;}

/* STORY & CHAPTERS */
.story .chapter {border: 3px double var(--light); border-top: none; padding: 2rem 3rem; counter-increment: section; position: relative;}
.story .chapter:nth-child(even) {border-left: none;}
.story .chapter:nth-child(odd) {border-right: none;}
.story .chapter:nth-child(odd):before,
.story .chapter:nth-child(even):before {background: var(--light); border-radius: 50%; color: var(--white); content: counter(section); font-size: 30px; height: 50px; position: absolute; padding: 1px; text-align:center; width: 50px; font-family: 'Courgette';}
.story .chapter:nth-child(odd):before {right: 100%;margin-right: -20px;}
.story .chapter:nth-child(even):before {left: 100%; margin-left: -20px;}
.story .chapter:first-child {border-top: 0; border-top-left-radius:0; border-top-right-radius:0;}
.story .chapter:last-child {margin-bottom: 2rem;}

/* TABLES */
table {border-collapse: collapse; margin: 1rem auto 3rem auto; background: var(--white); width: 100%; text-align: center; table-layout: fixed; border: 3px double var(--light);}
th, td {border: 1px solid var(--light); padding: 0.25rem 0.5rem;}
.cruise {text-align: left; table-layout: auto; border: none;}
.cruise td, .cruise th {border: none;}
.cruise th {font-family: 'Courgette'; font-weight: normal;}

.calendar {text-align: center; font-weight: bold; color: var(--med);}
.year {font-family: 'Courgette'; font-weight: normal; font-size: 2rem; padding-bottom: 0; text-align: center;}
.month {font-family: 'Courgette'; font-weight: normal; font-size: 1.5rem;}
.legend {table-layout: fixed; font-size: 85%; width: 100%;}
.legend td, .legend th {text-align: center;}
.blocked {background: dimgrey; color:lightgrey; }
.confirmed {background: var(--red); color: var(--white);}
.tentative {background: var(--v-light); color: var(--white);}
.available-confirmed {background: linear-gradient(45deg, var(--white) 50%, var(--red) 50%); color: var(--dark);}
.confirmed-available {background: linear-gradient(45deg, var(--red) 50%, var(--white) 50%);}
.change-over {background: linear-gradient(45deg, var(--red) 45%, var(--white) 10%, var(--red) 55%); }
.available-tentative {background: linear-gradient(45deg, var(--white) 50%, var(--v-light) 50%); }
.confirmed-tentative {background: linear-gradient(45deg, var(--red) 50%, var(--v-light) 50%); }
.tentative-available {background: linear-gradient(45deg, var(--v-light) 50%, var(--white) 50%); }
.shared {background: var(--dark); color: var(--dark);}
.one-cabin {background: linear-gradient(var(--red) 25%, var(--silver) 25%);}
.two-cabins {background: linear-gradient(var(--red) 50%, var(--silver) 50%);}
.three-cabins {background: linear-gradient(var(--red) 75%, var(--silver) 75%);}

.rotate {text-align: center; vertical-align: bottom; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;}
.holiday {font-style: italic;}
.cruise-descr img {width: 100%;}
.cruise-descr table {width: 100%;}
.cruise-descr th, cruise-descr td {vertical-align: top; text-align: left; padding: 0 1rem; }
.cruise-descr th {font-family: 'Courgette'; font-weight: normal; font-size: 1.35rem; padding: 0 1rem;}
.cruise-descr td {padding-top: 0.35rem;}

/* RESPONSIVE ELEMENTS */

@media (max-width: 874px) {
.sidebar {display: none;}
h1, .h1 {font-size: 2rem;}
h2, .h2 {font-size: 1.5rem;}
h3, .h3 {font-size: 1.25rem;}
h4, .h4 {font-size: 1.05rem;}
.caption {max-width: 100%;}
#google-map iframe {max-width: 90%;}
}
	
@media (min-width: 875px) {
header {height: 100%; width: 20%; position: fixed;}
main {width: 100%; padding-left: 20%;}
footer {width: 100%; padding-left: 20%;}
.mobile-header {display: none;}
#mobile-menu-btn {display: none;}
#google-map {max-width: 600;}
}

@media (max-width: 640px) {
.one-third {width: 100%;}
.one-half {width: 100%;}
.footer-menu {text-align: center;}
.footer-logo {display: none;}
.contact-menu {text-align: center;}
.breadcrumbs {display: none;}
.breadcrumb-block .row {justify-content: end;}
.overlay-text {padding: 1rem; max-height: 95%; max-width: 95%;}
.overlay-text p {font-size: 90%; padding: 0;}
.overlay-text .h3 {font-size: 115%; padding: 0;}
.tag {letter-spacing: 1px;}
}

@media (min-width: 641px) and (max-width: 980px) {
.footer-menu {text-align: right;}
.footer-logo {text-align: center;}
.contact-menu {text-align: left;}
:root {--global-padding: 7.5rem;}
}

@media (min-width: 981px) and (max-width: 1100px) {
.footer-menu {text-align: right;}
.footer-logo {text-align: center;}
.contact-menu {text-align: left;}
:root {--global-padding: 5rem;}
}


@media (min-width: 1101px) and (max-width: 1300px) {
.footer-menu {text-align: right;}
.footer-logo {text-align: center;}
.contact-menu {text-align: left;}
html {font-size: 13px;}
:root {--global-padding: 6.5rem;}
}

@media (min-width: 1301px) {
.footer-menu {text-align: right;}
.footer-logo {text-align: center;}
.contact-menu {text-align: left;}
html {font-size: 17px; }
:root {--global-padding: 10rem;}
}