@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');


*{

margin:0;
padding:0;
box-sizing:border-box;

}


body{

font-family:Poppins,sans-serif;

background:#4C055D;

color:white;

}


html{

scroll-behavior:smooth;

}



/* NAV */

header{

position:fixed;

width:100%;

top:0;

z-index:100;

background:#4C055DCC;

backdrop-filter:blur(10px);

}


nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 8%;

}


.logo{

font-size:28px;

font-weight:700;

}


.logo span{

color:#EF36F4;

}



nav ul{

display:flex;

gap:35px;

list-style:none;

}


nav a{

color:white;

text-decoration:none;

}




/* BOUTONS */


.btn{

background:#EF36F4;

color:white;

border:none;

padding:14px 30px;

border-radius:30px;

font-weight:bold;

cursor:pointer;

box-shadow:
0 0 15px #EF36F4;


transition:.3s;

}


.btn:hover{

transform:translateY(-5px);

box-shadow:
0 0 30px #EF36F4;

}




/* HERO */


.hero{

height:100vh;

display:flex;

align-items:center;

padding:0 10%;


background:

linear-gradient(
rgba(76,5,93,.8),
rgba(76,5,93,.9)
),

url("../images/hero.jpg");


background-size:cover;

}



.hero h1{

font-size:70px;

}


.hero span{

color:#EF36F4;

}



.hero p{

margin:30px 0;

max-width:500px;

font-size:20px;

}




/* SECTIONS */


section{

padding:100px 10%;

}



h2{

text-align:center;

font-size:45px;

margin-bottom:40px;

}




.intro{

text-align:center;

max-width:700px;

margin:auto;

}





/* CARDS */


.cards{

display:flex;

gap:30px;

margin-top:60px;

}



.card{

flex:1;

background:#5E1670;

padding:40px;

border-radius:20px;

transition:.3s;

}


.card:hover{

transform:translateY(-10px);

box-shadow:
0 0 25px #EF36F4;

}




/* RESERVATION */


.booking-box{

max-width:500px;

margin:auto;

background:#5E1670;

padding:40px;

border-radius:25px;

display:flex;

flex-direction:column;

gap:15px;

}



input,select{

padding:15px;

border-radius:10px;

border:none;

}




/* GALERIE */


.gallery{

display:flex;

gap:20px;

}


.gallery div{

height:250px;

flex:1;

background:#5E1670;

border-radius:20px;

}




footer{

text-align:center;

padding:30px;

background:#300238;

}




/* RESPONSIVE */


@media(max-width:800px){


.cards,
.gallery{

flex-direction:column;

}


.hero h1{

font-size:45px;

}


nav ul{

display:none;

}


}