/* Hero Section Responsive Fixes */

/* Base hero styles remain in style.css, this overrides for responsive behavior */

/* Override the background settings in the main stylesheet */
.hero {
  background-image: none !important; /* Remove background from main CSS */
  position: relative;
}

/* Add a pseudo-element for the background to better control it */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/space.jpg');
  background-size: cover;
  background-position: center center;
  z-index: -1;
  filter: brightness(0.9);
}

/* Desktop and larger screens */
@media (min-width: 769px) {
  .hero::before {
    background-position: center center;
  }
  
  .hero-left {
    max-width: 600px;
  }
}

/* Tablet devices - Adjust positioning and scale */
@media (max-width: 768px) and (min-width: 481px) {
  .hero::before {
    background-position: 70% center; /* Adjust focus point of the image */
  }
  
  .hero {
    min-height: 90vh;
  }
  
  .hero-title {
    font-size: calc(var(--1) * 48) !important;
  }
  
  .hero-left {
    padding: 0 calc(var(--1) * 20);
    max-width: 500px;
  }
}

/* Mobile devices */
@media (max-width: 480px) {
  .hero::before {
    background-position: 75% center; /* Further adjust focus point */
    opacity: 0.85; /* Slightly dim the background on mobile */
  }
  
  /* Add a gradient overlay to improve readability */
  .hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(2, 11, 45, 0.8) 0%, rgba(2, 11, 45, 0.5) 50%, rgba(2, 11, 45, 0.2) 100%);
    z-index: -1;
  }
  
  .hero {
    min-height: 85vh;
  }
  
  .hero-title {
    font-size: calc(var(--1) * 36) !important;
    letter-spacing: -0.02em;
  }
  
  .hero-left {
    padding: 0 calc(var(--1) * 15);
    max-width: 100%;
  }
  
  /* Adjust other hero elements for better mobile display */
  .countdown-timer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--1) * 10);
  }
  
  .payment-icons {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .payment-icon {
    margin-bottom: calc(var(--1) * 10);
  }
}

/* Even smaller mobile devices */
@media (max-width: 360px) {
  .hero-title {
    font-size: calc(var(--1) * 32) !important;
  }
  
  .hero::after {
    background: linear-gradient(to right, rgba(2, 11, 45, 0.9) 0%, rgba(2, 11, 45, 0.7) 100%);
  }
}

/* Create fallback for browsers that don't support the image */
.no-backgroundsize .hero::before {
  background-image: none;
  background-color: #020b2d;
}