@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");
:root {
    --primary: hsla(245, 97%, 63%, 0.65);
    --secondary: hsla(133, 89%, 49%, 0.65);
}

body {
    background: #F2F7FF;
    background-repeat: no-repeat;
    background-size: cover;
    color: #000000;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.container-curso {
    font-family: "Poppins", sans-serif;
}

.container-curso .container-info-course-curso .container-detalle-course .container-title-course {
    font-size: 40px;
    font-weight: bold;
    line-height: 2.5rem;
    align-items: center;
    vertical-align: middle;
    text-transform: uppercase;
}

.container-curso .container-info-course-curso .container-detalle-course .rankin-course {
    color: #7C83FD;
    font-weight: 600;
}

.container-curso .container-info-course-curso .container-detalle-course .description-course {
    font-size: 15px;
}

.container-curso .container-info-course-curso .container-detalle-course .codigo-course .container-codigo-course {
    background: #2b4183;
    border-radius: 0.3rem;
    align-items: center;
    vertical-align: middle;
}

.container-curso .container-info-course-curso .container-detalle-course .codigo-course .container-codigo-course button {
    font-size: 14px;
    background: #6777c1;
    border-radius: 0.3rem;
    line-height: 1rem;
    color: #000000;
    text-transform: uppercase;
    width: 100%;
}

.container-curso .container-info-course-curso .container-detalle-course .codigo-course .container-codigo-course .container-button {
    padding: 12px;
}




/*  */

.container-curso .container-info-course-curso .container-detalle-course .start-course .container-start-course {
    background: linear-gradient(to right, #7C83FD, #E0C7E5) !important;
    border-radius: 0.3rem;
    align-items: center;
    vertical-align: middle;
    text-align: center;
}

.container-curso .container-info-course-curso .container-detalle-course .start-course .container-start-course h5 {
    font-size: 14px;
    font-weight: normal;
    color: #fff;
}

.container-curso .container-info-course-curso .container-detalle-course .start-course .container-start-course button {
    font-size: 11px;
    background: #7C83FD;
    border-radius: 0.3rem;
    line-height: 1rem;
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    /* font-weight: bold; */
}

.container-curso .container-info-course-curso .container-detalle-course .start-course .container-start-course .container-button {
    padding: 12px;
}


/*  */

.container-curso .container-info-course-curso .container-detalle-course .start-course .container-start-course button:hover{
    background-color: #6b72f4;
}

.container-curso .container-info-course-curso .container-image-course .image-course {
    height: 300px;
    width: 100%;
    text-align: center;
    position: relative;
    /* position:relative; */
    /* border:1px dashed red; */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* border: 1px solid red; */
}

.container-curso .container-info-course-curso .container-image-course .image-course:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient( 90deg, #F2F7FF, rgba(255, 255, 255, 0), #F2F7FF);
}

.container-curso .container-info-course-curso .container-image-course .image-course img {
    width: 100%;
    display: block;
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
}

.container-curso .container-other-course-curso .row {
    text-align: center;
    color: #7C83FD;
    text-transform: uppercase;
    font-weight: bold;
    justify-content: center;
    letter-spacing: 1px;
}

.container-curso .container-other-course-curso .row .col-lg-4 {
    /* border-left: 1px solid #597c9b;
    border-right: 1px solid #597c9b; */
    font-size: 22px;
    letter-spacing: 1px;
}

.container-curso .container-other-course-curso .row h5 {
    font-size: 15px;
    text-align: center;
    color: #000; 
    text-transform: capitalize;
    font-weight: normal;
    padding-top: 0.5rem;
    letter-spacing: 0px;
}

.container-fluid {
    background: #e0c7e5;
}

.container-fluid .container-links-course-curso {
    text-align: center;
    height: 50px;
    padding: 12px;
    /* padding: 12px .5rem 15px; */
}

.container-fluid .container-links-course-curso .d-flex {
    font-size: 15px;
}

.container-fluid .container-links-course-curso .nav-link-course:hover {
    /* padding-bottom: 1px; */
    border-bottom: 2px solid #597c9b;
    /* border-width: 50%; */
}

.container-fluid .container-links-course-curso .nav-link-course a {
    text-decoration: none;
    color: #000;
    font-weight: 500;
}

.container-fluid .container-detalle-informacion {
    background: linear-gradient(0deg, rgba(231,244,255,1) 25%, rgba(224,199,229,0.9051995798319328) 72%, rgba(255,255,255,1) 100%);
}

.container-fluid .container-detalle-informacion .col-4 img {
    width: 100%;
}

.container-fluid .container-detalle-informacion .col-8 {
    color: #597c9b;
    text-transform: uppercase;
}

.container-fluid .container-detalle-informacion .col-8 h5 {
    font-size: 21px;
}

.container-fluid .container-detalle-informacion .col-8 .container-info-course-detalle {
    border: 1px solid #597c9b;

    padding: 1rem;
    
}

@media (min-width:300px){
    .container-fluid .container-detalle-informacion .col-8{
    position: inherit;
    /*left: 30px;*/
    margin-bottom: 20px;
    width: 300px;
}
 
.container-padre .col-8{
    position:relative;
    right: 10px;
    margin-top: 40px;
   
}
.container-fluid .container-detalle-informacion .col-8 .container-info-course-detalle{


    border: 1px solid #597c9b;
    padding: 1rem;
    width:250px;
}


}
@media (min-width:700px){
    .container-fluid .container-detalle-informacion .col-8{
        position: relative;
        left: 55px;
        margin-bottom: 20px;
        width: 300px;
    }
    .container-padre .col-8{
        position:relative;
        right: 10px;
        margin-top: 40px;
       
    }
    .container-fluid .container-detalle-informacion .col-8 .container-info-course-detalle{
        border: 1px solid #597c9b;
        padding: 1rem;
        width:30em;
    }
    .col-md-5{
        max-width: 40%;
        right: 210px;
    }
}
@media (min-width:1000px) and (orientation: landscape) {
    .col-md-5{
        max-width: 40%;
        right: 60px;
    }
}

@media (min-width:1000px){
    .container-fluid .container-detalle-informacion .col-8  {
      position:relative;
      left: 70px;
      margin-bottom:25px;
      align-self: auto; 
      margin-right:-310px;
      width: 750px;
    }
    .container-padre .col-8{
        position: relative;
        top: -420px;
      
        left: 170px;
    }
    }
    
    @media screen and (min-width:768px) and (max-width:1240px) {
        .col-md-5{
            max-width: 40%;
            right: 60px;
        }
        .container.container-curso{
            /* width: 77em !important; */
            max-width: 77em !important;
        }
        .container-fluid.p-0 {
            width: 77em !important;
        }
        .container-fluid.mt-5{
            width: 77em !important;
        }
        .container-info-course-curso{
            /* width: 70em !important; */
        }
        .container-detalle-informacion.container{
            width: 77em !important;
        }
    }   
        
@media(min-width: 1190px){

    .col-lg-5{
    position: relative;
    right: 100px;
    }
    .container-fluid .container-detalle-informacion .col-8 .container-info-course-detalle{
        width: 35em;
    }

    @media(min-width: 950px){

        .respons{
            margin-left: 118px;
        }
    }
}

@media(min-width: 1180px){

    .respons1{
    position: relative;
    left: 154px;
    width: 50%;
    }
}

@media(min-width: 950px){

    .img-fluid{
    margin-top: 2em;
   
    }
}

    
   

.container-fluid .container-detalle-informacion .col-8 .container-info-course-detalle h5 {
    font-size: 18px;
    color: #7C83FD;
    text-transform: capitalize;
}

.container-fluid .container-detalle-informacion .col-8 .container-info-course-detalle .row {
    text-transform: capitalize;
}

.container-fluid .container-detalle-informacion .col-8 .container-info-course-detalle .row div {
    display: flex;
    width: 35px;
    /* border: 1px solid red; */
}

.container-others h5 {
    font-size: 16px;
    text-transform: uppercase;
    color: #000000;
}

.container-others img {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    width: 100%;
}

.container-others .info {
    text-align: justify;
    font-size: 12px;
}

.container-others .col-8 a {
    color: #000000;
    text-decoration: none;
    background: #d5e7fb;
    font-size: 13px;
    text-align: left;
    width: 760px;
}

.container-others .col-8 .fa-play {
    color: #a8b5ff;
}

@media(min-width:300px){
    
    .container-others .col-8 a {
       /* position:relative;
        left:10px;*/
        /*display: flex;
        align-items: center;*/
       width:350px;
       
    }}
    
    @media(min-width:1000px){
    
        .container-others .col-8 a {
            width: 760px;
           
        }}
        .mb-5{
            width: 300px;
    height: 19px;
    margin-bottom: 20px;
        }
          

/*





    padding-left: 10px;
    height: 151px;
    width: 1050px;
    padding-top: 10px;













*/

.custom-field {
    position: relative;
    font-size: 14px;
    border-top: 5px solid transparent;
    margin-bottom: 5px;
    --field-padding: 12px;
}

.custom-field input {
    border: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #ffffff00;
    padding: var(--field-padding);
    width: 260px;
    outline: none;
    font-size: 14px;
    color: #aaa;
    text-align: center;
}

.custom-field .placeholder {
    position: absolute;
    left: var(--field-padding);
    width: calc(100% - (var(--field-padding) * 2));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    top: 22px;
    text-align: center;
    line-height: 100%;
    transform: translateY(-50%);
    color: #aaa;
    transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease;
}

.custom-field input.dirty+.placeholder,
.custom-field input:focus+.placeholder,
.custom-field input:not(:placeholder-shown)+.placeholder {
    display: none;
}


/* THREE */

.custom-field.three {
    --draw-duration: 0.1s;
    --draw-color: #6777c1;
    --draw-line-width: 2px;
    --draw-easing: linear;
}

.custom-field.three .border {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: none;
    display: flex;
    align-items: center;
    padding-left: 12px;
    border-radius: 3px;
}

.custom-field.three .border::after,
.custom-field.three .border::before {
    content: "";
    width: 0;
    height: 0;
    display: inline-block;
    position: absolute;
    border-radius: 3px;
}

.custom-field.three .border::before {
    left: 0;
    bottom: 0;
    border-right: 0px solid var(--draw-color);
    border-bottom: 0px solid var(--draw-color);
    transition: border 0s linear calc(var(--draw-duration) * 4), height var(--draw-duration) var(--draw-easing) calc(var(--draw-duration) * 2), width var(--draw-duration) var(--draw-easing) calc(var(--draw-duration) * 3);
}

.custom-field.three .border::after {
    right: 0;
    top: 0;
    border-left: 0px solid var(--draw-color);
    border-top: 0px solid var(--draw-color);
    transition: border 0s linear calc(var(--draw-duration) * 2), height var(--draw-duration) var(--draw-easing), width var(--draw-duration) var(--draw-easing) var(--draw-duration);
}

.custom-field.three input:focus~.border::before,
.custom-field.three input:not(:placeholder-shown)~.border::before,
.custom-field.three input.dirty~.border::before,
.custom-field.three input:focus~.border::after,
.custom-field.three input:not(:placeholder-shown)~.border::after,
.custom-field.three input.dirty~.border::after {
    width: 100%;
    height: 100%;
    border-width: var(--draw-line-width);
}

.custom-field.three input:not(:placeholder-shown)~.border::before,
.custom-field.three input.dirty~.border::before,
.custom-field.three input:focus~.border::before {
    transition-delay: 0s, var(--draw-duration), 0s;
}

.custom-field.three input:not(:placeholder-shown)~.border::after,
.custom-field.three input.dirty~.border::after,
.custom-field.three input:focus~.border::after {
    transition-delay: calc(var(--draw-duration) * 2), calc(var(--draw-duration) * 3), calc(var(--draw-duration) * 2);
}

      
@media screen and (max-width: 767px) {
   
    .d-flex {
        flex-wrap: wrap;
        row-gap:5px;
    }
    .d-flex>div {
        flex-basis: 50%;
    }

    .container-fluid .container-links-course-curso {
        
        padding: 0px;
        
    }
}  
      
@media (max-width:700px){
    .container-fluid .container-detalle-informacion .col-8{
        position: relative;
        left: 55px;
        margin-bottom: 20px;
        width: 300px;
    }
    .container-padre .col-8{
        position:relative;
        right: 10px;
        margin-top: 40px;
       
    }
    .container-fluid .container-detalle-informacion .col-8 .container-info-course-detalle{
        border: 1px solid #597c9b;
        padding: 1rem;
        width:30em;
    }
    .col-md-5{
        max-width: 40%;
        right: 210px;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1280px){
    
    .container-info-course-curso{
        /* width: 80em !important; */
    }
   
    .container-fluid.p-0 {
        width: 82em !important;
    }
    .container-fluid.mt-5{
        width: 82em !important;
    }
    .container-detalle-informacion.container{
        width: 82em !important;
    }


}

 .btcursos{
    background-color: #7D84FF; /* Color de fondo azul */
    color: white; /* Color del texto */
    padding: 10px 20px; /* Espaciado interior */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de fuente */
    font-weight: bold;
    cursor: pointer; /* Cursor de mano al pasar */
    transition: background-color 0.3s; /* Transición suave */
 }

 .btcursos:hover {
    background-color: #7a8eff; /* Color al pasar el ratón */
}

@media (max-width: 768px) {
    .btcursos {
        width: 100%; /* El botón ocupa el 100% del ancho en pantallas pequeñas */
        font-size: 14px; /* Tamaño de texto más pequeño */
    }
}