/* Promotions Section */


.promotions {


  padding: 80px 0;


  position: relative;


  background: linear-gradient(135deg, #0f172a, #1e293b);


  overflow: hidden;


}





.promotions-bg-pattern {


  position: absolute;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  background-image: 


    radial-gradient(circle at 30% 20%, rgba(124, 58, 237, 0.08) 0%, transparent 50%),


    radial-gradient(circle at 70% 80%, rgba(245, 158, 11, 0.08) 0%, transparent 50%);


  opacity: 0.8;


  z-index: 0;


}





.promotions .container {


  position: relative;


  z-index: 1;


}





.promotions .section-header {


  text-align: center;


  margin-bottom: 50px;


}





.promotions .section-title {


  margin-bottom: 15px;


}





.promo-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));


  gap: 30px;


  margin-bottom: 40px;


}





.promo-card {


  background: rgba(30, 41, 59, 0.6);


  border-radius: 15px;


  overflow: hidden;


  transition: all 0.4s ease;


  position: relative;


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


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


  height: 100%;


  display: flex;


  flex-direction: column;


}





.promo-card:hover {


  transform: translateY(-10px);


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


  border-color: rgba(255, 255, 255, 0.1);


}





.promo-card:before {


  content: '';


  position: absolute;


  top: 0;


  left: 0;


  right: 0;


  height: 3px;


  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));


  opacity: 0;


  transition: opacity 0.4s;


  z-index: 1;


}





.promo-card:hover:before {


  opacity: 1;


}





.promo-card.featured {


  transform: scale(1.03);


  border-color: rgba(245, 158, 11, 0.3);


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


}





.promo-card.featured:hover {


  transform: scale(1.03) translateY(-10px);


}





.featured-tag {


  position: absolute;


  top: 15px;


  right: -35px;


  background: linear-gradient(90deg, var(--secondary-color), #e67e00);


  color: white;


  font-size: 14px;


  font-weight: 600;


  padding: 5px 40px;


  transform: rotate(45deg);


  z-index: 3;


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


}





.promo-image {


  height: 200px;


  overflow: hidden;


  position: relative;


}





.promo-image img {


  width: 100%;


  height: 100%;


  object-fit: cover;


  transition: transform 0.5s ease;


}





.promo-overlay {


  position: absolute;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  background: linear-gradient(to bottom, transparent, rgba(15, 23, 42, 0.8));


  z-index: 1;


}





.promo-card:hover .promo-image img {


  transform: scale(1.1);


}





/* Promo badge removed as requested */





.promo-details h3 {


  font-size: 24px;


  margin-bottom: 15px;


  color: var(--light-text);


  position: relative;


  display: inline-block;


}





.promo-details h3:after {


  content: '';


  position: absolute;


  bottom: -5px;


  left: 0;


  width: 40px;


  height: 3px;


  background: linear-gradient(90deg, var(--secondary-color), transparent);


}





.promo-details p {


  color: rgba(255, 255, 255, 0.7);


  line-height: 1.6;


  margin-bottom: 20px;


}





.promo-footer {


  display: flex;


  justify-content: space-between;


  align-items: center;


  margin-top: auto;


  padding-top: 20px;


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


  flex-wrap: wrap;


  gap: 15px;


}





.promo-expiry {


  color: rgba(255, 255, 255, 0.6);


  font-size: 14px;


  display: flex;


  align-items: center;


  min-width: 100px;


}





.time-icon {


  margin-right: 8px;


  color: var(--secondary-color);


}





/* Enhanced btn-shine for promo cards */


.promo-footer .btn-shine {


  min-width: 120px;


  text-align: center;


  padding: 10px 20px;


  margin-left: auto;


  font-weight: 600;


  border-radius: 8px;


  letter-spacing: 0.5px;


  box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);


  transition: all 0.3s ease;


}





.promo-footer .btn-shine:hover {


  transform: translateY(-3px);


  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.6);


}





.promotions-cta {


  text-align: center;


  margin-top: 30px;


}





/* Responsive Styles */


@media (max-width: 768px) {


  .promotions {


    padding: 60px 0;


  }


  


  .section-header {


    margin-bottom: 30px;


    padding: 0 15px;


  }


  


  .section-title {


    font-size: 32px;


  }


  


  .section-subtitle {


    font-size: 16px;


  }


  


  .promo-grid {


    grid-template-columns: 1fr;


    padding: 0 15px;


    gap: 25px;


  }


  


  .promo-card {


    max-width: 500px;


    margin: 0 auto;


  }


  


  .promo-card.featured {


    transform: scale(1);


  }


  


  .promo-card.featured:hover {


    transform: translateY(-10px);


  }


  


  .promo-image {


    height: 180px;


  }


  


  .promo-content {


    padding: 20px;


  }


  


  .promo-details h3 {


    font-size: 22px;


  }


  


  .promo-footer {


    flex-direction: row;


    justify-content: space-between;


    align-items: center;


    gap: 15px;


  }


  


  .promo-footer .btn-shine {


    min-width: 120px;


    padding: 12px 20px;


    margin-left: auto;


  }


  


  .promotions-cta {


    margin-top: 40px;


    padding: 0 15px;


  }


}





@media (max-width: 480px) {


  .promotions {


    padding: 50px 0;


  }


  


  .section-title {


    font-size: 28px;


  }


  


  .section-subtitle {


    font-size: 15px;


  }


  


  .promo-grid {


    gap: 20px;


  }


  


  .promo-card {


    border-radius: 12px;


  }


  


  .promo-image {


    height: 160px;


  }


  


  .promo-content {


    padding: 15px;


  }


  


  .promo-details h3 {


    font-size: 20px;


    margin-bottom: 10px;


  }


  


  .promo-details p {


    font-size: 14px;


  }


  


  .promo-footer {


    flex-direction: column;


    align-items: flex-start;


    padding-top: 15px;


  }


  


  .promo-footer .btn-shine {


    width: 100%;


    margin-left: 0;


    margin-top: 10px;


    padding: 14px 20px;


  }


  


  .promo-expiry {


    margin-bottom: 0;


    font-size: 13px;


  }


  


  .featured-tag {


    font-size: 12px;


    padding: 5px 10px;


    top: 10px;


    right: 10px;


  }


  


  .promotions-cta {


    margin-top: 30px;


  }


  


  .promotions-cta .btn-glow {


    width: 100%;


    max-width: 300px;


    padding: 14px 20px;


  }


}