/* Premium Banner Styling */

.luxury-offer-banner {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  padding: 40px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 -15px 30px rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 3;
  color: white;
  margin-top: -50px;
}


.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: -10px;

  left: 0;

  width: 100%;

  height: 10px;

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);

}



.luxury-offer-content {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 30px;

  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.2);

  padding: 8px 15px;

  border-radius: 30px;

  font-size: 0.8rem;

  font-weight: 600;

  text-transform: uppercase;

  margin-bottom: 15px;

  position: relative;

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

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}



.luxury-offer-left h3 {

  font-size: 2.2rem;

  margin-bottom: 15px;

  color: white;

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

  line-height: 1.2;

  position: relative;

}



.luxury-offer-left h3:after {

  content: '';

  position: absolute;

  bottom: -10px;

  left: 0;

  width: 80px;

  height: 3px;

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

  border-radius: 3px;

}



.luxury-offer-left p {

  font-size: 1.1rem;

  opacity: 0.9;

  max-width: 600px;

  margin-bottom: 0;

}



.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: 18px 35px;

  border-radius: 8px;

  font-size: 1.1rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

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

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

  position: relative;

  overflow: hidden;

  border: none;

}



.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.02);

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

  color: var(--primary-color);

}



.luxury-offer-btn i {

  font-size: 1.2rem;

  color: var(--primary-color);

}



.luxury-offer-expires {

  font-size: 0.9rem;

  opacity: 0.8;

  margin: 0;

}



.countdown {

  font-weight: 700;

  color: #ff4757;

}



.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;

  }

}