*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI', sans-serif;
}

body{
color:#fff;
background:linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),
url('https://images.unsplash.com/photo-1593784991095-a205069470b6');
background-size:cover;
background-attachment:fixed;
}

/* HEADER */
header{
background:#111;
padding:15px 30px;
display:flex;
justify-content:space-between;
align-items:center;
position:sticky;
top:0;
}

header ul{
display:flex;
list-style:none;
}

header ul li{
margin-left:20px;
}

header a{
color:white;
text-decoration:none;
font-size:14px;
}

/* HERO */
.hero{
text-align:center;
padding:150px 20px;
}

.hero h1{
font-size:40px;
margin-bottom:10px;
}

.book-btn{
background:#00c853;
color:white;
padding:12px 25px;
border:none;
border-radius:5px;
cursor:pointer;
transition:0.3s;
}

.book-btn:hover{
background:#00e676;
}

/* SECTIONS */
.content-section{
padding:80px 20px;
text-align:center;
background:rgba(0,0,0,0.6);
}

.dark-section{
background:rgba(0,0,0,0.85);
}

/* CARDS */
.cards{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.card{
background:#00c853;
margin:10px;
padding:20px;
border-radius:10px;
min-width:200px;
transition:0.3s;
}

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

/* STATS */
.stats{
display:flex;
justify-content:center;
flex-wrap:wrap;
}

.stat-box{
background:#00c853;
margin:10px;
padding:20px;
border-radius:10px;
}

/* FAQ */
.faq-item{
margin:15px;
}

/* CONTACT */
.contact input,
.contact textarea{
width:90%;
max-width:400px;
padding:12px;
margin:10px;
border:none;
border-radius:5px;
}

/* FLOAT BUTTON */
.contact-column{
position:fixed;
right:10px;
top:40%;
}

.contact-column a{
display:block;
background:#00c853;
padding:12px;
margin:5px;
border-radius:50%;
text-decoration:none;
}

/* FOOTER */
footer{
text-align:center;
padding:15px;
background:#111;
}

/* MOBILE */
@media(max-width:768px){
header ul{
display:none;
flex-direction:column;
background:#111;
position:absolute;
top:60px;
right:0;
width:200px;
}

header ul.active{
display:flex;
}
}
/* SCROLL ANIMATION */
.animate{
opacity:0;
transform:translateY(50px);
transition:all 0.8s ease;
}

.animate.show{
opacity:1;
transform:translateY(0);
}

/* Different directions */
.slide-left{
transform:translateX(-50px);
}

.slide-right{
transform:translateX(50px);
}

.slide-left.show,
.slide-right.show{
transform:translateX(0);
}