.custom-section {
   /*background: linear-gradient(90deg, #5f8ad8 0%, #636363 100%);*/
    background: #ffffff;
    color: #fff;
    padding: 4rem 2rem;
    position: relative;
    /*overflow: hidden;*/
    min-height: 300px;
}
  
  .custom-section .title {
      font-size: 2.5rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
      text-align: left;
      color: rgb(26, 26, 9);
  }
  
  .custom-section .text {
      font-size: 1.1rem;
      text-align: left;
      margin-bottom: 2rem;
      color: rgb(10, 10, 9);
  }
  
  .custom-section .btn-custom {
      background-color: #f15555;
      color: #fff;
      padding: 0.75rem 1.5rem;
      border-radius: 20px;
      text-decoration: none;
      font-weight: bold;
      display: inline-block;
      width: auto;
  }
  
  .custom-section .btn-custom:hover {
      background-color: #cc0000;
  }


 
  .custom-section .person-image {
      position: absolute;
      bottom: -20px;
      left: 70%; 
      transform: translateX(-50%); 
      width: 300%;
      height: auto;
      max-width: 550px;
      z-index: 1;
      border-radius: 25px 0px 25px 0px;
  }
  
   @media (max-width: 1200px) {
      .custom-section .title {
          font-size: 2rem;
          text-align: center;
      }
      .custom-section .text {
          font-size: 1rem;
          text-align: center;
      }

.custom-section .person-image {
    max-width: 90%; /* Ajusta el tamaño en pantallas grandes */
    max-height: 70%; /* Evita que la imagen sea demasiado alta */
    bottom: 10px; /* Ajuste fino para la posición */
    height: auto;
    border-radius: 25px 0px 25px 0px;
    position: static; /* Cambia a flujo normal en pantallas pequeñas */
    transform: none; /* Elimina el desplazamiento */
    margin-top: 1rem; /* Espacio superior para evitar superposición */
    bottom: 0;
    left: 50%;
    z-index: 1
  }
  
}
  
  @media (min-width: 992px) and (max-width: 1199.98px) {
      .custom-section .title {
          font-size: 2rem;
          text-align: center;
      }
      .custom-section .text {
          font-size: 0.9rem;
          text-align: center;
      }

.custom-section .person-image {
        position: static; /* Integra la imagen en el flujo de la cuadrícula */
        transform: none; /* Elimina el desplazamiento */
        max-width: 100%; /* Ocupa el ancho completo de las 6 columnas */
        margin: 0 auto; /* Centra la imagen en el contenedor */
  }
  
}

  @media (max-width: 992px) {
      .custom-section .title {
          font-size: 2rem;
          text-align: center;
      }
      .custom-section .text {
          font-size: 0.9rem;
          text-align: center;
      }

.custom-section .person-image {
    max-width: 90%; /* Ajusta el tamaño en pantallas grandes */
    max-height: 70%; /* Evita que la imagen sea demasiado alta */
    bottom: 10px; /* Ajuste fino para la posición */
    height: auto;
    border-radius: 25px 0px 25px 0px;
    position: static; /* Cambia a flujo normal en pantallas pequeñas */
    transform: none; /* Elimina el desplazamiento */
    margin-top: 1rem; /* Espacio superior para evitar superposición */
    bottom: 0;
    left: 50%;
    z-index: 1
  }
  
}
  
@media (max-width: 576px) {
    .custom-section {
        padding: 2rem 1rem;
    }

    .custom-section .title {
        font-size: 1.5rem;
    }

    .custom-section .text {
        font-size: 0.9rem;
    }

    .custom-section .person-image {
      max-width: 100%; /* Asegura que la imagen no desborde el contenedor */
      height: auto;
      border-radius: 25px 0px 25px 0px;
      position: static; /* Cambia a flujo normal en pantallas pequeñas */
      transform: none; /* Elimina el desplazamiento */
      max-width: 100%; /* Ajusta al ancho del contenedor */
      margin-top: 1rem; /* Espacio superior para evitar superposición */
      bottom: 0;
      left: 50%;
      z-index: 1
    }

}
/*============================================custom-section2=========================*/


.custom-section2 {

    background-color: #1a1a1a;
    color: #fff;
    padding: 4rem 2rem;
    position: relative;
    min-height: 400px;
}


.custom-section2 .title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-align: left;
    color: beige;
}


.custom-section2 .text {
    font-size: 1.1rem;
    text-align: left;
    margin-bottom: 2rem;
    color: beige;
}
  

  

.custom-section2 .btn-custom {
    background-color: #4797d8;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    width: auto;
}

.custom-section2 .btn-custom:hover {
    background-color: #000874;
}


.custom-section2 .person-image {

      position: absolute;
      bottom: -20px;
      left: 35%; 
      transform: translateX(-50%); 
      width: 300%;
      height: auto;
      max-width: 550px;
      min-width: 160px;
      z-index: 1;
      border-radius: 25px 0px 25px 0px;
}

@media (max-width: 576px) {
    .custom-section2 {
        padding: 2rem 1rem;
    }
    .custom-section2 .title {
        font-size: 1.5rem;
    }
    .custom-section2 .text {
        font-size: 0.9rem;
    }

    .custom-section2 .person-image {
      max-width: 100%; /* Asegura que la imagen no desborde el contenedor */
      height: auto;
      border-radius: 25px 0px 25px 0px;
      position: static; /* Cambia a flujo normal en pantallas pequeñas */
      transform: none; /* Elimina el desplazamiento */
      max-width: 100%; /* Ajusta al ancho del contenedor */
      margin-top: 1rem; /* Espacio superior para evitar superposición */
      bottom: 0;
      left: 50%;
      z-index: 1
    }

}

@media (max-width: 992px) {
    .custom-section2 .title {
        font-size: 2rem;
        text-align: center;
    }
    .custom-section2 .text {
        font-size: 1rem;
        text-align: center;
    }

    .custom-section2 .person-image {
    max-width: 90%; /* Ajusta el tamaño en pantallas grandes */
    max-height: 70%; /* Evita que la imagen sea demasiado alta */
    bottom: 10px; /* Ajuste fino para la posición */
    height: auto;
    border-radius: 25px 0px 25px 0px;
    position: static; /* Cambia a flujo normal en pantallas pequeñas */
    transform: none; /* Elimina el desplazamiento */
    margin-top: 1rem; /* Espacio superior para evitar superposición */
    bottom: 0;
    left: 50%;
    z-index: 1
  }

}