@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;
}
.title{
    font-weight: 1000;
    font-size: 1.3rem;
    color: aqua;
}
.nav2{
    display: flex;
    flex-direction: column;
}

/*animation*/
.marquee {
  overflow: hidden;
  transform: translateY(5rem);
  width: 100%;
  z-index: 1000;
  transform: translateY(8rem);
  position: fixed;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scrollLoop 7s linear infinite;
}

.marquee-track span {
  padding: 0 50px;
  white-space: nowrap;
  font-size: 22px;
  font-weight: bold;
  color: white;
}

@keyframes scrollLoop {
  from {
    transform: translateX(60%);
  }
  to {
    transform: translateX(-60%);
  }
}


.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;
}
.hero-paragraph{
    padding: 1rem;
}

.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.2);
width:100%;
height:100%;
}

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

.btn{
background:aqua;
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-color: aqua;
/*background:#f5f5f5;*/
border-radius:1.5rem;
border: 0.25rem dotted;
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
align-items: center;
text-align: start;
}
.card1{
    background-color: darkslategray ;
    padding: 1rem;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    text-align: start;
    border-radius: 1rem;
    border: 0.25rem solid aqua;
}

.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;
background-color: darkslategray;
color: white;
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;
}
.why-choose-us{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    background-color:aqua;
    border-radius: 0.5rem;
    border: 0.25rem solid ;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}

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

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

#why-choose-us{
    scroll-margin-top:300px ;
}
section{
    scroll-margin-top: 200px;
}

@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;
}

}