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

body {
font-family: Arial, sans-serif;
background: linear-gradient(
rgba(255,255,255,0.92),
rgba(255,255,255,0.92)
),
url("bahamas-background.jpg");

background-size: cover;
background-attachment: fixed;
color: #111;
line-height: 1.6;
}


header {
background: #00a9b8;
border-bottom: 6px solid #f4c542;
color: white;

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

padding: 20px 5%;
position: sticky;
top: 0;
z-index: 1000;
}


.logo {
font-size: 24px;
font-weight: bold;
}


nav a {
color: white;
text-decoration: none;
margin: 0 10px;
font-weight: bold;
}


.whatsapp-top {
background: #f4c542;
color: #000;
padding: 12px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
}



.hero {

min-height: 85vh;

background:
linear-gradient(
rgba(0,0,0,0.35),
rgba(0,0,0,0.35)
),
url("IMG_7992.jpg");

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

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

text-align: center;

color: white;
}



.hero-overlay {

max-width: 800px;
padding: 30px;

}


.hero h1 {

font-size: 48px;
margin-bottom: 20px;

}


.hero p {

font-size: 20px;
margin-bottom: 30px;

}



.gold-btn,
.dark-btn {

display: inline-block;

padding: 14px 28px;

margin: 10px;

border-radius: 30px;

text-decoration: none;

font-weight: bold;

}


.gold-btn {

background: #f4c542;
color: black;

}


.dark-btn {

background: #111;
color: white;

}



section {

padding: 70px 5%;

}



h2 {

text-align: center;

font-size: 36px;

color: #008c95;

margin-bottom: 25px;

}



.section-intro {

text-align: center;

max-width: 800px;

margin: auto;

margin-bottom: 40px;

}




.intro {

background: white;

text-align: center;

}



.service-grid,
.tour-grid,
.features {

display: grid;

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

gap: 30px;

}



.service-card,
.tour,
.features div {

background: white;

border-radius: 20px;

overflow: hidden;

box-shadow: 0 8px 20px rgba(0,0,0,0.15);

padding-bottom: 20px;

}



.service-card img,
.tour img {

width: 100%;

height: 260px;

object-fit: cover;

}



.service-card h3,
.tour h3 {

padding: 15px;

color: #008c95;

}



.service-card p,
.tour p {

padding: 0 15px;

}



.driver-section {

display: flex;

align-items: center;

gap: 40px;

background: #e9fbff;

}



.driver-image img {

width: 100%;

max-width: 450px;

border-radius: 20px;

}



.driver-text {

flex: 1;

}



.business-card {

display: block;

width: 350px;

max-width: 100%;

margin: 30px auto;

}



.gallery {

display: grid;

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

gap: 20px;

}



.gallery img {

width: 100%;

height: 250px;

object-fit: cover;

border-radius: 15px;

}



#booking {

background: #e9fbff;

}



form {

max-width: 700px;

margin: auto;

display: grid;

gap: 15px;

}



input,
select,
textarea,
button {

padding: 15px;

border-radius: 10px;

border: 1px solid #ccc;

font-size: 16px;

}



button {

background: #f4c542;

color: black;

font-weight: bold;

cursor: pointer;

}



#contact {

text-align: center;

}



footer {

background: #111;

color: white;

text-align: center;

padding: 30px;

}



@media(max-width:768px){

header {

flex-direction: column;

gap: 15px;

}


nav {

text-align: center;

}


.hero h1 {

font-size: 32px;

}


.driver-section {

flex-direction: column;

}

}