:root {
  --default-font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Nunito", sans-serif;
  --nav-font: "Nunito", sans-serif;
}

/* Global Colors */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;
  --background-color-transparent: transparent;
  --background-color-gradiant:linear-gradient(to right top, #258aef, #1a84ef, #0f7fef, #0579ef, #0073ee, #076cdf, #0d64d0, #105dc1, #1c52a1, #234782, #263b63, #263046);

  --default-color-primary: #006bed;
  --default-color-secondary: #ddb91f;
  --default-color-tertiary: #263046;
  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #444444;

  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #222222;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #006bed;

  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: #fff;

  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: #ddb91f;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
  --nav-dropdown-background-color: #ffffff;

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #444444;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #ddd91f;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
  --filter: blur(10px);
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-image: var(--background-color-gradiant);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color-transparent);
  backdrop-filter: var(--filter);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 50px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: #fff;
  background: #ddb91f;
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}
@media (max-width: 768px) {
  .header .logo img {
    max-height: 40px;
  }

  .header .logo h1 {
    font-size: 24px;
  }

  .header .btn-getstarted {
    margin: 0 0 0 15px;
  }
  .header.scrolled .logo img {
    content: url("assets/img/logos/logo-4.png");
    max-height: 40px;
    margin-right: 8px;
  }
}

.scrolled .header {
  background-color: var(--default-color-tertiary);
}
.scrolled .logo img {
  content: url("assets/img/logos/logo-4.png");
  max-height: 50px;
  margin-right: 8px;
}

.navmenu ul {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0;
}

.navmenu li {
    position: relative;
}

.navmenu a {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font, 'Poppins', sans-serif);
    font-weight: 400;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: 0.3s;
}
.navmenu a:hover{
  color: var(--default-color-secondary);

}
.navmenu a i {
    margin-left: 5px;
    transition: 0.3s;
}

.navmenu .dropdown ul {
    position: absolute;
    background-color: var(--nav-dropdown-background-color, #000);
    padding: 10px 0;
    border-radius: 4px;
    display: none;
    top: 100%;
    left: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.navmenu .dropdown:hover > ul {
    display: block;
}

.navmenu .dropdown ul a {
    padding: 10px 20px;
    color: var(--nav-dropdown-color, #fff);
}

.navmenu .dropdown ul a:hover {
    color: var(--default-color-primary)
}

.btn-getstarted {
    padding: 10px 20px;
    background-color: #5e7094;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-getstarted:hover {
    background-color: #3b4861;
}

/* Mobile styles */
@media (max-width: 1199px) {
    .mobile-nav-toggle {
        color: var(--default-color-secondary);
        font-size: 28px;
        cursor: pointer;
        transition: color 0.3s;
    }
    .navmenu a{
      color: var(--default-color-tertiary);
    }
    .navmenu .menu-main{
      height: 60vh;
    }
    .navmenu ul {
        display: none;
        position: fixed;
        inset: 60px 20px 20px 20px;
        background-color: var(--nav-dropdown-background-color, #000);
        padding: 10px 0;
        margin: 0;
        border-radius: 6px;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        z-index: 9998;
        transition: 0.3s;
    }

    .navmenu a {
        padding: 10px 20px;
        font-size: 17px;
    }

    .navmenu .dropdown ul {
        position: static;
        padding: 10px 0;
        margin: 10px 20px;
        display: none;
    }

    .navmenu .dropdown > .dropdown-active {
        display: block;
    }

    .mobile-nav-active {
        overflow: hidden;
    }

    .mobile-nav-active .navmenu ul {
        display: block;
    }

    .mobile-nav-active .mobile-nav-toggle {
        font-size: 32px;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 9999;
    }
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  padding: 0 0 30px 0;
  color: #444444;
  font-size: 14px;
  background-color: var(--default-color-tertiary);
}
#footer .footer-top {
  padding: 60px 0 30px 0;
  background-color: transparent;
}
#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}

#footer .footer-top .footer-contact h3 {
  font-size: 24px;
  margin: 0 0 15px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
}

#footer .footer-top .footer-contact h3 span {
  color: #367300;
}

#footer .footer-top .footer-contact p {
  font-size: 14.5px;
  line-height: 24px;
  margin-bottom: 0;
  color:color-mix(in srgb,#fff, transparent 40%);
}
#footer .footer-top h4 {
  font-family: "Poppins", sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding-bottom: 12px;
}
#footer .row{
  justify-content: space-between;
}
#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: #777777;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}
#footer .footer-top .footer-links p{
  color: #fff;
}
#footer .footer-top .footer-links ul a:hover {
  text-decoration: none;
  color: #367300;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: var(--default-color-primary);
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background-color: color-mix(in srgb, var(--default-color-primary), transparent 20%);
  color: #fff;
  text-decoration: none;
}

#footer .copyright {
  text-align: center;
  float: left;
    color:color-mix(in srgb,#fff, transparent 40%);
}

#footer .credits {
  float: right;
  text-align: center;
  font-size: 13px;
  color:color-mix(in srgb,#fff, transparent 40%);
}
#footer img{
  max-height: 50px;
}

@media (max-width: 768px) {

  #footer .copyright,
  #footer .credits {
    float: none;
    text-align: center;
    padding: 2px 0;
  }
  #footer img{
    max-height: 40px;
  }
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  height: 200px;
  background-color: var(--default-color-tertiary);
  padding: 20px 0;
  position: relative;
}
.page-title .section-title {
  text-align: center;
  padding-top: 30px;
  position: relative;
}
.page-title h2 {
  font-family: "Poppins", sans-serif;
  color: var(--background-color);
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.page-title .breadcrumbs ol {
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  color: var(--nav-color);
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb,#fff, transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 90px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
  .section-title2 {
    text-align: center;
    padding-bottom: 60px;
    position: relative;
}

.section-title2 h2 {
    position: relative;
    display: inline-flex; /* Cambiado a inline-flex */
    align-items: center; /* Alinea verticalmente al centro */
}

.section-title2 h2:before {
    content: "";
    width: 6px; /* Grosor de la línea */
    height: 60px; /* Altura de la línea */
    background: #ddb91f; /* Color amarillo */
    margin-right: 15px; /* Margen a la derecha */
}
.section-title {
    text-align: center;
    padding-bottom: 60px;
    position: relative;
}

.section-title h2 {
    position: relative;
}

.section-title h2:before {
    content: "";
    width: 50px;
    height: 4px; /* Grosor de la línea */
    background: #ddb91f; /* Color amarillo */
    display: inline-block;
    margin: 0 15px 10px 0; /* Margen a la derecha */
}


/*.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 25px;
  font-weight: 700;
  position: relative;
}

.section-title h2:before,
.section-title h2:after {
  content: "";
  width: 50px;
  height: 2px;
  background: #ddb91f;
  display: inline-block;
}

.section-title h2:before {
  margin: 0 15px 10px 0;
}

.section-title h2:after {
  margin: 0 0 10px 15px;
}*/

.section-title p {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .section-title h2 {
    font-size: 20px;
  }
  .section-title h2:before {
    content: "";
    width: 50px;
    height: 4px; /* Aumentado el grosor de la línea */
    background: #ddb91f;
    display: inline-block;
    margin: 0 15px 10px 0; /* Margen a la derecha */
}

.section-title h2:after {
    content: none; /* Eliminado el pseudoelemento después */
}
 /* .section-title h2:before,
  .section-title h2:after {
    content: "";
    width: 30px;
    height: 2px;
    background: #ddb91f;
    display: inline-block;
  }*/
  
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 100vh;
  display: flex;
  background-size: cover;
  background-position: center center;
  background-color:var(--background-color-transparent);
  position: relative;
}
#hero:before {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero .container {
  display: flex;
  flex-direction: column;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.hero-text {
  max-width: 50%;
  padding: 20px;
}

.hero-image {
  max-width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image img {
  max-width: 100%;
  height: auto;
}

#hero h1 {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
  color: #fff;
  font-family: "Poppins", sans-serif;
}

#hero h1 span {
  color: #ddb91f;
}

#hero h2 {
  color: #fff;
  margin: 5px 0 30px 0;
  font-size: 20px;
  font-weight: 400;
}
#hero .btn-get-started {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 4px;
  transition: 0.5s;
  color: #fff;
  background: #ddb91f;
}

#hero .btn-get-started:hover {
  color: #fff;
  background: #bba918;
}
@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

@media (max-width: 768px) {
  #hero {
    height: 100vh;
    display: flex;
  }

  #hero h1 {
    font-size: 20px;
    line-height: 36px;
  }

  #hero h2 {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 30px;
    color: #fff;
    font-weight: 400;
  }

  #hero .btn-get-started{
    font-size: 10px;
    padding: 8px 20px; /* Ajusta el padding según sea necesario */
  }
  .hero-image {
    max-width: 50%;
    display: none;
    justify-content: center;
    align-items: center;
  }
  .hero-text {
    justify-content: center;
    align-items: center;
    max-width: 100%;
    padding-bottom: 150px;
  }
  .button-hero{
    display: flex;
    justify-content: center;
  }
}

@media (max-height: 500px) {
  #hero {
    height: 100vh;
  }
}
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about{
  font-family: "Nunito", sans-serif;
  background-color: var(--default-color-tertiary);
}
.about .title-about{
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  padding-bottom: 30px;

}
.about .content h3 {
  font-family: "Nunito", sans-serif;
  font-weight: 650;
  font-size: 24px;
  text-align: center;
  padding-bottom: 30PX;
}
.about .content span {
  color: var(--default-color-secondary);
}
.about .row{
  margin-bottom: 70px;
}
.about .row p{
  color: #fff;
  text-align: center;
  line-height: 28px;
  font-weight: 400;
  font-size: 16px;
}
.about img {
  width: 300px;
  border-radius: 20px; /* Esquinas circulares de 10px (ajusta según sea necesario) */
}


@media (max-width: 768px) {
  .about .section-title .title-about{
    font-size: 20px;
  }
  .about .content {
    padding: 0 30px; /* Ajusta el relleno horizontal para evitar que el texto se pegue a los bordes */
  }
  .about .row p{
    text-align: center;
    font-size: 14px;
  }
  .about .row h3{
    font-size: 17.2px;
  }
  .about img{
    padding: 0 20px;
    border-radius: 15px; /* Esquinas circulares de 10px (ajusta según sea necesario) */
  }
}
/**/

.ftco-section {
  background-color: var(--default-color-tertiary);
  padding: 7em 0;
}

.ftco-no-pt {
  padding-top: 0;
}

.ftco-no-pb {
  padding-bottom: 0;
}

.heading-section {
  font-size: 28px;
  color: #000;
}
.section-title h2 {
  font-family: "Poppins", sans-serif;
  color: #fff;
}
.img {
  width: 200px!important;
  height: 200px!important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; 
  border-radius: 20px; /* Añadir esta línea */
}


.btn {
  font-size: 14px;
}

.owl-carousel {
  position: relative;
}

.owl-carousel .owl-item {
  opacity: 1;
}

.owl-carousel .owl-item.active {
  opacity: 1;
}

.owl-carousel .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  position: absolute;
  transform: translateY(-50%);
  margin-top: -10px;
  color: var(--default-color-primary) !important;
  transition: 0.7s;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next {
    transition: none;
  }
}

.owl-carousel .owl-nav .owl-prev span:before,
.owl-carousel .owl-nav .owl-next span:before {
  font-size: 30px;
}

.owl-carousel .owl-nav .owl-prev {
  left: 0;
}

.owl-carousel .owl-nav .owl-next {
  right: 0;
}

.owl-carousel .owl-dots {
  text-align: center;
  margin-top: 20px;
}

.owl-carousel .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  margin: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  position: relative;
}

.owl-carousel .owl-dots .owl-dot:hover,
.owl-carousel .owl-dots .owl-dot:focus {
  outline: none !important;
}

.owl-carousel .owl-dots .owl-dot.active {
  background: var(--default-color-primary);
}

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

.owl-carousel:hover .owl-nav .owl-prev {
  left: -25px;
}

.owl-carousel:hover .owl-nav .owl-next {
  right: -25px;
}

.owl-carousel.owl-drag .owl-item {
  touch-action: pan-y;
}

.block-20 {
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 200px;
  position: relative;
  display: flex; 
  justify-content: center;
  border-radius: 20px; /* Añadir esta línea */
}
.blog-entry {
  font-family: "Nunito", sans-serif !important;
  width: 350px;
  background-color: #fff;
  border: 5px solid;
  border-image-slice: 1;
  border-color: var(--default-color-primary);
  border-radius: 20px; /* Añadir esta línea */
  margin-bottom: 20px; /* Ajusta esto según sea necesario */
}

.blog-entry .text {
  position: relative;
  border-top: 0;
  border-radius: 20px;
}

.blog-entry .text .heading {
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 800;
  border-radius: 20px;
  text-align: center;
}

.blog-entry .text .heading a {
  color: #263046;
}

.blog-entry .text .heading a:hover,
.blog-entry .text .heading a:focus,
.blog-entry .text .heading a:active {
  color: #263060;
}

.blog-entry .text .meta-chat {
  color: #b3b3b3;
}

.blog-entry .meta-date {
  display: inline-block;
  background: #343a40;
}

.blog-entry .meta-date span {
  display: block;
  color: #fff;
}

.blog-entry .meta-date .day {
  font-weight: 700;
  font-size: 20px;
}

.blog-entry .meta-date .mos,
.blog-entry .meta-date .yr {
  font-size: 13px;
}

.blog-entry .meta > div {
  display: block;
  margin-right: 5px;
  margin-bottom: 0px;
  font-size: 15px;
}

.blog-entry .meta > div a {
  color: #b3b3b3;
  font-size: 13px;
}

.blog-entry .meta > div a:hover {
  color: #cccccc;
}

.blog-entry .meta2 a {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.4);
}
.ftco-section .row{
  justify-content: center;
}

@media (max-width: 768px) {
  .section-title h2{
    font-size: 18px;
  }
  .blog-entry {
    width: 300px;
    height: 300px;
  }
  .img {
    width: 150px!important;
    height: 150px!important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; 
    border-radius: 20px; /* Añadir esta línea */
  }
  .block-20 {
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 150px;
    position: relative;
    display: flex; 
    justify-content: center;
    border-radius: 20px; /* Añadir esta línea */
  }
  .blog-entry .text {
    width: 100%;
    position: relative;
    border-top: 0;
    border-radius: 20px;
    justify-content: center;
  }
}
/*------------------------------------------------------------
# Categories Section
--------------------------------------------------------------*/
.categories{
  display: flex;
  justify-content: space-between;
  align-items: center;
}


  /*--------------------------------------------------------------
# Courses Section
--------------------------------------------------------------*/

.row{
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20px;
}
.courses{
  background-color: transparent;
}
.courses .filter{
  width: 280px;

}
.courses .course-item {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px; /* Ajusta esto según sea necesario */
  width: 100%; /* Asegura que tome el ancho del contenedor */
}

.courses .course-item img{
  border-radius: 10px;
}

.courses .course-content {
  padding: 15px;
}

.courses .course-content h3 {
  font-weight: 700;
  font-size: 18px;
}

.courses .course-content h3 a {
  color: var(--heading-color);
  transition: 0.3s;
}

.courses .course-content h3 a:hover {
  color: var(--accent-color);
}
.category-area{
  background: var(--default-color-tertiary);
  color: var(--contrast-color);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0;
  border-radius: 5px;
}
.category-modalidad{
  background: var(--default-color-primary);
  color: var(--contrast-color);
  font-size: 12px;
  padding: 6px 14px;
  margin: 0;
  border-radius: 5px;
}
.category-estado{
  background: var(--default-color-primary);
  color: var(--contrast-color);
  font-size: 12px;
  padding: 6px 14px;
  margin: 0;
  border-radius: 5px;
}
.category-date{
  background: var(--default-color-secondary);
  color: var(--contrast-color);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 5px;

}
.courses .course-content .category {
  background:#263046;
  color: var(--contrast-color);
  font-size: 12px;
  padding: 6px 14px;
  margin: 0;
  border-radius: 5px;
}

.courses .course-content .description {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}
#courses .btn-get-started {
  font-family: "Poppins", sans-serif !important; 
  text-transform: uppercase;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 4px;
  transition: 0.5s;
  color: #fff;
  background: var(--default-color-tertiary);
}

#courses .btn-get-started:hover {
  color: #fff;
  background: #263070;
}
.button-courses{
  padding-top: 30px;
}


@media (min-width: 1200px){
  .courses .course-item {
    width: 400px;
  }
  .courses .course-content .category {
    font-size: 14px;
  }
  .category-modalidad{
    font-size: 14px;
  }
  .category-estado{
    margin: 0 0 16px;
    font-size: 14px;
  }
  .category-date{
    font-size: 14px;
  }
  .courses .course-content h3 {
    font-weight: 700;
    font-size: 20px;
  }
  .courses .course-content .description {
    font-size: 16px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
  }

}
@media (max-width: 768px) {
  .courses .course-item{
    width: 350px;
  }
  .courses .course-content .category {
    font-size: 11.5px;
  }
  .category-modalidad{
    font-size: 11.5px;
  }
  .category-estado{
    font-size: 11.5px;
  }
  .category-date{
    font-size: 11.5px;
  }
  .courses .course-content h3 {
    font-weight: 700;
    font-size: 15.5px;
  }
  .courses .course-content .description {
    font-size: 13px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
  }
}
/*--------------------------------------------------------------
# Events
--------------------------------------------------------------*/
.events {
  background-color: var(--default-color-tertiary);
  background-size: cover;
  position: relative;
}

.events::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.events .section-title h2 {
  color: #fff;
}

.events .container {
  position: relative;
}
.events .events-carousel {
  background: rgba(255, 255, 255, 0.08);
  padding: 30px;
}

.events .event-item {
  color: #fff;
  display: flex;
}
.events .event-item h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: #ddb91f;
}


.events .event-item ul {
  list-style: none;
  padding: 0;
}
.events .event-item p:last-child {
  margin-bottom: 0;
}

.events .swiper-pagination {
  margin-top: 30px;
  position: relative;
}

.events .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.events .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--default-color-secondary);
}
.events .img-event {
  border-radius: 20px;
  width:500px;
  display: flex;
  justify-content: center;
  border: var(--default-color-secondary) solid 5px;
}
.events .content {
  padding: 60px;
}
.image-content{
  display: flex;
  justify-content: center;
}

.events .category-date{
  margin: 10px;
}

@media (min-width: 1024px) {
  .events {
    background-attachment: fixed;
  }
}
@media (max-width: 768px) {
  .events .img-event {
    width: 320px;
    height: 320px;
  }
  .events .content {
    padding: 30px;
  }
  .events .content h3 {
    font-size: 16px;
  }
  .events p{
    font-size: 14px;
  }
  .events a{
    font-size: 14px;
  }
}
/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio{
  background-color: transparent;

}
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--default-color-tertiary);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-content img {
  transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .details-link {
  left: 50%;
  font-size: 34px;
  line-height: 0;
}

.portfolio .portfolio-content:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-content:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team{
  background-color: var(--background-color-transparent);
}
.team .team-member {
  background-color: var(--default-color-tertiary);
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
}

.team .team-member .member-img {
  position: relative;
  overflow: hidden;
}

.team .team-member .social {
  position: absolute;
  left: 0;
  bottom: 30px;
  right: 0;
  opacity: 0;
  transition: ease-in-out 0.3s;
  text-align: center;
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--background-color), transparent 25%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: color 0.3s;
  margin: 0 3px;
  border-radius: 25px;
  width: 36px;
  height: 36px;
  transition: ease-in-out 0.3s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.team .team-member .social a:hover {
  color: var(--background-color);
  background: var(--accent-color);
}

.team .team-member .social i {
  font-size: 18px;
  line-height: 0;
}

.team .team-member .member-info {
  padding: 25px 15px;
}

.team .team-member .member-info h4 {
  color:#fff;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 18px;
}

.team .team-member .member-info span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: color-mix(in srgb, var(--background-color), transparent 70%);
}

.team .team-member:hover .social {
  opacity: 1;
  bottom: 15px;
}
@media (max-width: 768px) {
  .team .team-member{
    width: 320px;
  }
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  background: var(--default-color-tertiary);
  position: relative;
}
.contact:before {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  background: var(--default-color-primary);
  color: var(--contrast-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  color: #fff;
  font-size: 20px;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.contact .info-item p {
  color: color-mix(in srgb, #fff, transparent 50%);
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: #fff;
  background-color: color-mix(in srgb, var(--default-color-primary), transparent 60%);
  border-color: color-mix(in srgb, #fff, transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: #fff
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--default-color-primary);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--default-color-primary), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 640px) {
  .contact {
    padding: 20px;
    background-position: center 50px;
    background-size: contain;
  }
  .contact .info-item h3 {
    font-size: 15px;
  }
  .contact .info-item p {
    font-size: 13px;
  }
}
/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}
.service .swiper-wrapper {
  height: auto;
}

.service .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

/* CSS */
#poster {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 107, 237, 0.5); /* Fondo azul semi-transparente */
  backdrop-filter: blur(10px); /* Desenfoque del fondo */
}
#close-button {
  color: #fff;
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 2em;
  cursor: pointer;
}

/*Términos y Condiciones*/
.terms{
  background-color: var(--default-color-tertiary);
  padding: 20px;
}
.terms h3{
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.terms p{
  color: #fff;
}

/*---------------------------------------
PILARES
-----------------------------------------*/
/*--------------------------------------------------------------
# Featured Services
--------------------------------------------------------------*/
.pilares{
  background-color: var(--background-color-transparent);
}
.pilares p{
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}
.pilares .icon-box {
  padding: 30px;
  position: relative;
  overflow: hidden;
  background: var(--default-color-tertiary);
  box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
  text-align: center;
  margin-bottom: 20px;
}
.icon-box img{
  width:150px;
  height: 150px;

}

.pilares .icon-box::before {
  content: "";
  position: absolute;
  background: #cbe0fb;
  right: 0;
  left: 0;
  bottom: 0;
  top: 100%;
  transition: all 0.3s;
  z-index: -1;
}

.pilares .icon-box:hover::before {
  background: var(--default-color-secondary);
  top: 0;
  border-radius: 0px;
}

.pilares .icon {
  margin-bottom: 15px;
}

.pilares .icon i {
  font-size: 48px;
  line-height: 1;
  color: var(--default-color-secondary);
  transition: all 0.3s ease-in-out;
}

.pilares .title {
  font-weight: 650;
  margin-bottom: 15px;
  font-size: 19.2px;
}

.pilares .title a {
  color: #111;
}
.pilares .description {
  font-size: 14.5px;
  line-height: 28px;
  margin-bottom: 0;
}
.pilares.icon-box p{
  font-size: 16px;
  text-align:  center;
  font-weight: 400;
}

.pilares .icon-box:hover .title a,
.pilares .icon-box:hover .title span,
.pilares .icon-box:hover .description {
  color: var(--default-color-primary);
}
.pilares span {
  color:var(--default-color-secondary)
}
.pilares .icon-box:hover .icon i {
  color: #fff;
}
@media (max-width: 768px){
  .row{
    padding:25px;
  }
  .pilares .icon-box .title{
    font-size: 17.2px;
  }
  .pilares .icon-box p{
    font-size: 14px;
  }
}

/*---------------------------------------
FILTER
-----------------------------------------*/
/* Estilo general para el sidebar */
.filter{
  background-color: var(--default-color-tertiary); /* Color de fondo azul */
  padding: 20px;
  border-radius: 10px;
  color: white; /* Color del texto blanco */
  width: 300px;
 
}

/* Títulos de las secciones */
.filter h5 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--default-color-primary);
  padding-bottom: 5px;
}

/* Estilo de los checkboxes y labels */

/* Estilo de los checkboxes */
.filter input[type="checkbox"] {
  margin-right: 10px;
  cursor: pointer;
}

/* Botón para vaciar los filtros */
.filter button#clear-filters {
  display: block;
  margin-top: 20px;
  padding: 10px;
  width: 100%;
  background-color: var(--default-color-primary);
  border: none;
  border-radius: 5px;
  color: #fff; /* Color del texto azul */
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.filter button#clear-filters:hover {
  background-color: color-mix(in srgb, color percentage, color percentage); /* Color dorado más oscuro al pasar el ratón */
}

/* COURSES DETAILS */
.courses-course-details {
  background-color: transparent;
}

.courses-course-details .card-course {
  height: 650px;
  background-color: var(--default-color-tertiary);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
}

.courses-course-details .img-curso {
  width: 100%;
  height: 400px;
  border-radius: 20px;
}

.courses-course-details .course-info {
  padding: 5px;
}

.courses-course-details .course-info .category,
.courses-course-details .course-info .category-docente,
.courses-course-details .course-info .category-modalidad,
.courses-course-details .course-info .category-date {
  width: 185px;
  text-align: center;
  font-size: 12px;
  padding: 6px 14px;
  margin: 0;
  border-radius: 5px;
}

.courses-course-details .course-info .category {
  background: var(--default-color-primary);
  color: var(--contrast-color);
}

.courses-course-details .course-info .category-docente {
  background: var(--default-color-secondary);
  color: var(--contrast-color);
}

.courses-course-details .course-info .category-modalidad {
  background: var(--default-color-primary);
  color: var(--contrast-color);
}

.courses-course-details .course-info .category-date {
  background: var(--default-color-secondary);
  color: var(--contrast-color);
}

.section-title .title-course {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.courses-course-details .text {
  color: #fff;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}

.text span {
  color: var(--default-color-secondary);
  font-weight: 700;
}

/* Objectives List Styling */
.objectives-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #fff;
  font-size: 16px;
}

.objectives-list li {
  display: flex;
  margin-bottom: 20px;
}

.objective-title {
  min-width: 250px; /* Ensure title section has a fixed minimum width */
  font-weight: bold;
  color: var(--default-color-secondary);
  margin-right: 10px; /* Add spacing between title and text */
}

.objective-text {
  flex: 1; /* Allow text section to take up the remaining space */
}

.objectives-list li::before {
  content: '\2713'; /* Check mark character */
  color: var(--default-color-secondary);
  font-weight: bold;
  font-size: 20px;
  margin-right: 10px; /* Space between check mark and title */
  align-self: flex-start; /* Align the check mark at the start of the item */
}

/* Tabs */
.tabs {
  background-color: transparent;
}

.tabs .nav-tabs{
  background-color: var(--default-color-tertiary);
  border-radius: 10px;
}
.tabs .nav-tabs a {
  color: var(--default-color-secondary);
  font-weight: 600;
  font-size: 16px;
}
.tabs .nav-tabs .active{
  color: var(--default-color-tertiary);
  font-weight: 600;
}
.tab-content h3{
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
.tab-content p{
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}
.tab-pane img{
  width: 100%;
  border-radius: 20px;

}
.temario-item:before{
  content: '\2713'; /* Check mark character */
  color: var(--default-color-secondary);
  font-weight: bold;
  font-size: 20px;
  margin-right: 10px; /* Space between check mark and title */
  align-self: flex-start; /* Align the check mark at the start of the item */
}

/*---------------------------------------
          EVENTOS VERIFICACION
-----------------------------------------*/
.eventos-validacion{
  background-color: transparent;
  padding: 20px;
}
.eventos-validacion .section-title p{
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}
.eventos-validacion .container h3{
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.eventos-validacion img{
  width: 100%;
  background-color: #fff;
}