body{

background:

linear-gradient(

180deg,

#ffffff,

#f7f9fc

);

}
/*======================================
NAVBAR
======================================*/

.navbar{

    transition:.3s;

}

.navbar-brand{

    font-size:1.3rem;

}

.nav-link{

    font-weight:500;

}

.nav-link:hover{

    color:#0d6efd!important;

}

/*======================================
DROPDOWN
======================================*/

.dropdown-menu{

    border-radius:10px;

    border:none;

}

.dropdown-item{

    padding:.6rem 1rem;

}

.dropdown-item:hover{

    background:#f1f5ff;

}

/*======================================
BUSCADOR
======================================*/

.form-control{

    border-radius:30px 0 0 30px;

}

.input-group .btn{

    border-radius:0 30px 30px 0;

}

/*======================================
RESPONSIVE
======================================*/

@media(max-width:991px){

    .navbar-nav{

        margin-top:15px;

    }

    form{

        margin-top:15px;

        margin-bottom:15px;

    }

}



/*=====================================
HERO
=====================================*/

.hero{

padding:90px 0;

background:linear-gradient(

135deg,

#eef5ff,

#ffffff

);

overflow:hidden;

}

.hero h1{

font-size:3rem;

line-height:1.2;

}

.hero p{

font-size:1.2rem;

}

.hero-img{

max-width:100%;

animation:flotar 5s ease-in-out infinite;

}

@keyframes flotar{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*=====================================
BUSCADOR HERO
=====================================*/

.hero .form-control{

border-radius:50px 0 0 50px;

padding:18px;

}

.hero .btn{

border-radius:0 50px 50px 0;

padding:0 25px;

}

/*=====================================
ESTADÍSTICAS
=====================================*/

.hero h2{

font-size:2rem;

}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:991px){

.hero{

text-align:center;

padding:60px 20px;

}

.hero h1{

font-size:2.2rem;

}

.hero-img{

margin-top:40px;

max-width:85%;

}

}



/*=========================================
CATEGORÍAS
=========================================*/

.categorias{

background:#ffffff;

}

.categoria-card{

border-radius:18px;

transition:.35s;

cursor:pointer;

}

.categoria-card:hover{

transform:translateY(-8px);

box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.categoria-icono{

width:80px;

height:80px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

background:#eef5ff;

border-radius:50%;

}

.categoria-icono i{

font-size:2.3rem;

color:#0d6efd;

}

.categoria-card h5{

margin-top:15px;

font-weight:600;

}

.categoria-card p{

min-height:45px;

}

.categoria-card .badge{

font-size:.9rem;

padding:8px 15px;

border-radius:30px;

}


/*==========================================
CURSOS
==========================================*/

.curso-card{

border-radius:18px;

overflow:hidden;

transition:.35s;

}

.curso-card:hover{

transform:translateY(-10px);

box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.curso-img{

height:220px;

object-fit:cover;

}

.curso-card h5{

font-weight:600;

min-height:60px;

}

.curso-card p{

font-size:.92rem;

}

.curso-card .btn{

border-radius:30px;

}

.curso-card h4{

font-weight:bold;

}



/*======================================
SWIPER
======================================*/

.cursosSwiper{

padding:15px 5px 55px;

}

.swiper-slide{

height:auto;

}

.swiper-button-next,

.swiper-button-prev{

color:#0d6efd;

}

.swiper-pagination-bullet{

background:#0d6efd;

}

.swiper-pagination-bullet-active{

background:#0d6efd;

}


/*======================================
CURSOS POPULARES
======================================*/

.popularesSwiper{

padding:15px 5px 55px;

}

.popularesSwiper .swiper-button-next,

.popularesSwiper .swiper-button-prev{

color:#dc3545;

}

.popularesSwiper .swiper-pagination-bullet-active{

background:#dc3545;

}


/*==========================================
FORMADORES
==========================================*/

.docente-card{

border-radius:18px;

transition:.35s;

}

.docente-card:hover{

transform:translateY(-10px);

box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.docente-avatar{

width:120px;

height:120px;

object-fit:cover;

border:5px solid #eef5ff;

margin:auto;

}

.docente-card h5{

font-weight:600;

margin-top:10px;

}

.docente-card p{

min-height:70px;

}

.formadoresSwiper{

padding:15px 5px 55px;

}

.formadoresSwiper .swiper-button-next,

.formadoresSwiper .swiper-button-prev{

color:#0d6efd;

}

.formadoresSwiper .swiper-pagination-bullet-active{

background:#0d6efd;

}

/*====================================
BENEFICIOS
====================================*/

.beneficio-card{

padding:25px;

}

.beneficio-icono{

width:90px;

height:90px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

background:rgba(255,255,255,.15);

display:flex;

align-items:center;

justify-content:center;

}

.beneficio-icono i{

font-size:2.4rem;

}

/*====================================
TESTIMONIOS
====================================*/

.testimoniosSwiper{

padding-bottom:55px;

}

.testimonio-avatar{

width:90px;

height:90px;

object-fit:cover;

margin:auto;

border:4px solid #0d6efd;

}


/*====================================
whatsapp
====================================*/

.btn-whatsapp{

position:fixed;

bottom:25px;

right:25px;

width:65px;

height:65px;

background:#25D366;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

box-shadow:0 15px 30px rgba(0,0,0,.3);

z-index:9999;

transition:.3s;

text-decoration:none;

}

.btn-whatsapp:hover{

transform:scale(1.15);

color:white;

}



/* back top */
.btn-top{

position:fixed;

bottom:100px;

right:25px;

display:none;

width:55px;

height:55px;

border:none;

background:#0d6efd;

color:white;

border-radius:50%;

font-size:1.4rem;

z-index:999;

}








.card{

transition:.35s;

}

.card:hover{

transform:translateY(-10px);

box-shadow:0 25px 45px rgba(0,0,0,.18);

}

.btn{

transition:.3s;

}

.btn:hover{

transform:translateY(-3px);

}

img{

transition:.4s;

}

.curso-card:hover img{

transform:scale(1.05);

}


.glass{

background:rgba(255,255,255,.6);

backdrop-filter:blur(15px);

border-radius:20px;

}



/*==========================================
FOOTER
==========================================*/

.footer-publico{

background:#1d2636;

color:#ffffff;

padding:70px 0 25px;

}

.footer-publico h5{

margin-bottom:20px;

font-weight:600;

}

.footer-publico p{

color:#cfcfcf;

}

.footer-publico ul{

padding:0;

margin:0;

list-style:none;

}

.footer-publico li{

margin-bottom:12px;

}

.footer-publico a{

color:#d8d8d8;

text-decoration:none;

transition:.3s;

}

.footer-publico a:hover{

color:#0d6efd;

padding-left:6px;

}

.footer-logo img{

max-width:180px;

}

.footer-redes{

display:flex;

gap:12px;

margin-top:25px;

}

.footer-redes a{

width:45px;

height:45px;

border-radius:50%;

background:#2e394d;

display:flex;

align-items:center;

justify-content:center;

font-size:1.2rem;

transition:.3s;

}

.footer-redes a:hover{

background:#0d6efd;

color:white;

transform:translateY(-4px);

}

.footer-publico hr{

border-color:rgba(255,255,255,.1);

}

.footer-publico .input-group input{

border-radius:40px 0 0 40px;

}

.footer-publico .input-group button{

border-radius:0 40px 40px 0;

}

@media(max-width:768px){

.footer-publico{

text-align:center;

}

.footer-redes{

justify-content:center;

}

.footer-publico ul{

margin-bottom:25px;

}

}


/*=========================================================cursos ========================*/
/*=========================================
BANNER CURSOS
=========================================*/

.banner-cursos{

background:

linear-gradient(135deg,#0d6efd,#3f8cff);

color:white;

padding:70px 0;

margin-bottom:20px;

}

.banner-cursos h1{

font-weight:700;

}

.banner-cursos .breadcrumb{

background:none;

margin:0;

padding:0;

}

.banner-cursos .breadcrumb a{

color:white;

text-decoration:none;

opacity:.9;

}

.banner-cursos .breadcrumb-item.active{

color:#ffffff;

}

.banner-cursos .breadcrumb-item+.breadcrumb-item::before{

color:white;

}

/*filtros*/
/*==========================================
FILTROS
==========================================*/

#formFiltros label{

font-weight:600;

}

#formFiltros .form-control,

#formFiltros .form-select{

border-radius:10px;

}

#formFiltros .form-check{

padding-left:1.8rem;

}

#formFiltros .btn{

border-radius:10px;

}

#filtroCategorias{

max-height:220px;

overflow-y:auto;

padding-right:5px;

}

#filtroCategorias::-webkit-scrollbar{

width:6px;

}

#filtroCategorias::-webkit-scrollbar-thumb{

background:#d5d5d5;

border-radius:20px;

}



/*=====================================================
CATÁLOGO
======================================================*/

#contenedorCursos{

min-height:400px;

}

/*=====================================================
PAGINACIÓN
======================================================*/

.pagination{

gap:6px;

}

.pagination .page-link{

border-radius:12px;

border:none;

box-shadow:0 .125rem .25rem rgba(0,0,0,.08);

}

.pagination .page-item.active .page-link{

background:#0d6efd;

}

/*=====================================================
LOADER
======================================================*/

#loaderCursos{

min-height:300px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

/*=====================================================
RESPONSIVE
======================================================*/

@media(max-width:768px){

#ordenar,

#limite{

margin-bottom:10px;

}

}



/*======================================
PAGINACIÓN
======================================*/

.pagination{

gap:8px;

}

.pagination .page-link{

border-radius:12px;

padding:.65rem .9rem;

border:none;

box-shadow:0 .15rem .4rem rgba(0,0,0,.08);

transition:.25s;

}

.pagination .page-link:hover{

transform:translateY(-2px);

}

.pagination .page-item.active .page-link{

background:#0d6efd;

color:#fff;

}

/*======================================
MENSAJE SIN RESULTADOS
======================================*/

#sinResultados{

border-radius:15px;

}

/*======================================
SPINNER
======================================*/

#loaderCursos{

min-height:250px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}



/*=========================================
REGISTRO
=========================================*/

#formRegistro .form-control{

height:48px;

border-radius:10px;

}

#formRegistro .btn{

border-radius:10px;

}

#formRegistro label{

font-weight:600;

}

.card.rounded-4{

border-radius:20px;

}


/*=========================================
DOCENTES
=========================================*/

#contenedorDocentes .card{

transition:.3s;

border-radius:15px;

}

#contenedorDocentes .card:hover{

transform:translateY(-8px);

box-shadow:0 15px 35px rgba(0,0,0,.15);

}

#contenedorDocentes img{

border:5px solid #f8f9fa;

}

#contenedorDocentes .btn{

border-radius:10px;

}

/*=========================================
PERFIL DOCENTE
=========================================*/

.rounded-circle{

border:5px solid #fff;

}

.card{

border-radius:15px;

}

/*=========================================
CONTACTO
=========================================*/

#formContacto .form-control{

border-radius:10px;

min-height:48px;

}

#formContacto textarea{

min-height:180px;

resize:none;

}

#formContacto .btn{

border-radius:10px;

}

/*=========================================
CONTACTO
=========================================*/

#formContacto button{

transition:.3s;

}

#formContacto button:disabled{

opacity:.8;

cursor:not-allowed;

}