/* ================= GLOBAL ================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
font-family:'Poppins',sans-serif;
}

body{
background:#f4f6fb;
overflow-x:hidden;
}

section{
opacity:0;
transform:translateY(34px);
transition:opacity 0.8s ease,transform 0.8s ease;
}

section#home{
opacity:1;
transform:none;
}

.reveal-card,
.service-card,
.portfolio-gallery img,
.package-card,
.team-card,
.testimonial-card,
.offer-card,
.event-media-panel{
animation:float-in 0.8s ease both;
}

.service-card:nth-child(2),
.offer-card:nth-child(2),
.package-card:nth-child(2),
.team-card:nth-child(2),
.testimonial-card:nth-child(2){
animation-delay:0.08s;
}

.service-card:nth-child(3),
.offer-card:nth-child(3),
.package-card:nth-child(3),
.team-card:nth-child(3),
.testimonial-card:nth-child(3){
animation-delay:0.16s;
}

/* ================= IMAGE SYSTEM FIX (IMPORTANT) ================= */

img{
width:100%;
height:auto;
display:block;
object-fit:cover;
}

/* Prevent head cropping */
.about-image img,
.team-card img,
.portfolio-gallery img{
object-fit:cover;
object-position:center 15%;
}

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

.navbar{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 7%;
background:rgba(0,0,0,0.85);
backdrop-filter:blur(10px);
z-index:1000;
}

.logo-section{
display:flex;
align-items:center;
gap:15px;
}

.logo{
width:60px;
height:60px;
object-fit:contain;
border-radius:50%;
background:white;
padding:5px;
}

.logo-text h1{
color:white;
font-size:28px;
}

.logo-text p{
color:yellow;
font-size:13px;
}

.nav-links{
display:flex;
gap:25px;
list-style:none;
}

.nav-links a{
text-decoration:none;
color:white;
font-size:15px;
font-weight:500;
transition:0.4s;
}

.nav-links a:hover{
color:red;
}

.menu-btn{
display:none;
font-size:28px;
color:white;
cursor:pointer;
}

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

.hero{
min-height:100vh;
position:relative;
display:flex;
justify-content:flex-start;
align-items:center;
text-align:left;
overflow:hidden;
padding:150px 7% 120px;
isolation:isolate;
}

.hero-video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-3;
filter:saturate(1.15) contrast(1.08);
}

.hero-overlay{
position:absolute;
inset:0;
width:100%;
height:100%;
background:
linear-gradient(90deg,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.58) 42%,rgba(0,0,0,0.18) 100%),
linear-gradient(180deg,rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.05) 45%,rgba(0,0,0,0.72) 100%);
z-index:-2;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 18% 50%,rgba(255,0,0,0.22),transparent 34%),
linear-gradient(135deg,rgba(255,230,0,0.1),transparent 42%);
mix-blend-mode:screen;
opacity:0.8;
z-index:-1;
pointer-events:none;
}

.hero-content{
position:relative;
max-width:860px;
color:white;
}

.hero-kicker{
display:inline-flex;
align-items:center;
gap:10px;
padding:9px 14px;
border:1px solid rgba(255,255,255,0.28);
border-radius:999px;
background:rgba(0,0,0,0.28);
backdrop-filter:blur(8px);
color:#ffe600;
font-size:13px;
font-weight:700;
line-height:1;
letter-spacing:0;
margin-bottom:22px;
}

.hero-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:50%;
background:red;
box-shadow:0 0 18px red;
}

.hero-content h1{
font-size:clamp(46px,7vw,104px);
line-height:0.96;
font-weight:800;
margin-bottom:22px;
max-width:780px;
text-shadow:0 18px 40px rgba(0,0,0,0.7);
}

.hero-content h2{
font-size:clamp(24px,3vw,42px);
line-height:1.18;
color:#ffe600;
margin-bottom:18px;
max-width:760px;
}

.hero-content p:not(.hero-kicker){
font-size:18px;
line-height:1.75;
max-width:690px;
color:rgba(255,255,255,0.88);
}

.hero-buttons{
margin-top:40px;
display:flex;
gap:14px;
flex-wrap:wrap;
}

.main-btn,
.second-btn{
padding:15px 35px;
text-decoration:none;
font-weight:600;
border-radius:8px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:54px;
transition:0.4s;
}

.main-btn{
background:red;
color:white;
box-shadow:0 18px 38px rgba(255,0,0,0.28);
}

.second-btn{
background:rgba(255,255,255,0.12);
border:1px solid rgba(255,255,255,0.32);
color:white;
backdrop-filter:blur(10px);
}

.main-btn:hover,
.second-btn:hover{
transform:translateY(-5px);
}

.hero-showreel{
position:absolute;
right:7%;
bottom:116px;
width:min(360px,28vw);
padding:18px 20px;
border-left:4px solid #ffe600;
background:rgba(0,0,0,0.42);
backdrop-filter:blur(14px);
color:white;
}

.hero-showreel span,
.hero-stats span{
display:block;
font-size:12px;
font-weight:600;
color:rgba(255,255,255,0.72);
text-transform:uppercase;
}

.hero-showreel strong{
display:block;
font-size:20px;
line-height:1.25;
margin-top:5px;
}

.hero-stats{
position:absolute;
left:7%;
right:7%;
bottom:32px;
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid rgba(255,255,255,0.22);
color:white;
}

.hero-stats div{
padding:22px 28px 0 0;
min-width:0;
}

.hero-stats strong{
display:block;
font-size:clamp(24px,3vw,38px);
line-height:1;
color:#ffe600;
}

/* ================= SECTION LAYOUT ================= */

section{
padding:100px 8%;
}

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title h1{
font-size:48px;
color:#001f5c;
margin-bottom:15px;
}

.section-title p{
font-size:18px;
color:#666;
}

/* ================= ABOUT ================= */

.about-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about-image img{
height:550px;
border-radius:20px;
transition:0.4s;
object-position:center top;
}

.about-image img:hover{
transform:scale(1.03);
}

.about-text h2{
font-size:40px;
margin-bottom:20px;
color:red;
}

.about-text p{
line-height:1.9;
margin-bottom:20px;
font-size:17px;
color:#333;
}

.about-features{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-top:30px;
}

.feature-box{
background:white;
padding:18px;
border-radius:10px;
font-weight:600;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.feature-box i{
color:red;
margin-right:10px;
}

.trust-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
margin-top:25px;
}

.trust-stat{
background:#001f5c;
color:white;
padding:18px;
border-radius:10px;
text-align:center;
}

.trust-stat strong{
display:block;
font-size:28px;
color:yellow;
margin-bottom:5px;
}

.trust-stat span{
font-size:13px;
font-weight:600;
}

/* ================= OFFERS ================= */

#offers{
background:white;
}

.offers-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:28px;
}

.offer-card{
background:#f4f6fb;
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.4s;
}

.offer-card:hover{
transform:translateY(-8px);
}

.offer-image{
position:relative;
height:240px;
overflow:hidden;
background:#001f5c;
}

.offer-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}

.offer-discount{
position:absolute;
top:16px;
left:16px;
background:red;
color:white;
padding:9px 13px;
border-radius:8px;
font-weight:800;
font-size:14px;
}

.offer-content{
padding:24px;
}

.offer-content h2{
color:#001f5c;
font-size:24px;
margin-bottom:10px;
}

.offer-content p{
color:#555;
line-height:1.7;
margin-bottom:18px;
}

.offer-price-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
padding:15px;
border-radius:10px;
background:white;
margin-bottom:18px;
}

.offer-label{
color:#555;
font-weight:600;
}

.offer-price-row strong{
color:red;
font-size:22px;
white-space:nowrap;
}

.offer-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:46px;
border-radius:8px;
background:#001f5c;
color:white;
font-weight:700;
text-decoration:none;
transition:0.3s;
}

.offer-btn:hover{
background:red;
}

/* ================= SERVICES ================= */

.services-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.service-card{
background:white;
padding:40px;
border-radius:20px;
text-align:center;
transition:0.4s;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.service-card:hover{
transform:translateY(-10px);
}

.service-card i{
font-size:55px;
color:red;
margin-bottom:20px;
}

.service-card h2{
margin-bottom:15px;
color:#001f5c;
}

.service-card p{
line-height:1.7;
color:#555;
}

/* ================= PORTFOLIO ================= */

.portfolio-gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:25px;
}

.portfolio-gallery img{
height:330px;
border-radius:20px;
transition:0.4s;
object-position:center 20%;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

.portfolio-gallery img:hover{
transform:scale(1.06);
}

/* ================= EVENT MEDIA ================= */

.event-coming-soon{
max-width:980px;
margin:0 auto;
display:grid;
grid-template-columns:auto 1fr;
gap:24px;
align-items:center;
background:white;
padding:42px;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.event-coming-icon{
width:86px;
height:86px;
display:flex;
align-items:center;
justify-content:center;
border-radius:16px;
background:#001f5c;
color:yellow;
font-size:38px;
}

.event-coming-soon span{
display:inline-block;
color:red;
font-weight:800;
text-transform:uppercase;
font-size:14px;
margin-bottom:8px;
}

.event-coming-soon h2{
color:#001f5c;
font-size:32px;
margin-bottom:12px;
}

.event-coming-soon p{
color:#555;
line-height:1.8;
margin-bottom:22px;
}

.event-coming-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 20px;
border-radius:8px;
background:red;
color:white;
font-weight:700;
text-decoration:none;
}

.event-media-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
align-items:start;
}

.event-media-panel,
.media-album-view{
background:white;
padding:32px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.event-media-panel-title{
display:flex;
align-items:flex-start;
gap:16px;
margin-bottom:24px;
}

.event-media-panel-title i{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
background:red;
color:white;
font-size:22px;
flex-shrink:0;
}

.event-media-panel-title h2{
color:#001f5c;
margin-bottom:5px;
}

.event-media-panel-title p{
color:#555;
line-height:1.6;
}

.media-album-view{
margin-top:30px;
}

.media-album-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:22px;
}

.media-album-header h2{
color:#001f5c;
margin-bottom:5px;
}

.media-album-header p{
color:#555;
}

.media-download-all{
border:none;
background:#001f5c;
color:white;
padding:12px 16px;
border-radius:8px;
font-weight:700;
cursor:pointer;
white-space:nowrap;
}

.media-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
}

.media-card{
background:#f4f6fb;
border-radius:12px;
overflow:hidden;
box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

.media-card img{
height:190px;
object-fit:cover;
}

.media-card-body{
padding:14px;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
}

.media-card-body span{
font-size:13px;
font-weight:600;
color:#001f5c;
word-break:break-word;
}

.media-card-body a{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:8px;
background:red;
color:white;
text-decoration:none;
flex-shrink:0;
}

.media-empty{
grid-column:1 / -1;
background:white;
border:2px dashed #d9deea;
padding:24px;
border-radius:12px;
text-align:center;
color:#555;
}

/* ================= PACKAGES ================= */

.package-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}

.package-card{
background:#001f5c;
padding:45px;
border-radius:20px;
color:white;
}

.package-card h2{
margin-bottom:25px;
font-size:30px;
color:yellow;
}

.package-card ul li{
margin-bottom:15px;
line-height:1.8;
}

/* ================= TEAM ================= */

.team-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.team-card{
background:white;
padding:20px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 20px rgba(0,0,0,0.08);
}

.team-card img{
height:350px;
border-radius:20px;
transition:0.4s;
object-position:center 15%;
}

.team-card img:hover{
transform:scale(1.03);
}

/* ================= TESTIMONIALS ================= */

.testimonial-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
}

.testimonial-card{
background:white;
padding:35px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.testimonial-card img{
width:110px;
height:110px;
border-radius:50%;
border:3px solid gold;
object-fit:cover;
}

.stars{
font-size:28px;
color:gold;
margin:15px 0;
}

.testimonial-card p{
line-height:1.8;
color:#444;
}

/* ================= LIVE ================= */

.live-box{
background:black;
padding:20px;
border-radius:20px;
overflow:hidden;
}

.live-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
margin-bottom:16px;
}

.live-badge{
display:inline-flex;
align-items:center;
gap:8px;
color:white;
font-weight:700;
}

.live-badge i{
color:red;
font-size:12px;
animation:live-pulse 1.4s infinite;
}

.live-refresh-btn{
border:none;
background:red;
color:white;
padding:10px 16px;
border-radius:8px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.live-refresh-btn:hover{
background:#001f5c;
}

.live-frame-wrap{
position:relative;
width:100%;
aspect-ratio:16 / 9;
background:#111;
border-radius:12px;
overflow:hidden;
}

.live-frame-wrap iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
display:block;
}

.live-note{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
color:white;
font-size:15px;
line-height:1.6;
margin-top:16px;
}

.live-note a{
color:#ffd700;
font-weight:700;
white-space:nowrap;
}

@keyframes live-pulse{
0%,100%{opacity:1;}
50%{opacity:0.35;}
}

@keyframes float-in{
from{
opacity:0;
transform:translateY(26px) scale(0.98);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}

@keyframes soft-float{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-8px);
}
}

@keyframes booking-glow{
0%,100%{
transform:translate(0,0) scale(1);
opacity:0.75;
}
50%{
transform:translate(-70px,70px) scale(1.12);
opacity:1;
}
}

@keyframes pulse-cta{
0%,100%{
box-shadow:0 16px 34px rgba(255,0,0,0.25);
}
50%{
box-shadow:0 20px 46px rgba(255,0,0,0.45);
}
}

/* ================= BOOKING ================= */

.booking-box{
position:relative;
display:grid;
grid-template-columns:minmax(280px,0.85fr) minmax(0,1.45fr);
gap:34px;
overflow:hidden;
background:#06112f;
padding:34px;
border-radius:24px;
box-shadow:0 28px 70px rgba(0,31,92,0.26);
max-width:1180px;
margin:auto;
color:white;
}

.booking-box::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(120deg,rgba(255,255,255,0.08),transparent 24%,transparent 70%,rgba(255,230,0,0.1)),
repeating-linear-gradient(90deg,rgba(255,255,255,0.05) 0 1px,transparent 1px 72px);
pointer-events:none;
}

.booking-spotlight{
position:absolute;
width:360px;
height:360px;
right:-120px;
top:-120px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,0,0,0.36),transparent 64%);
animation:booking-glow 6s ease-in-out infinite;
pointer-events:none;
}

.booking-intro,
.booking-box form{
position:relative;
z-index:1;
}

.booking-intro{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:24px;
padding:28px;
border-radius:18px;
background:
linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.04)),
linear-gradient(135deg,rgba(255,0,0,0.18),transparent);
border:1px solid rgba(255,255,255,0.16);
min-height:100%;
}

.booking-badge{
display:inline-flex;
align-items:center;
gap:10px;
width:max-content;
max-width:100%;
padding:10px 13px;
border-radius:999px;
background:rgba(255,230,0,0.14);
color:#ffe600;
font-size:13px;
font-weight:800;
line-height:1;
}

.booking-intro h2{
font-size:clamp(28px,3.4vw,46px);
line-height:1.05;
}

.booking-intro p{
color:rgba(255,255,255,0.78);
line-height:1.75;
}

.booking-highlights{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.booking-highlights span{
display:flex;
align-items:center;
gap:10px;
padding:13px 12px;
border-radius:12px;
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.14);
font-weight:700;
animation:soft-float 4.5s ease-in-out infinite;
}

.booking-highlights span:nth-child(2),
.booking-highlights span:nth-child(4){
animation-delay:0.8s;
}

.booking-highlights i{
color:#ffe600;
}

.booking-box form{
padding:28px;
border-radius:18px;
background:rgba(255,255,255,0.96);
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.55);
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

.input-box{
margin-bottom:25px;
animation:float-in 0.7s ease both;
}

.input-box:nth-child(2){animation-delay:0.04s;}
.input-box:nth-child(3){animation-delay:0.08s;}
.input-box:nth-child(4){animation-delay:0.12s;}
.input-box:nth-child(5){animation-delay:0.16s;}
.input-box:nth-child(6){animation-delay:0.2s;}
.input-box:nth-child(7){animation-delay:0.24s;}
.input-box:nth-child(8){animation-delay:0.28s;}
.input-box:nth-child(9){animation-delay:0.32s;}
.input-box:nth-child(10){animation-delay:0.36s;}

.input-box:focus-within{
transform:translateY(-3px);
}

.input-box label{
display:block;
margin-bottom:10px;
font-weight:600;
color:#001f5c;
}

.input-box input,
.input-box select,
.input-box textarea{
width:100%;
padding:16px;
border:1px solid #d9deea;
border-radius:12px;
font-size:16px;
background:#f7f9ff;
transition:border-color 0.3s ease,box-shadow 0.3s ease,background 0.3s ease,transform 0.3s ease;
}

.input-box input:focus,
.input-box select:focus,
.input-box textarea:focus{
outline:none;
border-color:red;
background:white;
box-shadow:0 0 0 4px rgba(255,0,0,0.1),0 14px 28px rgba(0,31,92,0.1);
}

.submit-btn{
width:100%;
padding:18px;
border:none;
background:linear-gradient(135deg,#ff0000,#b80000);
color:white;
font-size:18px;
font-weight:600;
border-radius:10px;
cursor:pointer;
transition:0.4s;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
box-shadow:0 16px 34px rgba(255,0,0,0.25);
animation:pulse-cta 2.4s ease-in-out infinite;
}

.submit-btn:hover{
background:#001f5c;
transform:translateY(-4px);
box-shadow:0 20px 38px rgba(0,31,92,0.24);
}

/* ================= CONTACT ================= */

.contact-container{
display:flex;
justify-content:space-between;
align-items:flex-start;
flex-wrap:wrap;
gap:30px;
}

.contact-box{
background:white;
padding:40px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.contact-box p{
margin-top:20px;
font-size:18px;
}

.contact-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:25px;
}

.contact-action{
display:inline-flex;
align-items:center;
gap:8px;
min-height:44px;
padding:11px 16px;
border-radius:8px;
background:#001f5c;
color:white;
font-weight:700;
text-decoration:none;
}

.contact-action.whatsapp{
background:#128c4a;
}

.social-links a{
font-size:35px;
margin-right:20px;
color:#001f5c;
transition:0.4s;
}

.social-links a:hover{
color:red;
}

/* ================= FOOTER ================= */

footer{
background:#001f5c;
padding:40px;
text-align:center;
color:white;
}

footer h2{
margin-bottom:10px;
}

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

@media(max-width:950px){

.menu-btn{
display:block;
}

.nav-links{
position:absolute;
top:100%;
left:0;
width:100%;
background:#001f5c;
flex-direction:column;
align-items:center;
padding:20px 0;
display:none;
}

.nav-links.active{
display:flex;
}

.about-container{
grid-template-columns:1fr;
}

.event-media-layout{
grid-template-columns:1fr;
}

.event-coming-soon{
grid-template-columns:1fr;
padding:30px;
}

.event-coming-soon h2{
font-size:26px;
}

.media-album-header{
align-items:flex-start;
flex-direction:column;
}

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

.booking-box{
grid-template-columns:1fr;
padding:22px;
}

.booking-intro,
.booking-box form{
padding:22px;
}

.booking-highlights{
grid-template-columns:1fr 1fr;
}

.live-header,
.live-note{
align-items:flex-start;
flex-direction:column;
}

.trust-stats{
grid-template-columns:1fr;
}

}

@media(max-width:720px){

.hero{
text-align:left;
padding:128px 6% 210px;
align-items:flex-start;
}

.hero-overlay{
background:
linear-gradient(180deg,rgba(0,0,0,0.84) 0%,rgba(0,0,0,0.46) 46%,rgba(0,0,0,0.82) 100%),
linear-gradient(90deg,rgba(0,0,0,0.72),rgba(0,0,0,0.14));
}

.hero-kicker{
font-size:12px;
}

.hero-content h1{
font-size:44px;
line-height:1;
}

.hero-content h2{
font-size:23px;
}

.hero-content p:not(.hero-kicker){
font-size:15px;
line-height:1.65;
}

.hero-buttons{
gap:10px;
margin-top:28px;
}

.main-btn,
.second-btn{
width:100%;
padding:14px 18px;
}

.hero-showreel{
left:6%;
right:6%;
bottom:106px;
width:auto;
padding:14px 16px;
}

.hero-stats{
left:6%;
right:6%;
bottom:24px;
grid-template-columns:repeat(3,minmax(0,1fr));
}

.hero-stats div{
padding:16px 8px 0 0;
}

.hero-stats strong{
font-size:24px;
}

.hero-stats span{
font-size:10px;
}

}

@media(max-width:540px){

.booking-box{
padding:16px;
border-radius:18px;
}

.booking-intro,
.booking-box form{
padding:18px;
}

.booking-highlights{
grid-template-columns:1fr;
}

.booking-badge{
width:100%;
justify-content:center;
}

.submit-btn{
font-size:15px;
line-height:1.35;
}

}

@media(prefers-reduced-motion:reduce){

*,
*::before,
*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
transition-duration:0.01ms !important;
}

section{
opacity:1;
transform:none;
}

}

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

#sb-notification {
  position: fixed;
  bottom: -200px;
  right: 30px;
  z-index: 9999;
  min-width: 340px;
  max-width: 420px;
  padding: 24px 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: bottom 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  opacity: 0;
}

#sb-notification.show {
  bottom: 30px;
  opacity: 1;
}

#sb-notification.hide {
  bottom: -200px;
  opacity: 0;
}

#sb-notification.success {
  background: linear-gradient(135deg, rgba(0, 31, 92, 0.92) 0%, rgba(0, 60, 130, 0.88) 100%);
  border-color: rgba(255, 215, 0, 0.4);
}

#sb-notification.error {
  background: linear-gradient(135deg, rgba(140, 0, 0, 0.92) 0%, rgba(200, 20, 20, 0.88) 100%);
  border-color: rgba(255, 100, 100, 0.4);
}

.sb-notif-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.success .sb-notif-icon {
  background: rgba(255, 215, 0, 0.2);
  border: 2px solid gold;
  color: gold;
}

.error .sb-notif-icon {
  background: rgba(255, 150, 150, 0.2);
  border: 2px solid #ff7070;
  color: #ff9090;
}

.sb-notif-body {
  flex: 1;
}

.sb-notif-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.sb-notif-msg {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
}

.sb-notif-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.3s;
  flex-shrink: 0;
}

.sb-notif-close:hover {
  color: white;
}

/* Submit button loading state */
.submit-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.submit-btn.loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: sb-spin 0.75s linear infinite;
  margin-left: 10px;
  vertical-align: middle;
}

@keyframes sb-spin {
  to { transform: rotate(360deg); }
}


/* ================= NAV GALLERY LINK ================= */

.nav-gallery-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:red;
  color:white !important;
  padding:7px 16px;
  border-radius:999px;
  font-weight:700 !important;
  font-size:14px !important;
  transition:0.3s !important;
  white-space:nowrap;
}
.nav-gallery-link:hover {
  background:#cc0000 !important;
  color:white !important;
  transform:translateY(-2px);
}
.nav-gallery-link i { font-size:13px; }

/* ================= CLIENT MEDIA GALLERY SECTION ================= */

#event-media { background:#f4f6fb; }

/* --- Feature Info Cards --- */
.em-portal-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-bottom:48px;
}

.em-info-card {
  background:white;
  border-radius:18px;
  padding:32px 28px;
  box-shadow:0 6px 24px rgba(0,0,0,0.07);
  transition:transform 0.3s, box-shadow 0.3s;
}
.em-info-card:hover {
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.12);
}

.em-info-icon {
  width:56px;
  height:56px;
  border-radius:14px;
  background:#001f5c;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:18px;
}
.em-info-icon--yellow { background:#e6ac00; }
.em-info-icon--green  { background:#16a34a; }

.em-info-card h2 {
  font-size:18px;
  color:#001f5c;
  margin-bottom:10px;
  font-weight:700;
}
.em-info-card p {
  font-size:15px;
  color:#555;
  line-height:1.75;
}

/* --- Main Portal CTA Box --- */
.em-portal-box {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
  background:#001f5c;
  border-radius:24px;
  padding:56px 52px;
  overflow:hidden;
  margin-bottom:56px;
}

.em-portal-bg {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,0,0,0.22), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(255,230,0,0.12), transparent 40%);
  pointer-events:none;
}

.em-portal-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.85);
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:7px 14px;
  border-radius:999px;
  margin-bottom:20px;
}

.em-portal-left h2 {
  font-size:clamp(24px,3vw,36px);
  color:white;
  font-weight:800;
  line-height:1.2;
  margin-bottom:16px;
}

.em-portal-left > p {
  font-size:16px;
  color:rgba(255,255,255,0.75);
  line-height:1.8;
  margin-bottom:28px;
}

.em-portal-features {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:36px;
}
.em-portal-features li {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  color:rgba(255,255,255,0.82);
}
.em-portal-features li i {
  width:22px;
  height:22px;
  background:rgba(255,255,255,0.12);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:#ffe600;
  flex-shrink:0;
}

.em-portal-actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.em-portal-btn-primary {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:red;
  color:white;
  padding:14px 28px;
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  transition:0.3s;
  box-shadow:0 8px 24px rgba(255,0,0,0.35);
}
.em-portal-btn-primary:hover {
  background:#cc0000;
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(255,0,0,0.45);
}

.em-portal-btn-secondary {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.25);
  color:white;
  padding:14px 28px;
  border-radius:10px;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  transition:0.3s;
  backdrop-filter:blur(8px);
}
.em-portal-btn-secondary:hover {
  background:rgba(255,255,255,0.18);
  transform:translateY(-3px);
}

/* --- Browser Mockup --- */
.em-portal-mockup {
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.1);
}

.em-mockup-bar {
  background:#1a1a1a;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:7px;
}
.em-mockup-bar > span {
  width:11px;
  height:11px;
  border-radius:50%;
  background:#ff5f57;
  flex-shrink:0;
}
.em-mockup-bar > span:nth-child(2) { background:#febc2e; }
.em-mockup-bar > span:nth-child(3) { background:#28c840; }

.em-mockup-url {
  flex:1;
  background:rgba(255,255,255,0.08);
  border-radius:6px;
  padding:4px 12px;
  font-size:11px;
  color:rgba(255,255,255,0.5);
  font-family:monospace;
  text-align:center;
}

.em-mockup-screen {
  background:#0a0a0a;
  overflow:hidden;
}

.em-mockup-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:#111;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.em-mock-logo {
  width:60px;
  height:10px;
  background:rgba(255,255,255,0.2);
  border-radius:4px;
}
.em-mock-nav-links {
  display:flex;
  gap:8px;
}
.em-mock-nav-links span {
  width:28px;
  height:7px;
  background:rgba(255,255,255,0.12);
  border-radius:3px;
}

.em-mockup-hero {
  padding:16px 14px 12px;
  background:linear-gradient(135deg, #0a0a0a, #1a1a1a);
}
.em-mock-title {
  width:65%;
  height:12px;
  background:rgba(255,255,255,0.25);
  border-radius:4px;
  margin-bottom:8px;
}
.em-mock-sub {
  width:40%;
  height:8px;
  background:rgba(255,255,255,0.12);
  border-radius:3px;
}

.em-mockup-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  padding:3px;
  background:#0a0a0a;
}
.em-mock-photo {
  aspect-ratio:1;
  border-radius:4px;
  background:#1a1a1a;
  transition:transform 0.3s;
}
.em-portal-mockup:hover .em-mock-photo { transform:scale(1.02); }

/* --- Steps Section --- */
.em-steps {
  background:white;
  border-radius:20px;
  padding:48px;
  box-shadow:0 6px 24px rgba(0,0,0,0.07);
}

.em-steps-title {
  text-align:center;
  font-size:26px;
  font-weight:800;
  color:#001f5c;
  margin-bottom:40px;
}

.em-steps-grid {
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:20px;
  align-items:center;
}

.em-step { text-align:center; }

.em-step-num {
  width:56px;
  height:56px;
  border-radius:50%;
  background:#001f5c;
  color:#ffe600;
  font-size:20px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
}

.em-step h3 {
  font-size:17px;
  font-weight:700;
  color:#001f5c;
  margin-bottom:10px;
}
.em-step p {
  font-size:14px;
  color:#555;
  line-height:1.7;
}

.em-step-arrow {
  font-size:22px;
  color:#001f5c;
  opacity:0.3;
  text-align:center;
}

/* ================= RESPONSIVE — CLIENT MEDIA ================= */

@media(max-width:1024px){
  .em-portal-grid { grid-template-columns:1fr 1fr; }
  .em-portal-box  { grid-template-columns:1fr; padding:40px 32px; gap:36px; }
  .em-steps-grid  { grid-template-columns:1fr; gap:16px; }
  .em-step-arrow  { transform:rotate(90deg); }
}

@media(max-width:768px){
  .em-portal-grid { grid-template-columns:1fr; }
  .em-steps { padding:32px 24px; }
  .em-steps-grid { grid-template-columns:1fr; }
  .em-step-arrow  { transform:rotate(90deg); }
  .em-portal-box  { padding:32px 24px; }
}

@media(max-width:480px){
  .em-portal-btn-primary,
  .em-portal-btn-secondary { width:100%; justify-content:center; }
  .em-portal-actions { flex-direction:column; }
}