:root{
--ocean:#2E6F95;
--sand:#F4EBD0;
--palm:#1B3A4B;
--sun:#FFBF3F;
--deep:#4264B3;
--light:#F3F1F0;
}

body{
margin:0;
font-family:Arial, sans-serif;
background:var(--sand);
}

/* NAV */
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:var(--ocean);
color:white;
}

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

nav a{
color:white;
text-decoration:none;
font-weight:bold;
}

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}

/* HERO VIDEO */
.hero{
position:relative;
height:90vh;
overflow:hidden;
width:90%;
margin:40px auto;
border-radius:10px;
}

.hero-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255, 255, 255, 0.4);
z-index:1;
}

.hero-text{
position:relative;
z-index:2;
color:white;
text-align:center;
top:50%;
transform:translateY(-50%);
}

/* SECTIONS */
section{
padding:60px;
text-align:center;
}

/* CARDS */
.beach-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.beach-card{
background:white;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.2);
transition:.3s;
}

.beach-card:hover{
transform:scale(1.05);
}

.beach-card img{
width:100%;
height:200px;
object-fit:cover;
}

/* GALLERY */
.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:15px;
}

.gallery-img{
width:100%;
cursor:pointer;
border-radius:10px;
}

/* LIGHTBOX */
#lightbox{
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
display:none;
justify-content:center;
align-items:center;
z-index:999;
}

#lightbox img{
max-width:90%;
}

#close{
position:absolute;
top:20px;
right:40px;
font-size:40px;
color:white;
cursor:pointer;
}

/* FORM */
form{
max-width:400px;
margin:auto;
display:flex;
flex-direction:column;
gap:10px;
}

/* FOOTER */
footer{
background:var(--palm);
color:white;
text-align:center;
padding:20px;
}

/* MOBILE */
@media(max-width:768px){

nav ul{
display:none;
flex-direction:column;
}

nav.active ul{
display:flex;
}

.menu-toggle{
display:block;
}

}

.logo img{
height:200px;
width:auto;
}

@media(max-width:768px){
.hero{
width:95%;
margin:20px auto;
}
}

.gallery-img{
width:100%;
height:300px;
object-fit:cover;
}

.newsletter-gallery img{
width:30%;
aspect-ratio:1/1;
object-fit:cover;
}

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

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

.product-card img{
width:100%;
height:200px;
object-fit:cover;
border-radius:10px;
}

.product-card button{
margin-top:10px;
padding:10px 15px;
background:var(--deep);
color:white;
border:none;
cursor:pointer;
}

.masonry{
column-count:3;
column-gap:15px;
}

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

@media(max-width:768px){
.masonry{
column-count:1;
}
}

.logo img{
height:140px;
width:auto;
}

.videos video{
width:100%;
height:auto;        
max-width:600px;    
display:block;
margin:0 auto;
border-radius:10px;
}

.product-card img{
width:100%;
height: 350px;;
object-fit:cover;
}

.product-card img.poster{
object-fit:contain;
background:#f5f5f5;
}

.product-card img{
width:100%;
height:auto;          
max-height:300px;     
object-fit:contain;
display:block;
margin:0 auto;
}

/* ESSAY INTRO */
.essay-intro{
max-width:800px;
margin:40px auto;
text-align:center;
}

/* ESSAY BLOCKS */
.essay-block{
display:flex;
align-items:center;
gap:40px;
margin:60px auto;
max-width:1100px;
}

.essay-block.reverse{
flex-direction:row-reverse;
}

/* IMAGE */
.essay-image img{
width:100%;
max-width:500px;
border-radius:10px;
}

/* TEXT */
.essay-text{
max-width:500px;
}

/* OUTRO */
.essay-outro{
text-align:center;
max-width:800px;
margin:60px auto;
}

/* MOBILE */
@media(max-width:768px){

.essay-block{
flex-direction:column;
}

.essay-block.reverse{
flex-direction:column;
}

}
.essay-intro .essay-block{
  margin:40px auto;
}
/* HERO VIDEO CONTAINER */
.video-container{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
z-index:0;
border-radius:10px;
}

/* YOUTUBE IFRAME */
.video-container iframe{
position:absolute;
top:50%;
left:50%;
width:177.77vh;
height:56.25vw;
min-width:100%;
min-height:100%;
transform:translate(-50%, -50%);
pointer-events:none;
border:none;
}
.youtube-video{
position:relative;
width:100%;
max-width:800px;
aspect-ratio:16/9;
margin:auto;
}

.youtube-video iframe{
width:100%;
height:100%;
border:none;
border-radius:10px;
}