.banner-body { display: flex; justify-content: center; align-items: center; margin-top: 40px; margin-bottom: 40px; } .banner-container { width: 100%; max-width: 1400px; height: 120px; position: relative; overflow: hidden; border-radius: 15px; } .banner-background { position: absolute; inset: 0; background: linear-gradient(135deg, #1861c6 0%, #d200ff 50%, #000000 100%); } @keyframes gradientShift { 0%, 100% { background: linear-gradient(135deg, #000000 0%, #ff0080 50%, #ff8c00 100%); } 50% { background: linear-gradient(135deg, #ff8c00 0%, #ff0080 50%, #000000 100%); } } .sparkle-banners-banner { position: absolute; inset: 0; pointer-events: none; } .sparkle-banner { position: absolute; width: 3px; height: 3px; background: white; border-radius: 50%; animation: sparkle-banner 3s ease-in-out infinite; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); } @keyframes sparkle-banner { 0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(180deg); } } .sparkle-banner:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; } .sparkle-banner:nth-child(2) { left: 25%; top: 70%; animation-delay: 0.5s; } .sparkle-banner:nth-child(3) { left: 40%; top: 30%; animation-delay: 1s; } .sparkle-banner:nth-child(4) { left: 60%; top: 60%; animation-delay: 1.5s; } .sparkle-banner:nth-child(5) { left: 75%; top: 25%; animation-delay: 2s; } .sparkle-banner:nth-child(6) { left: 85%; top: 75%; animation-delay: 2.5s; } .banner-content { position: relative; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; z-index: 2; } .left-content-banner { display: flex; align-items: center; gap: 25px; } .anniversary-badge { border-radius: 50px; padding: 8px 20px; white-space: nowrap; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } .anniversary-number { font-size: 28px; font-weight: bold; color: #fff; letter-spacing: 1px; } .text-content { display: flex; flex-direction: column; gap: 2px; } .main-heading-banner { font-size: 36px; font-weight: bold; color: #fff; line-height: 1; margin: 0; } @keyframes glow { from { text-shadow: 0 3px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 140, 0, 0.4); } to { text-shadow: 0 3px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 0, 128, 0.6); } } .sub-heading-banner { font-size: 16px; color: rgba(255, 255, 255, 0.95); font-style: italic; margin: 0; } .book-now-btn-banner { background: linear-gradient(135deg, #ff8c00, #ff0080); color: white; border: 2px solid rgba(255, 255, 255, 0.3); padding: 12px 35px; font-size: 16px; font-weight: bold; border-radius: 50px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 5px 20px rgba(55, 0, 255, 0.4); transition: all 0.3s ease; text-decoration: none; display: inline-block; white-space: nowrap; } .book-now-btn-banner:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(55, 0, 255, 0.6); background: linear-gradient(135deg, #d200ff, #1861c6); } .magical-particle-banners { position: absolute; inset: 0; pointer-events: none; } .particle-banner { position: absolute; width: 4px; height: 4px; background: radial-gradient(circle, #fff, transparent); border-radius: 50%; opacity: 0; } @keyframes rise { 0% { bottom: -10px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { bottom: 100%; opacity: 0; } } .particle-banner:nth-child(1) { left: 15%; animation-delay: 0s; } .particle-banner:nth-child(2) { left: 30%; animation-delay: 1s; } .particle-banner:nth-child(3) { left: 45%; animation-delay: 2s; } .particle-banner:nth-child(4) { left: 60%; animation-delay: 3s; } .particle-banner:nth-child(5) { left: 75%; animation-delay: 1.5s; } .particle-banner:nth-child(6) { left: 85%; animation-delay: 2.5s; } @media (max-width: 768px) { .banner-body { margin-top: -20px; margin-bottom: 0; } .banner-container { width: 96%; height: 100px; } .banner-content { padding: 0 20px; gap: 15px; } .left-content-banner { gap: 15px; } .anniversary-badge { padding: 6px 15px; } .anniversary-number { font-size: 15px; text-shadow: none; } .main-heading-banner { font-size: 18px; text-shadow: none; } .sub-heading-banner { font-size: 13px; text-shadow: none; } .book-now-btn-banner { padding: 10px 25px; font-size: 13px; } .anniversary-badge { border: none; background: transparent; } } @media (max-width: 580px) { .banner-container { height: 100px; } .banner-content { flex-direction: column; justify-content: center; gap: 10px; padding: 15px 20px; } .left-content-banner { gap: 12px; } .anniversary-badge { padding: 5px 12px; } .anniversary-number { font-size: 14px; } .main-heading-banner { font-size: 16px; } .sub-heading-banner { font-size: 11px; } .book-now-btn-banner { padding: 8px 20px; font-size: 12px; } }