*{
    margin:0;
    padding:0;
    box-size:border-box;
}
body{
  background:url('http://127.0.0.1:5500/GetaWay%20Web/holidayweb/images/im1.jpg')
}
/* -------------slider css start-------------- */
.card-list .card-item{
 color:white;

 padding:2.5rem;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 border-radius:8px;
 
 border:1 px solid grey;
} 
.card-list .card-item .user-image{
  width:100%;
  height:20rem;
  border-radiusL:50%;
}
.slider-bottom{
  height:15rem;

  position:relative;
  width:100%;
  
  display:grid;
  place-items:center;
  overflow:hidden;
}
.slider-track-bottom{
  display:flex;
  width:calc(250px*18%);
  animation:scroll 40s linear infinite;
}
@keyframes scroll{
  0%{
    transform:translateX(0);

  }
  100%{
    transform:translateX(calc(-250px * 9))
  }
}
.slide-bottom{
  height:200px;
  width:250px;
  display:block;
  align-items:center;
  padding:15px;
  justify-content:center;
  text-align:center;
  perspective:100px;
}
.slider-bottom img{
  width:100%;
  height:11rem;
  border-radius:1rem;
}
.slider-bottom img:hover{
  transform:translateZ(20px)
}
.slide-bottom h1{
  color:#1E96C9;
  font-size:1.5rem;
}
.slider-bottom::before,
.slider-bottom::after{
  background: linear-gradient(to right,rgba(255,255,255,1) 0%, rgba(255,255,255,0), 100%);
  content='';
  height:100%;

  position:absolute;
  width:15%;
  z-index:2;
}
.slider-bottom::before{
  right:0;
  top:0;
}
.slider-bottom::after{
  left:0;
  top:0;
  transform:rotateZ(180deg);
}
/* -------------slider css end-------------- */

/* ---------header css start----------- */
.navbar-expand-lg .navbar-nav .nav-link img{
    width:2rem;

}
.navbar-expand-lg .navbar-nav .nav-link{
    text-align:center;
    
}

.navbar-expand-lg .navbar-nav {
    padding-left:2rem;
}

/* ---------header css end----------- */



/* -----------------slider css start---------- */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}
#logo{
  font-size: 2rem; font-weight: 500;width:4rem;
  
}
.carousel-container {
    width: 100%;
    height: 60vh;
    overflow: hidden;
    position: relative;
}

.carousel-slide {
    display: flex;
    width: calc(100% * 8); /* 8 images */
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* -----------------slider css end---------- */



/* ---------trending start---------- */
.treding{
    height:max-content;
    width:100%;
    display:block;
    text-align:center;
    position:relative;
 
}
.treding .places{
    width:100%;
    justify-content: center;
    gap:1rem;
 

        
    
}
.treding .details h2{
    font-size:3rem;
}
.treding .details p{
    font-size:1.5rem;

}
.treding .places{
    margin-top:2rem;
}
.treding .places img{
    width:15vw;
    height:25vh;
    border-radius:1rem;
 
}
.details{
  width: 100%; font-weight:bold;
 
 
}
.details h2{
color: rgb(30, 150, 197);
font-size: 2.2em;
}
/* ---------trending end---------- */


.deals{
    height:max-content;
    width:100%;
 overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:2rem;
  
}
.deals .items{
    height:100%;
    width:30%;
    margin-top:4rem;



}
.places p{
  font-size:2rem;
  color:#45bdc9;
}
#carouselExampleInterval h2 span{
  font-size:3vw;
  color:skyblue;
}
.deals .items img{
    width:90%;
    height:30rem;
    border-radius:1rem;

    
}


/* -----------slidre-2------- */

.slider-inner img{
    height:30vh;
    padding:0.5rem 5rem;
    border-radius:50rem;.
  
 
}



.center h1{
  color: whitesmoke; font-weight: 500; font-size: 3vw; margin-top: 15vh;
}
  
  .footer {
    background-color: black;
 
  
  
    color: #fff;
    padding: 1.5rem 0;

    font-size: 1.4rem;

  }
  
  .footer-container {
    display: flex;
    
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .footer-column {
    flex: 1 1 200px;
    margin-bottom: 20px;
    padding-top:2rem;
  }
  
  .footer-column h4 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #45bdc9;
  }
  
  .footer-column ul {
    list-style: none;
  }
  
  .footer-column ul li {
    margin-bottom: 10px;
  }
  
  .footer-column ul li a {
    color: #ddd;
    text-decoration: none;
  }
  
  .footer-column ul li a:hover {
    color: #f4b400;
  }
  .carousel-item img{
    height:80vh;
  }
  .carousel-caption{
    display:block;
  }
  .carousel-caption h5{
   font-size:2.5rem;
   color:white;
   font-family:;
  }
  .footer-bottom {
    text-align: center;
    border-top: 1px solid #444;
    padding: 10px 0;
    
    color: #bbb;
  }
  
  .footer-bottom a {
    color: #45bdc9;
    text-decoration: none;
    margin: 0 10px;
  }
  
  .footer-bottom a:hover {
    color: #fff;
  }
  .search{
    width:30vw; height: 10vh; background-color: white; margin-left: 32vw; border-radius: 1rem; display: flex;

  }
  .search input{
    width: 80%; height: 100%; border: none; font-size: 1.5vw; border-radius:1rem;
  }
  .search button{
    width: 30%; border: none;background-color: #2196F3; font-size: 2vw; color: whitesmoke; font-family: Arial, Helvetica, sans-serif; border-radius: 1rem;
  }
  /* Responsive Design */
  @media (max-width: 768px) {
    .footer-container {
      flex-direction: column;
      text-align: center;
    }
    
  
    .footer-column {
      margin-bottom: 30px;
    }
    .deals .items{
      width:100%;
      margin-left: 2rem;
    }
    .details h2{
      font-size:1.2rem;
    }
           .search{
            height: 3rem;
            width: 70vw;
            margin-left: 7vw;
         
          }
          .search input{
          font-size:0.8rem;
          }
          .search button{
            font-size:0.8rem;
            }
            .center h1{
           display:none;
            }
          .carousel-item img{
            height:20rem;
           
          }
          .treding .places{
            flex-direction:column;
          }
        
        .treding .places img{
          width:100%;
        }
       
        .places img{
          margin-left:1rem;
        }
        #carouselExampleInterval h2 span{
          font-size:2rem;
        }
      
        #slider-2{
          display:none;
        }
        #slider-2{
          display:none;
        }
        .carousel-item img{
          padding: 0;
          border-radius: initial;
        }
        .center h1{

        }
        .deals{
          display:block;
      }
  }
  


  /* --------------responsive design---------------- */
  @media (min-width: 769px) and (max-width:1500px) {

  
    .slider-inner img{
      height:30vh;
    }
  }


  .marquee span{
    font-size:3vw;
    font-family:cursor;
    color:#2194f3
  
  }
.carousel-slide-bottom img{
  height:15rem;
}













  /* ------------login css START------------ */
  body {
   
    height: 100vh;
   overflow-x:hidden;
     align-item:center;
    font-family: 'Arial', sans-serif;
}

.login-box {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    width: 25rem;
  
  
    
}
.login-content{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:2rem;
}

.cover {
    background: url('https://via.placeholder.com/600x300') no-repeat center center;
    background-size: cover;
    height: 300px;
}

.login-box .form-group label {
    font-weight: bold;
    color: #333;
}

.login-box input[type="text"],
.login-box input[type="password"] {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
    width: 100%;
}

.login-box .btn {
    background-color: #2575fc;
    color: white;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    font-size: 16px;
}

.login-box .btn:hover {
    background-color: #6a11cb;
}

.login-box .utility {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-box .utility a {
    color: #6a11cb;
    text-decoration: none;
}

.login-box .utility a:hover {
    text-decoration: underline;
}

.login-box hr {
    border: 0;
    height: 1px;
    background: #ccc;
    margin: 20px 0;
}

.login-box .form-group:last-of-type {
    margin-bottom: 0;
}

.forgot-password,
.register-link {
    text-align: center;
    margin-top: 10px;
}

.forgot-password a,
.register-link a {
    color: #2575fc;
    text-decoration: none;
}

.forgot-password a:hover,
.register-link a:hover {
    text-decoration: underline;
}
  /* ------------login css END------------ */



  

/* ---------------contact form css start---------------------- */

.contact-box {
  background: #fff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
  width: 500px;
}

.contact-box .logo img {
  margin-bottom: 15px;
}

.contact-box h4 {
  color: #333;
  font-weight: bold;
}

.contact-box .tile {
  padding: 20px;
}

.contact-box label {
  font-weight: bold;
  color: #333;
}

.contact-box input,
.contact-box textarea {
  border-radius: 5px;
}

.contact-box input[type="text"],
.contact-box input[type="email"],
.contact-box textarea {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 15px;
  width: 100%;
}

.contact-box input:focus,
.contact-box textarea:focus {
  outline: none;
  border-color: #2575fc;
}

.contact-box .btn {
  background-color: #2575fc;
  color: white;
  padding: 10px;
  width: 100%;
  font-size: 16px;
  border-radius: 5px;
}

.contact-box .btn:hover {
  background-color: #6a11cb;
}

.contact-box .tile-footer {
  margin-top: 20px;
}
/* ---------------contact form css end---------------------- */.



.about-us {
  
  align-items: center;
  text-align:center;
  padding: 40px;

  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
 display:flex;
  width:100%;
}

.about-content {
  flex: 1;
  padding-right: 20px;
  width:100%;
}

.about-us h2 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #ff6347;
}

.about-us p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.about-image {
  flex: 1;
}
.about-image{
  width:100%;
  margin-top:1rem;
}
.about-image img {
  max-width: 50%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.cta-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #ff6347;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cta-button:hover {
  background-color: #e5533d;
}