body {
    font-family: 'Red Hat Display', sans-serif;
}

::selection {
    background: #00d9b2; /* Color de fondo al seleccionar texto */
    color: white; /* Color del texto seleccionado */
}

.heading-1,
.heading-2,
.heading-3,
.heading-4,
h1, h2, h3, h4, h5, h6 {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-align: left;
    text-size-adjust: none;
    -webkit-font-smoothing: subpixel-antialiased;
    box-sizing: border-box;
    margin-bottom: 0px;
    font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    color: rgb(50, 33, 83);
    line-height: 1.25;
    
    font-size: 55px;
    margin-top: 5px;
    visibility: visible;
    animation-delay: 0.05s;
    animation-name: fadeInUp;
}

.title-3 {
    color: rgb(22, 214, 156);
    font-size: 36px;
    font-weight: 600;
}

.title-4 {
    color: rgb(22, 214, 156);    
    font-weight: 600;
}

p {
    font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    color: #65587E;
}

.big {
    line-height: 1.6;
    font-size: 20px;
    margin-top: 15px;
}

/*============ Hero section ============*/

section.hero-section {
    padding-bottom: 12%;
}

.overlay-white {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
    z-index: 1;
}

.content-layer {
    position: relative;
    z-index: 2;
}

/*============ End Hero section ============*/


/*============ Price section ============*/

/*.container-pricing {
    display: flex;
    flex-direction: row;
    padding: 1rem;
}

.pricing-body {
    display: flex;
    overflow-x: auto;*/
    /*gap: 1rem;*/
    /*scroll-snap-type: x mandatory;
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.pricing-body li {
    flex: 0 0 auto;
    min-width: 200px;
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 8px;
    scroll-snap-align: start;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.pricing-total {
    background: #28e49c;
    padding: 1.5rem;
    border-radius: 8px;
    color: white;
    text-align: center;
}*/

/* Opcional: mejor scroll */
/*.pricing-body::-webkit-scrollbar {
    height: 8px;
}

.pricing-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}*/

.section-offset {
    position: relative;
    z-index: 10;
}

.section-offset .offset-element {
    position: relative;
    margin-top: -7.8%;
}

.pricing {
    display: flex;
    flex-wrap: wrap;
    background: white;
    box-shadow: 0 25px 90px rgba(50, 33, 83, 0.08);
    
    overflow: hidden;
}

.pricing-body {
    /*display: flex;
    flex: 1 1 1;
    flex-grow: 1;
    padding: 5%;
    gap: 1.5rem;
    overflow-x: auto;
    list-style: none;
    margin: 0;*/

    overflow-x: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.625;
    color: #65587E;
    text-align: left;
    font-size: 16px;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: subpixel-antialiased;
    visibility: visible;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 5% 4%;
    flex-grow: 1;
    display: flex;
    padding-right: 2%;
}

.pricing-body li {
    /* max-width: 33.333%;
    flex-shrink: 0;
    border-right: 1px solid #eaeaea;
    padding-right: 1.5rem;*/

    border-right: 1px solid #eaeaea;
    /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */
    /* font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; */
    /* font-weight: 400; */
    /* line-height: 1.625; */
    /* color: #65587E; */
    /* font-size: 16px; */
    /* -webkit-text-size-adjust: none; */
    /* -webkit-font-smoothing: subpixel-antialiased; */
    /* visibility: visible; */
    /* list-style: none; */
    /* box-sizing: border-box; */
    /* display: block; */
    /* position: relative; */
    padding: 0 4%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
    padding-right: 5%;
    padding-left: 0;
}

.pricing-body li:first-child {
    padding-left: 0%;
}

.pricing-body li {
    padding-left: 5%;
    padding-right: 5%;
}

.pricing-body li:last-child {
    border-right: none;
    padding-right: 0%;
}

.pricing-total {
    /*flex: 0 0 100%;*/
    background: #00F2A9;
    color: white;
    /*text-align: center;*/
    padding: 5% 4%;
    /*max-width: 25%;*/
    width: 100%;
}

.pricing-total.novi-bg {
    flex-basis: 25%;
    /*max-width: 25%;*/
}

.pricing-title {
    /*line-height: 1.625;*/
    color: #16D69C;
    font-size: 50px;
    /*margin-top: 34px;*/
}

.pricing-subtitle {
    font-size: 22px;
}

.pricing-text {
    line-height: 1.625;
    color: #65587E;    
    margin-top: 34px;
}

/*============ End Price section ============*/

/*============ Media Queries ============*/


@media (min-width: 769px) {
     .pricing .pricing-body li {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}


@media (max-width: 768px) {
    .pricing-section {
        flex-direction: column;
    }

    .pricing-body {
        flex-direction: row;
        overflow-x: auto;
        padding: 1rem;
    }

    .pricing-body li {
        flex: 0 0 auto;
        max-width: none;


        /*width: 70%;*/
        /* min-width: 250px;*/
    }

    .pricing-total {
        width: 100%;
        padding: 1rem;
    }
}
 

    @media (max-width: 991px) {


        /*Section Prices*/
        .pricing-body {
        }

        .pricing.pricing-1 {
            flex-direction: column;
        }

        .pricing-body {
            flex-direction: row;
            overflow-x: auto;
        }

        .pricing-body li {
            flex: 0 0 auto;
            /*min-width: 250px;*/
            max-width: none;
            border-right: 1px solid #eaeaea;
        }

        .pricing-total {
            width: 100%;
            margin-top: 2px;
            border-left: none;
            display: flex;
            justify-content: center; /*justify-content: space-between;*/
            align-items: center;
            padding: 1rem 2rem;
        }

        .pricing-total > * + * {
            margin-left: 30px;
        }

        .pricing-text {
            margin-top: 6px;
        }


        /*Section About the course*/
        .section.about-the-course {
            padding-top: 90px;
        }

        .about-the-course h6.title-3 {
            margin-top: 0px;
            margin-bottom: 5px;
        }

        h1 {
            font-size: 45px;
        }

        h2 {
            font-size: 24px;
        }

        .title-3 {
            font-size: 24px;
        }
        /*.about-the-course h1 {
            font-size: 45px;
        }*/
        .row-20 > * {
            margin-bottom: 10px;
        }


        /*Section Target group*/

        .section-target-group div.row-md {
            margin-top: 25px;
        }

        .section.section-target-group {
            padding-top: 70px;
        }
        
 

    }

    @media (max-width: 1199px) {

        /*Section Prices*/
        .heading-1 {
            font-size: 40px;
        }

        /*Section About the course*/
        .row > [class*='col'] {
            padding-left: 15px;
            padding-right: 15px;
        }

        .big {
            font-size: 18px;
        }
    }

@media (max-width: 767px) {

    /*Section About the course*/
    .section.about-the-course {
        padding-top: 60px 0;
    }

    /*Section Target-group*/
    .section.section-target-group {
        padding-top: 70px;
    }
}

@media (max-width: 767px) {
    h1, h2 {
        font-size: 32px;
    }

    .row-30 > * {
        margin-bottom: 30px;
    }

    .row > div[class*='col'] {
        padding-left: 10px;
        padding-right: 10px;
    }

    
}

/*Section Programa del curso*/
/*slider*/

@media(min-width:768px) {

    .program-left::before {
        position: absolute;
        content: '';
        top: 50%;
        right: 6%;
        width: 0;
        height: 86.6%;
        border-left: 1px solid #f1eff3;
        transform: translateY(-50%);
    }

}

@media(max-width:767px) {

    div.program-info .pricing-text {
        margin-top: 0px;
    }

    .program-info {
        display: flex;
        /* align-content: center; */
        /* flex-wrap: nowrap; */
        flex-direction: row;
        text-align: center;
        align-items: baseline;
        flex-wrap: wrap;
    }

    .program-info > * {
        margin-right: 15px;
    }

    .pricing-subtitle {
        font-size: 20px;
    }

    section.programa-del-curso .heading-3 {
        font-size: 22px;
    }

    ul.list-marked {
        font-size: 18px;
    }

    .carousel.slide .row.row-fix {
        padding-left: 2%;
    }
}

@media(max-width:767px) {

    div.program {
        margin-top: 70px;
    }
}

@media(max-width:382px) {

    div.program-day {
        margin-bottom: 10px;
    }

    div.pricing-text {
        margin-bottom: 10px;
    }
}

/*Section Eventos*/
@media (min-width: 1200px) {
    * + .offset-top-6
    {
        margin-top: 36px;
    }

    * + .offset-top-7 {
        margin-top: 60px;
    }
}

@media (min-width: 992px) {
    * + .offset-top-6 {
        margin-top: 26px;
        margin-bottom: 0px;
    }

    * + .offset-top-7 {
        margin-top: 40px;
        margin-bottom: 0px;
    }
}


    /*============ End Media Queries ============*/


    /*============ About course section ============*/

    .about-the-course {
        padding-top: 140px;
    }

    .row > [class*='col'] {
        padding-left: 25px;
        padding-right: 25px;
    }

    .about-the-course .title-3 {
        line-height: 1.6;
        margin-top: 90px;
        font-size: 18px;
    }

    .about-the-course .button {
        margin-top: 25px;
    }


    .button {
        display: inline-block;
        padding: 14px 40px;
        font-size: 16px;
        line-height: 18px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        user-select: none;
        vertical-align: middle;
        border: none;
        border-radius: 25px;
        transition: background-color 0.2s ease-in-out;
        color: #322153;
        background-color: #00F2A9;
    }



        .button:hover {
            background-color: #08ce95;
            color: #ffffff;
        }


    @media (max-width: 1199px) {
    }

    /*============ End About course section ============*/


    /*============ Target group section ============*/

    .section-target-group {
        padding-top: 140px;
    }

        .section-target-group h4 {
            font-size: 22px;
            margin-top: 38px;
        }

        .section-target-group .row-md {
            margin-top: 60px;
        }

    /*== Por ahora escondemos los iconos hasta que tengamos los propios ==*/
    .service-corporate-icon {
        display: none;
    }

    /*============ End Target group section ============*/


    /*============ Call to Action section ============*/
    .call-to-action {
        margin: 140px 0px;
        padding: 6.77% 0 7.9%;
        background-color: #322153;
    }

        .call-to-action .title-4 {
            text-align: center;
            color: #00F2A9;
        }

        .call-to-action h3 {
            color: #ffffff;
            font-size: 28px;
            text-align: center;
        }

        .call-to-action .button {
            margin-top: 40px;
            color: #322153;
            Background: #ffffff;
        }

            .call-to-action .button:hover {
                background-color: #08ce95;
                color: #ffffff;
            }

    /*============ End Call to Action section ============*/


    /*============ Tutores section ============*/

    .tutores .heading-2 {
        margin-top: clamp(16px, 5vw, 40px);
    }

    .team-minimal.block-md {
        max-width: 390px;
    }


    .tutores article {
        max-width: 100%;
    }

    .tutores-profile-img {
        width: 100%;
        aspect-ratio: auto;
        height: 400px;
        object-fit: cover;
        object-position: center;
    }
    /*============ End Tutores section ============*/

    /*============ Acerca del curso section ============*/

    .programa-del-curso .heading-3 {
        font-size: 28px;
    }

    .programa-del-curso {
        padding: 6.77% 0px;
    }

    .course-program-info-container {
        margin: 5% 0px;
    }

    /*sliderrrrrrrrrrrrrrrrrrrrrrrr*/
    .program {
        margin-top: 120px;
        /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */
        /* font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; */
        /* font-weight: 400; */
        line-height: 1.625;
        /* color: #65587E; */
        /* font-size: 16px; */
        /* -webkit-text-size-adjust: none; */
        /* -webkit-font-smoothing: subpixel-antialiased; */
        /* list-style: none; */
        /* pointer-events: auto; */
        /* box-sizing: border-box; */
        /* text-align: left; */
        /*background: #ffffff;*/
        box-shadow: 0 25px 90px rgba(50, 33, 83, 0.08);
        padding: 4.84% 2.94% 5.44% 3.94%;
        /* flex-grow: 1; */
        /* transition: .3s linear; */
        display: flex;
        align-items: center;
        /* height: 330px;*/
    }

    .carousel-control-prev {
        left: -5%
    }

    .carousel-control-next {
        right: -5%
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        filter: invert(1);
    }

    /*diapositivassssss*/

    .program-left {
        position: relative;
    }

    /*.program-left::before {
    position: absolute;
    content: '';
    top: 50%;
    right: 6%;
    width: 0;
    height: 86.6%;
    border-left: 1px solid #f1eff3;
    transform: translateY(-50%);
}*/

    .program-info .pricing-text {
        margin-top: 50px;
    }

    .program-list {
        margin-top: 20px;
    }

    .list-marked {
        list-style: none;
        padding: 0px;
        font-size: 20px;
        font-weight: 400;
    }

        .list-marked > li::before {
            display: inline-block;
            vertical-align: middle;
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-right: 7px;
            background-color: #65587E;
        }

    .list-marked-1 > li::before {
        /*background-color: rgba(22, 214, 156, 0.5);*/
        background-color: rgba(22,214,156,0.5);
    }

    .list-marked-2 > li {
        text-indent: -20px;
        padding-left: 20px;
    }

        .list-marked-2 > li::before {
            margin-right: 14px;
        }

    /*============ End Acerca del curso section ============*/

/*============ Eventos section ============*/

.section.eventos {
    padding: 6.77% 0px;
}

.section.eventos img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.section.eventos h6 {
    font-size: 18px;
    line-height: 1.6;
}

/*============ End Eventos section ============*/

/*============ Form registro section ============*/

.section.form-register {
    margin-bottom: 12%;
   
}

.bg-primary-3 {
    background-color: #00F2A9;
    padding: 7.77% 0px 1px;
}

.contacts-default {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.heading-5 {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;

}

.heading-5 a {
    text-decoration: none;
    color: #322153;
}

.heading-5 a:hover {
    text-decoration: underline;
    color: #322153;
}



.section-offset-5 .offset-element {
    position: relative;
    z-index: 1;
    margin-bottom: -100px;
}

form {
    margin-bottom: 0;
}

.rd-form {
    position: relative;
    text-align: left;
}

.box-form-1 {
    padding: 30px 15px;
    background-color: #ffffff;
    box-shadow: 0 25px 90px rgba(50, 33, 83, 0.08);
}

.form-wrap {
    position: relative;
}

.form-input {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 13px 19px;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #322153;
    background-color: #F7F6F9;
    background-image: none;
    border-radius: 0;
    -webkit-appearance: none;
    transition: all 0.3s ease-in-out;
    border: 1px solid #F7F6F9;
}

.form-2 .form-input {
    padding: 11px 30px;
    border-width: 3px;
    border-radius: 25px;
}

.form-label {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    padding-left: 19px;
    padding-right: 19px;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    pointer-events: none;
    text-align: left;
    z-index: 9;
    transition: .25s;
    will-change: transform;
    transform: translateY(-50%);
}

.form-wrap + * {
    margin-top: 20px;
}

.rd-form * + .button {
    margin-top: 30px;
}

.text-primary {
    color: #00F2A9 !important;
}

/*Validacion de los inputs*/

/*.form-2 .form-validation {
    top: 2px;
    right: 25px;
}*/

/*.form-validation {
    position: absolute;
    right: 10px;
    top: 0;
    z-index: 11;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0;
    color: #f5543f;
    transition: .3s;
}*/

.form-2 .form-input:focus {
    border-color: #f1eff3;
}

.form-input:focus {
    background-color: #ffffff;    
    outline: 0;
}


/*testeo de comportamiento en input focus*/

    .form-input:focus + .form-label,
    .form-input:not(:placeholder-shown) + .form-label {
        top: 2px;
        font-size: 12px;
        color: #333;        
    }

    
/*======Testeo=======*/

.form-wrap.has-error .form-input {
    border-color: #f5543f;
}

/*End Validacion de los inputs*/

@media (min-width: 992px) {
    .section-offset-5 .offset-element {
        margin-bottom: -160px;
    }
}

@media (min-width: 1200px) {
    div.box-form-1 {
        padding: 80px 50px;
    }
}

@media (min-width: 992px) {
    .box-form-1 {
        padding: 60px 40px;
    }
}

/*Datos de contacto en el form*/

@media (min-width: 768px) {
    ul.contacts-default {
        margin-top: 45px;
    }
   
}

@media (max-width: 768px) {
    ul.contacts-default {
        text-align: center;
    }
    h1.form-register-heading-1 {
        text-align: center;
    }

}

@media (max-width: 767px) {
    * + .contacts-default {
        margin-top: 45px;
    }

    h1.form-register-heading-1 {
        font-size: 40px;
    }
}

@media (max-width: 575px) {
    h1.form-register-heading-1 {
        font-size: 32px;
    }

    .section.form-register  {
        margin-bottom: 20%;
    }
}
/* End Datos de contacto en el form*/

@media (min-width: 576px) {
    .box-form-1 {
        padding: 40px 30px;
    }
}

/*============ End Form registro section ============*/