/* Home page specific styles */

/* Shop Now Button Effect */
.shop-now-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(var(--brand-primary-rgb), 0.4);
  animation: pulse-shadow 2s infinite;
}

.shop-now-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(var(--brand-primary-rgb), 0.6);
  animation: none;
}

.shop-now-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.shop-now-btn:hover::before {
  width: 300px;
  height: 300px;
}

@keyframes pulse-shadow {

  0%,
  100% {
    box-shadow: 0 4px 15px rgba(var(--brand-primary-rgb), 0.4);
  }

  50% {
    box-shadow: 0 6px 20px rgba(var(--brand-primary-rgb), 0.6);
  }
}

.home-hero-section {
  background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .05) 0%, rgba(255, 255, 255, 1) 100%);
  padding: 4rem 0;
}

/* Glowy Text Effects */
.hero-text-glow {
  text-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.25),
    0 0 10px rgba(var(--brand-primary-rgb), 0.1);
}

.hero-text-subglow {
  text-shadow: 0 0 10px rgba(var(--brand-primary-rgb), 0.15);
}

/* 3D Image Effect */
.hero-3d-image-container {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.hero-3d-image {
  background-size: cover;
  border-radius: 20px;
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.15),
    -5px -5px 30px rgba(255, 255, 255, 0.8);
  transition: transform 0.5s ease;
  transform: rotateY(-10deg) rotateX(5deg);
  max-width: 100%;
  overflow: hidden;
}

.hero-3d-image:hover {
  transform: rotateY(0deg) rotateX(0deg) scale(1.02);
}

.medallion-showcase {
  position: relative;
}

.medallion-showcase img {
  max-width: 400px;
  border-radius: 1rem;
}

.feature-card {
  background: #fff;
  border-radius: .75rem;
  transition: transform .2s ease, box-shadow .2s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(var(--brand-primary-rgb), .1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  font-size: 2rem;
}

.feature-icon i {
  display: block;
}

.how-it-works-step {
  padding: 2rem 1rem;
}

.step-number {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.testimonial-card {
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
}

.testimonial-stars {
  font-size: 1.2rem;
}

.testimonial-author {
  color: var(--brand-primary);
  font-size: .95rem;
}

.product-details .detail-item {
  display: flex;
  align-items: flex-start;
}

.product-details .detail-item i {
  font-size: 1.5rem;
  margin-top: .25rem;
}

/* Footer Styles */
.home-footer {
  background-color: #f8f9fa;
  color: #333;
  position: relative;
}

.footer-links a:hover {
  color: var(--brand-primary) !important;
}

.newsletter-form .input-group-text {
  border-right: none;
}

.newsletter-form .form-control {
  border-left: none;
}

.newsletter-form .form-control:focus {
  border-color: #ced4da;
  box-shadow: none;
}

.footer-bottom {
  background-color: #f8f9fa;
}

.social-icons a {
  transition: color .2s ease;
}

.social-icons a:hover {
  color: var(--brand-primary) !important;
}

.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  display: none;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.scroll-to-top.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

/* Responsive adjustments */
@media (max-width: 991px) {

  /* Tablet and Mobile */
  .hero-3d-image-container {
    margin-top: 2rem;
    perspective: none;
  }

  .hero-3d-image {
    transform: none;
    /* No 3D tilt on smaller screens */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Simpler shadow */
    max-width: 80%;
    margin: 0 auto;
    display: block;
  }
}

@media (max-width: 768px) {
  .home-hero-section {
    padding: 2rem 0;
  }

  .medallion-showcase img {
    max-width: 100%;
  }

  .scroll-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 45px;
    height: 45px;
  }
}

/* Marquee Slider Section */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 2rem 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: inline-flex;
  animation: marquee-scroll 20s linear infinite;
  gap: 2rem;
  padding-left: 2rem;
  /* Initial offset */
}

/* Pause animation on hover for readability */
.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

  /* Scrolls half-way if content is duplicated once, adjust based on content width */
}

.marquee-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 50px;
  /* Highly rounded/curvy borders */
  padding: 1rem 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  min-width: 350px;
  /* Reasonable size */
  flex-shrink: 0;
  white-space: normal;
  /* Allow text wrapping inside the card */
}

.marquee-icon-box {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  background: rgba(var(--brand-primary-rgb), 0.1);
  color: var(--brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-right: 1rem;
}

.marquee-content h5 {
  font-weight: 700;
  margin-bottom: 0.2rem;
  font-size: 1.1rem;
}

.marquee-content p {
  margin-bottom: 0;
  color: #6c757d;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Mobile styles for Marquee Section */
@media (max-width: 768px) {
  .marquee-container {
    padding: 0;
    mask-image: none;
    -webkit-mask-image: none;
    overflow: visible;
  }

  .marquee-track {
    animation: none;
    /* Disable scrolling */
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    padding-left: 0;
    gap: 1rem;
    width: 100%;
  }

  /* Hide duplicated marquee items (Sets 2 & 3) */
  .marquee-track .marquee-card:nth-child(n+4) {
    display: none;
  }

  .marquee-card {
    min-width: 0;
    width: 100%;
    border-radius: 15px;
    /* Adjust curvature for mobile */
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  }

  .marquee-icon-box {
    width: 35px;
    /* Smaller icon box */
    height: 35px;
    font-size: 1rem;
    /* Smaller icon size */
    margin-right: 0.75rem;
  }

  .marquee-content h5 {
    font-size: 0.95rem;
    margin-bottom: 0;
  }

  .marquee-content p {
    font-size: 0.8rem;
  }
}

/* Video Slider Section */
.video-slider-section {
  position: relative;
  overflow: hidden;
  padding: 3rem 0 5rem;
  background: #f8f9fa;
}

.video-slider-container {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
}

.video-slider-track {
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 0.6s ease-in-out;
}

.video-frame {
  width: 290px;
  height: 516px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.6s ease-in-out;
  background: #000;
  opacity: 0.7;
  transform: scale(0.9);
  flex-shrink: 0;
}

.video-frame.active {
  opacity: 1;
  transform: scale(1.1);
  /* Prominent center */
  z-index: 10;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  border: 3px solid #fff;
}

.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-unmute-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: all 0.3s;
}

.video-unmute-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

/* Hide scrollbar but allow horizontal scroll on mobile if needed */
.video-slider-wrapper {
  overflow: hidden;
  /* Changed from overflow-x: hidden to prevent any scrollbars */
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Risk Free Section */
.risk-free-section {
  position: relative;
  padding: 5rem 0;
  background: #fff;
  overflow: hidden;
}

.risk-free-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 2.5rem 2rem;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* 3D Box Effect */
  box-shadow:
    1px 1px 0px rgba(0, 0, 0, 0.05),
    2px 2px 0px rgba(0, 0, 0, 0.05),
    3px 3px 0px rgba(0, 0, 0, 0.05),
    4px 4px 0px rgba(0, 0, 0, 0.05),
    5px 5px 0px rgba(0, 0, 0, 0.05),
    6px 6px 0px rgba(0, 0, 0, 0.05),
    8px 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

.risk-free-card:hover {
  transform: translateY(-5px) translateX(-5px);
  box-shadow:
    1px 1px 0px rgba(var(--brand-primary-rgb), 0.1),
    2px 2px 0px rgba(var(--brand-primary-rgb), 0.1),
    3px 3px 0px rgba(var(--brand-primary-rgb), 0.1),
    4px 4px 0px rgba(var(--brand-primary-rgb), 0.1),
    5px 5px 0px rgba(var(--brand-primary-rgb), 0.1),
    6px 6px 0px rgba(var(--brand-primary-rgb), 0.1),
    7px 7px 0px rgba(var(--brand-primary-rgb), 0.1),
    8px 8px 0px rgba(var(--brand-primary-rgb), 0.1),
    9px 9px 0px rgba(var(--brand-primary-rgb), 0.1),
    10px 10px 0px rgba(var(--brand-primary-rgb), 0.1),
    15px 15px 30px rgba(0, 0, 0, 0.1);
  border-color: var(--brand-primary);
}

.risk-free-icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 50%;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
}

/* Unique graphic background for icons: blob/circle shapes */
.risk-free-icon-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  opacity: 0.15;
  z-index: -1;
  animation: blob-pulse 3s infinite alternate ease-in-out;
}

@keyframes blob-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.1);
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
}

.bg-accent-1 {
  background-color: #4CAF50;
}

/* Setup Green */
.bg-accent-2 {
  background-color: #2196F3;
}

/* Return Blue */
.bg-accent-3 {
  background-color: #FF9800;
}

/* Shipping Orange */

.risk-free-icon {
  font-size: 2.5rem;
  position: relative;
  z-index: 2;
}

.text-accent-1 {
  color: #2E7D32;
}

.text-accent-2 {
  color: #1565C0;
}

.text-accent-3 {
  color: #EF6C00;
}

.risk-free-title {
  font-weight: 700;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}