/* =========================
RESET
========================= */

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

body{
font-family:'Segoe UI',sans-serif;
line-height:1.6;
background:#ffffff;
color:#333;
overflow-x:hidden;
}

/* =========================
COLOR SYSTEM
========================= */

:root{

--ocean:#0A4D68;
--ocean-dark:#08384b;

--turquoise:#05BFDB;

--sand:#F4EAD5;

--white:#ffffff;

--gray:#f8f8f8;

--shadow:
0 10px 25px rgba(0,0,0,.08);

}

/* =========================
HEADER
========================= */

header{

position:fixed;

top:0;
left:0;

width:100%;

height:80px;

background:
rgba(10,77,104,.95);

backdrop-filter:blur(10px);

display:flex;

align-items:center;
justify-content:space-between;

padding:0 40px;

z-index:9999;

}

.logo-container{

display:flex;
align-items:center;
gap:15px;

}

.logo{

height:55px;
width:auto;

}

.brand h1{

font-size:18px;
color:white;

}

.brand p{

font-size:12px;
color:#ddd;

}

/* =========================
NAVIGATION
========================= */

nav{

display:flex;
align-items:center;
gap:25px;

}

nav a{

text-decoration:none;

color:white;

font-weight:500;

transition:.3s;

}

nav a:hover{

color:var(--turquoise);

}

#langBtn{

background:var(--turquoise);

border:none;

color:white;

padding:10px 16px;

border-radius:8px;

cursor:pointer;

font-weight:bold;

}

.menu-toggle{

display:none;

font-size:30px;

color:white;

cursor:pointer;

}

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

.hero{

height:100vh;

background:
linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.45)
),
url("../assets/hero.jpg");

background-size:cover;

background-position:center;

display:flex;

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

text-align:center;

padding:20px;

}

.hero-overlay{

max-width:900px;

color:white;

}

.hero-badge{

display:inline-block;

padding:8px 16px;

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

border:1px solid
rgba(255,255,255,.2);

border-radius:999px;

margin-bottom:25px;

font-size:14px;

backdrop-filter:blur(8px);

}

.hero-main-title{

font-size:72px;

line-height:1;

margin-bottom:15px;

font-weight:800;

letter-spacing:2px;

}

.hero h2{

font-size:28px;

margin-bottom:20px;

font-weight:400;

}

.hero p{

font-size:18px;

max-width:700px;

margin:auto;

margin-bottom:30px;

}

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

.hero-buttons{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin-bottom:40px;

}

.btn{

display:inline-block;

padding:14px 28px;

border-radius:10px;

text-decoration:none;

font-weight:600;

transition:.3s;

cursor:pointer;

}

.primary{

background:var(--turquoise);

color:white;

}

.primary:hover{

transform:translateY(-3px);

}

.secondary{

background:white;

color:var(--ocean);

}

.secondary:hover{

transform:translateY(-3px);

}

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

.hero-stats{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.stat-card{

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

backdrop-filter:blur(10px);

border:1px solid
rgba(255,255,255,.15);

padding:20px 30px;

border-radius:14px;

min-width:160px;

}

.stat-card h3{

font-size:36px;

color:white;

margin-bottom:5px;

}

.stat-card p{

font-size:14px;

margin:0;

color:#f0f0f0;

}

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

section{

padding:100px 50px;

}

.section-title{

text-align:center;

max-width:800px;

margin:0 auto 50px;

}

.section-title h2{

font-size:42px;

color:var(--ocean);

margin-bottom:15px;

}

.section-title p{

font-size:18px;

color:#666;

}

/* =========================
FEATURES
========================= */

.features{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.feature{

background:white;

padding:30px;

border-radius:16px;

text-align:center;

box-shadow:var(--shadow);

transition:.3s;

}

.feature:hover{

transform:translateY(-6px);

}

.feature-icon{

font-size:42px;

margin-bottom:15px;

}

.feature h3{

margin-bottom:10px;

color:var(--ocean);

}

/* =========================
CARDS SYSTEM
========================= */

.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}

.card{

background:white;

border-radius:16px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.3s;

}

.card:hover{

transform:translateY(-6px);

}

.card img{

width:100%;

height:220px;

object-fit:cover;

display:block;

}

.card-content{

padding:20px;

}

.card-content h3{

color:var(--ocean);

margin-bottom:10px;

}

.card-content p{

color:#555;

line-height:1.7;

}

/* =========================
SECTION COLORS
========================= */

.why-section{

background:white;

}

.surf-section{

background:#f9fcfd;

}

.beach-section{

background:white;

}

.cave-section{

background:#f9fcfd;

}

.tour-section{

background:white;

}

.guide-section{

background:#f9fcfd;

}

/* =========================
GALLERY
========================= */

.gallery{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:15px;

}

.gallery img{

width:100%;

height:250px;

object-fit:cover;

border-radius:16px;

box-shadow:var(--shadow);

transition:.3s;

}

.gallery img:hover{

transform:scale(1.03);

}

/* =========================
MAP
========================= */

.map-section iframe{

border-radius:16px;

box-shadow:var(--shadow);

}

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

.booking-section{

background:#f9fcfd;

}

form{

max-width:700px;

margin:auto;

display:flex;

flex-direction:column;

gap:15px;

}

form input,
form textarea{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

}

form textarea{

resize:vertical;

}

form button{

background:var(--ocean);

color:white;

border:none;

padding:14px;

border-radius:10px;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

form button:hover{

background:var(--ocean-dark);

}

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

.contact-info{

text-align:center;

margin-top:40px;

}

.contact-info h3{

color:var(--ocean);

margin-bottom:10px;

}

.contact-info p{

margin:8px 0;

font-size:16px;

}

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

footer{

background:var(--ocean);

color:white;

padding:50px 20px;

text-align:center;

}

.footer-content h3{

font-size:28px;

margin-bottom:10px;

}

.footer-content p{

opacity:.9;

margin:6px 0;

}

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

@media(max-width:768px){

header{

padding:0 20px;

}

nav{

display:none;

position:absolute;

top:80px;

right:0;

width:240px;

background:var(--ocean);

flex-direction:column;

padding:20px;

gap:15px;

box-shadow:var(--shadow);

}

nav.active{

display:flex;

}

.menu-toggle{

display:block;

}

.hero{

padding:20px;

}

.hero-main-title{

font-size:42px;

}

.hero h2{

font-size:20px;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-stats{

flex-direction:column;

align-items:center;

}

.stat-card{

width:100%;

max-width:250px;

}

section{

padding:70px 20px;

}

.section-title h2{

font-size:32px;

}

.cards{

grid-template-columns:1fr;

}

.features{

grid-template-columns:1fr;

}

.gallery{

grid-template-columns:1fr;

}

.logo{

height:45px;

}

.brand h1{

font-size:16px;

}

.brand p{

font-size:11px;

}

#langBtn{

padding:8px 12px;

font-size:12px;

}

}

/* =========================
SMOOTH ANIMATION
========================= */

.card,
.feature,
.gallery img,
.btn{

transition:all .3s ease;

}