.attractions { background: linear-gradient(rgba(10, 10, 25, 0.85), rgba(10, 10, 25, 0.85)),url('https://cdn.magicdecor.in/com/2024/06/20145125/Kashi-Vishwanath-Temple-Wallpaper-Mural-for-Wall-710x488.jpg') center/cover no-repeat fixed;color: #fff;padding: 80px 20px; }
.attraction-category { margin-bottom: 4rem; }
.category-title { font-size: 2.2rem; text-align: center; margin-bottom: 2rem; color: #4a8be6; animation: fadeInLeft 0.8s ease; }
.attractions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
.attraction-card { background: var(--color-surface); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(31,28,28,0.178); transition: all 0.3s ease; animation: fadeInUp 0.8s ease; position: relative;}
.attraction-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(44,23,233,0.966); animation: pulse 0.6s ease; }
.card-image { height: 250px; position: relative; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.card-image:hover img { transform: scale(1.1); }
.card-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease;}
.card-image:hover .card-overlay { opacity: 1; }
.overlay-content { color: white; text-align: center; font-size: 1.2rem; font-weight: 600; animation: zoomIn 0.5s ease; }
.placeholder-image { width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; }
.temple-glow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle, rgba(218,165,32,0.3) 0%, transparent 70%); animation: glow 2s ease-in-out infinite alternate; }
.card-content { padding: 2rem; }
.card-content h4 { font-size: 1.5rem; margin-bottom: 1rem; color: #599cfa; }
.card-content p { margin-bottom: 1rem; line-height: 1.6; }
.card-features { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.feature-tag { background: linear-gradient(45deg, #FF6B35, #DAA520); color: white; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.9rem; font-weight: 500; animation: sparkle 2s ease-in-out infinite; }
.best-time, .timings { color: #5c93df; font-weight: 600; font-size: 0.95rem; }
.museums-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem;}
.museum-card { background: var(--color-surface); padding: 2rem; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; animation: fadeInUp 0.8s ease;}
.museum-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgb(19,3,248);}
.museum-icon { font-size: 3rem; margin-bottom: 1rem; animation: float 3s ease-in-out infinite;}
.museum-highlights { color: var(--color-text-secondary); margin: 1rem 0;}
.museum-timings { color: #ffffff; font-weight: 600; background: var(--color-bg-2); padding: 0.5rem 1rem; border-radius: 10px; display: inline-block;}
.attraction-category:first-of-type .attractions-grid {
  gap: 3.5rem 3rem;
}
@media (max-width: 768px) { .section-title { font-size: 2.2rem;} .attractions-grid, .museums-grid { grid-template-columns: 1fr; } }