/*===============================================
Template Name: Dreamhub-Education HTML5 Template
Version: 0.1
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. Start dreamhub Header Menu Area
02. Start dreamhub Hero Area
03. Start dreamhub About Area
04. Start dreamhub Program Area
05. Start dreamhub Courses Area
06. Start dreamhub Register Area
07. Start dreamhub Protfolio Area
08. Start dreamhub Faq Area
09. Start dreamhub News  Area
10. Start dreamhub Foter Area
=======================*/

/*================================================
 <--Start dreamhub Header Menu Area Css-->
=================================================*/

.btn-comenzar {
  background-color: #C40C86;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.btn-comenzar:hover {
  background-color: #012068;
}


.logtex {
  display: inline-block;
  width: 200px; /* Ajusta el ancho según tus preferencias */
  height: auto; /* Permite que la altura se ajuste proporcionalmente al ancho */
  font-family: fantasy;
}

.header-logo {
  font-size: 24px;
  font-weight: bold;
  color: #c40c86;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.header-logo a {
  color: #c40c86;
  text-decoration: none;
}

.header-logo a:hover {
  color: #012068;
}


.header-social-icons {
  display: flex;
  align-items: center;
}

.header-social-icons ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.header-social-icons li {
  margin-right: 30px;
}

.header-social-icons a {
  color: #012068;
  font-size: 20px;
  transition: color 0.3s;
}

.header-social-icons a:hover {
  color: #f17cca;
}

.header-area {
  background: #ffff;
  z-index: 1;
  position: relative;
}
.header-menu {
  text-align: center;
}
.header-menu ul {
    list-style: none;
}
.header-menu ul li {
  display: inline-block;
  margin-left: 13px;
}
.header-menu ul li a {
  display: inline-block;
  padding: 9px 10px;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  margin: 29px 0;
  transition: .5s;
}
.header-menu ul li a:hover {
  background: #C40C86;
  color: #ffff;
}
/*my boton*/

.custom-btn.bottom-left {
  position: fixed;
  left: 20px;
  bottom: 20px;
  text-align: center;
  z-index: 999;
  overflow: visible !important;
}

.custom-btn.bottom-left a {
  display: inline-block;
  background: #C40C86;
  padding: 11px 3px;
  border-radius: 5px;
  color: #ffffff;
  text-decoration: none;
}

.custom-btn.bottom-left a:hover,
.custom-btn.bottom-left a:focus {
  color: #C40C86;
  background: white;
  border: solid 1px #C40C86;
  transition: 0.5s;
}

.custom-btn.bottom-left a:active {
  transform: scale(1);
}

.custom-btn.bottom-left a::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  z-index: -1;
  transition: 0.5s;
}

.custom-btn.bottom-left a:hover::before,
.custom-btn.bottom-left a:focus::before {
  opacity: 1;
  transform: scaleX(1);
  background: #f3f1fa;
  border: 1px solid rgba(9, 67, 134, 255);
  border-radius: 5px;
}

@media screen and (max-width: 768px) {
  .custom-btn.bottom-left {
    display: none;
  }
}

/* dreamhub btn */
.dreamhub-btn {
  margin-top: 50px;
  text-align: right;
}
.dreamhub-btn a {
  display: inline-block;
  background: #C40C86;
  padding: 11px 3px;
  border-radius: 5px;
  color: #ffff;
  position: relative;
  z-index: 1;
  transition: .5s;
  text-decoration: none;
}
.dreamhub-btn a:hover{
  color: #C40C86;
}
.dreamhub-btn a::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0, 1);
  opacity: 0;
  z-index: -1;
  transition: .5s;
}
.dreamhub-btn a:hover::before{
  opacity: 1;
  transform: scale(1,1);
  background: #f3f1fa;
  border: 1px solid rgba(9,67,134,255);
  border-radius: 5px;
} 

/* hero area btn */
.dreamhub-btn.banner {
  text-align: center;
  display: inline-block;
  margin-left: 24px;
}

/* about btn */
.dreamhub-btn.about {
  text-align: center;
  align-items: center;
  justify-content: center;
}
/* news btn */
.dreamhub-btn.news {
  text-align: left;
}

.sticky-nav {
  left: 0;
  margin: auto;
  top: 0;
  width: 100%;
  position: fixed !important;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
  -webkit-animation: 300ms running fadeInDown;
  animation: 500ms running fadeInUp;
  -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  transition: 0.5s !important;
  background: #ffff!important;
  z-index: 9999 !important;
  animation-name: slideInDown;
  padding: 0 30px;
}

/* sub menu area css */
/* Estilos para el ícono de Facebook */
.facebookHeader {
  display: inline-block;
  background-color: #C40C86;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  transition: background-color 0.3s, transform 0.3s; /* Agregada animación de transición */
}

.facebookHeader:hover {
  background-color: #012068; /* Cambio de color al hacer hover */
  transform: scale(1.1); /* Efecto de escala al hacer hover */
}

.facebookHeader i {
  font-size: 1.5em;
  color: white;
  display: inline-block;
  vertical-align: middle;
  transition: color 0.3s; /* Agregada animación de transición */
}





.header-menu ul .sub-menu {
  background: #ffff;
  position: absolute;
  top: 125%;
  border-radius: 5px;
  width: 217px;
  text-align: left;
  margin: 0;
  -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
  transition: .5s;
  visibility: hidden;
  border-top: 2px solid rgba(9,67,134,255);
  opacity: 0;
  z-index: 11;
}
.header-menu ul .sub-menu ul li {
  display: inline-block;
  margin-left: 0;
  width: 100%;
}
.header-menu ul .sub-menu ul li a {
  padding: 12px 20px;
  text-align: left;
  width: 100%;
  display: inline-block;
  visibility: inherit !important;
  color: #202020;
  margin: 0;
}
.header-menu ul .sub-menu ul li a:hover {
  background: #C40C86 !important;
  color: #ffff;
}
.header-menu ul li:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  top: 99%;
}


/*================================================
 <--Start dreamhub Hero Area Css-->
=================================================*/
/* Estilos para el botón en tablet y celular */
@media (max-width: 768px) {
  .btn-mobile-tablet-only {
    display: inline-block; /* Para que el botón sea un elemento en línea y ocupe solo el ancho que necesita */
    background: #C40C86 !important; /* Personaliza el color de fondo */
    color:#ffff ; /* Personaliza el color del texto */
    padding: 10px 20px; /* Ajusta los valores de relleno según tus necesidades */
    border-radius: 5px; /* Personaliza el radio de borde si deseas bordes redondeados */
    text-decoration: none; /* Elimina la decoración de enlace si lo deseas */
    margin-bottom: 30px;
  }
}

/* Oculta el botón en pantallas más grandes que 768px (tabletas y escritorio) */
@media (min-width: 769px) {
  .btn-mobile-tablet-only {
    display: none;
  }
}

.hero-area {
  background: url(../images/frontpage-horizontal.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 770px;
  /*filter: brightness(0.5); /* Aplica un 50% de oscuridad */
}
.hero-area {
  background: url(../images/frontpage-horizontal.jpg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 770px;
  background-color: #2585eb;
}
@media (max-width: 768px) {
  .hero-area {
    background: url(../images/frontpage-horizontal.jpg);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 770px;
    background-color: #2585eb;
  }
}
@media (max-width: 480px) {
  .hero-area {
    background: url(../images/frontpage-vertical.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 300px;
    background-color: #2585eb;
  }
}




.hero-sub-title {
  position: relative;
}
.hero-sub-title::before {
  position: absolute;
  content: "'";
  height: 2px;
  width: 201px;
  background: #C40C86;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.hero-sub-title h5 {
  font-size: 18px;
  font-weight: 600;
  color: #ffff;
  line-height: 55px;
}
.hero-main-title h3 {
  color: #ffff;
  font-size: 55px;
  font-weight: 800;
  margin: 10px 0 16px;
}
.about-content span a {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
}
.hero-discription {
  width: 55%;
  margin: auto;
}
.hero-discription p {
  font-size: 18px;
  line-height: 30px;
  color: #ffffff;
  font-weight: 400;
  margin-bottom: 42px;
}
a.active-btn {
  background: transparent;
  border: 1px solid rgba(9,67,134,255);
}


/*================================================
 <--Start dreamhub About Area Css-->
=================================================*/
.about-thumb {
  position: relative;
}

.additional-image {
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 150px; /* Ajusta el ancho de la imagen adicional según tus necesidades */
}



.about-area {
  padding: 108px 0 100px;
}
.about-thumb img {
  width: 100%;
}
.about-content {
  margin-left: 55px;
}
.about-content h3 {
  font-size: 35px;
  font-weight: 600;
  line-height: 18px;
  margin-bottom: 22px;
  color: #012068;
}
.about-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
  width: 75%;
}
.about-content span {
  font-size: 16px;
  font-weight: 400;
}
.about-content span a {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
}
.about-content p.about {
  position: relative;
  margin: 60px 0 30px;
}
.about-content p.about::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 98%;
  top: -28px;
  background: #ccd2e1;
}



/*================================================
 <--Start dreamhub Program Area Css-->
=================================================*/

.program-area {
  padding: 0px 0 0px;
}



.program-single-box {
  background: #faf9f7; /*CUADRITOS EN PAR*/
  filter: drop-shadow(0 0 15px rgba(0,0,0,0.1));
  padding: 27px 29px 21px 29px;
  border-radius: 5px;
  margin-bottom: 15px; /* Reducir el margen inferior */
  position: relative;
  height: 100%; /* Establecer una altura del 100% para ocupar todo el espacio disponible */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.program-content {
  overflow: hidden; /* Controlar el desbordamiento del contenido si es necesario */
}

.teacher-info {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.dreamhub-btn {
  margin-top: 0; /* Elimina el margen superior del botón */
}

@media (min-width: 768px) {
  .teacher-info {
    margin-top: 20px; /* Agrega un margen superior de 20px en pantallas de ordenador y tablet */
  }
}

@media (max-width: 320px) {
  .teacher-info {
    align-items: flex-start;
  }

  .dreamhub-btn {
    margin-top: -20px; /* Ajusta el margen superior del botón negativamente */
  }
}

.program-single-box::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  width: 0;
  margin: auto;
  background:#C40C86;
  transition: .5s;
}

.program-single-box:hover:before {
  width: 100%;
}
.program-content h4 {
  font-size: 20px;
  font-weight: 600;
}
.program-content p {
  font-size: 16px;
  line-height: 28px;
  color: #7e8890;
  font-weight: 400;
  margin: 10px 0 0;
}


/* section title */
.section-main-title h3 {
  font-size: 35px;
  font-weight: 600;
}
.section-discription {
  width: 45%;
  margin: auto;
}
.section-discription p {
  font-size: 16px;
  line-height: 28px;
  color: #7e8890;
  font-weight: 400;
  margin: 10px 0 46px;
}
/* protfolio section  */
.section-discription.protfolio {
  width: 35%;
  margin: initial;
}

/*================================================
 <--Start dreamhub Courses Area Css-->
=================================================*/
.course-area {
  padding: 0 0 80px;
}
.dreamhub-courses-single-box {
  margin-bottom: 30px;
}
.dreamhub-courses-thumb{
  overflow: hidden;
}
.dreamhub-courses-thumb img {
  width: 100%;
  transition: .5s;
  border-radius: 5px;
}
.dreamhub-courses-single-box:hover .dreamhub-courses-thumb img{
  transform: scale(1.1);
}
.dreamhub-courses-content {
  background: #ffff;
  border: 1px solid rgba(0,0,0,0.1);
  padding: 11px 30px 8px;
  border-radius: 0px 0px 5px 5px;
  position: relative;
}
.dreamhub-courses-content::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background: #ccd2e1;
  bottom: 37px;
  left: 0;
}
.dreamhub-courses-contetn-title h4 {
  font-size: 18px;
  font-weight: 600;
  line-height: 35px;
}
.dreamhub-courses-contetn-title h6 {
  font-size: 14px;
  color: #7e8890;
  font-weight: 400;
}
.dreamhub-courses-discription p {
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  margin: 15px 0 30px;
}
.dreamhub-courses-price {
  float: right;
  margin-top: -36px;
  margin-right: 6px;
}
.dreamhub-courses-price span {
  background: #C40C86;
  padding: 8px 19px;
  border-radius: 5px;
  color: #fff;
}
.dreamhub-courses-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dreamhub-courses-Lessone span {
  font-size: 15px;
  color: #7e8890;
  font-weight: 400;
}
.dreamhub-courses-Lessone span i {
  font-size: 12px;
  margin-right: 3px;
  color: #C40C86;
}
.dreamhub-courses-Student span {
  font-size: 15px;
  font-weight: 400;
}
.dreamhub-courses-Student span i {
  font-size: 12px;
  margin-right: 3px;
  color: #C40C86;
}


/*================================================
 <--Start dreamhub Register Area Css-->
=================================================*/

.ifo-sub ul li i {
  color: white;
  
}
.ifo-sub ul li {
  list-style-type: none;
}

.register-area {
  background: url(../images/register\ thumb.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 100px 0 100px;
}
.register-sub-title h5 {
  font-size: 18px;
  line-height: 55px;
  color: #ffff;
  font-weight: 600;
}
.register-main-title h3 {
  font-size: 55px;
  color: #ffff;
  font-weight: 600;
  margin: 0 0 16px;
}
.register-discription {
  width: 87%;
}
.register-discription p {
  font-size: 16px;
  line-height: 27px;
  color: #ffff;
  font-weight: 400;
  margin-bottom: 35px;
}

/* counter css */
.counter-box-title h1 {
  font-size: 35px;
  color: #ffff;
  font-weight: 600;
  margin: 17px 0 10px;
}
.counter-box-title h3 {
  font-size: 15px;
  color: #ffff;
  font-weight: 500;
}

/* form box css */
.row.contact {
  background: #382929;
  padding: 25px 10px 27px;
  border-radius: 5px;
}
.contact-box-title h3 {
  text-align: center;
  font-size: 24px;
  color: #ffff;
  font-weight: 600;
  margin-bottom: 25px;
}
.form-box input {
  width: 100%;
  height: 46px;
  background: #ffffff;
  border-radius: 5px;
  padding: 12px;
  margin-bottom: 16px;
  border: 0;
  outline: 0;
}
.form-box input::placeholder {
  font-size: 15px;
  font-weight: 400;
}
select#Choose\Subject {
  width: 100%;
  height: 52px;
  border-radius: 5px;
  border: 0;
  outline: 0;
}
.form-box textarea {
  width: 100%;
  height: 86px;
  border-radius: 5px;
  border: 0;
  outline: 0;
  padding: 12px;
  margin-bottom: 13px;
}
.form-box textarea::placeholder {
  font-size: 15px;
  font-weight: 400;
}
.form-box button {
  width: 100%;
  height: 46px;
  background:#C40C86;
  border-radius: 5px;
  outline: 0;
  border: 0;
  color: #ffff;
  font-size: 16px;
  font-weight: 400;
}


/*================================================
 <--Start dreamhub Protfolio Area Css-->
=================================================*/

.protfolio-area {
  padding: 102px 0 0px;
}

.protfolio-menu ul {
  list-style: none;
}
.protfolio-menu ul li {
  display: inline-block;
  padding: 6px 19px;
  background: #f9f7ff;
  margin: 0px 3px 30px;
  border-radius: 5px;
  cursor: pointer;
}
li.current_menu_item {
  position: relative;
  color: #fff;
  z-index: 1;
}
li.current_menu_item::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background:#C40C86;
  left: 0;
  top: 0;
  border-radius: 5px;
  z-index: -1;
}
.protfolio-single-box {
  margin-bottom: 16px;
  overflow: hidden;
}
.protfolio-thumb {
  position: relative;
  transition: .5s;
}
.protfolio-thumb::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(196, 12, 134, 0.5);
  border-radius: 5px;
  transform: scale(0);
  transition: .5s;
  opacity: 0;
}
.protfolio-single-box:hover .protfolio-thumb::before {
  transform: scale(1);
  border-radius: 5px;
  opacity: 1;
}
.protfolio-thumb img {
  width: 100%;
}



/*================================================
 <--Start dreamhub Faq Area Css-->
=================================================*/

.cartaP {
  background-color: white;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin: 0 auto;
  max-width: 600px;
  text-align: center;
  margin-top: 20px;
}

.faq-area {
  padding: 85px 0 90px;
  margin-top: 10px;
  
    background-color: white;
  
}
.event-title h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 34px;
}
.event-single-box {
  margin-bottom: 15px;
}
.event-date {
  background: #C40C86;
  display: block;
  float: left;
  padding: 9px 16px;
  text-align: center;
  border-radius: 5px;
  margin-top: 32px;
  position: relative;
}
.event-date span {
  font-size: 18px;
  font-weight: 500;
  color: white;
  border-bottom: 2px white;
  line-height: 28px;
}
.event-date h6 {
  font-size: 16px;
  font-weight: 500;
  color:white;
}
.event-content {
  background: white;
  display: inline-block;
  padding: 26px 47px 8px;
  margin-left: -29px;
  border-radius: 5px;
}
.event-content-title h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}
.event-content-address {
  margin-bottom: 10px;
}
.event-content-address ul {
  list-style: none;
}
.event-content-address ul li {
  display: inline-block;
  margin-right: 10px;
}
.event-content-address ul li a {
  display: inline-block;
  text-decoration: none;
  color: white;
  font-size: 14px;
  font-weight: 400;
}
.event-content-address ul li a i {
  font-size: 14px;
  margin-right: 5px;
  color: #C40C86;
}
.event-content-discription p {
  font-size: 16px;
  font-weight: 400;
}

/* accordian css */
.faq h2 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 34px;
  background: white;
}

.accordion{
  margin-top: 20px;
}

.accordion-item {
  border: none;
 
}
.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 0px 0px 23px;
  color: #012068;
  font-size: 16px;
  font-weight: 400;
  border: none;
  background:white;
  outline: none;
  transition: .5s;
  margin-bottom: 13px;
}
.accordion button:hover, .accordion button:focus {
  cursor: pointer;
  color: #012068;
  background: white;
}
.accordion button:hover::after, .accordion button:focus::after {
  cursor: pointer;
  color: #03b5d2;
  border: 1px solid #03b5d2;
  background: white;
}
.accordion button .accordion-title {
  margin-left: 46px;
  background: white;
  
}
.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: #C40C86;
  text-align: center;
  color: white;
  border-radius: 5px;
}
.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 14px;
  left: 10px;
  width: 10px;
  height: 2px;
  background:white;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 10px;
  left: 13px;
  width: 2px;
  height: 10px;
  background: white;
}
.accordion button[aria-expanded=true] {
  color: #012068;
  background: white;
}
.accordion button[aria-expanded=true] .icon::after {
  width: 0;
  background: white;
}
.accordion button[aria-expanded=true] + .accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
  background: white;
  
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
  background: white;
}
.accordion .accordion-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: black;
  margin: 0px 48px 20px;
  background: white;
}


/*================================================
 <--Start dreamhub News Area Css-->
=================================================*/
.news-area {
    padding: 0 0 108px;
    margin-top: 30px;
}
.news-thumb {
  position: relative;
}
.news-thumb::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: RGBA(196, 12, 134, 0.5);
    border-radius: 5px;
    transform: scale(0);
    transition: .5s;
}
.news-single-box:hover .news-thumb::before {
  transform: scale(1);
  border-radius: 5px 5px 0px 0px;
}
.news-thumb img {
  width: 100%;
}
.news-icon-thumb {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  opacity: 0;
  transition: .5s;
}
.news-single-box:hover .news-icon-thumb{
  opacity: 1;
}
.news-content {
  background: #f9f7ff;
  padding: 17px 30px 31px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 0 0 5px 5px;
}
.news-content a {
  text-decoration: none;
}
.news-content a h4 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  transition: .5s;
}
.news-content a h4:hover {
  color: #f09a3e;
}
.news-list ul {
  list-style: none;
}
.news-list ul li {
  display: inline-block;
  margin-right: 17px;
}
.news-list ul li a {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #7e8890;
  margin: 2px 0 22px;
}

/*================================================
 <--Start dreamhub Foter Area Css AA-->
=================================================*/
footer {
	background-color: #012068;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	color: #fff;
}

.footer-section {
	margin-bottom: 10px;
}

.logo img {
	width: 200px;
	height: auto;
}

.social-icons {
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.social-icons a {
	color: #fff;
	transition: color 0.3s ease;
	margin-right: 10px;
}

.social-icons a:last-child {
	margin-right: 0;
}

.social-icons a:hover {
	color: #c40c86;
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.footer-menu li {
	margin-right: 15px;
}

.footer-menu li:last-child {
	margin-right: 0;
}

.footer-menu a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

.footer-menu a:hover {
	color: #c40c86;
}

@media only screen and (max-width: 1024px) {
	.logo img {
		width: 150px;
	}
}

@media only screen and (max-width: 768px) {
	.logo img {
		width: 120px;
	}

	.footer-menu {
		justify-content: center;
	}

	.footer-menu li {
		margin-right: 10px;
	}
}

@media only screen and (max-width: 320px) {
	.logo img {
		width: 200px;
	}

	.footer-menu li {
		margin-right: 5px;
	}

	.footer-section {
		width: 100%;
		text-align: center;
	}
}



/*================================================
 <--Start dreamhub Foter Area Css-->
=================================================*/
.center-div {
  background: #012068;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Ajusta la altura según tus necesidades */
  max-width: 100%;
}


.foter-area {
  background: #012068;
  padding: 100px 0 0;
  justify-content: center;
  display: flex;
  align-items: center;
  
}




.foter-content p {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 25px;
  margin: 19px 0 10px;
  width: 85%;
}
.foter-info ul {
  list-style: none;
}
.foter-info ul li {
  color: #fff;
  margin: 8px 0 0;
}
.foter-info ul li a {
  display: inline-block;
  text-decoration: none;
  color: #ffff;
  font-size: 15px;
  font-weight: 400;
}
.foter-info ul li a i {
  margin-right: 6px;
}
.foter-info ul li span {
  font-size: 15px;
  font-weight: 400;
}
.foter-info ul li span i {
  margin-right: 6px;
}
.foter-social-icon ul {
  list-style: none;
}

.foter-social-icon ul li {
  display: inline-block;
  margin-right: 4px;
  margin-top: 26px;
}

.foter-social-icon ul li a i {
  font-size: 19px; /* Ajusta el tamaño del icono aquí */
  color: #fff;
  background: rgba(255,255,255,0.2);
  display: inline-block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 100%;
  transition: .5s;
}

.foter-social-icon ul li a i:hover {
  background: #C40C86;
}
.custom-form {
  max-width: 400px;
  margin: 0 auto;
}

.custom-form .form-group {
  margin-bottom: 20px;
}

.custom-form label {
  font-weight: bold;
}

.custom-form .form-control {
  border-radius: 8px;
}

.custom-form .custom-input {
  padding: 10px;
  border: 1px solid #ccc;
}

.custom-form .custom-button {
  padding: 10px 20px;
  background-color: #C40C86;
  color: #fff;
  border: none;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.custom-form .custom-button:hover {
  background-color:  #012068;
 
  border: 2px solid #fff;
 
}


.wiget-title h5 {
  font-size: 22px;
  font-weight: 600;
  color: #ffff;
  margin-bottom: 30px;
}
.wiget-menu ul {
  list-style: none;
}
.wiget-menu ul li {
  padding: 0px 0px 15px;
}
.wiget-menu ul li a {
  display: inline-block;
  color: #ffff;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: .5s;
}
.wiget-menu ul li a:hover {
  color: #C40C86;
}
.wiget-menu ul li.menu {
  position: relative;
  padding: 0 0 28px;
}
.wiget-menu ul li.menu::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background: #C40C86;
  bottom: 11px;
}
.wiget-information h5 {
  font-size: 16px;
  color: #ffff;
  line-height: 22px;
  transition: .5s;
}
.wiget-information h5:hover {
  color: #C40C86;
}
.wiget-information p {
  font-size: 14px;
  color: #7e8890;
  font-weight: 400;
}
.wiget-time h5 {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 32px;
}

/*widget table*/
table.widget-table tr td {
  padding-right: 28px;
  padding-bottom: 18px;
  transition: .5s;
}
table.widget-table tr td:hover {
  color: #C40C86;
}
td.table-title {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
}
td.table-text {
  color: #fff;
  font-size: 16px;
  position: relative;
  z-index: 1;
}
td.table-text:before {
  position: absolute;
  content: ":";
  left: -17px;
  top: 0;
  font-size: 20px;
  color: #fff;
}
td.table-text.up {
  color: #ED1C24;
}
.foter-copy-text {
  text-align: center;
  border-top: 1px solid #C40C86;
  padding: 25px 0px 0px;
  margin: 70px 0 0;
  align-items: center;
}
.foter-copy-text p {
  font-size: 14px;
  color: #7e8890;
}

copy {
  text-align: center;
}

.footer-menu2 {
  text-align: center;
}

@media (max-width: 320px) {
  .copy, .footer-menu2 {
    text-align: center;
    align-items: center;
    justify-content: center;
  }
}

.footer-menu2 li {
  display: inline-block;
}

.footer-menu2 li a {
  color: white;
  text-decoration: none;
}

.footer-menu2 li a:hover {
  color: #c40c86;
}
/* All Inner Page Css */

/* About Us inner page css */
.breatcome-area {
  background: url(../images/bratcome.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 130px 0;
}
.breatcome-title h1 {
  color: #fff;
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 19px;
}
.bratcome-text ul {
  list-style: none;
}
.bratcome-text ul li {
  display: inline-block;
  margin-right: 15px;
  color: #fff;
  font-weight: 600;
}
.bratcome-text ul li a {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: .5s;
}
.bratcome-text ul li a:hover{
  color:#C40C86 ;
}
.bratcome-text ul li a::before {
  position: absolute;
  content: "/";
  left: 50px;
}

/* team area inner page css */
.team-area {
  padding: 110px 0 110px;
}
.single-team-box {
  overflow: hidden;
  transition: .5s;
  margin: 48px 0 0px;
}
.single-team-box:hover{
  transform: translateY(-10px);
}
.team-area .section-sub-title h5 {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.team-thumb {
  position: relative;
  border: 8px solid #012068;
  border-radius: 5px 5px 0px 0px;
}
.team-thumb img {
  width: 100%;
}
.team-social-icon {
  position: absolute;
  top: 18px;
  right: -51px;
  transition: .5s;
}
.single-team-box:hover .team-social-icon {
  right: 24px;
}
.team-social-icon ul {
  list-style: none;
}
.team-social-icon ul li {
  margin: 0 0 9px;
}
.team-social-icon ul li a i {
  width: 35px;
  height: 35px;
  background: #012068;
  line-height: 35px;
  color: #fff;
  text-align: center;
  border-radius: 100%;
  font-size: 14px;
  transition: .5s;
}
.team-social-icon ul li a i:hover{
  background: #C40C86;
}
.team-content {
  text-align: center;
  background: #012068;
  padding: 18px 0 21px;
  border-radius: 0px 0px 5px 5px;
}
.team-content h5 a {
  font-size: 22px;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 5px;
  transition: .5s;
}
.team-content h5 a:hover{
  color:#C40C86 ;
}
.team-content span {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}
/* blog inner page css */
.blog-area {
  padding: 110px 0 70px;
}
.blog-single-box {
  margin-bottom: 40px;
}
.blog-thumb {
  position: relative;
}
.blog-thumb::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #C40C86;
  border-radius: 5px;
  transform: scale(0);
  transition: .5s;
}
.blog-single-box:hover .blog-thumb::before{
  transform: scale(1);
  border-radius: 5px 5px 0px 0px;
}
.blog-thumb img {
  width: 100%;
}
.blog-icon-thumb {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  opacity: 0;
  transition: .5s;
}
.blog-single-box:hover .blog-icon-thumb{
  opacity: 1;
}
.blog-content {
  background: #f9f7ff;
  padding: 17px 30px 0px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 0 0 5px 5px;
}
.blog-list ul {
  list-style: none;
}
.blog-list ul li {
  display: inline-block;
  margin-right: 60px;
}
.blog-list ul li a {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #7e8890;
  margin: 2px 0 13px;
  text-decoration: none;
}
.blog-title a {
  text-decoration: none;
}
.blog-title a h4 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin: 0 0 8px;
}
.blog-title a h4:hover {
  color: #C40C86;
}

/* blog details inner page css */

.blog-details-area {
  padding: 100px 0 0px;
}
.blog-details-single-box {
  background: #fff;
  box-shadow: 0px 10px 30px rgb(1 15 28 / 8%);
  padding: 42px 38px 32px;
  border-radius: 20px;
  margin-bottom: 44px;
}
.blog-details-thumb img {
  width: 100%;
  border-radius: 20px;
}
.blog-details-details-content-list ul {
  list-style: none;
}
.blog-details-content-list ul li {
  display: inline-block;
  margin-right: 28px;
}
.blog-details-content-list ul li a {
  display: inline-block;
  font-size: 14px;
  margin: 29px 0 13px;
  text-decoration: none;
}
.blog-details-content-list ul li a:hover {
  color: #C40C86;
}
.blog-details-content-list ul li a i {
  margin-right: 5px;
  color: #C40C86;
}
.blog-details-content-title h2 {
  font-size: 30px;
  font-weight: 600;
  margin: 7px 0px 20px;
}
.blog-details-content-title h2 a{
  transition: .5s;
}
.blog-details-content-title h2 a:hover{
  color:#C40C86;
}
.blog-details-content-discription {
  margin-bottom: 28px;
}
.blog-details-btn a {
  display: inline-block;
  font-size: 14px;
  background: #C40C86;
  border: 1px solid #C40C86;
  padding: 16px 36px;
  font-weight: 500;
  position: relative;
  border-radius: 30px;
  z-index: 1;
  overflow: hidden;
  color: #000;
  transition: .5s;
}
.blog-details-btn a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0, 1);
  z-index: -1;
  opacity: 0;
  transition: .5s;
}
.blog-details-btn a:hover::before{
  opacity: 1;
  transform: scale(1,1);
  background: #fff;
  border-radius: 30px;
}

/* sidebar area css */

.sidebar-seach-box {
  background: #fff;
  box-shadow: 0px 10px 30px rgb(1 15 28 / 8%);
  padding: 35px 30px 35px;
  position: relative;
  border-radius: 20px;
  margin-bottom: 40px;
}
.sidebar-search {
  display: flex;
}
.form-control {
  height: 55px;
  width: 100%;
  padding: 0 25px 0 25px;
  font-size: 12px;
  border-radius: 30px;
  background: #F6F4EC;
}
button.button {
  border: inherit;
  position: absolute;
  right: 0;
  background: none;
  left: 66%;
  top: 41px;
}
button.button i {
  background:#C40C86;
  height: 40px;
  width: 40px;
  line-height: 40px;
  display: inline-block;
  border-radius: 100%;
  font-size: 14px;
  color: #fff;
}
.sidebar-box {
  background: #fff;
  box-shadow: 0px 10px 30px rgb(1 15 28 / 8%);
  padding: 35px 30px 35px;
  border-radius: 20px;
  margin-bottom: 40px;
}
.sidebar-title h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 28px;
}
.sidebar-catagori ul {
  list-style: none;
}
.sidebar-catagori ul li {
  background: #F6F4EC;
  margin: 14px 0px 0px;
  padding: 17px 30px;
  border-radius: 30px;
}
.sidebar-catagori ul li a:hover{
  color: #C40C86;
}
.sidebar-thumb img {
  width: 100%;
}
.recent-post {
  display: flex;
  margin-bottom: 18px;
}
.recent-post-thumb img {
  border-radius: 8px;
  margin-top: 5px;
}
.post-title a {
  display: inline-block;
  text-decoration: none;
}
.post-title a h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  margin: 0 20px 0px;
  text-decoration: none;
}
.post-title a h4:hover {
  color: #C40C86;
}
.post-date a {
  font-size: 14px;
  margin: 0px 21px 0;
  transition: .5s;
  text-decoration: none;
}
.post-date a:hover {
  color: #C40C86;
}
.post-date a i {
  font-size: 14px;
  margin-right: 3px;
  color: #C40C86;
}
.blog-quote {
  padding: 50px 50px 50px 50px;
  background: #ffff;
  box-shadow: 0 0 30px 0 rgb(0 0 0 / 8%);
  border-radius: 8px;
  position: relative;
  margin: 36px 0 36px;
}
.blog-quote::before {
  position: absolute;
  content: "\F6B0";
  font-family: 'bootstrap-icons';
  font-size: 50px;
  right: 36px;
  bottom: 51px;
  opacity: 0.06;
}
.blog-quote p {
  font-style: italic;
}
.blog-quote h3 {
  font-size: 20px;
  position: relative;
  margin: 0 63px;
}
.blog-quote h3::before {
  position: absolute;
  content: "";
  height: 3px;
  width: 50px;
  background: #C40C86;
  bottom: 8px;
  left: -62px;
}
h3.mt-40 {
  margin: 50px 0 19px;
}
/* comment form */
.comment-form {
  padding: 40px;
  box-shadow: 0px 6px 30px rgb(7 36 95 / 8%);
  border-radius: 20px;
  margin-bottom: 100px;
}
.form-title h3 {
  margin-bottom: 15px;
}
.comment-rating {
  display: flex;
}
.comment-rating p {
  margin-right: 10px;
}
.comment-rating span i {
  color: #C40C86;
}
.style-three .form-box {
  position: relative;
}
.form-box textarea {
  width: 100%;
  height: 150px;
  padding: 16px 17px;
  border-radius: 5px;
  background: #f0f1f2;
  outline: 0;
  border: 1px solid #e0e0e0;
  transition: .5s;
  margin-bottom: 16px;
}
.form-box i {
  position: absolute;
  right: 27px;
  top: 16px;
}
.form-box input {
  width: 100%;
  height: 55px;
  padding: 16px 17px;
  border-radius: 5px;
  background: #f0f1f2;
  outline: 0;
  border: 1px solid #e0e0e0;
  margin-bottom: 19px;
}
.checkbox-box label {
  padding-left: 5px;
  font-size: 16px;
  color: #000;
  margin-bottom: 29px;
}
.form-box button {
  display: inline-block;
  font-size: 14px;
  background: rgba(9,67,134,255);
  border: 1px solid rgba(9,67,134,255);
  font-weight: 500;
  position: relative;
  border-radius: 5px;
  z-index: 1;
  overflow: hidden;
  color: white;
  transition: .5s;



}

.form-box button:hover{
  color: rgba(9,67,134,255);
  background-color: white;
}
.form-box button::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0, 1);
  z-index: -1;
  opacity: 0;
  transition: .5s;
}
.form-box button:hover::before{
  opacity: 1;
  transform: scale(1,1);
  background: #fff;
  border-radius: 10px;
  color: rgba(9,67,134,255);
}


/* contact us inner page  */

.map-area {
  padding: 100px 0 100px;
}
.contact-info-area {
  padding: 0px 0 12px;
}
.contact-info {
  background: #fff;
  box-shadow: 0px -4px 30px rgb(1 15 28 / 8%);
  padding: 52px 57px 52px;
  background-size: 100% 100%;
  border-radius: 10px;
}
.contact-info-icon {
  width: 80px;
  height: 80px;
  display: inline-block;
  line-height: 80px;
  background: #C40C86;
  font-size: 32px;
  color: #fff;
  position: relative;
  border-radius: 100%;
  z-index: 1;
}
.contact-info-icon::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 10px;
  top: 5px;
  background: #C40C86;
  opacity: 0.4;
  border-radius: 100%;
  z-index: -1;
  transition: .5s;
}
.contact-info:hover .contact-info-icon::before{
  left: 0;
  top: 0;
}
.contact-info-icon::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: -10px;
  top: -5px;
  border-radius: 100%;
  background: #C40C86;
  opacity: 0.4;
  z-index: -1;
  transition: .5s;
}
.contact-info:hover .contact-info-icon::after{
  left: 0;
  top: 0;
}
.contact-info-title h3 {
  padding: 26px 0 9px;
  font-size: 24px;
}
.contact-numbar ul {
  list-style: none;
}
.contact-numbar ul li a {
  display: inline-block;
  text-decoration: none;
}

/* contact area inner page */

 .contact-area {
  padding: 100px 0 100px;
}
.row.inner {
  background: #fff;
  padding: 40px 59px 48px 59px;
  box-shadow: 8px 9px 35px 0px rgb(145 145 145 / 24%);
  border-radius: 20px;
}
.contact-title {
  margin-bottom: 37px;
}
.contact-title h3 {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
}
.contact-area .form_box.inner {
  padding-bottom: 26px;
}
.contact-area .form_box.inner input {
  width: 100%;
  height: 55px;
  padding: 0 25px 0 25px;
  background: #f0f1f2;
  outline: 0;
  border-radius: 30px;
  border: 0;
}
.contact-area input[type="text"]::placeholder {
  font-size: 14px;
}
.contact-area .form_box.inner textarea {
  width: 100%;
  height: 150px;
  border-radius: 20px;
  padding: 14px 25px 14px 25px;
  background: #f0f1f2;
  border: 0;
  outline: 0;
}
.contact-area textarea#massege::placeholder {
  font-size: 14px;
}
.form-button {
  text-align: center;
}
.contact-area .form-button.inner button {
  display: inline-block;
  font-size: 14px;
  background: #C40C86;
  border: 1px solid #C40C86;
  padding: 15px 36px 15px 36px;
  font-weight: 500;
  position: relative;
  border-radius: 30px;
  z-index: 1;
  overflow: hidden;
  color: #000;
  transition: .5s;
}
.contact-area .form-button.inner button::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0, 1);
  z-index: -1;
  opacity: 0;
  transition: .5s;
}
.contact-area .form-button.inner button:hover::before{
  opacity: 1;
  transform: scale(1,1);
  background: #fff;
  border-radius: 10px;
} 

/* events innner page css */
.events-area {
  padding: 110px 0 50px;
}
.events-single-box {
  margin-bottom: 60px;
  transition: .5s;
}
.events-single-box:hover{
  transform: translateY(-10px);
}
.events-thumb {
  position: relative;
}
.events-thumb img {
  width: 100%;
  border-radius: 5px 5px 0px 0px;
}
.events-catagori {
  position: absolute;
  top: 30px;
  left: 30px;
}
.events-catagori a {
  display: inline-block;
  text-decoration: none;
  background: #C40C86;
  padding: 5px 20px;
  border-radius: 4px;
  color: #fff;
}
.events-content {
  background: #ffff;
  box-shadow: 0 0 20px #eee;
  padding: 25px 30px 15px 30px;
  border-radius: 0 0 5px 5px;
}
.events-content h5 {
  font-size: 14px;
  font-weight: 400;
  margin: 23px 0 19px;
}
.events-content a {
  display: inline-block;
  text-decoration: none;
}
.events-content a h4 {
  font-size: 26px;
  line-height: 32px;
  transition: .5s;
}
.events-content a h4:hover {
  color: #C40C86;
}
.events-content p {
  font-size: 16px;
  font-weight: 400;
  margin: 18px 0 35px;
}
.events-btm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #efefef;
  padding-top: 26px;
}
.events-date span {
  font-size: 14px;
}
.events-date span i {
  font-size: 14px;
  margin-right: 2px;
}
.events-btn a {
  background: #C40C86;
  padding: 7px 15px;
  color: #fff;
  border-radius: 2px;
  display: inline-block;
  font-size: 14px;
  transition: .5s;
}
.events-btn a:hover{
  background:#012068 ;
}

/* service inner page css */

.program-area.inner {
  padding: 102px 0 70px;
}
/* gallery inner page css */
.protfolio-area.inner {
  padding: 104px 0 92px;
}




/* scroll up area */

.scroll-area{
  position: relative;
  z-index: 999;
 }
.scroll-area .go-top {
    position: fixed;
    cursor: pointer;
    top: 0;
    right: 30px;
    color: #ffffff;
    background-image: -moz-linear-gradient(0deg, #C40C86 0%, #C40C86 100%);
    background-image: -webkit-linear-gradient(0deg, #C40C86 0%, #C40C86 100%);
    z-index: 9999;
    width: 45px;
    text-align: center;
    height: 45px;
    line-height: 42px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.9s ease-out 0s;
    -moz-transition: all 0.9s ease-out 0s;
    border-radius: 10px; 
}
.scroll-area .go-top i {
      position: absolute;
      top: 50%;
      left: -4px;
      right: 0;
      margin: 0 auto;
      font-size: 15px;
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-transition: all 0.5s ease-out 0s;
      -moz-transition: all 0.5s ease-out 0s;
  }
.scroll-area .go-top i:last-child {
    opacity: 0;
    visibility: hidden;
    top: 60%; 
}
.scroll-area .go-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(to right, #191514  0%, #191514  100%);
    background-image: -ms-linear-gradient(0deg, #191514  0%, #191514  100%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    border-radius: 100%;
}
.scroll-area .go-top:focus, .scroll-area .go-top:hover {
      color: #fff; 
  }
.scroll-area .go-top:focus::before, .scroll-area .go-top:hover::before {
        opacity: 1;
        visibility: visible; 
}
.scroll-area .go-top:focus i:first-child, .scroll-area .go-top:hover i:first-child {
        opacity: 0;
        top: 0;
        visibility: hidden;
 }
.scroll-area .go-top:focus i:last-child, .scroll-area .go-top:hover i:last-child {
        opacity: 1;
        visibility: visible;
        top: 50%; 
}
.scroll-area .go-top.active {
    top: 95%;
    -webkit-transform: translateY(-98%);
    -moz-transform: translateY(-98%);
    opacity: 1;
    visibility: visible;
    border-radius: 0;
    right: 30px;
    border-radius:100%;
}
.top-wrap {
  position: relative; 
}
.top-wrap .go-top-button {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    top: 3px;
    z-index: 1;
    background: #C40C86;
}
 .top-wrap .go-top-button i {
      font-size: 20px;
      font-weight: 700;
      padding-left: 4px;
      color: #fff;
 }
.top-wrap .go-top-button::after {
    z-index: -1;
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 45px;
    height: 45px;
    -webkit-animation: ripple 1.6s ease-out infinite;
    -moz-animation: ripple 1.6s ease-out infinite;
    opacity: 0;
    background-image: -moz-linear-gradient(0deg, #C40C86 0%,#C40C86 100%);
    background-image: -webkit-linear-gradient(0deg, #C40C86 0%, #C40C86 100%);
    border-radius: 100%;
}
.top-wrap .go-top-button:hover {
      background-color: #C40C86;
      color: #fff; 
  }
@keyframes ripple {
  0%, 35% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1; }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8; }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2); } }





/* Animation */

.rotateme {
    -webkit-animation-name: rotateme;
            animation-name: rotateme;
    -webkit-animation-duration: 20s;
            animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }
  
  @keyframes rotateme {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }





  /* bounce-animate */
 
  .bounce-animate {
    animation-name: float-bob;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear; }
  .bounce-animate2 {
    animation-name: float-bob2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob2;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob2;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob2;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear; }
  .bounce-animate3 {
    animation-name: float-bob3;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob3;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob3;
    -ms-animation-duration: 4s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob3;
    -o-animation-duration: 4s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear; }
  .bounce-animate4 {
    animation-name: float-bob4;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob4;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob4;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob4;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear; }
   .bounce-animate5 {
    animation-name: float-bob5;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob5;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob5;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob5;
    -o-animation-duration: 6s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear; }
   

    @-webkit-keyframes float-bob {
        0% {
          -webkit-transform: translateY(-30px);
          transform: translateY(-30px); }
        50% {
          -webkit-transform: translateY(-15px);
          transform: translateY(-15px); }
        100% {
          -webkit-transform: translateY(-30px);
          transform: translateY(-30px); } }
      @-webkit-keyframes float-bob2 {
        0% {
          -webkit-transform: translateY(-60px);
          transform: translateY(-60px); }
        50% {
          -webkit-transform: translateY(-30px);
          transform: translateY(-30px); }
        100% {
          -webkit-transform: translateY(-60px);
          transform: translateY(-60px); } }
      @-webkit-keyframes float-bob3 {
        0% {
          -webkit-transform: translateY(-40px);
          transform: translateY(-40px); }
        50% {
          -webkit-transform: translateY(-25px);
          transform: translateY(-25px); }
        100% {
          -webkit-transform: translateY(-40px);
          transform: translateY(-40px); } }
      @-webkit-keyframes float-bob4 {
        0% {
          -webkit-transform: translateY(-70px);
          transform: translateY(-70px); }
        50% {
          -webkit-transform: translateY(-35px);
          transform: translateY(-35px); }
        100% {
          -webkit-transform: translateY(-70px);
          transform: translateY(-70px); } }
      @-webkit-keyframes float-bob5 {
        0% {
          -webkit-transform: translateY(-75px);
          transform: translateY(-75px); }
        50% {
          -webkit-transform: translateY(-35px);
          transform: translateY(-35px); }
        100% {
          -webkit-transform: translateY(-75px);
          transform: translateY(-75px); } }
      @-webkit-keyframes movebounce {
        0% {
          -webkit-transform: translateY(0px);
                  transform: translateY(0px);
        }
        50% {
          -webkit-transform: translateY(20px);
                  transform: translateY(20px);
        }
        100% {
          -webkit-transform: translateY(0px);
                  transform: translateY(0px);
        }
      }
      
      @keyframes movebounce {
        0% {
          -webkit-transform: translateY(0px);
                  transform: translateY(0px);
        }
        50% {
          -webkit-transform: translateY(20px);
                  transform: translateY(20px);
        }
        100% {
          -webkit-transform: translateY(0px);
                  transform: translateY(0px);
        }
      }
      
      @-webkit-keyframes moveleftbounce {
        0% {
          -webkit-transform: translateX(0px);
                  transform: translateX(0px);
        }
        50% {
          -webkit-transform: translateX(20px);
                  transform: translateX(20px);
        }
        100% {
          -webkit-transform: translateX(0px);
                  transform: translateX(0px);
        }
      }
      
      @keyframes moveleftbounce {
        0% {
          -webkit-transform: translateX(0px);
                  transform: translateX(0px);
        }
        50% {
          -webkit-transform: translateX(20px);
                  transform: translateX(20px);
        }
        100% {
          -webkit-transform: translateX(0px);
                  transform: translateX(0px);
        }
      }
      
      .rotateme {
        -webkit-animation-name: rotateme;
                animation-name: rotateme;
        -webkit-animation-duration: 20s;
                animation-duration: 20s;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
      }
      
      @keyframes rotateme {
        from {
          -webkit-transform: rotate(0deg);
                  transform: rotate(0deg);
        }
        to {
          -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
        }
      }
      
      @-webkit-keyframes rotateme {
        from {
          -webkit-transform: rotate(0deg);
        }
        to {
          -webkit-transform: rotate(360deg);
        }
      }
      
      @-webkit-keyframes rotate3d {
        0% {
          -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
        }
        100% {
          -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
        }
      }
      
      @keyframes rotate3d {
        0% {
          -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
        }
        100% {
          -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
        }
      }
      
      @keyframes animationFramesOne {
        0% {
          -webkit-transform: translate(0px, 0px) rotate(0deg);
                  transform: translate(0px, 0px) rotate(0deg);
        }
        20% {
          -webkit-transform: translate(73px, -1px) rotate(36deg);
                  transform: translate(73px, -1px) rotate(36deg);
        }
        40% {
          -webkit-transform: translate(141px, 72px) rotate(72deg);
                  transform: translate(141px, 72px) rotate(72deg);
        }
        60% {
          -webkit-transform: translate(83px, 122px) rotate(108deg);
                  transform: translate(83px, 122px) rotate(108deg);
        }
        80% {
          -webkit-transform: translate(-40px, 72px) rotate(144deg);
                  transform: translate(-40px, 72px) rotate(144deg);
        }
        100% {
          -webkit-transform: translate(0px, 0px) rotate(0deg);
                  transform: translate(0px, 0px) rotate(0deg);
        }
      }
      
      @-webkit-keyframes animationFramesOne {
        0% {
          -webkit-transform: translate(0px, 0px) rotate(0deg);
        }
        20% {
          -webkit-transform: translate(73px, -1px) rotate(36deg);
        }
        40% {
          -webkit-transform: translate(141px, 72px) rotate(72deg);
        }
        60% {
          -webkit-transform: translate(83px, 122px) rotate(108deg);
        }
        80% {
          -webkit-transform: translate(-40px, 72px) rotate(144deg);
        }
        100% {
          -webkit-transform: translate(0px, 0px) rotate(0deg);
        }
      }
      

/*===========================
<--  Loader Css -->
=============================*/
.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 666;
}
.loader {
  position: relative;
  display: block;
  z-index: 201;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  transition: all 1s 1s ease;
  border: 3px solid transparent;
  border-top-color: #C40C86;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
.loader:before {
  position: absolute;
  content: '';
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-left-color: #012068;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loader:after {
  position: absolute;
  content: '';
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-right-color: #fff;
  -webkit-animation: spin 2.5s linear infinite;
  -moz-animation: spin 2.5s linear infinite;
  -o-animation: spin 2.5s linear infinite;
  animation: spin 2.5s linear infinite;
}
/*/ Here comes the Magic /*/

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #000;
    z-index: 2;
}
.loader-wrapper .loder-section.left-section {
  left: 0;
  transition: 1s 1.4s ease;
}
.loader-wrapper .loder-section.right-section {
  right: 0;
  transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
  left: -100%;
}
.loaded .loder-section.right-section {
  right: -100%;
}
.loaded .loader-wrapper {
  visibility: hidden;
}
.loaded .loader {
  top: -100%;
  opacity: 0;
}
.shadow-box {
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  background-color: #f8f8f8;
  border-radius: 10px;
  transform: translateZ(0);
}
.contenedor-v {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1600px; /* Aumenta el ancho máximo del contenedor principal */
  margin: 0 auto;
  padding: 30px;
  background-color: #faf9f7; /*PANEL DE VIDEOS*/
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.video-container {
  flex-basis: calc(30% - 20px); /* Aumenta el tamaño de los contenedores de video y el margen */
  background-color: #fff;/*VIDEOS*/
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.video-container:hover {
  transform: translateY(-5px);
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-container h3 {
  font-size: 24px;
  text-align: center;
  font-weight: 600;
  margin: 20px 0;
  color: #012068;
  height: 95px; /* Establece una altura fija para el título */
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Estilos para tablet */
@media (max-width: 768px) {
  .video-container {
    flex-basis: 100%;
    max-width: 100%;
  }

  .video-container h3 {
    font-size: 20px;
  }
}

/* Estilos para pantallas de 320px */
@media (max-width: 320px) {
  .contenedor-v {
    max-width: 100%;
    padding: 20px;
  }

  .video-container {
    flex-basis: 100%;
    margin-right: 0;
  }

  .video-container:nth-child(even) {
    margin-left: 0;
  }

  .video-container h3 {
    font-size: 16px;
    margin: 10px 0;
  }
}


.checkbox-container {
  display: inline-block;

  border-radius: 4px;
  padding: 2px;
}

.checkbox-container .green-checkbox {
  color: #ffff;
  background: #5cb85c;
  padding: 2px;
  border-radius: 2px;
}


.foti {
 padding: 50px;
}

.copy{
  text-align: center;
  margin: 0 auto;
  
}




footer {
	background-color: #012068;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	color: #fff;
}

.footer-section {
	margin-bottom: 10px;
}

.logo img {
	width: 200px;
	height: auto;
}

.social-icons {
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.social-icons a {
	color: #fff;
	transition: color 0.3s ease;
	margin-right: 10px;
}

.social-icons a:last-child {
	margin-right: 0;
}

.social-icons a:hover {
	color: #c40c86;
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.footer-menu li {
	margin-right: 15px;
}

.footer-menu li:last-child {
	margin-right: 0;
}

.footer-menu a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

.footer-menu a:hover {
	color: #c40c86;
}

@media only screen and (max-width: 1024px) {
	.logo img {
		width: 150px;
	}
}

@media only screen and (max-width: 768px) {
	.logo img {
		width: 120px;
	}

	.footer-menu {
		justify-content: center;
	}

	.footer-menu li {
		margin-right: 10px;
	}
}

@media only screen and (max-width: 320px) {
	.logo img {
		width: 200px;
	}

	.footer-menu li {
		margin-right: 5px;
	}

	.footer-section {
		width: 100%;
		text-align: center;
	}
}
.card {
  background-color: #f0f0f0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  max-width: 600px; /* Ajusta este valor para aumentar el tamaño de la tarjeta */
  width: 100%;
}

.carousel {
  position: relative;
  text-align: center;
  overflow: hidden; /* Evita que la imagen se desborde */
}

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

.buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

button {
  margin: 0 5px;
}
.cont{
	display: flex;
	margin-top: 35px;
  justify-content: center;
  align-items: center;
	margin-bottom: 35px;
}
#contenido {
    display: none;
}

.center-container {
    position: relative; /* Agregamos posición relativa para poder posicionar el botónContenedor */
    display: flex;
    flex-direction: column; /* Mostrar elementos en columna */
    justify-content: center;
    align-items: center;
 margin-bottom: 20px;

}

#botonContenedor {
    position: sticky; /* Posición pegajosa */
    top: 0; /* Posicionar en la parte superior */

}