/* Premium Offer Banner Styling */

.luxury-offer-banner {

  background: linear-gradient(135deg, #3a2a7e, #0099cc, #3a2a7e);

  background-size: 200% 200%;

  animation: gradientShift 15s ease infinite;

  padding: 50px 0;

  position: static;

  overflow: hidden;

  box-shadow: 0 -15px 30px rgba(0, 0, 0, 0.3), 0 15px 30px rgba(0, 0, 0, 0.3);

  border-top: 1px solid rgba(255, 255, 255, 0.3);

  border-bottom: 1px solid rgba(255, 255, 255, 0.3);

  margin-top: 80px;

  clear: both;
}



.luxury-offer-banner:before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="none" width="100" height="100"/><path fill="rgba(255,255,255,0.05)" d="M30,10L50,30L70,10L90,30L70,50L90,70L70,90L50,70L30,90L10,70L30,50L10,30L30,10Z"/></svg>');

  background-size: 100px 100px;

  opacity: 0.5;

}



.luxury-offer-banner:after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.2), transparent 70%);

}



.luxury-offer-content {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 40px;

  position: relative;

  z-index: 2;

}



.luxury-offer-left {

  flex: 1;

  min-width: 300px;

  position: relative;

}



.luxury-offer-badge {

  display: inline-flex;

  align-items: center;

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(10px);

  padding: 10px 20px;

  border-radius: 50px;

  font-size: 0.9rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  margin-bottom: 20px;

  position: relative;

  border: 1px solid rgba(255, 255, 255, 0.3);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

  color: white;

}



.luxury-offer-badge:before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

  animation: shine 3s infinite;

}



@keyframes shine {

  0% {

    left: -100%;

  }

  20% {

    left: 100%;

  }

  100% {

    left: 100%;

  }

}



.pulse-circle {

  width: 10px;

  height: 10px;

  background-color: #ff4757;

  border-radius: 50%;

  margin-right: 10px;

  position: relative;

}



.pulse-circle:before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: #ff4757;

  border-radius: 50%;

  animation: pulse 1.5s infinite;

  opacity: 0.7;

}



@keyframes pulse {

  0% {

    transform: scale(1);

    opacity: 0.7;

  }

  50% {

    transform: scale(1.5);

    opacity: 0;

  }

  100% {

    transform: scale(1);

    opacity: 0;

  }

}



.luxury-offer-left h3 {

  font-size: 3rem;

  margin-bottom: 20px;

  color: white;

  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

  line-height: 1.2;

  position: relative;

  font-weight: 800;

  letter-spacing: -1px;

}



.luxury-offer-left h3:after {

  content: '';

  position: absolute;

  bottom: -15px;

  left: 0;

  width: 100px;

  height: 3px;

  background: rgba(255, 255, 255, 0.5);

  border-radius: 3px;

}



.luxury-offer-left p {

  font-size: 1.2rem;

  opacity: 0.9;

  max-width: 600px;

  margin-bottom: 0;

  color: white;

  line-height: 1.6;

  position: relative;

  padding-left: 20px;

  border-left: 3px solid rgba(255, 255, 255, 0.3);

}



.luxury-offer-right {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 15px;

}



.luxury-offer-btn {

  display: inline-flex;

  align-items: center;

  gap: 15px;

  background: white;

  color: var(--secondary-color);

  padding: 22px 45px;

  border-radius: 50px;

  font-size: 1.2rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 2px;

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

  position: relative;

  overflow: hidden;

  border: none;

  animation: buttonGlow 3s infinite alternate;

}



@keyframes buttonGlow {

  0% {

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

  }

  100% {

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.5);

  }

}



.luxury-offer-btn:before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);

  transition: all 0.6s ease;

  z-index: 1;

}



.luxury-offer-btn span, 

.luxury-offer-btn i {

  position: relative;

  z-index: 2;

}



.luxury-offer-btn:hover:before {

  left: 100%;

}



.luxury-offer-btn:hover {

  transform: translateY(-5px) scale(1.05);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

  color: var(--primary-color);

  letter-spacing: 2.5px;

}



.luxury-offer-btn i {

  font-size: 1.5rem;

  color: var(--primary-color);

  animation: sparkle 2s infinite;

}



@keyframes sparkle {

  0% { transform: scale(1); opacity: 1; }

  50% { transform: scale(1.2); opacity: 0.8; }

  100% { transform: scale(1); opacity: 1; }

}



.luxury-offer-expires {

  font-size: 1rem;

  opacity: 0.9;

  margin: 0;

  color: white;

  font-weight: 500;

  letter-spacing: 1px;

  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}



.countdown {

  font-weight: 800;

  color: #ff4757;

  position: relative;

  padding: 0 5px;

}



.countdown:after {

  content: '';

  position: absolute;

  bottom: -2px;

  left: 0;

  width: 100%;

  height: 2px;

  background: rgba(255, 71, 87, 0.5);

  border-radius: 2px;

}