/* ========================================
   SEALVEA PASSENGER HUB V3 FINAL
======================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

:root{

--navy:#0B2A57;
--blue:#1C5FD4;
--light:#F7F9FC;
--white:#FFFFFF;
--text:#17335B;
--shadow:0 20px 55px rgba(0,0,0,.08);

}

body{

font-family:"Montserrat",sans-serif;

background:var(--light);

color:var(--text);

overflow-x:hidden;

position:relative;

}

/* ========================================
   LOADING SCREEN
======================================== */

#loadingScreen{

position:fixed;

inset:0;

background:#041A3B;

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

transition:.6s;

}

#loadingScreen.hide{

opacity:0;

visibility:hidden;

}

.loadingLogo{

width:95px;

animation:logoRotate 8s linear infinite;

}

/* ========================================
   NAVBAR
======================================== */

header{

position:fixed;

top:0;

left:0;

width:100%;

height:82px;

background:#0B2A57;

box-shadow:0 8px 30px rgba(0,0,0,.18);

z-index:900;

}

.navbar{

max-width:1400px;

height:100%;

margin:auto;

padding:0 34px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logoImage{

width:58px;

}

.desktopNav{

display:flex;

gap:18px;

}

.desktopNav a{

display:flex;

align-items:center;

gap:10px;

padding:12px 18px;

border-radius:999px;

text-decoration:none;

font-weight:600;

color:white;

transition:.3s;

}

.desktopNav a i{

color:white;

transition:.3s;

}

.desktopNav a:hover{

background:rgba(255,255,255,.12);

transform:translateY(-2px);

}

.desktopNav .active{

background:rgba(255,255,255,.18);

}

#menuButton{

display:none;

border:none;

background:none;

font-size:28px;

color:white;

cursor:pointer;

}

/* ========================================
   SIDEBAR
======================================== */

#mobileSidebar{

position:fixed;

left:-310px;

top:0;

width:280px;

height:100%;

background:white;

padding:28px;

box-shadow:12px 0 35px rgba(0,0,0,.12);

transition:.35s;

z-index:1000;

}

#mobileSidebar.open{

left:0;

}

.sidebarTop{

margin-bottom:34px;

}

.sidebarTop img{

width:58px;

}

#mobileSidebar a{

display:block;

padding:16px 0;

text-decoration:none;

color:var(--text);

font-weight:600;

}

#mobileSidebar a i{

margin-right:12px;

color:var(--blue);

}

/* ========================================
   HERO
======================================== */

.hero{

margin-top:82px;

height:720px;

position:relative;

overflow:hidden;

}

.heroSlider{

position:absolute;

inset:0;

}

.heroImage{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

opacity:0;

transition:opacity 1s;

transform:scale(1.08);

}

.heroImage.active{

opacity:1;

transform:scale(1);

transition:
opacity 1s,
transform 8s linear;

}

.heroOverlay{

position:absolute;

inset:0;

display:flex;

align-items:center;

background:linear-gradient(90deg,
rgba(11,42,87,.82),
rgba(11,42,87,.38),
transparent);

}

.heroContent{

width:92%;

max-width:1400px;

margin:auto;

color:white;

}

.heroContent h1{

font-size:72px;

font-weight:800;

line-height:1;

margin-bottom:22px;

}

.brushText{

display:block;

font-family:"Kaushan Script",cursive;

font-size:86px;

font-weight:400;

margin-top:10px;

}

.heroContent p{

font-size:22px;

max-width:650px;

line-height:1.7;

margin-bottom:36px;

}

.heroButton{

display:inline-flex;

padding:18px 34px;

border-radius:999px;

background:white;

color:var(--navy);

text-decoration:none;

font-weight:700;

transition:.3s;

}

.heroButton:hover{

transform:translateY(-4px);

}

/* ========================================
   FIND YOUR VOYAGE
======================================== */

.bookingSection{

position:relative;

margin-top:-80px;

padding:0 5% 90px;

z-index:5;

}

.bookingCard{

max-width:1200px;

margin:auto;

background:white;

border-radius:28px;

padding:38px;

box-shadow:var(--shadow);

position:relative;

}

.bookingCard h2{

font-size:40px;

color:var(--navy);

margin-bottom:8px;

}

.bookingCard p{

color:#6A7D99;

margin-bottom:30px;

}

.bookingGrid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-bottom:30px;

}

.bookingItem{

display:flex;

flex-direction:column;

}

.bookingItem label{

font-weight:700;

margin-bottom:10px;

color:var(--navy);

}

.bookingItem select{

height:58px;

padding:0 18px;

border:1px solid #DCE5F4;

border-radius:16px;

font-size:16px;

background:white;

transition:.25s;

}

.bookingItem select:hover{

border-color:var(--blue);

}

.bookingItem select:focus{

outline:none;

border-color:var(--blue);

}

/* ========================================
   SCHEDULE CARDS
======================================== */

.scheduleContainer{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-bottom:30px;

}

.scheduleCard{

background:#F8FAFD;

padding:24px;

border-radius:20px;

border:1px solid #E5ECF7;

transition:.3s;

}

.scheduleCard:hover{

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.scheduleCard h3{

font-size:22px;

color:var(--navy);

margin-bottom:10px;

}

.scheduleTime{

display:inline-block;

margin:10px 0;

padding:8px 14px;

border-radius:999px;

background:#EAF2FF;

color:var(--blue);

font-weight:700;

}

.scheduleCard strong{

display:block;

margin-top:14px;

font-size:18px;

color:var(--navy);

}

/* ========================================
   BOOK BUTTON
======================================== */

.bookingButton button{

width:100%;

height:60px;

border:none;

border-radius:18px;

background:var(--navy);

color:white;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.bookingButton button:hover{

background:var(--blue);

transform:translateY(-3px);

}

/* ========================================
   FLOATING BUBBLES
======================================== */

.backgroundDecor{

position:fixed;

inset:0;

pointer-events:none;

overflow:hidden;

z-index:-1;

}

.bubble{

position:absolute;

border-radius:50%;

background:rgba(28,95,212,.05);

animation:floatBubble linear infinite;

}

.bubble1{

width:120px;

height:120px;

left:8%;

bottom:-140px;

animation-duration:26s;

}

.bubble2{

width:70px;

height:70px;

left:28%;

bottom:-120px;

animation-duration:20s;

}

.bubble3{

width:160px;

height:160px;

right:14%;

bottom:-180px;

animation-duration:30s;

}

.bubble4{

width:90px;

height:90px;

right:36%;

bottom:-140px;

animation-duration:23s;

}

.bubble5{

width:60px;

height:60px;

left:60%;

bottom:-90px;

animation-duration:18s;

}

@keyframes floatBubble{

0%{

transform:translateY(0);

}

100%{

transform:translateY(-130vh);

}

}

/* ========================================
   PAGE HERO
======================================== */

.pageHero{

margin-top:82px;

padding:100px 20px 70px;

background:linear-gradient(135deg,var(--navy),var(--blue));

text-align:center;

color:white;

}

.pageHero h1{

font-size:58px;

margin-bottom:14px;

}

.pageHero p{

font-size:20px;

opacity:.95;

}

/* ========================================
   CRUISES
======================================== */

.cruiseList{

padding:70px 5%;

}

.cruiseGrid{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:28px;

}

.cruiseCard{

background:white;

border-radius:22px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.3s;

}

.cruiseCard:hover{

transform:translateY(-6px);

}

.cruiseCard img{

width:100%;

height:240px;

object-fit:cover;

}

.cruiseInfo{

padding:26px;

}

.cruiseShip{

display:inline-block;

background:#EAF2FF;

color:var(--blue);

padding:8px 14px;

border-radius:999px;

font-weight:700;

margin-bottom:18px;

}

.cruiseInfo h2{

font-size:30px;

margin-bottom:10px;

color:var(--navy);

}

.cruiseDetails{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:12px;

margin:25px 0;

}

.cruiseDetails div{

background:#F8FAFD;

padding:14px;

border-radius:14px;

}

/* ========================================
   VOYAGE
======================================== */

.voyagePage{

padding:70px 5%;

}

.voyageCardLarge{

max-width:1100px;

margin:auto;

background:white;

padding:40px;

border-radius:24px;

box-shadow:var(--shadow);

}

.voyageCardLarge h2{

font-size:40px;

color:var(--navy);

margin-bottom:10px;

}

.voyageGridLarge{

margin-top:30px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:18px;

}

.voyageGridLarge div{

background:#F8FAFD;

padding:22px;

border-radius:16px;

}

/* ========================================
   SOLSTICE
======================================== */

.solsticeGrid{

max-width:1300px;

margin:auto;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:26px;

padding:70px 5%;

}

.solsticeCard{

background:white;

border-radius:24px;

padding:34px;

box-shadow:var(--shadow);

transition:.3s;

}

.solsticeCard:hover{

transform:translateY(-6px);

}

.solsticeCard h2{

font-size:30px;

margin-bottom:18px;

color:var(--navy);

}

.solsticeCard ul{

padding-left:20px;

margin-bottom:28px;

line-height:2;

}

.solsticeCard a{

display:inline-flex;

padding:14px 22px;

border-radius:999px;

background:var(--navy);

color:white;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.solsticeCard a:hover{

background:var(--blue);

}

/* ========================================
   NOTIFICATION POPUP
======================================== */

.notificationModal{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:rgba(5,18,40,.55);

backdrop-filter:blur(8px);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:5000;

}

.notificationModal.show{

opacity:1;

visibility:visible;

}

.notificationCard{

width:min(92%,520px);

background:white;

border-radius:26px;

padding:34px;

box-shadow:0 30px 80px rgba(0,0,0,.22);

text-align:center;

transform:translateY(20px) scale(.98);

transition:.35s;

}

.notificationModal.show .notificationCard{

transform:translateY(0) scale(1);

}

.notificationIcon{

width:74px;

height:74px;

margin:0 auto 22px;

border-radius:50%;

background:#EDF4FF;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:var(--blue);

}

.notificationCard h2{

font-size:32px;

color:var(--navy);

margin-bottom:12px;

}

.notificationDescription{

margin-top:10px;

color:#61738F;

line-height:1.7;

}

.notificationButtons{

display:flex;

gap:16px;

margin-top:32px;

}

.notificationButtons button{

flex:1;

height:54px;

border:none;

border-radius:16px;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.25s;

}

.secondaryButton{

background:#EEF2F7;

color:var(--text);

}

.secondaryButton:hover{

background:#E2E8F0;

}

.primaryButton{

background:var(--navy);

color:white;

}

.primaryButton:hover{

background:var(--blue);

}

/* ========================================
   RESPONSIVE
======================================== */

@media(max-width:950px){

.desktopNav{

display:none;

}

#menuButton{

display:block;

}

.cruiseGrid{

grid-template-columns:1fr;

}

.scheduleContainer{

grid-template-columns:1fr;

}

.solsticeGrid{

grid-template-columns:1fr;

}

.voyageGridLarge{

grid-template-columns:1fr;

}

}

@media(max-width:700px){

.hero{

height:620px;

}

.heroContent h1{

font-size:48px;

}

.brushText{

font-size:58px;

}

.bookingCard{

padding:28px;

}

.bookingGrid{

grid-template-columns:1fr;

}

.pageHero h1{

font-size:42px;

}

}