@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&display=swap');
/* Hero Section Styles */
.heroContainer {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
  background-image: url('/herobg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.contentWrapper {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 10;
}
.holaText{
  font-family: "Lexend Mega", sans-serif;
}
.heroTitle {
  font-family: "Lexend Mega", sans-serif;
  margin-top: 12%;
  font-weight: 800;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 56px;
  margin-bottom: 1.5rem;
  color: #fff;
}

/* .holaText {
  color: #FF6B35;
}

.worldText {
  color: #3A86FF;
}

.tourismText {
  color: #4CAF50;
} */

.heroSubtitle {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 400;
  font-size: 2.2rem;
  margin-top: 0;
}

.planesSvg {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Plane initial positions */
.orangePlane {
  transform: translate(700px, 100px) rotate(45deg);
}

.bluePlane {
  transform: translate(800px, 300px) rotate(135deg);
}

.greenPlane {
  transform: translate(500px, 100px) rotate(270deg);
}

/* Plane animations */
@keyframes flyOrangePlane {
  0% {
    transform: translate(700px, 100px) rotate(45deg);
  }
  25% {
    transform: translate(800px, 200px) rotate(90deg);
  }
  50% {
    transform: translate(750px, 350px) rotate(135deg);
  }
  75% {
    transform: translate(600px, 450px) rotate(180deg);
  }
  100% {
    transform: translate(400px, 500px) rotate(225deg);
  }
}

@keyframes flyBluePlane {
  0% {
    transform: translate(800px, 300px) rotate(135deg);
  }
  33% {
    transform: translate(650px, 400px) rotate(180deg);
  }
  66% {
    transform: translate(450px, 500px) rotate(225deg);
  }
  100% {
    transform: translate(300px, 600px) rotate(270deg);
  }
}


@keyframes flyGreenPlane {
  0% {
    transform: translate(500px, 100px) rotate(180deg);
  }
  20% {
    transform: translate(400px, 200px) rotate(45deg);
  }
  40% {
    transform: translate(300px, 300px) rotate(0deg);
  }
  60% {
    transform: translate(200px, 400px) rotate(45deg);
  }
  80% {
    transform: translate(100px, 500px) rotate(90deg);
  }
  100% {
    transform: translate(0px, 550px) rotate(135deg);
  }
}

/* Responsive styles */
@media (max-width: 768px) {
  .heroTitle {
    font-size: 2.5rem;
  }
  
  .heroSubtitle {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  .heroTitle {
    font-size: 2rem;
    margin-top: 50%;
  }
  
  .heroSubtitle {
    font-size: 1.5rem;
  }
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 1200px;
  margin: 2 auto;
}

@media (max-width: 768px) {
  .cards-container {
      grid-template-columns: repeat(1, 1fr);
  }
}

.text-stroke {
  -webkit-text-stroke: 2px rgb(255, 255, 255);
  font-weight: 800;
  color: transparent;
}

.text-stroke2 {
  -webkit-text-stroke: 0.3px rgb(253, 141, 55);
  font-weight: 600;
  color: transparent;
}
.cards-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        max-width: 1200px;
        margin: 10px auto;
        padding: 20px;
}
      
@media (max-width: 1024px) {
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
      
@media (max-width: 768px) {
  .cards-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

.card{
  position: relative;
}