/* ================= GOOGLE FONTS ================= */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ================= ROOT COLORS ================= */

:root{
--blue:#009dff;
--dark:#050505;
--card:#111111;
--gradient:linear-gradient(to bottom,#000000 75%, #071a2a);
}

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

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

html, body{
width:100%;
max-width:100%;
overflow-x:hidden;
}

body{
font-family:'Plus Jakarta Sans', sans-serif;
background:var(--gradient);
color:white;
scroll-behavior:smooth;
}

section{
width:100%;
}

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

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

.logo{
font-family:'Oswald', sans-serif;
font-size:20px;
font-weight:600;
letter-spacing:1px;
}

.logo img{
height:45px;
width:auto;
filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

.logo span{
color:var(--blue);
}

.navbar ul{
display:flex;
gap:28px;
list-style:none;
}

.navbar a{
color:white;
text-decoration:none;
font-size:14px;
transition:.3s;
}

.navbar a:hover{
color:var(--blue);
}

.nav-btn{
background:var(--blue);
padding:7px 16px;
border-radius:20px;
font-size:13px;
}

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

.hero{
height:100vh;
width:100%;
display:flex;
align-items:center;
justify-content:center;
position:relative;
text-align:center;
overflow:hidden;
}

.hero-img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
opacity:.9;
}

.hero-content{
position:relative;
z-index:2;
animation:slideUp 1.2s ease forwards;
padding:0 20px;
}

.hero h1{
font-family:'Oswald', sans-serif;
font-size:55px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
line-height:1.2;
}

.hero p{
margin-top:18px;
font-size:16px;
opacity:.85;
}

.cta{
display:inline-block;
margin-top:25px;
padding:12px 34px;
background:var(--blue);
border-radius:30px;
font-size:14px;
font-weight:600;
transition:.3s;
text-decoration:none;
color:white;
}

.cta:hover{
transform:scale(1.08);
box-shadow:0 0 20px var(--blue);
}

.hero-logo{
margin-top:20px;
height:100px;
width:auto;
margin-bottom:5px;
}

/* ================= STATEMENT SECTION ================= */

.statement{
display:flex;
justify-content:space-between;
align-items:center;
padding:100px 8%;
gap:40px;
}

.statement-text{
font-family:'Oswald', sans-serif;
font-size:50px;
font-weight:600;
line-height:1.2;
letter-spacing:1px;
max-width:550px;
}

.statement img{
width:600px;
max-width:100%;
animation:float 4s infinite ease-in-out;
}

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

.services{
padding:60px 8% 100px;
}

.section-title{
font-family:'Oswald', sans-serif;
font-size:42px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:40px;
text-align:center;
}

/* Category Slider */

.category-slider{
display:flex;
justify-content:center;
position:relative;
gap:35px;
margin-bottom:60px;
}

.category{
cursor:pointer;
padding:8px 0;
font-weight:600;
font-size:15px;
transition:.3s;
}

.category.active{
color:var(--blue);
}

.slider-indicator{
position:absolute;
bottom:-6px;
height:3px;
width:130px;
background:var(--blue);
transition:.4s;
}

/* Cards */

.cards{
display:flex;
gap:28px;
justify-content:center;
flex-wrap:wrap;
}

.card{
background:var(--card);
width:280px;
padding:22px;
border-radius:12px;
transition:.4s;
transform:translateY(40px);
opacity:0;
}

.card.show{
transform:translateY(0);
opacity:1;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 0 25px rgba(0,157,255,.35);
}

.card h3{
font-size:18px;
margin-bottom:8px;
}

.card h4{
color:var(--blue);
margin-bottom:10px;
font-size:16px;
}

.card img{
width:100%;
border-radius:10px;
margin-bottom:12px;
}

.card ul{
font-size:12px;
line-height:1.6;
opacity:.85;
margin-bottom:15px;
}

.book-btn{
background:var(--blue);
display:block;
text-align:center;
padding:9px;
border-radius:20px;
text-decoration:none;
color:white;
font-size:13px;
transition:.3s;
}

.book-btn:hover{
box-shadow:0 0 15px var(--blue);
}

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

.portfolio{
padding:100px 8%;
text-align:center;
}

.gallery{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
}

.gallery img{
width:280px;
border-radius:10px;
transition:.3s;
}

.gallery img:hover{
transform:scale(1.05);
}

/* ================= REVIEWS ================= */

.reviews{
padding:100px 8%;
text-align:center;
}

.review-card{
background:var(--card);
max-width:480px;
margin:20px auto;
padding:22px;
border-radius:10px;
transition:.4s;
}

.review-card:hover{
transform:translateY(-5px);
}

.stars{
color:gold;
font-size:18px;
margin-bottom:10px;
animation:glow 2s infinite alternate;
}

.review-card p{
font-size:14px;
margin-bottom:8px;
}

.review-card span{
font-size:12px;
opacity:.7;
}

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

footer{
padding:35px;
text-align:center;
background:black;
font-size:13px;
}

footer a{
color:var(--blue);
text-decoration:none;
}

.footer-logo{
height:60px;
width:auto;
margin-bottom:15px;
}

/* ================= ANIMATIONS ================= */

@keyframes slideUp{
from{transform:translateY(50px);opacity:0;}
to{transform:translateY(0);opacity:1;}
}

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

@keyframes glow{
from{text-shadow:0 0 5px gold;}
to{text-shadow:0 0 18px gold;}
}

/* ================= SCROLL REVEAL ================= */

.reveal{
opacity:0;
transform:translateY(60px);
transition:1s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* ================= MOBILE ================= */

@media (max-width:768px){

.navbar{
flex-direction:column;
gap:10px;
padding:14px 5%;
}

.navbar ul{
gap:18px;
flex-wrap:wrap;
justify-content:center;
}

.hero{
min-height:100vh;
}

.hero h1{
font-size:34px;
}

.hero p{
font-size:14px;
}

.statement{
flex-direction:column;
text-align:center;
padding:70px 6%;
}

.statement-text{
font-size:34px;
}

.statement img{
width:100%;
max-width:420px;
}

.services{
padding:50px 6%;
}

.section-title{
font-size:32px;
}

.cards{
flex-direction:column;
align-items:center;
}

.card{
width:92%;
max-width:360px;
}

.gallery img{
width:90%;
}

.review-card{
width:90%;
}

}

@media (max-width:480px){

.hero h1{
font-size:28px;
}

.statement-text{
font-size:28px;
}

.section-title{
font-size:26px;
}

.category{
font-size:13px;
}

.navbar ul{
gap:12px;
}

}


/* BOOKING POPUP */

.booking-popup{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.7);

display:flex;
align-items:center;
justify-content:center;

opacity:0;
pointer-events:none;

transition:.4s;

z-index:2000;

backdrop-filter:blur(6px);

}

.booking-popup.active{

opacity:1;
pointer-events:auto;

}


.popup-box{

background:#111;

padding:35px;

border-radius:12px;

width:90%;
max-width:400px;

text-align:center;

animation:popup 0.4s ease;

box-shadow:0 0 30px rgba(0,157,255,.4);

}

.popup-box h2{

margin-bottom:20px;

font-family:'Oswald', sans-serif;

}


.popup-box input{

width:100%;

padding:12px;

margin-bottom:15px;

border:none;

border-radius:8px;

background:#1b1b1b;

color:white;

font-size:14px;

}


.popup-box button{

width:100%;

padding:12px;

border:none;

border-radius:30px;

background:var(--blue);

color:white;

font-weight:600;

cursor:pointer;

margin-top:5px;

transition:.3s;

}

.popup-box button:hover{

transform:scale(1.05);

box-shadow:0 0 15px var(--blue);

}

.close-btn{

background:#333;

margin-top:10px;

}

@keyframes popup{

from{

transform:scale(.7);
opacity:0;

}

to{

transform:scale(1);
opacity:1;

}

}


/* BOOKING POPUP */

.booking-popup{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.75);

display:flex;
align-items:center;
justify-content:center;

opacity:0;
pointer-events:none;

transition:.4s;
z-index:2000;

backdrop-filter:blur(6px);

}

.booking-popup.active{
opacity:1;
pointer-events:auto;
}

.popup-box{

background:#111;
padding:35px;
border-radius:12px;

width:90%;
max-width:400px;

text-align:center;

animation:popup .4s ease;

box-shadow:0 0 30px rgba(0,157,255,.4);

}

.popup-box h2{
margin-bottom:20px;
font-family:'Oswald',sans-serif;
}

.popup-box input{

width:100%;
padding:12px;

margin-bottom:15px;

border:none;
border-radius:8px;

background:#1b1b1b;
color:white;

font-size:14px;

}

.popup-box button{

width:100%;
padding:12px;

border:none;
border-radius:30px;

background:var(--blue);

color:white;
font-weight:600;

cursor:pointer;

margin-top:5px;

transition:.3s;

}

.popup-box button:hover{
transform:scale(1.05);
box-shadow:0 0 15px var(--blue);
}

.close-btn{
background:#333;
margin-top:10px;
}

@keyframes popup{

from{
transform:scale(.7);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}