html,
body {
    overflow-x: hidden;
    /* Hides the horizontal scroll */
    margin: 0;
    /* Ensure there's no default margin that causes overflow */
    padding: 0;
    /* Ensure no padding causes overflow */
    width: 100%;
    /* Ensure the width is 100% */
}

.commitment-text {
    font-size: 1.6rem; 
    font-family: 'League Spartan', sans-serif;
    color: #333; 
    line-height: 1.5; 
    margin-bottom: 10px; 
  }

.bg-yellow {
    background-color: #FFCC00;
    padding-bottom: 10px !important;
}

.bg-yellow-1 {
    background-color: rgb(255, 191, 0);
}

.p-top {
    padding-top: 40px !important;
}

.p-bottom {
    padding-bottom: 40px !important;
}

.p-top-32 {
    padding-top: 32px !important;
}

.p-top-24 {
    padding-top: 24px !important;
}

.p-bottom-24 {
    padding-bottom: 24px !important;
}

.cumplimiento-normativo {
    position: relative;
    width: 100vw;
    height: 89vh; 
    overflow: hidden;
  }

  .cumplimiento-normativo img {
    width: 100%;
    height: 100%; 
    object-fit: cover;
    object-position: center;
  }

  /* Ajustes al overlay y el texto */
.overlay {
    position: absolute;
    top: 60%;  
    left: 50%;  
    transform: translate(-50%, -50%);  /* Centra el overlay tanto horizontal como verticalmente */
    background-color: rgba(0, 0, 0, 0.6); /* Hacer el overlay más transparente */
    padding: 30px 30px 30px 30px;  /* Agrega padding a los lados derecho e izquierdo */
    text-align: center;  /* Asegura que el contenido dentro del overlay esté centrado */
    width: auto;
    max-width: 90%;
  }
  
  .overlay h1 {
    text-transform: none !important;
    font-size: 53px; /* Ajuste de tamaño del texto para que se vea más proporcionado */
    margin: 0;
    text-transform: uppercase; /* Texto en mayúsculas */
    letter-spacing: 2px; /* Espaciado entre letras para mejor legibilidad */
    font-family: 'League Spartan', sans-serif;
  }

  .btn-black {
    background-color: #000;
    color: #fff;
    border-radius: 25px;
    padding: 10px 20px;
    font-weight: bold;
}

.btn-black:hover {
    background-color: #333;
    color: #fff;
}


/*************************************************************************************** RESPONSIVE ************************************************************************************* */
@media (min-width: 1001px) and (max-width: 1450px) {

    .overlay{
        padding: 30px 20px 30px 20px;  /* Agrega padding a los lados derecho e izquierdo */
        width: 70%;
    }
}


@media (min-width: 768px) and (max-width: 1000px) {

    .overlay h1{
        font-size: 35px;
    }

    .overlay{
        padding: 30px 20px 30px 20px;  /* Agrega padding a los lados derecho e izquierdo */
        width: 70%;
    }
    
}

@media (min-width: 577px) and (max-width: 767px) {

    .overlay h1{
        font-size: 40px;
    }

    .overlay{
        padding: 30px 5px 30px 5px;  /* Agrega padding a los lados derecho e izquierdo */
        width: 70%;
    }
    
}


@media (min-width: 351px) and (max-width: 576px) {

    .overlay h1{
        font-size: 30px;
    }

    .overlay{
        padding: 30px 5px 30px 5px;  /* Agrega padding a los lados derecho e izquierdo */
        width: 90%;
    }
 
}

@media (min-width: 200px) and (max-width: 350px) {
    
    .overlay h1{
        font-size: 15px;
    }

    .overlay{
        padding: 30px 5px 30px 5px;  /* Agrega padding a los lados derecho e izquierdo */
        width: 99%;
    }

    .overlay p{
        font-size: 10px;
    }

}