@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Old+Standard+TT&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,600;1,100&family=Zen+Antique+Soft&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;300;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Poppins:wght@400;700&family=Work+Sans&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400;500;600;700;800&display=swap');

/* PANEL */

/* Inicio del Hero */
.div-container-panel {
    background: linear-gradient(#FFFFFF, #E3E4FF);
    position: relative;
    padding: 50px 20px;
}

.index-row-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Contenedor del título y descripción */
.container-panel {
    text-align: left;
}


/* Imagen del panel a la derecha */
.image-panel {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: -35px;
}




/* ESTILOS GENERALES Formando para el futuro */
.background {
    position: relative;
    padding: 50px 20px;
    text-align: center;
    background-color: #ffffff;
    overflow: hidden;
}

.curve {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400px;
    background-color: #7D84FF;
    clip-path: ellipse(100% 60% at 50% 100%);
}

/* Contenido principal */
.content {
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

/* Título */
.video-title {
    font-size: 3rem;
    color: #7D84FF;
    font-weight: 800;
    font-family: 'Baloo Tamma 2', sans-serif;
    white-space: normal;
}

.video-title span {
    color: #7D84FF;
}

/* Descripción */
.video-description {
    font-size: 1.2rem;
    margin: 20px auto;
    color: #333333;
    line-height: 1.6;
    font-family: "Inter", sans-serif;
    max-width: 800px;
}

/* Contenedor del video */
.video-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* Marco del video */
.video-frame {
    width: 100%;
    max-width: 1064px;
    aspect-ratio: 16 / 9;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* iFrame */
.video-frame iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/* RESPONSIVE */
/* Pantallas pequeñas */
@media (max-width: 1024px) {
    .background {
        padding: 20px 10px;
    }

    .curve {
        height: 300px;
    }

    .video-title {
        font-size: 2rem;
    }

    .video-description {
        font-size: 1rem;
        padding: 0 10px;
    }

    .video-frame {
        max-width: 100%;
    }
}

/* Pantallas grandes */
@media (min-width: 1280px) {
    .video-title {
        font-size: 3.5rem;
    }

    .video-description {
        font-size: 1.3rem;
        max-width: 926px;
    }

    .curve {
        height: 600px;
    }
}




/*RESPONSIVE BLOG*/
@media (min-width: 1280px){

    .float{
        right: 55px;
    }
}



/*RESPONSIVE BLOG*/
@media (min-width: 1024px){
    .background {
        position: relative;
        padding: 50px 20px;
        text-align: center;
        background-color: #ffffff; /* Parte superior blanca */
        overflow: hidden; /* Para ocultar el contenido que sobresale */
    }
    
    .curve {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 890px; /* Altura de la curva */
        background-color: #7D84FF; /* Color de la curva */
        clip-path: ellipse(100% 60% at 50% 100%); /* Forma curva */
    }
    
    .content {
        position: relative;
        z-index: 1;
        margin: 0 auto;
    }
    
    /* Estilos para el título */
    .video-title {
        font-size: 3.5rem;
        color: #7D84FF;
        font-weight: 800;
        white-space: nowrap;
        font-family: "Baloo Tamma 2";
    }
    
    /* Estilos para la descripción */
    .video-description {
        font-size: 1.3em;
        margin-bottom: 30px;
        margin: 0 220px 40px;
        color: #333333;
        line-height: 1.6;
        font-family: "Inter", sans-serif;
    }
    
    /* Estilos para el contenedor del video */
    .video-container {
        display: flex;
        justify-content: center;
    }
    
    /* Estilos para el marco del video */
    .video-frame {
        width: 926px;
        height: 510px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    /* Estilos para el iframe del video */
    .video-frame iframe {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
}





/* Responsive Ofrece*/

@media only screen and (min-width: 390px) and (max-width: 850px) {

    .section-title{
        padding-left: 0px;
    }

    .mt-5 {
        margin-top: 0rem !important;
    }
    .tresCards {
        flex-direction: column;
        align-items: center;
    }
    .card {
        width: 100%;
        max-width: 90%;
        padding: 1.5rem 1rem;
    }
    .card-image img {
        width: 80px;
        height: 80px;
    }
    .card-title p {
        font-size: 1.2rem;
    }
    .card-descripti p {
        font-size: 1rem;
        width: 100%;
    }
    .btcursos {
        font-size: 1.2rem;
        padding: 10px 20px;
    }
    .section-title h2 {
        font-size: 1.5rem;
    }
}



/* .btn_registrar_panel {
    font-size: 16px;
    padding: 1rem 3rem;
    background-color: #7c83fd;
    color: #ffffff;
    transition: all 0.3s ease;
} */

/* .btn_registrar_panel:hover {
    background-color: transparent;
    color: #7c83fd;
    border: 1px solid #7c83fd;
} */


/* MODAL */

.modal-body .row .col-12 .title-modal {
    font-family: "Work Sans", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #000000;
}

.modal-body .row .col-12 .button_close {
    font-family: "Work Sans", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 16px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #000000;
}

.modal-body .row .col-12 span {
    font-family: "Work Sans", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #000000;
}

.cont_titulos {
    padding: 1rem 0;
}

.titulo {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 34px;
    line-height: 51px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #7c83fd;
}

.descripcion {
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    color: #b4b4b4;
}

.btn_registrar {
    background-color: white;
    font-family: "Work Sans", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 21px;
    text-align: center;
    letter-spacing: -0.02em;
    /* border: none; */
    border: 1px solid #7c83fd;
    color: #ffffff;
}

.btn_registrar:active {
    background-color: #5056d3;
}

.btn_registrar:hover{
    background-color: #5056d3;
}

.btn_registrar:hover, .btn_registrar:hover>* {
    color: white;
}

.owl-dot span {
    background-color: #7c83fd !important;
}

.owl-dot:not(.active) span {
    background-color: white !important;
}

.col-md-12 .img_nueva {
    max-width: 500px;
}

.col-md-12 {
    align-items: center;
    align-content: center;
}

/* CARDS BRINDA */

.row {
    margin-right: 0px;
    margin-left: 0px;
} 

.container .row .col-12 .section-title {
    color: #7c83fd;
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
}

/*Títulos Secciones*/
.container .row .col-12 .section-title h2 {
    font-size: 2.2rem;
    font-weight: 800;
    text-transform: uppercase;
    font-family: "Baloo Tamma 2";
}

.container .row .col-12 .section-title span {
    color: #99ccff;
}

.container-fluid-brida .row .col-12 .card {
    max-width: 318px;
    margin: auto;
    border: 3px #7d84fd solid;
    -webkit-transition: background-color 1s linear;
    transition: background-color 1s linear;
    cursor: pointer;
    border-radius: 30px;
}

.container-fluid-brida .row .col-12 .card:hover {
    background: #fafafa;
    border-radius: 30px;
}

.container-fluid-brida .row .col-12:hover>.card{
    transform: scale(1.1);
    transition: all 500ms ease-out;
}

.container-fluid-brida .row .col-12 .card{
    background: transparent;
    -webkit-transition: width 1s ease;
    transition: width 1s ease;
}

/* .container-fluid-brida .row .col-12 .card:hover {
    background: #fafafa;
    border-radius: 30px;
}

.container-fluid-brida .row .col-12 .card:hover>.card-image {
    transform: scale(1.1);
    transition: all 500ms ease-out;
}

.container-fluid-brida .row .col-12 .card-image {
    background: transparent;
    /* border-radius: 30px;
    margin: 0 auto;
    max-width: 121px;
    max-height: 121px; */
   /*  -webkit-transition: width 1s ease;
    transition: width 1s ease;
} */

.card-cursos {
    width: 280px;
    height: 280px;
}

.card-cursos .cursos img{
    width: 100px;
    height: 100px;
}

.card-desarrollo-personal {
    width: 280px;
    height: 280px;
}

.card-desarrollo-personal .desarrollo-personal img{
    width: 70px;
    height: 100px;
}

.card-certificados {
    width: 280px;
    height: 280px;
}

.card-certificados .certificados img{
    width: 90px;
    height: 90px;
}

.container-fluid-brida .row .col-12 .card-title {
    font-family: 'Baloo Tamma 2', cursive;
    font-size: 1.3rem;
    font-weight: 700;
    color: #7C83FD
}

/* .container-fluid-brida .row .col-12 .card-title p {
    margin-bottom: 0;
} */

.container-fluid-brida .row .col-12 .card-descripti {
    font-family: 'Baloo Tamma 2', cursive;
    font-size: 1rem;
    font-weight: 500;
    line-height: 20px;
}

.container-fluid-brida .row .col-12 .card-descripti p {
    margin-bottom: 0;
    color: black;
}

.container-fluid-brida .row .col-12 .section-button {
    margin: 0 auto;
}

.container-fluid-course .row .card .back::before {
    background: rgb(124,131,253);
    background: linear-gradient(90deg, rgba(124,131,253,.7) 0%, rgba(224,199,229,.4) 100%);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
  }

.container-fluid-brida .row .col-12 .section-button button {
    max-width: 339px;
    max-height: 41px;
    background: #7c83fd;
    border-radius: 6px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    border: none;
}

.container-fluid-brida .row .col-12 .section-button button:hover {
    background: #ffffff;
    color: #7c83fd;
    border: 1px solid #7c83fd;
}

.container-fluid-brida .row .col-12 .section-button .btn-success {
    font-size: 14px;
}

/* CURSOS DESTACADOS */

.container-fluid-course {
    /* padding: 0 0 1rem 0; */
    font-family: "Poppins", sans-serif;
}

.container-fluid-course .line {
    background: #99ccff;
    width: 154px;
    height: 6px;
    margin-bottom: 21px;
}

.container-fluid-course .row .card {
    background-color: #ecf1ff;
    max-width: 378px;
    margin: 0 auto;
    min-height: 170px;
    align-items: center;
    align-content: center;
    border: none;
    cursor: pointer;
}

.container-fluid-course .row .card .row a:hover {
    background: #9d9fc5;
   
}

/*//////////////////////////////////////////////////////*/
/* .container-fluid-course .row .card .row {
    min-height: 170px;
    align-items: center;
    align-content: center;
} */

.container-fluid-course .row .card .row .col-12 {
    align-items: center;
    align-content: center;
    padding: 0 1rem;
}

.container-fluid-course .row .card .row .container-image-course {
    text-align: center;
}

.container-fluid-course .row .card .row img {
    min-width: 80px;
    max-width: 80px;
}

.container-fluid-course .row .card .row h4 {
    font-size: 18px;
}

.container-fluid-course .row .card .row h5 {
    font-size: 16px;
}

.container-fluid-course .row .card .row a {
    font-size: 14px;
    text-decoration: none;
    margin: 0rem;
    background: #7C83FD;
    border-color: #7C83FD;
    border-radius: 5px;
    color: #ffffff;
}

/* EMPRESAS */

/* Informacion (Parte izquierda)*/
/* .container-bussines {
    margin-top: 3rem;
    margin-bottom: 4rem; 
}*/

.container-bussines>.info .line {
    background: #99ccff;
    width: 154px;
    height: 6px;
    margin-bottom: 21px;
}

.container-bussines>.info h2 {
    font-size: 56px;
    font-family: "Baloo Tamma 2";
    color: #7c83fd;
    font-weight: 800;
    text-transform: uppercase;
}

.container-bussines2>.info2 h2 {
    font-size: 56px;
    font-family: "Baloo Tamma 2";
    color: #7c83fd;
    font-weight: 800;
    text-transform: uppercase;
}

.container-bussines>.info ul {
    color: #898989;
    padding: 15px;
}

.container-bussines2>.info2 ul {
    color: #898989;
    padding: 15px;
}


.container-bussines>.info ul li {
    /*position: relative;*/
    margin-bottom: 15px;
    line-height: 2rem;
}

.container-bussines2>.info2 ul li {
    /*position: relative;*/
    margin-bottom: 15px;
    line-height: 2rem;
}


.container-bussines>.info ul li i {
    color: #99ccff;
}

.container-bussines>.info .box-email {
    justify-content: center;
    max-width: 100%;
    margin-top: 16px;
}

.container-bussines2>.info2 .box-email2 {
    justify-content: center;
    max-width: 100%;
    margin-top: 16px;
}


.container-bussines>.info .box-email>span {
    font-family: Work Sans;
    font-size: 13px;
}

.container-bussines>.info .box-email .input-data {
    width: 100%;
    display: flex;
    flex-wrap: wrap;  
}

.container-bussines>.info .box-email input[type="email"] {
    border: 1px solid #7c83fd;
    box-sizing: border-box;
    border-radius: 6px;
    font-family: Poppins;
    font-size: 16px;
    text-align: center;
    outline: none;
    padding: 10px 15px;
    width: 100%;
}

.container-bussines>.info .box-email input[type="email"]::placeholder {
    color: #cfd2ff;
}

.container-bussines>.info .box-email button {
    border: none;
    background: #99ccff;
    border-radius: 6px;
    color: #fff;
    font-family: Poppins;
    font-size: 16px;
    cursor: pointer;
    padding: 10px 15px;
    white-space: nowrap;
    margin-top: 5px;
    margin-bottom: 8em;
}

.container-bussines2>.info2 .box-email2 button {
    border: none;
    background: #99ccff;
    border-radius: 6px;
    color: #fff;
    font-family: Poppins;
    font-size: 16px;
    cursor: pointer;
    padding: 10px 15px;
    white-space: nowrap;
    margin-top: 5px;
    margin-bottom: 8em;
}

.container-bussines>.info .box-email button:hover {
    filter: drop-shadow(0 0 3px #00000040);
}

.container-bussines2>.info2 .box-email2 button:hover {
    filter: drop-shadow(0 0 3px #00000040);
}

.container-bussines>.info .box-email .msg-error {
    color: #eb5757;
    font-size: small;
    font-family: Work Sans;
    display: none;
}

.container-bussines>.info .box-email .msg-error.show {
    display: block;
}

.container-bussines .front .box-image img {
    width: 90%;
}

/* Formulario (Parte derecha) */

.container-bussines>.send-data .box-rotate {
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 2s;
    transform: rotateY(0);
    perspective: 1000px;

}

.container-bussines>.send-data .front {
    height: 100%;
    position: absolute;
    background-color: #fff;
}







/* CSS PARA EMPRESAS IMG*/
/*
.sombreado1 {
    background-color: #E3E4FF;
    border-radius: 148px 146px 0 158px;
    padding: 60px 20px 20px 60px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    text-align: center;
}


.sombreado1 img {
    width: 100%;
    border-radius: 20px;
}

*/
.sombreado2 {
    background-color: #E3E4FF;
    border-radius: 148px 146px 158px 0px;
    padding: 62px 60px 60px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    text-align: center;
    max-height: 450px;
    margin-bottom: 11rem;
}


.sombreado2 img {
    width: 100%;
    border-radius: 20px;
}




/* Activar rotacion */

.container-bussines>.send-data .box-rotate.active {
    transform: rotateY(180deg);    
   
}

.container-bussines>.send-data .box-rotate.active .front {
    transition: opacity 1.5s;
    opacity: 0; 
}

.container-bussines>.send-data .back {
    width: 100%;
    height: 100%;
    border-radius: 2%;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.container-bussines>.send-data .back .header {
    display: flex;
    padding: 20px;
    background: linear-gradient(to right, #7C83FD, #E0C7E5) !important;
    border-radius: 6px 6px 0px 0px;
    align-items: center;
}

.container-bussines>.send-data .back .header .box-image img {
    margin: 10px;
}

.container-bussines>.send-data .back .header .box-text h3 {
    font-family: Poppins;
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
}

.container-bussines>.send-data .back .header .box-text span {
    font-family: Work Sans;
    font-size: 13px;
    
    color: #ffffff;
}

.container-bussines>.send-data .back .formu {
    width: 100%;
    background: #dfefff;
    border-radius: 0 0 6px 6px;
    padding: 15px 15px;
}

.container-bussines>.send-data .back .formu .row {
    padding-left: 6px;
    padding-right: 6px;
}

.container-bussines>.send-data .back .formu .row-icon {
    display: grid;
    grid-template-columns: 72px calc(100% - 72px);
}

.container-bussines>.send-data .back .formu .row-icon>.selItem {
    display: flex;
    justify-content: center;
    align-items: center;
    /*position: relative;*/
}

.container-bussines>.send-data .back .formu .row-icon>.selItem>.btn-select {
    cursor: pointer;
    display: grid;
    grid-template-columns: 31px 41px;
    align-items: center;
    background: #E0C7E5;
    padding-left: 5px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    font-size: small;
}

.container-bussines>.send-data .back .formu .row-icon>.selItem>.btn-select>img {
    padding-right: 5px;
}

.container-bussines>.send-data .back .formu .row-icon>.selItem>.btn-select>.code {
    background: inherit;
    color: #5d5fef;
}

.container-bussines>.send-data .back .formu .row-icon>.selItem>ul.sel {
    position: absolute;
    top: 170px;
    right: 130px;
    margin: 0;
    padding: 10px 15px;
    background: #fff;
    border-radius: 5px;
    list-style: none;
    z-index: 99999;
    display: none;
}

.container-bussines>.send-data .back .formu .row-icon>.selItem>ul.sel.show {
    display: block;
}

.container-bussines>.send-data .back .formu .row-icon>.selItem>ul.sel>li {
    white-space: nowrap;
    padding: 5px;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.container-bussines>.send-data .back .formu .row-icon>.selItem>ul.sel>li:hover {
    filter: drop-shadow(16px 16px 20px #00000080);
}

.container-bussines>.send-data .back .formu .row-icon>.selItem>ul.sel>li>.value-item {
    display: none;
}

.container-bussines>.send-data .back .formu .row-icon>.selItem>ul.sel>li>img {
    padding-right: 10px;
}

.container-bussines>.send-data .back .formu .row-icon>input[type="tel"] {
    flex: 1;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.container-bussines>.send-data .back .formu .row-three {
    display: flex;
    align-items: center;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
}

.container-bussines>.send-data .back .formu .row-three>.icon {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #E0C7E5;
}

.container-bussines>.send-data .back .formu .row-three> :nth-child(1) {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.container-bussines>.send-data .back .formu .row-three>input[type="number"] {
    appearance: textfield;
    border-radius: 0;
    text-align: center;
    -moz-appearance: textfield;
}

.container-bussines>.send-data .back .formu .row-three>input[type="number"]::-webkit-outer-spin-button,
.container-bussines>.send-data .back .formu .row-three>input[type="number"]::-webkit-inner-spin-button {
    /* -webkit-appearance: none; */
    margin: 0;
}

.container-bussines>.send-data .back .formu .row-three> :nth-child(3) {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.container-bussines>.send-data .back .formu .row>* {
    flex: 1;
    margin-bottom: 5px;
}



/* .container-bussines>.send-data .back .formu .row>*:last-child {
} */

.container-bussines>.send-data .back .formu .group-control {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: #FFFFFF;
    padding-right: 6px;
    padding-left: 6px;
}

.container-bussines>.send-data .back .formu .group-control span:nth-child(1) {
    font-family: Work Sans;
    font-size: 12px;
    color: #5d5fef;
    margin-bottom: 5px;
}

.container-bussines>.send-data .back .formu .group-control input,
.container-bussines>.send-data .back .formu .group-control textarea {
    border: none;
    outline: none;
    background: #cce4fc;
    border-radius: 6px;
    padding: 0 4px;
    height: 34px;
    resize: none;
    width: 100%;
    border: 2px #E0C7E5 solid;
}

.container-bussines>.send-data .back .formu>.group-control {
    padding-left: 11px;
    padding-right: 11px;
}

.container-bussines>.send-data .back .formu .group-control textarea {
    padding: 5px 10px;
    height: auto;
}

.container-bussines>.send-data .back .formu .box-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 0 0;
}

.container-bussines>.send-data .back .formu .box-btn>button {
    border: none;
    outline: none;
    background: linear-gradient(to right, #7C83FD, #E0C7E5) !important;
    border-radius: 6px;
    font-family: Work Sans;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    padding: 10px 50px;
}

.container-bussines>.send-data .row-three>.icon {
    cursor: pointer;
    user-select: none;
}

.container-bussines .bussines-info {
    margin-left: 3rem;
}

.container-bussines2 .bussines-info {
    margin-left: 3rem;
}



@media (max-width: 1250px) {
    .container-bussines>.info h2 {
        padding-left: 37px;
    }   
}

@media (max-width: 1200px) {
    .container-bussines .bussines-info {
        margin-left: 0rem;
    }
    .col-md-6 .img_nueva {
        margin: 100px auto;
    }
}

@media (max-width: 768px) {
    .container-bussines>.info h2 {
        padding-left: 0;
        font-size: 2rem;
        margin-bottom: 1.2rem;
        /* margin-top: -2em; */
    }
    .container-bussines>.send-data .back {
        width: 100%;
        height: 360px;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        transform: rotateY(180deg);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }
    .section-title{
        /* padding-top: 12rem; */
    }
}

@media (min-width: 768px) {
    .container-bussines {
        display: grid;
        grid-template-columns: 50% 50%;        
    }
    .container-bussines2 {
        display: grid;
        grid-template-columns: 50% 50%;        
    }
}
/*-------------HOME:Bienvenido Educalma----------*/
/*
@media only screen and (min-width:0px) and (max-width:380px) {
    .div-container-panel{
        margin-bottom: -22.5em;
    }
    .image-panel {
        width: 250px;        
        max-width: 100%;    
        height: 220px;       
        max-height: 100%;
        top: 50px;
        margin-left: 20px;      
    }
    .title-panel, .txtBienvenido , .description-panel{
        margin-top: 10px;
        text-align: center;
    }   
}
@media only screen and (min-width:380px) and (max-width:430px) {
    .div-container-panel{
        margin-bottom: -23.5em;
    }
    .image-panel {
        width: 300px;        
        max-width: 100%;     
        height: 220px;       
        max-height: 100%;
        margin-left: 20px;
        top: 12.5px;     
    }
    .title-panel, .txtBienvenido, .description-panel{
        margin-top: 10px;
        text-align: center;
    }

}

@media only screen and (min-width: 450px) and (max-width: 530px) {
    .div-container-panel{
        margin-bottom:-22.5em;
    }
    .image-panel {
        width: 350px;        
        max-width: 100%;     
        height: 320px;       
        max-height: 100%;
        margin-left: 40px;
        top: 60px; 
        opacity: none;    
    }  
    .title-panel, .txtBienvenido, .description-panel{
        margin-top: 460px;
        text-align: center;
    }
}
@media only screen and (min-width: 530px) and (max-width: 600px) {
    .div-container-panel{
        margin-bottom:-22.5em;
    }
    .image-panel {
        width: 350px;        
        max-width: 100%;     
        height: 320px;       
        max-height: 100%;
        margin-left: 90px;
        top: 130px;     
    }  

    .title-panel, .txtBienvenido, .description-panel{
        margin-top: 550px;
        text-align: center;
    }
}
@media only screen and (min-width: 600px) and (max-width: 620px) {
    .div-container-panel{
        margin-bottom: -23.5em;
    }
    .image-panel {
        width: 550px;        
        max-width: 100%;     
        height: 420px;       
        max-height: 100%;
        margin-left: 10px;
        top: 350px;     
    }  

    .title-panel, .txtBienvenido, .description-panel{
        margin-top: -40px;
        text-align: center;
    }
}
@media only screen and (min-width: 620px) and (max-width: 720px) {
    .div-container-panel{
        margin-bottom: -13.5em;
    }
    .image-panel {
        width: 550px;        
        max-width: 100%;     
        height: 420px;       
        max-height: 100%;
        margin-left: 10px;
        top: 350px;     
    }  

    .title-panel, .description-panel{
        margin-top: -10px;
    }
}
@media only screen and (min-width: 720px) and (max-width: 820px) {
    .div-container-panel{
        margin-bottom: -23.5em;
    }
    .image-panel {
        width: 550px;        
        max-width: 100%;     
        height: 420px;       
        max-height: 100%;
        margin-left: 70px;
        top: 350px;     
    }  

    .title-panel, .txtBienvenido{
        margin-top: -180px;
    }
}
*/
/*
@media only screen and (min-width: 900px) and (min-height: 1120px) {
    .div-container-panel{
        margin-bottom: 3.5em;
    }
    
    .brinda{
        margin-top: -13em;
    }
}

@media only screen and (min-width: 1000px) and (min-height: 1120px) {
    
    .brinda{
       margin-top: -13em; 
    }
}
*/

@media only screen and (min-width: 390px) and (min-height: 850px) {
    .div-container-panel{
        height: 80%;
        padding: 97px 20px;
    }
    .container-title-panel{
        padding: 8rem 0rem 10rem 1rem;
    }
    .title-panel, .txtBienvenido{
        color: black;
        font-family: 'Baloo Tamma 2';
        font-weight: 800;
        font-size: 4rem;
        line-height: 8vw;
    }
    .title-panel .txtEducalma{
        color: #7C83FD; /* Color violeta */
        font-family: 'Baloo Tamma 2';
        font-weight: 800;
        font-size: 6rem;
    }
    .description-panel{
        font-family: "Poppins";
        font-size: 1.2rem;
        line-height: 1.8rem;
        color: #333333;
    }
    .row{
        flex-wrap: nowrap;
    }
    .imgpanel{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        height: 100%;
        margin-left: 35px;
        margin-top: 3rem;
    }
    .image-panel {
        max-width: 570px;
        height: 570px;
        margin: 0;
    }
    
    
}   

@media only screen and (min-width: 1120px) and (min-height: 630px) {
    .div-container-panel{
        height: 100%;
        padding: 97px 20px;
    }
    .container-title-panel{
        padding: 8rem 0rem 10rem 1rem;
    }
    .title-panel, .txtBienvenido{
        color: black;
        font-family: 'Baloo Tamma 2';
        font-weight: 800;
        font-size: 3.5rem;
        line-height: 8vw;
    }
    .title-panel .txtEducalma{
        color: #7C83FD; /* Color violeta */
        font-family: 'Baloo Tamma 2';
        font-weight: 800;
        font-size: 5.5rem;
    }
    .description-panel{
        font-family: "Poppins";
        font-size: 1.2rem;
        line-height: 1.8rem;
        color: #333333;
    }
    .row{
        flex-wrap: nowrap;
    }
    .imgpanel{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        height: 100%;
        margin-left: 35px;
        margin-top: 1.5rem;
    }
    .image-panel {
        max-width: 570px;
        height: 509px;
        margin: 0;
    }
    
    
}


@media only screen and (min-width: 1120px) and (min-height: 741px) {
    .div-container-panel{
        height: 100%;
        padding: 97px 20px;
    }
    .container-title-panel{
        padding: 8rem 0rem 10rem 1rem;
    }
    .title-panel, .txtBienvenido{
        color: black;
        font-family: 'Baloo Tamma 2';
        font-weight: 800;
        font-size: 4rem;
        line-height: 8vw;
    }
    .title-panel .txtEducalma{
        color: #7C83FD; /* Color violeta */
        font-family: 'Baloo Tamma 2';
        font-weight: 800;
        font-size: 6rem;
    }
    .description-panel{
        font-family: "Poppins";
        font-size: 1.2rem;
        line-height: 1.8rem;
        color: #333333;
    }
    .row{
        flex-wrap: nowrap;
    }
    .imgpanel{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        height: 100%;
        margin-left: 35px;
        margin-top: 4.6rem;
    }
    .image-panel {
        max-width: 570px;
        height: 570px;
        margin: 0;
    }
    
    
}   

@media only screen and (min-width: 1280px) and (min-height: 720px) {
    .div-container-panel{
        height: 100%;
        padding: 97px 20px;
    }
    .container-title-panel{
        padding: 8rem 0rem 10rem 1rem;
    }
    .title-panel, .txtBienvenido{
        color: black;
        font-family: 'Baloo Tamma 2';
        font-weight: 800;
        font-size: 4rem;
        line-height: 8vw;
    }
    .title-panel .txtEducalma{
        color: #7C83FD;
        font-family: 'Baloo Tamma 2';
        font-weight: 800;
        font-size: 6rem;
    }
    .description-panel{
        font-family: "Poppins";
        font-size: 1.2rem;
        line-height: 1.8rem;
        color: #333333;
    }
    .row{
        flex-wrap: nowrap;
    }
    .imgpanel{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        height: 100%;
        margin-left: 35px;
        margin-top: 4.6rem;
    }
    .image-panel {
        max-width: 570px;
        height: 570px;
        margin: 0;
    }
    
    
}   


@media only screen and (min-width: 1280px) and (min-height: 832px) {
    .div-container-panel{
        height: 100%;
        padding: 97px 20px;
    }
    .container-title-panel{
        padding: 8rem 0rem 10rem 1rem;
    }
    .title-panel, .txtBienvenido{
        font-size: 5rem;
        line-height: 8vw;
    }
    .title-panel .txtEducalma{
        font-size: 8rem;
    }
    .description-panel{
        font-family: "Poppins";
        font-size: 1.6rem;
    }
    .row{
        flex-wrap: nowrap;
    }
    .imgpanel{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        height: 100%;
        margin-left: 35px;
        margin-top: 3.2rem;
    }
    .image-panel {
        max-width: 620px;
        height: 683px;
        margin: 0;
    }
    
    
}


@media only screen and (min-width: 1280px) and (min-height: 1002px) {
    .div-container-panel{
        height: 72%;
        padding: 97px 20px;
    }
    .container-title-panel{
        padding: 8rem 0rem 10rem 1rem;
    }
    .title-panel, .txtBienvenido{
        font-size: 4.5rem;
        line-height: 8vw;
    }
    .title-panel .txtEducalma{
        font-size: 7rem;
    }
    .description-panel{
        font-family: "Poppins";
        font-size: 1.4rem;
    }
    .row{
        flex-wrap: nowrap;
    }
    .imgpanel{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        height: 100%;
        margin-left: 35px;
        margin-top: 3.5rem;
    }
    .image-panel {
        max-width: 570px;
        height: 570px;
        margin: 0;
    }
    
    
}

@media (max-width: 1366px) {
    .div-container-panel {
        padding: 2rem 1rem; /* menos padding para que no se apriete */
    }

    .container-title-panel .txtBienvenido {
        color: black;
        font-family: 'Baloo Tamma 2';
        font-weight: 800;
        font-size: 2rem;
        line-height: 8vw;
    }

    .container-title-panel .txtEducalma {
        color: #7C83FD;
        font-family: 'Baloo Tamma 2';
        font-weight: 800;
        font-size: 4rem;
    }

    .description-panel {
        font-size: 1.1rem;
    }

    .imgpanel img {
        max-width: 100%; /* que no sobresalga */
        height: auto;
    }
}




/*------------------------------------ */


@media (min-width: 768px) and (max-width: 991px) {
    .container-bussines {
        max-width: 90%;
        /* padding: 0; */
    }
    .container-bussines .front .box-image img {
        width: 100%;
    }
    .container-bussines>.info .box-email {
        justify-content: start;
        margin-left: 37px;
    }
    
    @media (min-width:800px) and (max-width:430px){
        .brinda{
            /* margin-top: 9em !important; */
        }
    }
    @media (min-width:800px) and (max-height:400px){
        .brinda{
            /* margin-top: 64em !important; */
        }
    }
    
    @media (min-width:830px) and (min-height:1200px){
        .brinda{
            /* margin-top: 0em !important; */
        }
    }
}


/* btns */

.btn-Emp {
    border: none;
    transition: all 0.3s ease;
    overflow: hidden;
    font-weight:500; position: relative; top: -20px;
    background-color:#737BF1 !important; 
    text-transform: uppercase;
    }
.btn-Emp:after {
    position: absolute;
    content: " ";
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: #1fd1f9; */
    background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
    transition: all 0.3s ease;
    }
.btn-Emp:hover {
    background: transparent;
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
                -4px -4px 6px 0 rgba(116, 125, 136, .2), 
        inset -4px -4px 6px 0 rgba(255,255,255,.5),
        inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
    color: #fff;
    }
.btn-Emp:hover:after {
    -webkit-transform: scale(2) rotate(180deg);
    transform: scale(2) rotate(180deg);
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
                -4px -4px 6px 0 rgba(116, 125, 136, .2), 
        inset -4px -4px 6px 0 rgba(255,255,255,.5),
        inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}


/*btn 9*/
.btn-Emp9 {
    border: none;
    transition: all 0.3s ease;
    overflow: hidden;
    font-weight:500; position: relative; top: 0px;
    background-color:rgb(251,33,117) !important; 
    text-transform: uppercase;
    }
.btn-Emp9:after {
    position: absolute;
    content: " ";
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: #1fd1f9; */
    background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
    transition: all 0.3s ease;
    }
.btn-Emp9:hover {
    background: transparent;
    color: #ffffff;
    }
.btn-Emp9:hover:after {
    -webkit-transform: scale(2) rotate(180deg);
    transform: scale(2) rotate(180deg);
}

.frame {
  width: 90%;
  margin: 40px auto;
  text-align: center;
}


/* Responsive Cursos*/
@media only screen and (min-width: 390px) and (max-width: 850px) {

    .container-fluid-course{
        margin-top: 0px !important;
    }

    .divCursosDestacados{
        margin-top: -50px;
        margin-bottom: -50px;
    }

    /*Títulos Secciones*/
    .container .row .col-12 .section-title h2 {
        font-size: 2rem !important;
        padding-top: 3rem;
        font-weight: 800;
        text-transform: uppercase;
        font-family: "Baloo Tamma 2";
    }

    .btcursos{
        width: 60%;
        margin-top: 2.5rem;
        margin-bottom: 4rem !important;
        font-size: 14px;
    }
}

/* Responsive Empresa */
@media only screen and (min-width: 390px) and (max-width: 850px) {
    .container-bussines {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1.5rem;
        margin-bottom: -8rem;
        height: 100%;
    }

    /* Alinear la info y la imagen */
    .container-bussines .info {
        margin-top: 1.5rem;
    }

    /* Resto del contenido (lista y botón) */
    .container-bussines .bussines-info {
        margin-top: 6rem;
    }

    /* Ajustes de estilo */
    .container-bussines .info h2 {
        font-size: 32px;
    }

    .container-bussines .info ul {
        padding: 0;
    }

    .container-bussines .info ul li {
        font-size: 16px;
        margin-bottom: 10px;
        line-height: 1.5rem;
    }

    .container-bussines .info .box-email button {
        padding: 10px 20px;
        font-size: 14px;
        margin-top: 1rem;
    }

    .container-bussines>.info .box-email button {
        border: none;
        background: #99ccff;
        border-radius: 6px;
        color: #fff;
        font-family: Poppins;
        font-size: 16px;
        cursor: pointer;
        padding: 10px 15px;
        white-space: nowrap;
        margin-top: 20px;
        margin-bottom: 0em;
    }

    .sombreado1 {
        background-color: #E3E4FF;
        border-radius: 110px 122px 0 92px;
        padding: 60px 20px 20px 60px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        max-width: 400px;
        max-height: 290px;
        margin-top: -58rem;
        text-align: center;
    }

    .img-fluid{
        max-width: none;
    }
    
    
    .sombreado1 img {
        width: 312px;
        height: 240px;
        margin-left: -1.5rem;
        margin-top: -1rem;
        border-radius: 20px;
    }
}


/* Responsive Charlas en Linea */
@media only screen and (min-width: 390px) and (max-width: 850px) {
    .container-bussines2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }

    /* Alinear la info y la imagen */
    .container-bussines2 .info2 {
        margin-top: 1.5rem;
    }

    /* La imagen va antes del botón en el flujo natural */
    .container-bussines2 .send-data2 {
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    /* Resto del contenido (lista y botón) */
    .container-bussines2 .bussines-info2 {
        margin-top: 11rem !important;
    }

    /* Ajustes de estilo */
    .container-bussines2 .info2 h2 {
        font-size: 32px;
    }

    .container-bussines2 .info2 ul {
        padding: 0;
    }

    .container-bussines2 .info2 ul li {
        font-size: 16px;
        margin-bottom: 10px;
        line-height: 1.5rem;
    }

    .container-bussines2 .info2 .box-email2 button {
        padding: 10px 20px;
        font-size: 14px;
        margin-top: 1rem;
    }

    .container-bussines2 .bussines-info {
        margin-left: 1rem;
    }

    .container-bussines2>.info2 h2 {
        font-size: 36px;
        font-family: "Baloo Tamma 2";
        color: #7c83fd;
        font-weight: 800;
        text-transform: uppercase;
    }

    .container-bussines2>.info2 .box-email2 button {
        border: none;
        background: #99ccff;
        border-radius: 6px;
        color: #fff;
        font-family: Poppins;
        font-size: 16px;
        cursor: pointer;
        padding: 10px 15px;
        white-space: nowrap;
        margin-top: 5px;
        margin-bottom: 0em !important;
    }

    .sombreado2 {
        background-color: #E3E4FF;
        border-radius: 116px 96px 90px 0px;
        padding: 56px 20px 20px 28px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        max-width: 400px;
        max-height: 290px;
        text-align: center;
        margin-bottom: 0rem;
    }

    .img-fluid{
        max-width: none;
    }
    
    
    .sombreado2 img {
        width: 312px;
        height: 240px;
        margin-left: -1.5rem;
        margin-top: -1rem;
        border-radius: 20px;
    }
}