@import url('https://fonts.googleapis.com/css2?family=Caprasimo&display=swap');

.section {
    position: relative;
  }
  
  .image-container {
    position: relative;
    overflow: hidden; 
    height: 300px;
  }
  
  .section-image {
    width: 100%;
    height: auto; /* Cambiamos height a auto para mantener la proporción original de la imagen */
    display: block; /* Aseguramos que la imagen sea un elemento de bloque */
  }
  
  .section-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.813);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 74px;
    font-family: 'Caprasimo', cursive;
  }
  
  /* Estilos responsivos */
  
  @media screen and (max-width: 768px) {
    .section-title {
      font-size: 38px;
    }
  }
  
  @media screen and (max-width: 480px) {
    .section-title {
      font-size: 36px;
    }
  }






  
  .my-section {
    display: flex;
    flex-wrap: wrap;
  }
  
  .section-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
  }
  
  .left-content {
    flex: 0 0 60%; /* El contenido izquierdo ocupa el 60% del ancho disponible */
  }
  
  .title {
    font-size: 54px;
    margin-bottom: 10px;
    color: #6a6a6a;
    font-weight: 100;
    font-family: 'Caprasimo', cursive;
  }
  
  .text {
    font-size: 26px;
    font-family: 'Open Sans', sans-serif;
    color: #6a6a6a;
  }
  
  .right-content {
    flex: 0 0 40%; /* El contenido derecho (imagen) ocupa el 40% del ancho disponible */
    display: flex;
    justify-content: flex-end;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  @media only screen and (max-width: 768px) {
    .section-content {
      flex-direction: column;
    }
    
    .left-content,
    .right-content {
      flex: 1 1 100%;
    }
  }





  .col-section {
    display: flex;
    flex-wrap: wrap;
    height: 70px;
    width: 100%;
    margin-bottom: 330px;
    clear: both; /* Agrega esta línea para evitar superposiciones */
  }
  
  .col {
    flex-basis: 25%;
    background-color: rgb(70, 70, 70);
  }
  
  .col h2 {
    font-size: 33px;
    margin-bottom: 10px;
    color: white;
    font-weight: 100;
    font-family: 'Caprasimo', cursive;
    margin-top: 6px;
    margin-left: 5px;
  }
  
  .col p {
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    color: rgb(208, 208, 208);
    margin-left: 5px;
    margin-right: 5px;
  }
  
  .col img {
    max-width: 100%;
    height: 400px;
  }
  
  @media only screen and (max-width: 768px) {
    .col-section {
      height: auto;
      margin-bottom: 0;
    }
    
    .col {
      flex-basis: 100%;
    }
  }
  




  .info-section {
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(70, 70, 70);
  }
  
  [class^="info-"] {
    flex-basis: 50%;
  }
  
  .info-title {
    text-align: left;
  }
  
  .info-title h2 {
    font-size: 38px;
    margin-bottom: 15px;
    margin-left: 5px;
    color: wheat;
  }
  
  .info-title p {
    font-size: 24px;
    margin-left: 20px;
    color: white;
    margin-bottom: 10px;
  }
  
  .info-image img {
    width: 100%;
    height: auto;
  }
  
  @media only screen and (max-width: 768px) {
    [class^="info-"] {
      flex-basis: 100%;
      margin-bottom: 10px;
    }
  }


  .powerpoint-dot::before {
    content: "•"; /* Punto estilo bullet */
    color: rgb(255, 255, 255); /* Color del punto */
    margin-right: 5px; /* Espacio entre el punto y el texto */
  }






  .seg-section {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 20px;
  }
  
  .seg-image-container {
    text-align: center;
    margin-right: 20px;
  }
  
  .seg-image {
    max-width: 100%;
    height: 500px;
    width: 3200px;
  }
  
  .seg-content {
    text-align: left;
  }
  
  .seg-title {
    font-size: 53px;
    margin-bottom: 10px;
    color: #6a6a6a;
    font-weight: 100;
    font-family: 'Caprasimo', cursive;
  }
  
  .seg-text {
    font-size: 22px;
    font-family: 'Open Sans', sans-serif;
    color: #6a6a6a;
  }
  
  /* Media Queries */
  @media only screen and (max-width: 768px) {
    .seg-section {
      flex-direction: column;
      padding: 10px;
    }
  
    .seg-image-container {
      margin-right: 0;
      margin-bottom: 20px;
    }
  
    .seg-image {
      height: auto;
      width: 100%;
    }
  }
  
  @media only screen and (max-width: 480px) {
    .seg-title {
      font-size: 20px;
    }
  
    .seg-text {
      font-size: 14px;
    }
  }