body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f1ede7;
    color: #444;
  }
  header {
    background-color: #f59b1c;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    font-size: 28px;
  }
  nav {
    background-color: #f59b1c;
    padding: 10px;
    text-align: center;
  }
  nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    padding : 6vw;
    font-size: 18px;
    transition: color 0.3s;
  }
  nav a:hover {
    color: #470707; 
    text-decoration: underline; 
   
    padding: 5px 10px; 
    border-radius: 5px; 
    transition: all 0.3s ease; 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 
  }
  
  .container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
  }
  .main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .dest {
    background-color: #fcd5a0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    overflow: hidden;
    flex-basis: calc(33.33% - 20px);
    transition: transform 0.3s ease;
  }
  .dest:hover {
    transform: translateY(-5px);
  }
  .dest img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 2px solid #fbaf3b;
  }
  .card-content {
    padding: 20px;
  }
  .card-content h2 {
    color: #333;
    font-size: 24px;
    margin-bottom: 10px;
  }
  .card-content p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
  }
  footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
  }
  footer p {
    font-size: 14px;
    margin: 0;
  }
  .card-content {
    height: 200px;
    overflow: scroll;
  }
  .tble {
    background-color: rgb(246, 248, 248);
    display: flex;
    justify-content: space-evenly;
    padding-top: 20px;
  }
  .tble {
    background-color: #333;
    color: beige;
  }
  


/* styles.css */

.slideshow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  width: 100%;
  height: 200px;
  perspective: 1000px;
}

.card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.card-front {
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-back {
  background-color: #fff;
  transform: rotateY(180deg);
  padding: 20px;
}

#festivals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}
.festival-card {
  width: calc(33.33% - 40px);
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  background-color: #f5f0ee;
}
.festival-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
.festival-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  transition: transform 0.3s ease-in-out;
}
.festival-card:hover .festival-image {
  transform: scale(1.1);
}
.festival-details {
  padding: 20px;
}
.festival-details h3 {
  margin-top: 0;
  font-size: 1.5rem;
  color: #343a40;
  text-transform: uppercase;
  font-weight: bold;
}
.festival-details p {
  margin: 5px 0;
  color: #6c757d;
}
.icon {
  color: #20c997;
  margin-right: 5px;
}
@media screen and (max-width: 768px) {
  .festival-card {
    width: calc(50% - 40px);
  }
}
@media screen and (max-width: 576px) {
  .festival-card {
    width: calc(100% - 40px);
  }
}
#festival{
  text-align: center;
  text-decoration: double;
  font-weight: bolder;
  color: rgb(250, 106, 3);
    }

    .gallery {
      display: grid;
      grid-template-columns: 400px 400px 400px;
      grid-gap: 10px;
    
    }
    
    .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .gallery-item img {
      display: block;
      width: 500px;
      height: auto;
      transition: filter 0.3s ease, transform 0.3s ease;
    }
    
    .gallery-item:hover img {
      filter: blur(5px);
      transform: scale(1.05);
    }
    
    .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      text-align: center;
      padding: 8px 0; /* Adjust padding as needed */
      box-sizing: border-box;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .gallery-item:hover .caption {
      opacity: 1;
    }
    #map-container iframe {
      width: 100%; /* Adjust the width of the map as needed */
      border: 0;
      height: 80%;
      position:fixed;
      top: 0;
      left: 0;
    }
    .medical-facilities {
      margin-bottom: 30px;
      padding: 20px;
      width:100%;
    }
    
    .medical-facilities h2 {
      color: #333;
    }
    
    .medical-facilities ul {
      list-style: none;
      padding: 0;
    }
    
    .medical-facilities li {
      border: 1px solid #ccc;
      margin-bottom: 10px;
      padding: 10px;
    }
    
    .medical-facilities h3 {
      margin-top: 0;
      margin-bottom: 5px;
      color: #007bff;
    }


    body {

      background-color:#000;
      
      display:grid; place-items:center; }
      
      h2 {
      
       text-align: center; color: whitesmoke; }
      
      .palaces-list { display: flex; flex-wrap: wrap; justify-content: center; }
      
      .palace { position: relative; width: 300px; height: 400px; border: 1px solid #ccc; border-radius: 5px; margin: 10px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; transform-style: preserve-3d; perspective: 1000px; cursor: pointer; }
      
      .palace:hover { transform: translateY(-10px) rotateY(2deg); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }
      
      .palace-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; font-size: 1rem; transform: translateY(100%); transition: transform 0.3s ease; box-sizing: border-box; }
      
      .palace:hover .palace-caption { transform: translateY(0); }
      
      .palace img { width: 100%; height: 70%; object-fit:cover;
      
      -webkit-box-reflect:below 2px linear-gradient(transparent, transparent, #0004);
      
      transform-origin:center; transform:perspective(800px) rotateY(25deg); transition:0.5s; }
      
      .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; font-size: 1rem; box-sizing: border-box; }
      
      .palace:hover .palace-caption { transform: translateY(0); }
      
      .palace a { display: block; height: 100%; text-decoration: none; }
      
      @media (max-width: 768px) { .palace { width: 45%; } }
      
      @media (max-width: 480px) { .palace { width: 100%; } } .container { max-width: auto; max-height: auto; position: relative; display: flex; justify-content: center; align-items: center; gap: 20px; perspective: 1000px; } 
      .container img { transition: transform 0.5s, opacity 0.5s; } 
      .container img:hover { transform: scale(1.1) translateZ(50px);}


      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
      }
      
      .palace {
        position: relative;
        width: 250px;
        height: 350px;
        perspective: 1000px;
        margin: 40px;
      }
      
      .palace-front,
      .palace-back {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        backface-visibility: hidden;
        transition: transform 0.6s;
      }
      
      .palace-front {
        transform: rotateY(0deg);
      }
      
      .palace-back {
        transform: rotateY(180deg);
      }
      
      .palace:hover .palace-front {
        transform: rotateY(-180deg);
      }
      
      .palace:hover .palace-back {
        transform: rotateY(0deg);
      }
      
      h4, p {
        text-align: center;
      }
      
      img {
        width: 100%;
        height: 70%;
        object-fit: cover;
      }
      
      /* Additional styling to improve readability and aesthetics */
      h2 {
        text-align: center;
      }
      
      .container {
        padding: 20px;
      }
      
      .palace {
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }
      .palace {
        transform-style: preserve-3d;
        perspective: 1500px;
      }
      
      .palace-front,
      .palace-back {
        transform-style: preserve-3d;
      }
      
      .palace-front {
        transform: rotateY(0deg);
      }
      
      .palace-back {
        transform: rotateY(180deg);
      }
      .palace:hover {
        transform: scale(1.05);
      }
      
      .palace:hover img {
        opacity: 0.8;
      }
      .palace {
        transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
      }