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

html,
body{
overflow-x:hidden;
}

img{
max-width:100%;
height:auto;
display:block;
}

body{
font-family:'Poppins',sans-serif;
background:#eef3f8;
overflow-x:hidden;
color:#222;
}

button,
.btn,
a{
-webkit-tap-highlight-color:transparent;
}

/* SCROLLBAR */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-thumb{
background:#ffb703;
border-radius:20px;
}

/* BLUR BACKGROUND */

.blur{
position:fixed;
border-radius:50%;
filter:blur(120px);
z-index:-1;
opacity:.35;
}

.blur1{
width:350px;
height:350px;
background:#00b4d8;
top:-120px;
left:-120px;
}

.blur2{
width:350px;
height:350px;
background:#ffb703;
bottom:-120px;
right:-120px;
}

/* LOADER */

#loader{
position:fixed;
width:100%;
height:100%;
background:#02141f;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
transition:.6s;
}

.spinner{
width:70px;
height:70px;
border:6px solid rgba(255,255,255,.2);
border-top:6px solid #ffb703;
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{
100%{
transform:rotate(360deg);
}
}

/* NAVBAR */

nav{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
z-index:1000;
transition:.4s;

background:rgba(0,0,0,.2);
backdrop-filter:blur(14px);
}

nav.scrolled{
background:#02141f;
box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.logo{
font-size:34px;
font-weight:800;
color:white;
}

nav ul{
display:flex;
list-style:none;
gap:30px;
}

nav a{
text-decoration:none;
color:white;
font-weight:500;
position:relative;
}

nav a::after{
content:'';
position:absolute;
left:0;
bottom:-5px;
width:0;
height:2px;
background:#ffb703;
transition:.4s;
}

nav a:hover::after{
width:100%;
}

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

/* HERO */

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

.hero::before{
content:'';
position:absolute;
width:100%;
height:100%;
background:
linear-gradient(
120deg,
rgba(0,0,0,.8),
rgba(0,0,0,.4),
rgba(0,0,0,.1)
);
z-index:2;
}

.slides{
position:absolute;
width:100%;
height:100%;
}

.slide{
position:absolute;
width:100%;
height:100%;
opacity:0;
transition:
opacity 1.5s ease,
transform 7s ease;

background-size:cover !important;
background-position:center !important;

transform:scale(1);
}

.slide.active{
opacity:1;
transform:scale(1.08);
}

.hero-content{
position:relative;
z-index:10;
text-align:center;
color:white;
max-width:900px;
padding:20px;
}

.hero h1{
font-size:85px;
line-height:1.1;
}
@media(max-width:768px){

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

.hero p{
font-size:22px;
margin-bottom:40px;
animation:fadeUp 1.5s ease;
}

.hero-btn{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
animation:fadeUp 2s ease;
}

.btn{
padding:16px 35px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.4s;
overflow:hidden;
position:relative;
}

.btn::before{
content:'';
position:absolute;
width:100%;
height:100%;
left:-100%;
top:0;
background:rgba(255,255,255,.3);
transition:.5s;
}

.btn:hover::before{
left:100%;
}

.btn-primary{
background:#ffb703;
color:black;
}

.btn-primary:hover{
background:#ff9800;
transform:translateY(-5px);
}

.btn-secondary{
border:2px solid white;
color:white;
}

.btn-secondary:hover{
background:white;
color:black;
}

/* SECTION */

@media(max-width:768px){

section{
padding:70px 20px;
}
}

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

.section-title h2{
font-size:45px;
color:#023047;
position:relative;
display:inline-block;
}

.section-title h2::after{
content:'';
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:-12px;
width:80px;
height:5px;
background:#ff9800;
border-radius:20px;
}

.section-title p{
margin-top:20px;
color:#666;
}

/* GRID */

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

/* CARD */

.card,
.package-box,
.about-box,
.contact-box,
.testi-box{
background:rgba(255,255,255,.7);
backdrop-filter:blur(18px);
border-radius:25px;
overflow:hidden;
box-shadow:0 10px 35px rgba(0,0,0,.08);
transition:.4s;
}

.card:hover,
.package-box:hover,
.about-box:hover,
.contact-box:hover,
.testi-box:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 20px 50px rgba(0,0,0,.15);
}

@media(max-width:768px){
.card img{
width:100%;
height:220px;
object-fit:cover;
transition:.7s;}
}

.card:hover img{
transform:scale(1.1);
}

.card-content{
padding:25px;
}

.card-content h3{
margin-bottom:12px;
color:#023047;
}

/* PACKAGE */

.package-box{
padding:40px;
text-align:center;
}

.price{
font-size:45px;
font-weight:700;
color:#ff9800;
margin:20px 0;
}

.package-box ul{
list-style:none;
margin-top:20px;
line-height:2;
}

/* BOOKING */

@media(max-width:768px){
.booking-container{
max-width:850px;
margin:auto;
background:rgba(255,255,255,.7);
backdrop-filter:blur(18px);
padding:45px;
border-radius:25px;
box-shadow:0 10px 35px rgba(0,0,0,.08);
}
}

.booking-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.input-group.full{
grid-column:1/3;
}

.input-group input,
.input-group select,
.input-group textarea{
width:100%;
padding:17px;
border:none;
outline:none;
border-radius:15px;
background:#f2f5f9;
font-family:'Poppins',sans-serif;
}

.booking-btn{
width:100%;
padding:18px;
border:none;
border-radius:50px;
background:#25D366;
color:white;
font-size:18px;
cursor:pointer;
transition:.3s;
}

.booking-btn:hover{
background:#1ebc59;
transform:translateY(-4px);
}

/* ABOUT */

.about-box,
.contact-box,
.testi-box{
padding:40px;
text-align:center;
}

.about-box i,
.contact-box i{
font-size:45px;
color:#ff9800;
margin-bottom:20px;
}

/* STATS */

.stats{
background:
linear-gradient(
135deg,
#023047,
#03506f
);

margin:0 8%;
border-radius:30px;
padding:70px 40px;
color:white;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
text-align:center;
}

@media(max-width:768px){
.stat-box h2{
font-size:38px;
color:#ffb703;
}
}

/* MAP */

.maps-container{
overflow:hidden;
border-radius:25px;
box-shadow:0 10px 30px rgba(0,0,0,.1);
}

/* FOOTER */

footer{
background:
linear-gradient(
135deg,
#02141f,
#023047
);

color:white;
text-align:center;
padding:80px 20px;
}

/* WHATSAPP */

@media(max-width:768px){

.wa{
position:fixed;
right:25px;
bottom:25px;

width:58px;
height:58px;

background:#25D366;
color:white;

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

border-radius:50%;

font-size:30px;
text-decoration:none;

z-index:999;

animation:float 2s infinite;
}
}

/* TOP BUTTON */

#topBtn{
position:fixed;
bottom:105px;
right:25px;

width:50px;
height:50px;

border:none;
border-radius:50%;

background:#023047;
color:white;

font-size:20px;

display:none;
cursor:pointer;
z-index:999;
}

/* ANIMATION */

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0);
}

}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* MOBILE */

@media(max-width:768px){

section{
padding:70px 20px;
}

.menu-toggle{
display:block;
}

nav ul{
position:absolute;
top:100%;
left:-100%;
width:100%;
height:calc(100vh - 80px);

background:#02141f;

flex-direction:column;

padding:40px 30px;

transition:.4s;
}

nav ul.active{
left:0;
}

.hero{
min-height:100vh;
height:auto;
}

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

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

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

.section-title p{
font-size:15px;
}

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

.input-group.full{
grid-column:auto;
}

.booking-container{
padding:25px;
}

.card img{
height:220px;
}

.stat-box h2{
font-size:38px;
}

.wa{
width:58px;
height:58px;
font-size:30px;
}

.blur{
display:none;
}

}
.blog-btn{
    display:inline-block;
    margin-top:15px;
    padding:12px 22px;

    background:#0f172a;
    color:white !important;

    text-decoration:none !important;

    border-radius:12px;

    font-weight:600;

    transition:0.3s ease;
}

.blog-btn:hover{
    background:#1e293b;
    transform:translateY(-2px);
}