@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
    padding: 0;
    box-sizing: border-box;
    margin: 0;
    font-family: Roboto;
}
body,html{
margin:0;
display: flex;
flex-direction: column;
scroll-behavior:smooth;
overflow-x: hidden;
background-color: white !important;
}

.navbar{
display:flex;
justify-content: center ;
justify-content:space-between;
z-index:1000;
font-family: sans-serif;
padding: 2rem 0rem;
position:fixed;
width:100%;
max-width: 100%;
background-color: black;
color:white;
}

.logo img{
    padding: 0.5rem;
    border-radius:100% ;
}

.navbar ul{
display:flex;
gap:20px;
list-style:none;
padding: auto;
border-radius: 0.8rem;
}

.navbar a{
color:white;
text-decoration:none;
}

.menu{
display:none;
cursor:pointer;
font-size: 2rem;
}

.hero{
height:100vh;
background:url('images/training2.jpg') center/cover;
position:relative;
display:flex;
align-items:center;
color:white;
}
.animate{
    transform: translateY(-50px);
    opacity: 0;
}
.show{
     transform: translateY(0);
    opacity: 1; 
    transition: 1s;  
}

.overlay{
position:absolute;
background:rgba(0,0,0,0.6);
width:100%;
height:100%;
}

.hero-content{
position:relative;
padding:80px;
max-width:600px;
}
.hero-buttons{
    transform: translateY(40px);
}

.btn{
background:white;
padding:12px 25px;
margin-right:10px;
text-decoration:none;
color:black;
}

.btn-outline{
border:2px solid white;
padding:12px 25px;
color:white;
text-decoration:none;
}

.section{
padding: 1rem;
margin: 2rem;
text-align:center;
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

#booking{
    margin-top: 20rem;
}

.dark{
 background-color:darkslategrey;
color:white;
}

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

.card{
padding:30px;
background:#f5f5f5;
border-radius:8px;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:40px;
}

.product{
    position: relative;
    overflow: hidden;
}
.product p{
    position: absolute;
    padding: 1.5rem;
    bottom: 0;
    transform: translatey(20px);
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
}
#contact{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:start;
    gap: 1rem;
}

.product img{
width:100%;
height: 100%;
object-fit: cover;
border-radius:8px;
transition:transform .3s;
}

.product img:hover{
transform:scale(1.15);
transition: 1.01s;
}

.training-text{
max-width:700px;
margin:auto;
margin-top: 1rem;
}

.wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}
.testimonial-wrapper{
    position: relative;
    width: 100%;
}


.testimonial{
position: absolute;
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
opacity:0;
transform:translateX(100%);
transition:1s;
padding: 1rem;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.testimonial img{
    object-fit: cover;
    width: 100%;
    height: 9rem;
    border-radius: 100%;
    width: 8rem;
}

.testimonial.active{
opacity:1;
transform:translateX(0);
}

.booking-form{
display:flex;
flex-direction:column;
max-width:500px;
margin:auto;
gap:15px;
}

.booking-form input,
.booking-form textarea{
padding:0.8rem;
}
#contact{
    background-color:darkslategrey;
}
.booking-form button{
    height: 2rem;
    border: none;
    background-color: chartreuse;
}
.booking-form button:hover{
    background-color:darkslategrey ;
    color: wheat;
}

footer{
text-align:center;
padding:20px;
background:darkslategrey;
color:white;
}

@media(max-width:768px){

.navbar ul{
display:none;
flex-direction:column;
background:black;
position:absolute;
top:60px;
right:0;
padding:20px;
}

.menu{
display: flex;
color: white;
}

.hero-content{
padding:40px;
}

}
@media (prefers-color-scheme: dark) {
    html, body {
        background-color: white !important;
    }
}