*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: MS Gothic, sans-serif;
    margin: 0;
    padding: 0;
    background-color: black;

}

header {
    background-color: #ff6a00;
    color: #fff;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    max-width: 50px;
    margin-right: 10px;
}

nav {
    display: flex;
    align-items: center;
}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin-right: 20px;
}

.nav-links a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

.burger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    margin-right: 10px; /* Añadimos un pequeño margen para separar del último elemento */
}

.bar {
    height: 5px;
    width: 35px;
    background-color: #fff;
    margin: 6px 0;
}

.swiffy-slider {
    position: relative;
  }
  
  .slider-container {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
  }
  
  .slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto; /* Ajusta según el tamaño de tus imágenes */
  }
  
  .caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    border-radius: 5px;
    text-align: center;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    font-size: 2vw; /* Utiliza una unidad relativa para el tamaño del texto */
  }
  
  /* Media queries para ajustar el tamaño del texto en diferentes tamaños de pantalla */
  @media (min-width: 576px) {
    .caption {
      font-size: 2.3vw;
    }
  }
  
  @media (min-width: 768px) {
    .caption {
      font-size: 2vw;
    }
  }
  
  @media (min-width: 992px) {
    .caption {
      font-size: 2vw;
    }
  }
  
  @media (min-width: 1200px) {
    .caption {
      font-size: 2vw;
    }
  }
  
  .image-overlay {
    position: relative;
    display: inline-block;
  }
  
  .image-overlay img {
    display: block;
  }
  
  .image-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    pointer-events: none;
  }

  /* CSS */
.image-overlay {
    position: relative;
    display: inline-block;
  }
  
  .image-overlay img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .image-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    pointer-events: none;
  }
  
  .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    padding: 0 10px;
    width: 100%;
    max-width: 90%;
    box-sizing: border-box;
  }
  
  .title {
    font-size: 4vw; /* Responsive font size based on viewport width */
    margin: 0;
    color: white !important;
  }
  
  .subtitle {
    font-size: 2.5vw; /* Responsive font size based on viewport width */
    margin: 0;
  }
  
  @media (max-width: 768px) {
    .title {
      font-size: 6vw; /* Adjust font size for smaller screens */
    }
  
    .subtitle {
      font-size: 4vw; /* Adjust font size for smaller screens */
    }
  }
  
  @media (max-width: 480px) {
    .title {
      font-size: 8vw; /* Further adjust font size for very small screens */
    }
  
    .subtitle {
      font-size: 5vw; /* Further adjust font size for very small screens */
    }
  }
  
  
/* Agregamos estilos para pantallas pequeñas */
@media only screen and (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: #ff6a00;
        text-align: center;
        z-index: 1; /* Añadimos un índice z para que esté encima del contenido */
    }

    .nav-links.show {
        display: flex;
    }

    .nav-links li {
        margin: 0;
        padding: 15px 0;
    }

    .burger-menu {
        display: flex;
    }
}

#content {
    max-width: 600px;
    margin: 20px auto;
    text-align: center;
}

img {
    max-width: 100%;
    margin: 10px;
    height: auto;
}

footer {
    background-color: #ff6a00;
    color: #fff;
    text-align: center;
    padding: 1em;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.content{

    margin: 5px;
    border-color: black;
}

.content-section {
    /* Reemplaza 'fondo.jpg' con la ruta de tu imagen de fondo */
    background-size: cover;
    color: red;
    padding: 50px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Añadimos esto para facilitar la posición absoluta de la imagen */
}

.content-text {
    max-width: 600px;
}

.conocenos-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
}

#container-slider {
    position: relative;
    display: block;
    width: 100%;
}

#slider {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 430px; /* Ajusta la altura mínima según sea necesario */
}

#slider li {
    background-repeat: no-repeat;
    background-size: cover; /* Mantenemos cover para dispositivos de mayor tamaño */
    background-position: center;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    z-index: -1;
    opacity: 0;
}

#container-slider .arrowPrev, #container-slider .arrowNext{
    font-size: 30pt;
    color: rgba(204, 204, 204, 0.65);
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50px;
    z-index: 2; 
}

#container-slider .arrowNext {
    left: initial;
    right: 50px !important;
}

.content_slider{
    padding: 15px 30px;
    color: #FFF;
    width: 100%;
    height: 100%;
}

.content_slider div{
    text-align: center;
}

.content_slider h2{
    font-family: 'MS Gothic';
    font-size: 40pt;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.content_slider p {
    font-size: 30pt;
    font-family: 'arial';
    color: #FFF;
    margin-bottom: 20px;
}

#slider li .content_slider{
    background: rgba(0, 0, 0, 0.50);
    padding: 10px 125px;
}

.content_slider{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btnSlider{
    color: #FFF;
    font-size: 15pt;
    font-family: 'MS Gothic';
    letter-spacing: 1px;
    padding: 10px 50px;
    border: 1px solid #CCC;
    background: rgba(13, 13, 13, 0.55);
    border-radius: 31px;
    text-decoration: none;
    transition: .5s all;
}

.btnSlider:hover{
    background: #111;
    border: 1px solid #111;
}

.listslider {
    position: absolute;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 50%;
    bottom: 5%;
    list-style: none;
    z-index: 2;
    transform: translateX(-50%);
}

.listslider li {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    cursor: pointer;
    margin: 0 5px;
}

.listslider li a {
    background: #CCC;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: block;
}

.item-select-slid {
    background: #FFF  !important;
}

@media screen and (max-width: 768px) {
    /* Cambiamos a contain para dispositivos de menor tamaño */
    #slider li {
        background-size: contain;
    }
}

@media screen and (max-width: 460px){
    .content_slider h2 {
        font-size: 30pt !important;
    }
    .content_slider p {
        font-size: 15pt !important;
    }
    #container-slider .arrowPrev, #container-slider .arrowNext{
        font-size: 20pt;
    }
    #container-slider .arrowPrev{
        left: 15px;
    }
    #container-slider .arrowNext{
        right: 15px !important;
    }
    #slider{
        height: 400px;
        min-height: 400px;
    }
    #slider li .content_slider{
        padding: 10px 35px;
    }
    .btnSlider{
        padding: 10px 30px;
        font-size: 10pt;
    }
}


#seccion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    margin: 10%;
}

#spam {
    flex: 1;
    padding: 20px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos en el eje horizontal */
}

.button-wrapper {
    margin-top: 10px; /* Espacio entre el texto y el botón */
}

#spam h2 {
    margin-bottom: 10px; /* Espacio entre el título y el párrafo */
}

#spam p {
    margin-bottom: 10px; /* Espacio entre el párrafo y el botón */
}

#col-spam {
    flex: 1;
    text-align: right;
}

#col-spam img {
    width: 50%; /* Ajusta el tamaño de la imagen al 100% del contenedor */
    max-width: 300px; /* Establece un tamaño máximo para la imagen */
    border-radius: 8px; /* Agrega bordes redondeados para simular una card */
}

h1, h5, h3, h2{
    font-family: 'MS Gothic';
    color: white;
    text-align: center;
}

.info{
    color: white;
}

.section-two{
    text-align: justify;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    margin: 10%;
    background-color: #111;

}

button{
    background-color: #f4511e;
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    border-radius: 15px;
}

button:hover{
    opacity: 1
}

h3{
    display: inline-flex;
    margin: 10px;
    
}

.texto{
    background-color: cadetblue;
    font-size: 40;
    
}

/* Flip card */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back_vision,.flip-card-back_valores, .flip-card-back_mision, .flip-card-back_objetivo, .flip-card-back_filosofia, .flip-card-front_mision, .flip-card-front_valores, .flip-card-front_objetivo, .flip-card-front_filosofia {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 20px;
  }
  
  /* Style the front side (fallback if image is missing) */

  /* card vision */
  .flip-card-front {
    background-color: #f3045f;
    color: black;
  }
  .flip-card-back_vision{
    background-color: #ec7fbb;
    color: black;
    transform: rotateY(180deg);
    font-size: 17px;
    font-weight: bold;
  }

  /* card valores*/
  .flip-card-front_valores{
    background-color: red;
  }

  .flip-card-back_valores{
    background-color: rgb(241, 80, 80);
    color: black;
    transform: rotateY(180deg);
    font-size: 14px;
    font-weight: bold;
  }

/* card msion */
  .flip-card-front_mision{
    background-color: #f2f700;
  }

  .flip-card-back_mision{
    background-color: #fffb00c4;
    color: black;
    transform: rotateY(180deg);
    font-size: 12px;
    font-weight: bold;
  }

  /* card objetivos */
  .flip-card-front_objetivo{
    background-color: #1114e2;
  }

  .flip-card-back_objetivo{
    background-color: #4577d3;
    color: black;
    transform: rotateY(180deg);
    font-size: 16px;
    font-weight: bold;
  }

  /* card filosofia */
  .flip-card-front_filosofia{
    background-color: rgb(18, 243, 29);
  }

  .flip-card-back_filosofia{
    background-color: rgb(104, 240, 70);
    color: black;
    transform: rotateY(180deg);
    font-size: 18px;
    font-weight: bold;
  }
  
  /* Style the back side */
  .flip-card-back {
    color: black;
    transform: rotateY(180deg);
  }

  .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flip-card {
    width: calc(33.33% - 20px); /* Ancho del 33.33% para que haya tres tarjetas en la fila */
    margin: 10px;
}

@media screen and (max-width: 576px) {
    .flip-card {
        width: calc(50% - 20px); /* Ancho del 50% para que haya dos tarjetas en la fila en dispositivos más pequeños */
    }
}


  /* image flip card */

  .icon{
    width: 138px;
    height: 97;
    margin: 10px;
  }

  .title{
    color: #111;
  }

  /* Carrousel */
  #seccion {
    display: flex;
    justify-content: space-around; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
    margin: 10%;
}

  #col-spam {
    text-align: center; /* Centra el contenido del carrusel horizontalmente */
}

  #carousel {
    display: flex;
    justify-content: center; /* Centra horizontalmente las imágenes */
    margin-bottom: 50px;
}

#carousel img {
    display: block;
    max-width: 100%; 
    height: auto;
}

#carousel img:not(:first-child) {
    display: none;
}

/* Responsivo para dispositivos móviles */
@media screen and (max-width: 576px) {
    #seccion {
        flex-direction: column; /* Cambia la dirección del flexbox a columna */
        align-items: center; /* Centra los elementos horizontalmente */
        margin: 5%; /* Reduzca el margen */
    }

    #col-spam {
        text-align: center; /* Centra el texto horizontalmente */
    }

    #col-spam img {
        width: 100%; /* Establece el ancho de la imagen al 100% del contenedor */
        max-width: 300px; /* Establece un tamaño máximo para la imagen */
        border-radius: 8px; /* Agrega bordes redondeados para simular una tarjeta */
    }
}