/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.heroBanner {
  padding: 8rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: url('/img/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
}

[data-theme='dark'] .heroBanner {
  background: url('/img/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.heroLogo {
  max-width: 300px;
  /* margin-bottom: 2rem; */
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

[data-theme='dark'] .heroLogo {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 2rem;
  }
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.buttons :global(.button) {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: white;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  font-weight: 500;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.buttons :global(.button:hover) {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

[data-theme='dark'] .buttons :global(.button) {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: white;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  font-weight: 500;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

[data-theme='dark'] .buttons :global(.button:hover) {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.hero__subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

[data-theme='dark'] .hero__subtitle {
  color: rgba(255, 255, 255, 0.7);
}

.features {
  display: flex;
  align-items: center;
  padding: 0rem 0;
  width: 100%;
  background: var(--ifm-background-color);
}

.featureIcon {
  display: block;
  font-size: 3rem;
  transition: transform 0.2s ease-in-out;
}

.featureIcon:hover {
  transform: scale(1.1);
}

.text--center {
  color: var(--ifm-color-emphasis-800);
}

.text--center h3 {
  color: var(--ifm-color-emphasis-900);
}

.text--center p {
  color: var(--ifm-color-emphasis-700);
}

[data-theme='dark'] .text--center {
  color: var(--ifm-color-emphasis-200);
}

[data-theme='dark'] .text--center h3 {
  color: var(--ifm-color-emphasis-100);
}

[data-theme='dark'] .text--center p {
  color: var(--ifm-color-emphasis-300);
}

.section {
  padding: 4rem 0;
}

.sectionTitle {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 2.5rem;
  color: #2a2a2a;
}

.techStack {
  background: #f8f9fa;
}

.techGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 0 1rem;
}

.techItem {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.techItem:hover {
  transform: translateY(-5px);
}

.techItem h4 {
  margin-bottom: 0.5rem;
  color: #2a2a2a;
}

.techItem p {
  margin: 0;
  color: #666;
}

.stepsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 0 1rem;
}

.stepCard {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  color: inherit;
}

.stepCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stepCard h3 {
  margin-bottom: 1rem;
  color: #2a2a2a;
}

.stepCard p {
  margin: 0;
  color: #666;
}

@media screen and (max-width: 768px) {
  .techGrid,
  .stepsGrid {
    grid-template-columns: 1fr;
  }
  
  .section {
    padding: 2rem 0;
  }
  
  .sectionTitle {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
}
  