@font-face {
    font-family: 'Flatline Regular';
    src: url('../fonts/Flatline Regular.otf');
}

@font-face {
    font-family: 'Manrope-Bold';
    src: url('../fonts/Manrope-Bold.ttf');
}

@font-face {
    font-family: 'Manrope-Regular';
    src: url('../fonts/Manrope-Regular.ttf');
}

@font-face {
    font-family: 'Manrope-SemiBold';
    src: url('../fonts/Manrope-SemiBold.ttf');
}

html {
    scroll-behavior: smooth;
}

/* LOADER */

video::-webkit-media-controls-panel {
    background-image: linear-gradient(transparent, transparent) !important;
}

.link-vinculo-new-account{
    margin-top: 20px;
    color: white;
    text-decoration: underline;
}

.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.preloader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #323232d1 !important;
    z-index: 100000 !important;
}
.dots .dot {
    display: inline-block;
    width: 35px;
    height: 35px;
    margin: 0 10px 0 10px;
    border-radius: 50%;
    background: #FFF;
    -webkit-animation: dot-dot-dot 1.4s linear infinite;
    animation: dot-dot-dot 1.4s linear infinite;
}
.dots .dot:nth-child(2) {
    animation-delay: .2s;
}
.dots .dot:nth-child(3) {
    animation-delay: .4s;
}

@keyframes dot-dot-dot {
    0%, 60%, 100% {
        -webkit-transform: initial;
        -ms-transform: initial;
        transform: initial;
   }
    30% {
        -webkit-transform: translateY(-25px);
        -ms-transform: translateY(-25px);
        transform: translateY(-25px);
   }
}


/* LOADER */

/* SECCIÓN DE INICIO */

.btn-submit-pc{
    cursor: pointer;
}


.menu-beautyspot{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 30px 15% !important;
}

/* .menu-beautyspot>a{
    position: absolute;
    margin: 0 auto;
    display: block;
    left: 0;
    right: 0;
    width: min-content;
} */

.menu-beautyspot a{
    font-family: 'Manrope-Bold' !important;
    font-size: 1.2em !important;
}

.menu-beautyspot img{
    width: 150px;
}

.items-menu-beautyspot{
    display: flex;
    justify-content: space-evenly;
}

.items-menu-beautyspot a{
    color: rgb(81,81,81) !important;
    font-size: 1em;
    margin: 0px 5px;
    font-family: 'Montserrat-Medium';
    text-transform: uppercase;
    padding: 3px 10px;
    cursor: pointer;
    transition: background-color 5s ease-out 800ms
}

#link-ingresa{
    color: rgb(81, 81, 81) !important;
    font-size: 1.2em !important;
    margin: 0px 5px;
    font-family: 'Montserrat-Medium';
    text-transform: uppercase;
    padding: 3px 10px;
    cursor: pointer;
    transition: background-color 5s ease-out 800ms;
}

.section-ingresa button{
    cursor: pointer;
}

.btn-new-card{
    text-align: center;
    font-family: 'Manrope-Regular';
    color: white;
    font-size: 20px;
    border-radius: 30px;
    border: 1px solid white;
    padding: 2px 15px;
    margin: 0 auto;
    background: transparent;
    max-height: 50px;
    display: block;
    max-width: 230px;
}

.items-menu-beautyspot a:hover{
    color: black;
}

.items-menu-1, .items-menu-2{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.items-menu-1 {
    justify-content: end;
    width: 30%;
}

.items-menu-2 {
    width: 35%;
}

.items-menu-1 .dropdown .dropdown-toggle:focus,
.items-menu-2 .dropdown .dropdown-toggle:focus {
    box-shadow: unset;
}

.items-menu-1 .dropdown .dropdown-toggle:hover,
.items-menu-2 .dropdown .dropdown-toggle:hover {
    text-decoration: underline;
}

.items-menu-1 .dropdown-menu,
.items-menu-2 .dropdown-menu {
    border: 0;
    border-radius: 0px 0px 0.25rem 0.25rem;
    box-shadow: 0px 7px 8px -8px #000;
    padding: 0;
}

.items-menu-1 .dropdown-menu .dropdown-item,
.items-menu-2 .dropdown-menu .dropdown-item {
    margin: 0;
    padding: 8px 10px;
    transition: all 0.3s;
}

.items-menu-1 .dropdown-menu .dropdown-item:last-child,
.items-menu-2 .dropdown-menu .dropdown-item:last-child {
    border-radius: 0 0 0.25rem 0.25rem;
}

.items-menu-1 .dropdown-menu .dropdown-item:hover
.items-menu-2 .dropdown-menu .dropdown-item:hover {
    background-color: #e4e4e4;
}

.items-menu-2 .dropdown-menu .close-session {
    background-color: #ffdfe2;
    color: #dc3545 !important;
}

.items-menu-2 .dropdown-menu .close-session:hover {
    background-color: #eac4c8;
}

.session-menu {
    width: 100%;
}

#elements-session>a{
    font-size: 2em;
}

.section-1-index {
    aspect-ratio: 3 / 2;
    position: relative;
    width: 100%;
}

.section-1-index::after,
.section-1-index > img {
    left: 0;
    position: absolute;
    top: 0;
    width: inherit;
}

.section-1-index::after {
    content: '';
    /* background: linear-gradient(to bottom, #35343457, #b581899e); */
    height: 100%;
    z-index: 0;
}

.section-1-index > img {
    
}

.info-sec1 {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    left: 0;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    z-index: 1;
}

.info-sec1 > h1 {
    color: white;
    font-family: 'Flatline Regular';
    font-size: 80px;
    margin: 0px 40px;
    width: 40%;
    text-shadow: 2px 2px 19px black;
}

.info-sec1 > img {
    object-fit: contain;
    margin: 0px 40px;
    width: 330px;
}

.section-2-index{
    display: flex;
    justify-content: center;
    padding: 80px 100px;
}

.item-sec2{
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px 30px;
}

.item-sec2 img{
    width: 180px;
}

.item-sec2 h2{
    font-family: 'Manrope-Regular';
    margin: 30px 0px;
    text-align: center;
}

.section-4-index{
    display: flex;
    align-items: center;
    padding: 100px 150px;
    justify-content: space-around;
    background-image: url('../images/fondo-sec-4.png');
    background-size: contain;
    background-position: center;
}

.section-4-index img{
    width: 350px;
}

.info-sec4{
    width: 40%;
}

.info-sec4 h1{
    font-family: 'Flatline Regular';
    font-size: 45px;
    color: rgb(150, 83, 126);
}

.info-sec4 p{
    font-family: 'Manrope-Regular';
    font-size: 20px;
    line-height: 1.3;
}

.section-5-index{
    padding: 50px 400px;
}

.section-5-index h2{
    font-family: 'Flatline Regular';
    text-align: center;
    font-size: 45px;
    color: rgb(150, 83, 126);
    margin: 0px 0px 50px 0px;
}

.card-beauty{
    margin: 20px 0px;
    border: 1px solid black !important;
}

.card-header-beauty{
    background: transparent !important;
    border-bottom: 0 !important;
}

.card-body-beauty{
    color: rgb(119, 119, 119);
    font-family: 'Manrope-Regular';
    font-size: 25px;
}

.card-header-beauty button{
    color: black;
    font-family: 'Manrope-Regular';
    font-size: 25px;
    margin: 0px;
    padding: 0.175rem 0rem;
}

.section-6-index{
    display: flex;
    padding: 100px 150px;
    background-image: url('../images/banner-mis-cursos.png');
    background-size: cover;
    background-position: center;
    flex-direction: column;
}

.section-6-index h1{
    color: white;
    font-family: 'Flatline Regular';
    font-size: 50px;
    text-align: center;
    text-transform: uppercase;
}

.section-6-index p{
    font-family: 'Manrope-Regular';
    font-size: 25px;
    text-align: center;
    color: white;
    width: 50%;
    margin: 30px auto;
}

.section-6-index a{
    text-align: center;
    font-family: 'Manrope-Regular';
    color: white;
    font-size: 25px;
    border-radius: 30px;
    border: 1px solid white;
    padding: 5px 40px;
    max-width: 300px;
    margin: 0 auto;
}

.section-7-index{
    display: flex;
    align-items: center;
    padding: 100px 150px;
    justify-content: space-around;
    background-image: url('../images/fondo-sec-4.png');
    background-size: cover;
    background-position: center;
}

.section-7-index img{
    width: 350px;
}

.info-sec7{
    width: 40%;
}

.info-sec7 h2{
    font-family: 'Flatline Regular';
    font-size: 45px;
    color: rgb(150, 83, 126);
}

.info-sec7 p{
    font-family: 'Manrope-Regular';
    font-size: 20px;
}

.section-8-index{
    display: flex;
    justify-content: center;
    padding: 100px 150px;
}

.item-sec8{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 30%;
    margin: 0px 30px;
}

.item-sec8 img{
    object-fit: contain;
    width: 200px;
    margin: 15px 0px;
}

.item-sec8 h2{
    margin: 15px 0px;
    font-family: 'Flatline Regular';
    font-size: 45px;
    color: rgb(150, 83, 126);
    text-align: center;
}   

.item-sec8 p{
    font-family: 'Manrope-Regular';
    font-size: 20px;
    text-align: center;
}

.section-9-index{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 150px;
    background-image: url('../images/fondo-cuadros.png');
    background-size: cover;
    background-position: center;
}

.section-9-index>h1{
    font-family: 'Flatline Regular';
    text-align: center;
    font-size: 50px;
    color: rgb(150, 83, 126);
    margin: 20px 0px;
}

.container-items9{
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.item-sec9{
    margin: 0px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid rgb(150, 83, 126);
    border-radius: 30px;
}

.header-item-sec9{
    margin: 40px;
}

.header-item-sec9 h1{
    font-family: 'Manrope-Bold';
    color: rgb(150, 83, 126);
    margin: 0;
}   

.header-item-sec9 h2{
    font-family: 'Manrope-Regular';
    text-align: center;
    color: rgb(150, 83, 126);
    margin: 0;
}

.body-item-sec9{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0px;
}

#back-body-s9-1{
    background-color: rgb(150, 83, 126);
}

#back-body-s9-2{
    background-color: rgb(219, 149, 164);
}

.body-item-sec9>h2{
    color: white;
    font-family: 'Manrope-Regular';
}

.footer-item-sec9{
    padding: 40px 0px;
}

.footer-item-sec9>a{
    text-align: center;
    font-family: 'Manrope-Regular';
    color: rgb(150, 83, 126);
    font-size: 25px;
    border-radius: 30px;
    border: 2px solid rgb(150, 83, 126);
    padding: 5px 40px;
    max-width: 300px;
    margin: 0 auto;
}

footer{
    display: flex !important;
    align-items: flex-start;
    background-image: url('../images/footer.png');
    background-size: cover;
    background-position: center;
    padding: 100px 150px;
    justify-content: space-evenly;
}

.footer-curso{
    background-image: url('../images/footer2.png');
}

.item-footer{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.item-footer>h1{
    font-family: 'Manrope-Bold';
    color: white;
    font-size: 1.5em;
}

.item-footer>hr{
    background-color: white;
    height: 2px;
    width: 120px;
    display: block;
    margin: 10px auto 10px 0px;
}

.item-footer>a{
    font-family: 'Manrope-Regular';
    color: white;
    margin: 10px 0px;
    font-size: 17px;
}

.content-input-footer{
    display: flex;
    justify-content: center;
    border: 1px solid white;
    padding: 5px 10px;
    margin: 10px 0px;
}

.content-input-footer>input{
    background: transparent;
    border: 0;
    color: white;
    font-family: 'Manrope-Regular';
    margin-right: 20px;
}

.content-input-footer>input::placeholder {
    color: white;
    font-family: 'Manrope-Regular';
}

.content-input-footer button{
    background: transparent;
    border: 0;
    color: white;
    font-family: 'Manrope-Regular';
}

.redes-footer{
    display: flex;
    margin-left: auto;
    margin-top: 20px;
}

.redes-footer>a{
    border: 1px solid white;
    padding: 7px 13px;
    border-radius: 50%;
    margin: 0px 10px;
}

.redes-footer i{
    color: white;
    font-size: 18px;
}
/* SECCIÓN DE INICIO */


/* SECCIÓN DE CURSO */

.section-1-curso {
    aspect-ratio: 1600 / 641;
    position: relative;
}

.section-1-curso::after,
.section-1-curso > img {
    left: 0;
    position: absolute;
    top: 0;
    width: inherit;
}

.section-1-curso::after {
    content: '';
    background: linear-gradient(to bottom, #35343457, #f373869e);
    height: 100%;
    z-index: 0;
}

.section-1-curso > img {
    width: 100%;
}

.info-sec1-curso {
    align-items: flex-start;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 200px;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 1;
}

.info-sec1-curso > h1 {
    color: white;
    font-family: 'Flatline Regular';
    font-size: 80px;
    margin: 20px 0px;
    text-align: left;
    width: 100%;
    text-shadow: 2px 2px 19px black;
}

.info-sec1-curso hr {
    background-color: white;
    height: 2px;
    margin: 10px auto 10px 0;
    width: 50%;
}

.info-sec1-curso p {
    color: white;
    font-family: 'Flatline Regular';
    font-size: 50px;
    text-align: left;
    text-shadow: 2px 2px 19px black;
}

.section-2-curso {
    padding: 100px 150px;
    display: flex;
    flex-direction: column;
}

.section-2-curso h2,
.section-2-curso p {
    text-align: justify;
}

.section-2-curso > h2 {
    font-family: 'Flatline Regular';
    font-size: 45px;
    color: rgb(150, 83, 126);
    margin: 0px 0px 20px 0px;
}

.section-2-curso p {
    font-family: 'Manrope-Regular';
    font-size: 17px;
}

.text-rose{
    background: rgb(219, 149, 164);
    color: white;
    padding: 10px;
}

.section-4-curso{
    display: flex;
    align-items: center;
    padding: 70px 150px;
    justify-content: space-around;
    background: rgb(147,81,123);
    flex-direction: column;
}

.section-4-curso>h1{
    font-family: 'Flatline Regular';
    text-align: center;
    color: white;
    font-size: 50px;
    margin: 10px 0px;
}

.section-4-curso a {
    color: white;
    font-family: 'Manrope-Regular';
    text-align: center;
}

.section-4-curso > a {
    border: 1px solid white;
    border-radius: 30px;
    font-size: 25px;
    margin: 10px auto;
    max-width: 300px;
    padding: 5px 40px;
}

.section-4-curso p a {
    text-decoration: underline;
    transform: all 0.2s;
}

.section-4-curso p a:hover {
    color: #fcbcbc;
}

@keyframes congrats {
    0% { color: #e93333; }
    20% { color: #eba524; }
    40% { color: #eeee28; }
    60% { color: #38e138; }
    80% { color: #3535e9; }
    100% { color:#d43ad4 ; }
}

.lbl-congrats {
    animation-name: congrats;
    animation-duration: 0.6s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    font-weight: 700;
    text-shadow: 0 0 0 #000;
}

.collapse-datos-de-pago {

}

.collapse-datos-de-pago .card-body,
.collapse-pago-realizado .card-body {
    font-family: 'Manrope-Regular';
    text-align: center;
}

.collapse-datos-de-pago .card-body .collapse-label {
    font-weight: 700;
    text-shadow: 0 0 0 #000;
}

.collapse-datos-de-pago .card-body .collapse-value {
    
}

.section-4-curso .collapse-pago-realizado .card-body a {
    color: #000;
    text-decoration: underline;
    transition: all 0.2s;
}

.section-4-curso .collapse-pago-realizado .card-body a:hover {
    color: #d62222;
}

.section-5-curso{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 100px;
}

.section-5-curso>h2{
    font-family: 'Flatline Regular';
    text-align: center;
    font-size: 45px;
    color: rgb(150, 83, 126);
    margin: 0px 0px 50px 0px;
}

.container-items-sec5-curso{
    display: flex;
    justify-content: center;
}

.item-sec5-curso{
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0px 30px;
    max-width: 22em;
}

.item-sec5-curso>img{
    width: 180px;
}   

.item-sec5-curso>h2{
    font-family: 'Manrope-Regular';
    margin: 30px 0px;
    text-align: center;
}

.section-6-curso {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 100px;
    background-image: url('../images/banner-mis-cursos.png');
    background-size: cover;
    background-position: center;
}

.section-6-curso > #section-6-curso-contenido {
    align-items: center;
    display: flex;
    flex-direction: column;
    max-width: 85%;
}

.section-6-curso > h2 {
    font-family: 'Flatline Regular';
    text-align: center;
    color: white;
    font-size: 50px;
}

.section-6-curso p {
    color: white;
    font-family: 'Manrope-Regular';
    font-size: 20px;
    text-align: center;
}

.section-6-curso strong {
    text-shadow: 0 0 2px #93517b;
    transition: all 0.2s;
}

.section-6-curso p:hover strong {
    color: #ffc1e8;
    text-shadow: 0 0 4px #93517b;
}

.section-6-curso a {
    color: #f5deb3;
    transition: all 0.2s;
}

.section-6-curso a:hover {
    color: #e9cf9d;
}

.form-curso{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0px 300px;
    justify-content: center;
}

.form-curso input{
    background: transparent;
    border: 1px solid white;
    padding: 10px 20px;
    margin: 20px 30px;
    width: 400px;
    color: white;
}

.form-curso input::placeholder {
    color: white;
    font-family: 'Manrope-Regular';
}

.section-6-curso button{
    margin-top: 50px;
    background: transparent;
    border: 1px solid white;
    border-radius: 30px;
    padding: 10px 40px;
    font-size: 20px;
    color: white;
    cursor: pointer;
}

.footer-curso .item-footer>h1{
    color: rgb(81, 81, 81);
}

.footer-curso .item-footer>hr{
    background-color: rgb(81,81,81);
}

.footer-curso .item-footer>a{
    color: rgb(81, 81, 81);
}

.footer-curso .content-input-footer{
    border: 1px solid rgb(81,81,81);
}

.footer-curso .content-input-footer>input{
    color: rgb(81, 81, 81);
}

.footer-curso .content-input-footer>input::placeholder {
    color: rgb(81,81,81);
    font-family: 'Manrope-Regular';
}

.footer-curso .content-input-footer button{
    color: rgb(81,81,81);
}

.footer-curso .redes-footer>a{
    border: 1px solid rgb(81,81,81);
}

.footer-curso .redes-footer i{
    color: rgb(81,81,81);
}
/* SECCIÓN DE CURSO */

/* SECCIÓN DE MIS CURSOS */

.section-1-mis-cursos{
    display: flex;
    padding: 100px 150px;
    background-image: url('../images/banner-mis-cursos.png');
    background-size: cover;
    background-position: center;
    flex-direction: column;
}

.section-1-mis-cursos > h1{
    color: white;
    font-family: 'Flatline Regular';
    font-size: 50px;
    text-align: center;
}

.header-list-videos{
    display: flex;
    align-items: center;
    margin: 40px 0px;
}

.header-list-videos>span{
    height: 50px;
    width: 150px;
    background-color: rgb(219, 149, 164);
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}

.header-list-videos>h2{
    font-family: 'Flatline Regular';
    font-size: 45px;
    color: rgb(150, 83, 126);
    margin-left: 20px;
}

.container-row-videos {
    padding: 10px 150px;
}

.container-row-videos h5{
    font-family: 'Manrope-Regular';
    margin: 5px 0px;
}

.container-row-videos h3{
    font-family: 'Manrope-Bold';
    margin: 5px 0px 10px 0px;
    font-size: 40px;
}

.container-videos-mis-cursos{
    display: grid;
    gap: 20px;
    grid-template-columns: auto auto auto;
    margin-bottom: 50px;
}

.item-video {

}

.item-video button {
    background: unset;
    border: unset;
    padding: unset;
    transition: all .2s;
}

.item-video button:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.item-video img{
    width: 100%;
}

.item-video h2{
    font-family: 'Manrope-SemiBold';
    font-size: 30px;
    margin: 10px 0px;
}

.container-row-videos>hr{
    height: 2px;
    width: 100%;
    background-color: black;
    margin: 0px 0px 50px 0px;
}

.section-3-mis-cursos{
    display: flex;
    align-items: center;
    padding: 70px 150px;
    justify-content: space-around;
    background: rgb(147, 81, 123);
    flex-direction: column;
}

.section-3-mis-cursos>h1{
    font-family: 'Flatline Regular';
    text-align: center;
    color: white;
    font-size: 50px;
    margin: 10px 0px;
}

.section-3-mis-cursos>a{
    text-align: center;
    font-family: 'Manrope-Regular';
    color: white;
    font-size: 25px;
    border-radius: 30px;
    border: 1px solid white;
    padding: 5px 40px;
    max-width: 700px;
    margin: 10px auto;
}

.section-3-mis-cursos>hr{
    height: 1px;
    width: 100%;
    background-color: white;
}

.owl-carousel {

}

.owl-carousel .owl-item {
    padding: 0 2em;
}

.owl-carousel .owl-nav {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 4em;
    position: absolute;
    top: 0;
    width: inherit;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
    border-radius: 5em;
    height: 8em;
    opacity: 0;
    transition: all 0.2s;
    transition-delay: 0.1s;
    width: 8em;
}

.owl-carousel:hover .owl-nav .owl-prev,
.owl-carousel:hover .owl-nav .owl-next {
    opacity: 1;
}

.owl-carousel .owl-nav .owl-prev:hover,
.owl-carousel .owl-nav .owl-next:hover {
    background-color: #21252959;
}

.owl-carousel .owl-nav .owl-prev:focus,
.owl-carousel .owl-nav .owl-next:focus {
    outline: unset;
}

.owl-carousel .owl-nav .owl-prev {
    
}

.owl-carousel .owl-nav .owl-next {
    
}

.owl-carousel .owl-nav .owl-prev span,
.owl-carousel .owl-nav .owl-next span {
    display: inline-block;
    font-size: 4em;
    height: 1em;
    line-height: 0.85em;
    width: 1em;
}

.container-evaluacion-final{
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 50px 0px;
}

.container-evaluacion-final>p{
    width: 40%;
    color: white;
    font-size: 20px;
    font-family: 'Manrope-Regular';
}

.container-btn-send-mis-cursos{
    width: 40%;
    display: flex;
    justify-content: space-between;
}

.container-evaluacion-final input{
    width: 50%;
}

.container-evaluacion-final button{
    text-align: center;
    font-family: 'Manrope-Regular';
    color: white;
    font-size: 20px;
    border-radius: 30px;
    border: 1px solid white;
    padding: 2px 15px;
    margin: 0 auto;
    background: transparent;
    max-height: 50px;
    width: 25%;
}

/* SECCIÓN DE MIS CURSOS */


/* SECCIÓN DE INGRESA */

.section-ingresa{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 220px 100px;
    background-image: url('../images/banner-mis-cursos.png');
    background-size: cover;
    background-position: center;
}

.section-ingresa>h2{
    font-family: 'Flatline Regular';
    text-align: center;
    color: white;
    font-size: 50px;
}

.section-ingresa>button{
    margin-top: 50px;
    background: transparent;
    border: 1px solid white;
    border-radius: 30px;
    padding: 10px 40px;
    font-size: 20px;
    color: white;
}

.form-ingresa{
    display: flex;
    width: 100%;
    padding: 0px 300px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.form-ingresa input{
    background: transparent;
    border: 1px solid white;
    padding: 10px 20px;
    margin: 20px 30px;
    width: 400px;
    color: white;
    outline: none;
}

.form-ingresa input::placeholder {
    color: white;
    font-family: 'Manrope-Regular';
}

/* SECCIÓN DE INGRESA */

/* SECCIÓN DE MIS CURSOS */
.container-course-banner {
    align-items: center;
    background-color: #ffd7e0;
    display: flex;
    height: 440px;
    justify-content: space-evenly;
}

.container-course-banner:last-of-type {
    margin-bottom: 2em;
}

.container-course-banner .course-image {
    border-radius: 100px 50px;
    max-height: 260px;
    max-width: 400px;
    overflow: hidden;
}

.container-course-banner .course-image img {
    max-width: inherit;
}

.container-course-banner a {
    background-color: #db95a4;
    color: #000;
    padding: 2em;
    transition: all 0.2s;
}

.container-course-banner a:hover {
    background-color: #e7adb9;
    color: #000;
    text-decoration: none;
    transform: scale(1.1);
}

.modal .modal-dialog {
    max-width: 720px;
}

.modal .modal-content {
    background: linear-gradient(rgb(219, 149, 164), rgb(174 96 113));
}

.modal .modal-header {
    border: unset;
}

.modal .modal-title {
    
}

.modal .modal-body {
    text-align: center;
}

.video-description {
    background-color: #ffc7d3;
    border-radius: 0.6em;
    padding: 1em;
}

.btn-wpp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #96547E;
    color: white;
    padding: 14px 24px;
    border-radius: 40px;
    font-size: 18px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s ease;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}

.btn-wpp:hover {
    background-color: #96547E;
    transform: translateY(-2px);
}

.unit-intro-text {
    font-size: 25px;
    color: #ccc;
    margin-bottom: 8px;
    max-width: 800px;
    margin-left: 50px;
}


@media only screen and (max-width: 980px) {
    /* SECCIÓN DE INICIO */
    .section-1-index{
        height: 500px;
        background-position: center;
    }

    .info-sec1{
        flex-direction: column;
        justify-content: space-evenly;
    }

    .info-sec1>h1{
        width: initial;
        font-size: 40px;
        text-align: center;
    }

    .info-sec1>img{
        width: 150px;
    }

    .section-2-index{
        flex-direction: column;
        align-items: center;
        padding: 40px;
    }

    .item-sec2 img{
        width: 120px;
    }

    .item-sec2 h2{
        font-size: 20px;
    }

    .item-sec2{
        width: initial;
    }

    .section-4-index{
        flex-direction: column;
        padding: 40px;
    }

    .section-4-index img{
        width: 200px;
    }

    .info-sec4{
        width: 100%;
        margin-top: 40px;
    }

    .info-sec4 h1{
        font-size: 35px;
    }

    .info-sec4 p{
        font-size: 18px;
    }

    .section-5-index{
        padding: 40px;
    }

    .section-5-index h2{
        font-size: 30px;
    }

    .card-header-beauty button{
        font-size: 18px;
    }

    .card-body-beauty{
        font-size: 18px;
    }

    .section-6-index{
        padding: 40px;
    }

    .section-6-index h1{
        font-size: 30px;
    }

    .section-6-index p{
        font-size: 18px;
        width: 100%;
    }

    .section-6-index a{
        font-size: 18px;
    }

    .section-7-index{
        padding: 40px;
        flex-direction: column;
    }

    .section-7-index img{
        width: 180px;
    }

    .info-sec7{
        width: initial;
        margin-top: 50px;
    }

    .info-sec7 h2{
        font-size: 30px;
    }

    .info-sec7 p{
        font-size: 18px;
    }

    .section-8-index{
        padding: 40px;
        flex-direction: column;
        align-items: center;
    }

    .item-sec8{
        max-width: 100%;
    }

    .item-sec8 img{
        width: 150px;
    }

    .item-sec8 h2{
        font-size: 30px;
    }

    .item-sec8 p{
        font-size: 18px;
    }

    .section-9-index{
        padding: 40px;
    }

    .section-9-index>h1{
        font-size: 30px;
    }

    .header-item-sec9 h1{
        font-size: 18px;
    }

    .header-item-sec9 h2{
        font-size: 18px;
    }

    .body-item-sec9>h2{
        font-size: 18px;
    }

    .footer-item-sec9{
        padding: 40px 20px;
    }

    .footer-item-sec9>a{
        font-size: 18px;
    }

    .item-sec9{
        margin: 0px 40px 20px 40px;
    }

    .container-items9{
        flex-direction: column;
    }

    footer{
        padding: 40px;
        flex-direction: column;
    }

    .item-footer{
        margin-bottom: 40px;
    }

    .item-footer>h1{
        font-size: 22px;
    }

    .item-footer>a{
        margin: 0px 0px 10px 0px;
    }

    .items-menu-1 {
        width: 100%;
        flex-direction: column;
    }

    .items-menu-2 {
        width: 100%;
        flex-direction: column;
    }

    .items-menu-beautyspot>a{
        display: none;
    }
    /* SECCIÓN DE INICIO */

    /* SECCIÓN DE CURSO */
    .section-1-curso{
        background-position-x: 50%;
        background-size: cover;
        height: 500px;
    }

    .section-2-curso{
        padding: 40px;
    }

    .section-2-curso>h2{
        font-size: 30px;
    }

    .section-2-curso>p{
        font-size: 15px;
    }

    .section-4-curso{
        padding: 40px;
    }

    .section-4-curso>h1{
        font-size: 30px;
    }

    .section-4-curso a {
        font-size: 18px;
    }

    .section-5-curso>h2{
        font-size: 30px;
    }

    .item-sec5-curso>h2{
        font-size: 18px;
    }

    .section-6-curso{
        padding: 40px;
    }

    .section-6-curso>h2{
        font-size: 30px;
    }

    .form-curso{
        padding: 40px;
    }

    .section-6-curso>button{
        font-size: 18px;
    }

    .form-curso input{
        font-size: 18px;
    }

    .info-sec1-curso>h1{
        font-size: 30px;
    }

    .info-sec1-curso p{
        font-size: 18px;
    }

    .info-sec1-curso{
        left: 40px;
        width: auto;
    }

    .container-items-sec5-curso{
        flex-direction: column;
    }

    .section-5-curso{
        padding: 40px;
    }
    /* SECCIÓN DE CURSO */

    /* SECCIÓN DE MIS CURSOS */

    .section-1-mis-cursos{
        padding: 80px 40px;
    }

    .section-1-mis-cursos>h1{
        font-size: 30px;
    }

    .header-list-videos>span{
        height: 30px;
        width: 80px;
    }

    .container-row-videos{
        padding: 20px 40px;
    }

    .section-3-mis-cursos{
        padding: 40px;
    }

    .section-3-mis-cursos>h1{
        font-size: 30px;
    }

    .section-3-mis-cursos>a{
        font-size: 18px;
    }

    .owl-carousel {

    }

    .owl-carousel .owl-item {
        padding: 0 2em;
    }
    
    .owl-carousel .owl-nav {
        padding: 0 1em;
    }

    .owl-carousel.owl-drag .owl-nav .owl-prev,
    .owl-carousel.owl-drag .owl-nav .owl-next {
        background-color: #ffffff40;
    }
    
    .owl-carousel .owl-nav .owl-prev,
    .owl-carousel .owl-nav .owl-next {
        height: 4em;
        opacity: 1;
        width: 4em;
    }
    
    .owl-carousel:hover .owl-nav .owl-prev,
    .owl-carousel:hover .owl-nav .owl-next {
        
    }

    @keyframes bg-opacity-to-0 {
        from {
            background-color: #21252959;
        }
        to {
            background-color: #ffffff40;
        }
    }
    
    .owl-carousel .owl-nav .owl-prev:active,
    .owl-carousel .owl-nav .owl-next:active {
        animation-name: bg-opacity-to-0;
        animation-duration: 0.8s;
    }

    .owl-carousel .owl-nav .owl-prev:hover,
    .owl-carousel .owl-nav .owl-next:hover {
        background-color: #ffffff40;
    }
    
    .owl-carousel .owl-nav .owl-prev:focus,
    .owl-carousel .owl-nav .owl-next:focus {

    }
    
    .owl-carousel .owl-nav .owl-prev {
        
    }
    
    .owl-carousel .owl-nav .owl-next {
        
    }
    
    .owl-carousel .owl-nav .owl-prev span,
    .owl-carousel .owl-nav .owl-next span {

    }

    .container-evaluacion-final{
        flex-direction: column;
    }

    .container-evaluacion-final>p{
        width: auto;
    }

    .container-btn-send-mis-cursos{
        width: auto;
        flex-direction: column;
    }

    .container-evaluacion-final button{
        width: 70%;
        margin: 30px auto;
    }

    .container-videos-mis-cursos{
        overflow: auto;
    }

    .container-row-videos h3{
        font-size: 30px;
    }

    .item-video h2{
        font-size: 20px;
    }

    .item-video img{
        width: 300px;
    }

    .item-video {
        width: auto;
    }

    /* SECCIÓN DE MIS CURSOS */


    /* SECCIÓN DE INGRESA */

    .section-ingresa{
        padding: 40px;
    }

    .section-ingresa>h2{
        font-size: 30px;
    }

    .form-ingresa{
        padding: 40px;
    }

    .section-ingresa>button{
        font-size: 18px;
    }

    .form-ingresa input{
        font-size: 18px;
        width: 300px;
    }

    /* SECCIÓN DE INGRESA */

    /* SECCIÓN DE MIS CURSOS */
    .container-course-banner {

    }

    .container-course-banner:last-of-type {
    
    }

    .container-course-banner .course-image {

    }

    .container-course-banner .course-image img {

    }
    
    .container-course-banner a {
    
    }
}