/* General styles */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   font-family: 'Roboto', sans-serif;
   line-height: 1.6;
   background-color: #f4f4f4;
   color: #333;
}

/* Header */
header {
   background-color: #333;
   padding: 0;
   position: fixed;
   width: 100%;
   top: 0;
   z-index: 10;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
}
/*@media (min-width: 768px) {}*/
.navbar .logo a img{
   width: 110px;
   height: 70px;
}   
@media (min-width: 320px) {
   .navbar .logo a img{
      width: 140px;
      height: 70px;
   }   
}
@media (min-width: 576px) {
   .navbar .logo a img{
      width: 200px;
      height: 80px;
   }
   .navbar .fetrachi a img{
      width: 180px;
      height: 75px;
   }
}
.navbar .logo h1 {
   color: #fff;
   font-size: 26px;
   font-family: 'Poppins', sans-serif;
   letter-spacing: 2px;
}
.navbar p {
   color: #fff;
   font-size: 26px;
   font-family: 'Poppins', sans-serif;
   letter-spacing: 2px;
}
nav {
   display: flex;
}
nav ul {
   list-style: none;
   display: flex;
   gap: 30px;
}
nav ul li {
   margin-left: 30px;
}
nav ul li a {
   color: #fff;
   font-weight: 500;
   text-transform: uppercase;
   padding: 10px 15px;
   display: inline-block;
   text-decoration: none;
   transition: background-color 0.3s ease;
}

nav ul li a:hover {
   background-color: #ff7f00;
   border-radius: 5px;
}

/* Estilo del ícono de hamburguesa */
/*.hamburger {
   display: none;
   flex-direction: column;
   cursor: pointer;
 }
 */
 .bar {
   width: 30px;
   height: 4px;
   background-color: white;
   margin: 4px 0;
 }
/*
 @media (max-width: 768px) {

   .menu {
     display: none;
     width: 100%;
     flex-direction: column;
     background-color: #333;
   }
 
   .menu li {
     text-align: center;
     width: 100%;
   }
 
   .menu a {
     padding: 10px;
   }
 
   .hamburger {
     display: flex;
   }
 
   .menu.active {
     display: flex;
   }*/
 /*
   .dropdown-menu {
     position: static;
     width: 100%;
   }
 
   .dropdown-menu li a {
     padding: 15px;
   }
 }*/
/* Mobile Menu */
.navbar .menu-toggle {
   display: none;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
}

.navbar .menu-toggle div {
   width: 25px;
   height: 3px;
   background-color: #fff;
   border-radius: 5px;
}
/*
nav ul {
   display: flex;
   flex-direction: row;
}

nav ul li {
   display: inline-block;
}

nav ul li a {
   font-size: 16px;
}
*/
/* Responsive Design */
@media (max-width: 1024px) {
   .navbar {
      justify-content: space-between;
      padding: 0 20px;
   }
   nav ul {
      display: none;
      flex-direction: column;
      background-color: #333;
      position: absolute;
      top: 85px;
      right: 0;
      width: 100%;
      padding: 5px 20px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease-in-out;
      transform: translateX(100%);
   }
   nav ul.open {
      transform: translateX(0);
   }
   nav ul li {
      margin: 10px 0;
      text-align: center;
   }
   nav ul li a {
      font-size: 20px;
      padding: 10px;
      width: 100%;
      display: block;
      text-align: center;
   }
   .navbar .menu-toggle {
      display: flex;
   }
   .menu.open {
      display: flex;
   }
}

/* Header adjustments for very small screens (mobile) */
@media (max-width: 480px) {
   .navbar .logo h1 {
       font-size: 20px;
   }
   nav ul li a {
       font-size: 18px;
   }
}

/* Hero Section */
.imagen-fondo {
	background-image: url(../img/1600x800_2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
   /*background-position-x: left;*/
   
}
#hero {
   /*background: url('../img/1600x800_2.jpeg') no-repeat center center/cover;*/
   background-color: rgb( 0 0 0 / 20%);
   color: white;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 0 20px;
   position: relative;
   transition: opacity 1s ease;
   /*opacity: 0.5;*/
}

#hero .hero-content {
   transform: translateY(20px);
   animation: fadeInUp 1.5s forwards;
}

#hero h2 {
   font-size: 40px;
   margin-top: 10px;
   margin-bottom: 20px;
   font-family: 'Poppins', sans-serif;
}
@media (min-width: 600px) {
   #hero h2 {
      font-size: 50px;
      margin-top: 0px;
   }
}

#hero p {
   font-size: 20px;
   margin-bottom: 30px;
}

.cta-button {
   background-color: #ff7f00;
   color: white;
   padding: 15px 30px;
   font-size: 18px;
   border-radius: 5px;
   text-decoration: none;
   transition: background-color 0.3s ease;
}

.cta-button:hover {
   background-color: #333;
}

@keyframes fadeInUp {
   0% {
       opacity: 0;
       transform: translateY(20px);
   }
   100% {
       opacity: 1;
       transform: translateY(0);
   }
}

/* Section Title */
.section-title h2 {
   font-size: 40px;
   font-family: 'Poppins', sans-serif;
   margin-bottom: 10px;
}

.section-title p {
   /*font-size: 18px;*/
   font-size: 25px;
   color: #555;
   text-align: center;
}

/* About Section */
#about {
   background-color: #fff;
   padding: 80px 20px;
}

.about-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   margin-top: 20px;
   flex-flow: row wrap;
}
.about-content > * {
   padding: 10px;
   flex: 1 100%;
 }
.about-image img {
   width: 100%;
   border-radius: 10px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
}

.about-image img:hover {
   transform: scale(1.05);
}
.about-ahref{
   display: flex;
   justify-content: center;
}
.about-ahref a{
   align-self: center;
}

/*
@media (max-width: 768px) {
   .about-content {
      flex-direction: column;
   }
}
*/
@media (min-width: 600px) {
   .aside { flex: 1 0 0; }
}

/* Events Section */
#events {
   background-color: #f9f9f9;
   padding: 80px 20px;
}

.events-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 30px;
   justify-content: center;
   /*display: flex;
   justify-content: center;
   gap: 30px;*/
   /*display: flex;
   justify-content: space-between;
   flex-flow: row wrap;
   gap: 20px;*/
}
.events-grid-equipo {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
   gap: 30px;
   justify-content: center;
   /*display: flex;
   justify-content: center;
   gap: 30px;*/
   /*display: flex;
   justify-content: space-between;
   flex-flow: row wrap;
   gap: 20px;*/
}
/*
@media (min-width: 600px) {
   .events-grid{ 
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      
      /*grid-template-columns: repeat(2, minmax(10px, 1fr));* /
      gap: 30px;
      justify-content: space-between;
      place-items: center;
   }
}*/

.event-card {
   background-color: white;
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   text-align: center;
   transition: transform 0.3s ease;
   margin-top: 10px;
}

.event-card:hover {
   transform: translateY(-10px);
}

.event-card h3 {
   font-size: 24px;
   margin-bottom: 10px;
}

.event-card p {
   margin-bottom: 15px;
}

/* Gallery Section */
#gallery {
   background-color: #fff;
   padding: 80px 20px;
}
/*
.gallery-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}
*/
.gallery-grid {
   display: flex;
   justify-content: center;
   flex-flow: row wrap;
   gap: 20px;
}
@media (min-width: 768px) {
   .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
   }
}

.gallery-grid img {
   width: 100%;
   height: 300px;
   border-radius: 10px;
   transition: transform 0.3s ease, filter 0.3s ease;
   object-fit: cover;
}

.gallery-grid img:hover {
   transform: scale(1.05);
   filter: brightness(80%);
}

.gallery-ahref{
   display: flex;
   justify-content: center;
   margin-top: 10px;
}
.gallery-ahref a{
   align-self: center;
}

.desc_img {
   padding: 10px;
   text-align: center;
   border: 1px solid #ccc;
   border-radius: 10px;
 }

 .desc_img:hover {
   border: 1px solid #777;
 }

/* Contact Section */
#contact {
   padding: 80px 20px;
   background-color: #f4f4f4;
   text-align: center;
}

#contact form {
   max-width: 600px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
}

#contact input,
#contact textarea {
   padding: 12px;
   margin: 10px 0;
   border-radius: 5px;
   border: 1px solid #ddd;
}

#contact button {
   background-color: #ff7f00;
   color: white;
   padding: 15px;
   border-radius: 5px;
   border: none;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

#contact button:hover {
   background-color: #333;
}

/* Footer */
footer {
   background-color: #333;
   color: white;
   text-align: center;
   padding: 20px;
}
footer .social-links{
   margin-top: 5px;
}
footer .social-links a {
   color: #fff;
   margin: 0 15px;
   text-decoration: none;
}
footer .social-links .mi-icono:hover {
   color: #ff7f00;
}