/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 body, html {
    height: 100%;
    width: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

/* Navbar styling */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #111;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  z-index: 1000;
}

.logo {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #f5e50e;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 25px;
}

.nav-links li a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.nav-links li a:hover {
  color: #f5e50e;
}

/* Menu icon for mobile */
.menu-icon {
  display: none;
  font-size: 25px;
  cursor: pointer;
}

.background-slider {
    position: relative;
    width:100% ;
    min-height:600px ;
    background-size: cover;
    background-position: center;
    animation: slide 20s infinite;
    color: black;
  }

  @keyframes slide {
    0%   { background-image: url(IMAGES/bg1.jpg); }
    25%  { background-image: url(IMAGES/bg2.jpg); }
    50%  { background-image: url(IMAGES/bg3.jpg); }
    75%  { background-image: url(IMAGES/bg4.jpg); }
    100% { background-image:url(IMAGES/bg1.jpg) ; }
  }

  /* Optional overlay and text */
  .overlay {
    border: 1px solid blue;
    position: absolut;
    top: 0; left: 0;
    min-height:600px ;
    background: rgba(13, 14, 13, 0.404);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 10px;
    gap: 20px;
    border: transparent;
  }

  .overlay button{
    background-color: yellow;
    padding: 10px;
    border-radius: 10px;
    border: transparent;
  }

  .overlay h1{
    color: yellow;
  }


  .aboutpage{
    border: px solid green;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    background-color: rgba(0, 0, 0, 0.959);
    color: white;
    padding: 20px;
  }
  .can{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    text-align: center;

  }

  .abouttext{
    border: px solid;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .abouttext button{
    width: 100px;
    padding: 10px;
    background-color: yellow;
    align-self: center;
    border-radius: 5px;
    border: transparent;
  }

  .aboutpage u ,.abouttext span{
  color: yellow;
}

  .pic{
    width: 40%;
    height: 400px;
  }

  .pic img{
    width: 100%;
    height: 100%;
  }


  /* services page*/

.servicepage{
  border: px solid white;
  min-height: 500px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-content: space-evenly;
  background-color: black;
}


.card{
  border: 2px solid rgb(223, 165, 6);
  width: 300px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  text-align: cente;
  gap: 15px;
  background-color: #11111198;
  border-radius: 10px;
}

 .card:hover {
       transform: scale(1.0) translatex(-10px);
      filter: brightness(1.2);
      z-index: 5;
    }

.card button{
  background-color:white;
  color: rgb(255, 81, 0);
  border: transparent;
  width: 100px;
  padding: 8px;
  border-radius: 5px;
}

.card h3 , .servicepage h2{
  color: yellow;
}

.icon{
  
  border: px solid yellow;
  background-color: white;
  width: 80px;
  height: 70px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: end;
  box-shadow: px px 5px rgb(214, 131, 7);
}

.icon img{
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.card p{
  color: rgba(255, 255, 255, 0.623);
}

/*    BOOKING PAGE SECTION  */

.bookpage{
   border: px solid white;
  min-height: 400px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
 
  
  background-color: rgba(0, 0, 0, 0.979);
}

form{
  border: 1px solid white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
  background-color: rgba(224, 202, 9, 0.041);
  border-radius: 10px;

  
}

form div{
  width: 320px;
  border: px solid;
  text-align: left;
  height: 55px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  
}

form input ,select{
  width: 100%;
  height: 30px;
  background-color:rgba(238, 237, 237, 0.308);
  border: transparent;
  text-align: center;
}

.edit{
  height: 200px;
}
.ed{
  height: 150px;
}

.submit{
  background-color: rgb(216, 77, 13);
}

.bookpage h2{
  color: yellow;
}

/* testimonial page*/

.testimonipage{
  border: px solid green;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-content: space-evenly;
  background-color: #0e0d0df5;
  color: white;
}

.testimonipage span{
  color:yellow;
}

.testi{
  border: 1px solid;
  width: 500px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: rgb(8, 8, 8);
  flex-wrap: wrap;
  border: transparent;
}

.testi p{
  color: rgba(196, 55, 12, 0.342);
}

.circle{
  border: 1px solid;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  box-shadow: -3px -1px 5px rgb(233, 114, 4);
  border: transparent;

}

  .circle img{
    width: 100%;
    height: 100%;
    border-radius: 100%;
  }


.contactpage{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.contactpage input{
  background-color: rgba(0, 0, 0, 0.226);
  height: 40px;
}

.contactpage .submit{
  background-color: rgb(224, 67, 19);
  border-radius: 5px;
}


footer{
  border: 1px solid;
  background-color: #222;
  height: 50px;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive Design */
@media (max-width: 768px) {
  .menu-icon {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 60px;
    left: -100%;
    background: #111;
    width: 100%;
    flex-direction: column;
    align-items: center;
    transition: 0.4s;
    gap: 15px;
    padding: 20px 0;
    background: transparent;
    backdrop-filter: blur(10px);
  }

  .nav-links.active {
    left: 0;
  }

   .pic{
    width: 300px;
    height: 300px;
  }

  .testi{
    width: 300px;
  }
}