/* Hero Section - Mobile First */
.hero-section {
  background-size: cover;
  background-position: center;
  /* min-height: 691px; */
  height: 120vh;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0) 90%),
    linear-gradient(to top,    rgba(0,0,0,0.7), rgba(0,0,0,0) 40%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 10;
}

.padding-hero {
  position: relative;
  z-index: 3;
  padding-bottom: 30px; /* Space above aqiqah-text */
  margin-bottom: -30px; /* Pull up the aqiqah-text */
}

.hero-title {
  font-size: 3rem;
  font-weight: 400;
  color: white;
  margin-bottom: 20px;
  animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: white;
  margin-bottom: 40px;
  line-height: 1.4;
  animation: fadeInUp 1s ease-out 0.2s both;
  m
}

/* .aqiqah-text {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  width: 373px;
  height: 122px;
  z-index: 2;
  user-select: none;
  pointer-events: none;
  display: flex;
  justify-content: center;
} */

/* .aqiqah-text img {
  width: 100%;
  height: auto;
  object-fit: contain;
} */

.aqiqah-text {
  background: linear-gradient(87.56deg, rgba(255,255,255,0) 1.92%, rgba(255,255,255,0.4) 98.53%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
  font-family: "Funnel Display", sans-serif;
  font-size: 290px;
  position: relative;
  left: 0; right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  line-height: 1;
  pointer-events: none;
  width: 100%;
  margin: 0;
  padding: 0;
}


/* Mobile */
@media (max-width: 768px) {
  .padding-hero {
    padding-top: 200px;
  }

   .hero-section {
  height: 100vh;
  display: flex;
    flex-direction: column;
    justify-content: end;
  }

  .aqiqah-text{
    font-size: 90px;
  }

  .btn-order{
    width: 100%;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* Mobile Small */
@media (max-width: 320px) {
  .padding-hero {
    padding-top: 30px;
  }

  .hero-section {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: end;
  }

  .hero-title {
    font-size: 2rem;
    margin-bottom: 20px;
  }

  .hero-subtitle {
    font-size: 14px;
    margin-bottom: 20px;
  }

  /* .aqiqah-text {
    bottom: -29px;
    transform: translateX(-50%) scale(0.7);
  } */
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: end;
  }

  .padding-hero {
    padding-top: 0;
    margin-bottom: 0;
  }

  .hero-title {
    font-size: 3.5rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }

    .aqiqah-text{
    font-size: 190px;
  }
}

/* Desktop Large Styles */
@media (min-width: 1024px) {
  .hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: end;
  }

  .hero-content {
    padding-top: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
  }

  .hero-title {
    font-size: 4rem;
    margin-bottom: 40px;
  }

  .hero-subtitle {
    font-size: 1.3rem;
  }

  .hero-content{
    width: 1500px;
  }

  /* .aqiqah-text {
    transform: translateX(-50%) scale(2.91);
    bottom: 70px;
  } */
}