@font-face {
    font-family: 'Abadi';
    src: url('../fonts/abadi/abadi-mt-condensed-extra-bold.woff2') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad';
    src: url('../fonts/myriad/MYRIADPRO-BOLD.OTF') format('opentype'),
    src: url('../fonts/myriad/MYRIADPRO-CONDIT.OTF') format('opentype'),
         url('../fonts/myriad/MYRIADPRO-REGULAR.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4 {
  font-family: Myriad, sans-serif !important;
}


.carousel-container {
  perspective: 1200px;
  width: 400px;
  height: 300px;
  margin: 60px auto;
  position: relative;
}

.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  width: 100px;
  height: 100px;
  background: #3498db;
  color: white;
  line-height: 100px;
  text-align: center;
  position: absolute;
  left: 150px;
  top: 100px;
  border-radius: 12px;
  font-size: 22px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
/*  transition: transform 1s, opacity 0.5s;*/
  transition: 
    transform 0.3s ease,
    opacity 0.3s ease,
    filter 0.3s ease;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}



.footer {
  background-color: #000; /* Fondo negro */
  padding: 40px 0;
  text-align: center;
}

.social-media {
  display: flex;
  justify-content: center;
  gap: 30px; /* Espacio entre íconos */
  margin-top: 40px;
}

.social-link {
  color: white;
  font-size: 24px;
  border: 2px solid white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
  text-decoration: none;
}

.social-link:hover {
  background-color: white;
  color: #000;
  transform: scale(1.1);
}