/* 

TemplateMo 586 Scholar

https://templatemo.com/tm-586-scholar

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #7a6ad8;
  color: #fff;
}

::-moz-selection {
  background: #7a6ad8;
  color: #fff;
}

.section {
  padding-top: 30px;
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 60px;
  font-size: 30px;
}

.section-heading h2 {
  font-size: 40px;
  font-weight: 600;
  text-transform: capitalize;
  margin: 20px 0;
  line-height: 44px;
}

.section-heading h2 em {
  color: #7a6ad8;
  font-style: normal;
}

.section-heading h6 {
  color: #7a6ad8;
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 600;
}

.section-heading p {
  font-size: 21px;
  line-height: 1.6;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #7a6ad8;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #7a6ad8;
  border-radius: 50%;
}



/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: #7a6ad8 !important;
  border-radius: 0px 0px 25px 25px;
  margin-left: -100px; 
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area {
  position: absolute;
  background-color: transparent;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  background: transparent;
  display: flex
}

.header-area .main-nav .logo {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: inline-block;
}

.header-area .main-nav .logo h1 {
  font-size: 36px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-right: 5px;
  padding-right: 5px;
  border-right: 1px solid rgba(250, 250, 250, 0.3);
}

.background-header .main-nav .logo,
.background-header .main-nav #search {
  margin-top: 18px;
}

.header-area .main-nav ul.nav {
  border-radius: 0px 0px 25px 25px;
  flex-basis: 100%;
  margin-right: 0px;
  justify-content: right;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 5px;
  padding-right: 5px;
  height: 40px;
  line-height: 40px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  font-weight: 300;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #fff;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: .25px;
}


.background-header .main-nav .nav {margin-top: 20px;}

.background-header .main-nav .nav li {
  height: 80px;
  line-height: 80px;
}

.header-area .main-nav .nav li:hover a {
  opacity: 0.8;
}
.header-area .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
  opacity: 1;
}

.background-header .main-nav .nav li:hover a {
  opacity: 0.8;
}
.background-header .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
  opacity: 1;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 20px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky .nav li a.active {
  color: #fff;
}

.visible{
  display:inline !important;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 2px;
    padding-right: 2px;
  }
  .header-area .main-nav .nav li a {
    padding-left: 10px;
    padding-right: 10px;
  }

}

@media (max-width: 767px) {
  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background-color: #f1f0fe;
  }
  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 400;
    color: #1e1e1e;
    background-color: #f1f0fe;
     border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #ddd;
    background-color: #f1f0fe;
    height: 50px;
    border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li:last-child,
  .header-area .main-nav .nav li:last-child {
    border-radius: 0px 0px 25px 25px;
  }
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 0px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #7a6ad8!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: transparent;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
    margin-top: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

}
  /* =========================================
   NUEVOS ESTILOS PARA VISIÓN, MISIÓN Y OBJETIVOS
   ========================================= */

/* Para el Título (Ej. Nuestra Visión) */

.header-text h2{
  font-family: Playfair Display;
  font-weight: 700;
}

.header-text p{
  font-family: Source Sans Pro;
}




/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/


/* ---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: #7a6ad8 !important;
  border-radius: 0px 0px 25px 25px;
  margin-left: -100px; 
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  transition: all .5s ease 0s;
}

.header-area {
  position: absolute;
  background-color: transparent;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  background: transparent;
  display: flex;
}

.header-area .main-nav .logo {
  transition: all 0.3s ease 0s;
  display: inline-block;
}

.header-area .main-nav .logo h1 {
  font-size: 36px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-right: 5px;
  padding-right: 5px;
  border-right: 1px solid rgba(250, 250, 250, 0.3);
}

.background-header .main-nav .logo,
.background-header .main-nav #search {
  margin-top: 18px;
}

.header-area .main-nav ul.nav {
  border-radius: 0px 0px 25px 25px;
  flex-basis: 100%;
  margin-right: 0px;
  justify-content: right;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 5px;
  padding-right: 5px;
  height: 40px;
  line-height: 40px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  font-weight: 300;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #fff;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: .25px;
}

.background-header .main-nav .nav { margin-top: 20px; }

.background-header .main-nav .nav li {
  height: 80px;
  line-height: 80px;
}

.header-area .main-nav .nav li:hover a { opacity: 0.8; }
.header-area .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
  opacity: 1;
}

.background-header .main-nav .nav li:hover a { opacity: 0.8; }
.background-header .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
  opacity: 1;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger { top: 20px; }

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after { content: ""; }
.header-area .main-nav .menu-trigger span { top: 16px; }

.header-area .main-nav .menu-trigger span:before {
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before { background-color: #fff; }

.header-area .main-nav .menu-trigger.active span:after {
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after { background-color: #fff; }

.header-area.header-sticky .nav li a.active { color: #fff; }

.visible { display:inline !important; }

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 2px;
    padding-right: 2px;
  }
  .header-area .main-nav .nav li a {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background-color: #f1f0fe;
  }
  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 400;
    color: #1e1e1e;
    background-color: #f1f0fe;
    border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #ddd;
    background-color: #f1f0fe;
    height: 50px;
    border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li:last-child,
  .header-area .main-nav .nav li:last-child {
    border-radius: 0px 0px 25px 25px;
  }
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 0px;
  }
  .background-header .main-nav .logo { top: 0px; }
  .background-header .main-nav .border-button { top: 0px !important; }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #7a6ad8!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a { width: 100%; }
  .header-area {
    background-color: transparent;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container { padding: 0px; }
  .header-area .logo {
    margin-left: 0px;
    margin-top: 30px;
  }
  .header-area .menu-trigger { display: block !important; }
  .header-area .main-nav { overflow: hidden; }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child { border-top: 1px solid #eee; }
  .header-area.header-sticky .nav { margin-top: 100px !important; }
  .background-header.header-sticky .nav { margin-top: 80px !important; }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/* =========================================
   ESTILOS TIPOGRAFÍA
   ========================================= */

.header-text h2{
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

.header-text p{
  font-family: 'Source Sans Pro', sans-serif;
}

/* ---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-image: url(../images/banner-bg.jpg);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 170px 0px 120px 0px;
}

/* Imágenes de respaldo (se ven si el video falla) */
.main-banner .item-1 { background-image: url(../images/banner-item-01.jpg); }
.main-banner .item-2 { background-image: url(../images/banner-item-02.jpg); }
.main-banner .item-3 { background-image: url(../images/banner-item-03.jpg); }

/* Configuración principal del ITEM (Contenedor) */
.main-banner .item {
  position: relative; /* Necesario para posicionar video y capas internas */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 25px;
  padding: 100px 100px;
  margin-left: 130px;
  overflow: hidden; /* Corta el video si se sale de los bordes redondeados */
  z-index: 1; /* Contexto de apilamiento base */
}

/* 1. CAPA DE VIDEO (Al fondo) */
.main-banner .item video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantiene proporciones sin deformar */
  z-index: 0; /* Nivel más bajo */
}

/* 2. CAPA DE DEGRADADO OSCURO (Encima del video) */
.main-banner .item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  /* Degradado para que el texto blanco sea legible */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 20%, rgba(0,0,0,0.3) 90%);
  z-index: 1; /* Nivel intermedio */
}

/* 3. CAPA DE TEXTO (Encima de todo) */
.main-banner .item .header-text {
  position: relative;
  z-index: 2; /* Nivel superior */
  color: #fff;
}

.main-banner .item span.category {
  background-color: #7a6ad8;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  padding: 5px 15px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 50px;
}

.main-banner .item h2 {
  font-size: 55px;
  font-weight: 700;
  color: #fff;
  line-height: 70px;
  width: 60%;
  margin-bottom: 40px;
}

.main-banner .item p {
  color: #e0e0e0;
  width: 65%;
  font-size: 20px;
}

.main-banner .item .buttons {
  display: flex;
  margin-top: 50px;
}

.main-banner .item .buttons .main-button {
  margin-right: 30px;
}

.main-banner .owl-nav {
  position: absolute;
  max-width: 1320px;
  bottom: 23px;
  left: 0;
  text-align: right;
  z-index: 3; /* Flechas por encima de todo */
}

.main-banner .owl-nav .owl-prev i,
.main-banner .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 1;
  transition: all .3s;
}

.main-banner .owl-nav .owl-prev i {
  position: absolute;
  bottom: 65px;
}

.main-banner .owl-nav .owl-prev i:hover,
.main-banner .owl-nav .owl-next i:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
}


/* Botón de control de volumen */
#btnSonido {
  position: absolute;
  bottom: 30px;        /* Distancia desde abajo */
  right: 30px;         /* Distancia desde la derecha */
  z-index: 10;         /* Por encima de todo (video y overlay) */
  
  background-color: rgba(255, 255, 255, 0.2); /* Transparente */
  border: 2px solid #fff;
  color: #fff;
  
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

#btnSonido:hover {
  background-color: #fff;
  color: #7a6ad8; /* Tu color morado */
}

/* =============================================
ESTILO DEL BOTÓN "MÁS INFORMACIÓN" (CORREGIDO)
============================================= 
*/

.main-button a {
  /* Alineación con Flexbox */
  display: inline-flex !important; 
  align-items: center;
  justify-content: center;
  gap: 6px; /* Espacio entre el texto y el icono */

  /* Estilos visuales */
  background-color: #7B68EE; /* Tu color morado */
  color: white;
  font-size: 18px; /* Tamaño más balanceado */
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  
  /* Forma */
  padding: 6px 22px;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap; /* Evita saltos de línea */
  
  /* Animación */
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Estilo del ícono de WhatsApp dentro del botón */
.main-button a i {
  font-size: 22px;
  color: #25d366; 
  border-radius: 50%; /* Círculo perfecto */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Efecto al pasar el mouse (Hover) */
.main-button a:hover {
  background-color: #6a5acd; /* Un tono un poco más oscuro */
  transform: translateY(-3px); /* Efecto de flotación */
  box-shadow: 0 8px 15px rgba(106, 90, 205, 0.4);
  color: white;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.services .service-item:hover .icon img {
  margin-top: -10px;
}

.services .service-item {
  position: relative;
  margin-top: 25px;
}

.services .service-item .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 190px;
  height: 190px;
  display: inline-block;
  text-align: center;
  line-height: 190px;
  background-color: #7a6ad8;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: -95px;
}

.services .service-item .icon img {
  width: 94%;
  height: 94%;
  object-fit: cover;
  border-radius: 50%;
  transition: all .2s;

}

.services .service-item .main-content {
  border-radius: 25px;
  padding: 80px 30px 50px 30px;
  background-color: #f1f0fe;
  margin-bottom: 30px;
  margin-right: 80px;
  transition: all .4s;
}

.services .service-item h4 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 30px;
  transition: all .4s;
  font-family: Playfair Display;
}

.services .service-item p {
  color: #4a4a4a;
  margin-bottom: 25px;
  font-size: 20px;
  font-family: Source Sans Pro;
}

.events_item .down-content h4 {
    font-family: Playfair Display; 
    font-size: 22px;
    font-weight: 700;
}

.events_item .down-content span.author, 
.events_item .thumb span.category {
    font-family: Source Sans Pro; 
}

.events_item .down-content span.author, 
.events_item .thumb span.category {
    font-family:  Source Sans Pro; 
}

.modal-content .modal-title, 
.modal-content .modal-body p {
    font-family:  Source Sans Pro;
    font-size: 17px;
    line-height: 1.5;
}

/* 
---------------------------------------------
About Style
--------------------------------------------- 
*/

.about-us {
  position: relative;
  padding: 0px;
  margin-top: 130px;
}

.about-us:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 84%;
  height: 100%;
  background-color: #f1f0fe;
  content: '';
  border-top-left-radius: 500px;
  border-bottom-left-radius: 500px;
}

.accordion {
  margin-top: -40px;
  margin-bottom: -40px;
  background-color: #7a6ad8;
  border-radius: 40px;
  padding: 80px 50px 50px 50px;
}

.accordion-item {
  background-color: #fff;
  border-radius: 40px !important;
  margin-bottom: 30px;
  border: none;
}

.accordion-item .accordion-button {
  outline: none;
  box-shadow: none;
  border-radius: 40px !important;
}

.accordion-button:not(.collapsed) {
  color: #7a6ad8;
  background-color: #fff;
}

h2.accordion-header button {
  padding: 15px 25px;
  font-family: 'Poppins';
  font-size: 20px;
  font-weight: 600;
}

.accordion-button::after {
  font-size: 22px;
  font-weight: 500;
  background-image: none;
  content: '+';
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background-color: #7a6ad8;
  color: #fff;
}

.accordion-button:not(.collapsed)::after {
  background-image: none;
  line-height: 32px;
  content: '-';
}

.accordion-body {
  padding: 0px 25px 30px 25px;
  font-size: 18px;
  line-height: 28px;
  color: #4a4a4a;
}

.about-us .section-heading {
  margin-left: 60px;
  margin-bottom: 0px;
}

.about-us .section-heading .main-button {
  margin-top: 50px;
}


/* 
---------------------------------------------
Section
--------------------------------------------- 
*/


/* El subtítulo pequeño (Sobre mí) */
.section-heading h6 {
    font-family:  Source Sans Pro;
    font-size: 16px;
    text-transform: uppercase;
}

/* El título principal (¿Cómo realizo...?) */
.section-heading h2 {
    font-family: Playfair Display;
    font-weight: 700;
    font-size: 36px;
}

/* El párrafo descriptivo */
.section-heading p {
    font-family: Source Sans Pro;
    line-height: 28px;
    color: #4a4a4a;
}

/* El botón de WhatsApp */
.main-button a {
    font-family: Source Sans Pro !important; 
}



/* 
---------------------------------------------
Courses Style
--------------------------------------------- 
*/

.courses {
  margin-top: 160px;
}

.event_filter {
  text-align: center;
}

.event_filter {
  background-color: #f1f0fe;
  border-radius: 50px;
  padding: 15px 40px;
  list-style: none;
  margin: 0 auto 70px;
  max-width: max-content;
}

.event_filter li {
  display: inline-block;
  margin: 0px 20px;
}

.event_filter li a {
  font-size: 14px;
  font-weight: 500;
  color: #1e1e1e;
  transition: all .3s;
}

.event_filter li

.event_filter li a.is_active,
.event_filter li a:hover {
  color: #7a6ad8;
}

.events_item .thumb {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
}

.events_item .thumb img {
  margin-bottom: -5px;
}

.events_item .thumb span.category {
  position: absolute;
  left: 30px;
  top: 30px;
  font-size: 14px;
  text-transform: uppercase;
  color: #7a6ad8;
  background-color: rgba(250, 250, 250, 0.95);
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 500;
  display: inline-block;
}

.events_item .thumb span.price {
  position: absolute;
  right: -30px;
  top: -50px;
  background-color: rgba(122, 106, 216, 0.95);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: inline-block;
  transition: all .3s;
}

.events_item .thumb span.price h6 {
  margin-top: 72px;
  margin-left: 22px;
  font-size: 28px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
}

.events_item .thumb span.price em {
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  vertical-align: top;
}

.events_item {
  background-color: #f1f0fe;
  border-radius: 25px;
  margin-bottom: 30px;
  position: relative;
  justify-content: center;
  align-items: center;
} 

.events_item .down-content {
  padding: 20px 30px 25px 30px;
}

.events_item .down-content span.author {
  color: #7a6ad8;
  font-size: 15px;
  display: inline-block;
  margin-bottom: 6px;
}

.events_item .down-content h4 {
  font-size: 22px;
  font-weight: 600;
  transition: all .3s;
}

.events_item:hover .down-content h4 {
  color: #7a6ad8;
}

.events_item:hover .thumb span.price {
  transform: scale(1.2);
}



/* Estilos para el botón "Más información" dentro de la tarjeta */
.btn-mas-info {
    display: inline-block;
    margin-top: 15px;       /* Espacio arriba del botón */
    padding: 8px 20px;
    background-color: transparent;
    color: #7a6ad8;         /* Color morado (igual que el autor/precio) */
    border: 4px solid #7a6ad8;
    font-size: 14px;
    font-weight: 600;
    border-radius: 25px;    /* Bordes redondeados */
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse por encima */
.btn-mas-info:hover {
    background-color: #7a6ad8;
    color: #ffffff;
    border-color: #7a6ad8;
}


/* 
---------------------------------------------
Facts Style
--------------------------------------------- 
*/

.fun-facts {
  position: relative;
  padding: 120px 0px 80px 0px;
  overflow: hidden;
}

.fun-facts:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 95%;
  height: 100%;
  background-color: #7a6ad8;
  content: '';
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
}

.fun-facts:after {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 15%;
  opacity: 0.5;
  top: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

.fun-facts .counter {
  text-align: center;
  margin-bottom: 40px;
}

.fun-facts h2 {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
}

.fun-facts h2::after {
  content: '+';
  margin-left: 5px;
}

.fun-facts p {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin-top: 15px;
}


/* 
---------------------------------------------
Team Style
--------------------------------------------- 
*/

.team {
  margin-top: 120px;
  padding-top: 20px;
}

.team .section-heading {
  margin-bottom: 140px; /* Da espacio para que las fotos que sobresalen no tapen el texto */
}

.team .section-heading h2 {
  color: #7a6ad8; /* Mismo color morado que usas en el resto del diseño */
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}


.team-member {
  position: relative;
  margin-bottom: 125px !important;
}

.team-member:hover img {
  top: -120px;
}

.team-member img {
  max-width: 220px;
  border-radius: 50%;
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-110px);
  transition: all .3s;
}

.team-member .main-content {
  border-radius: 25px;
  padding: 140px 30px 40px 30px;
  background-color: #f1f0fe;
  text-align: center;
}

.team-member .main-content span.category {
  color: #7a6ad8;
  font-size: 15px;
}

.team-member .main-content h4 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 15px;
}

.team-member .main-content ul li {
  display: inline-block;
  margin: 0px 2px;
}

.team-member .main-content ul li a {
  background-color: #fff;
  color: #7a6ad8;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all .3s;
}

.team-member .main-content ul li a:hover {
  background-color: #7a6ad8;
  color: #fff;
}

.team-member .main-content ul.social-icons {
  margin-bottom: 22px; /* Puedes ajustar este número para dar más o menos espacio */
}

/* 
---------------------------------------------
Mas información:
--------------------------------------------- 
*/

.btn-info-equipo {
  background-color: #f1f0fe; /* Fondo claro, igual al de tus tarjetas de servicios */
  color: #7a6ad8; /* Color del texto morado */
  border: 3px solid #7a6ad8; /* Borde morado y un poco más grueso */
  padding: 8px 20px; /* Un poco menos de padding vertical para que no se vea tan alto */
  border-radius: 50px; /* Bordes completamente redondeados */
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700; /* Texto un poco más grueso para que resalte */
  text-transform: uppercase; /* Opcional: hace que el texto esté en mayúsculas como en la imagen */
  letter-spacing: 1px; /* Un poco de espacio entre letras */
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Efecto al pasar el mouse (hover) */
.btn-info-equipo:hover {
  background-color: #7a6ad8; /* El fondo se vuelve morado */
  color: #ffffff; /* El texto se vuelve blanco */
  transform: translateY(-2px); /* Mantiene el pequeño efecto de salto */
  box-shadow: 0 4px 10px rgba(122, 106, 216, 0.3); /* Añade una sombra suave */
}
/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact-us {
  margin-top: 80px;
  position: relative;
  padding: 50px 0px;
}

.contact-us:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 65%;
  height: 100%;
  background-color: #f1f0fe;
  content: '';
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
}


.contact-us  .section-heading h2{
  margin-right: 110px;
  margin-bottom: 0px;
  font-family: Playfair Display;
}

.contact-us  .section-heading p {
  margin-top: 50px;
  font-family: Source Sans Pro;

}

.contact-us .special-offer {
  margin-top: 50px;
  background-color: #fff;
  border-radius: 25px;
  padding: 30px 120px;
  display: inline-block;
  position: relative;
}

.contact-us .special-offer span.offer {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #7a6ad8;
  width: 80px;
  padding: 30px 8px;
  line-height: 25px;
  height: 120px;
  border-radius: 15px 60px 60px 15px; 
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  text-align: left;
}

.contact-us .special-offer span.offer em {
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
}

.contact-us .special-offer h6 {
  font-size: 15px;
  color: #4a4a4a;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 15px;
}

.contact-us .special-offer h6 em {
  font-style: normal;
  color: #7a6ad8;
  font-weight: 600;
}

.contact-us .special-offer h4 {
  font-size: 22px;
  font-weight: 600;
}

.contact-us .special-offer h4 em {
  font-style: normal;
  color: #7a6ad8;
}

.contact-us .special-offer a {
  position: absolute;
  right: 30px;
  top: 35px;
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  background-color: #7a6ad8;
  color: #fff;
  border-radius: 50%;
}

.contact-us .contact-us-content {
  border-radius: 25px;
  padding: 80px;
  background-color: #7a6ad8;
  position: relative;
  z-index: 1;
}

.contact-us .contact-us-content::before {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 50%;
  transform: translateX(-149px);
  opacity: 0.5;
  top: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

.contact-us .contact-us-content::after {
  background: url(../images/contact-dec-02.png);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 183px;
  height: 149px;
  content: '';
  z-index: 2;
}

#contact-form input {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: rgba(249, 235, 255, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 0px 20px;
  font-size: 18px;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
}

#contact-form input::placeholder {
  color: #fff;
}

#contact-form textarea {
  width: 100%;
  height: 120px;
  border-radius: 25px;
  background-color: rgba(249, 235, 255, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 20px;
  font-size: 18px;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
}

#contact-form textarea::placeholder {
  color: #fff;
}

#contact-form button {
  border: none;
  height: 50px;
  font-size: 14px;
  font-weight: 600;
  background-color: #fff;
  padding: 0px 25px;
  border-radius: 25px;
  color: #7a6ad8;
  transition: all .4s;
  position: relative;
  z-index: 3;
}

#contact-form button:hover {
  opacity: 0.8;
}

.contact-us-content .more-info {
  text-align: center;
  background: rgb(85,0,227);
  background: linear-gradient(90deg, rgba(85,0,227,1) 0%, rgba(198,61,255,1) 100%);
  border-radius: 0px 0px 23px 23px;
  padding: 45px 30px 15px 30px;
}

.contact-us-content .more-info .info-item {
  text-align: center;
  margin-bottom: 30px;
}

.contact-us-content .more-info i {
  font-size: 32px;
  color: #fff;
  margin-bottom: 15px;
}

.contact-us-content .more-info h4 a {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

/* Estilo para el botón de WhatsApp en la sección de contacto */
#whatsapp-link {
  display: inline-flex;      /* Alinea texto e icono en una fila */
  align-items: center;       /* Centra verticalmente */
  gap: 12px;                 /* Espacio entre el texto y el icono */
  
  font-family:  Source Sans Pro;

  font-size: 20px;
  color: white;           /* Tu color naranja original */
  background-color: #a79ee8; /* Tu fondo negro original */
  
  padding: 10px 25px;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s ease; /* Para que el hover se vea suave */
}

/* Estilo para el icono de WhatsApp dentro del botón */
#whatsapp-link i {
  font-size: 26px;
  color: #25d366;            /* Verde oficial de WhatsApp */
}

/* Efecto visual al pasar el mouse (Hover) */
#whatsapp-link:hover {
  background-color:  #7a6ad8;
  transform: scale(1.03);    /* Un ligero crecimiento */
  box-shadow: 0px 8px 18px #6658b8;
}

/* ---------------------------------------------
Icono Gmail
--------------------------------------------- 
*/

/* Contenedor principal para que sea más angosto */
.special-offer {
    position: relative;
    padding: 20px 80px 20px 100px; /* Espacio para el óvalo y el ícono */
    background-color: #f8f9fa;
    border-radius: 20px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 1. Óvalo lateral izquierdo (más estilizado) */
.special-offer .offer {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 70px !important; /* Ancho reducido para que sea compacto */
    height: 100% !important;
    background-color: #7a6ad8 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 20px 0 0 20px; /* Solo redondeado a la izquierda */
    font-family: 'Arial', sans-serif;
    font-size: 20px !important;
    font-weight: bold;
    color: white !important;
}

/* Texto superior pequeño */
.special-offer h6 {
    font-size: 13px;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 5px;
}

/* 2. Títulos "Consulta" y "Postulación" */
.special-offer h4 {
    color: #7a6ad8 !important;
    font-family: 'Playfair Display', serif;
    font-size: 17px !important; /* Tamaño más pequeño y profesional */
    font-weight: 700;
    margin: 5px 0 0 0 !important; /* Margen mínimo */
    line-height: 1.2;
}

/* 3. El texto informativo en Negro */
.special-offer h4 em {
    color: #222 !important; /* Negro puro */
    font-style: normal !important;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px !important;
    display: inline; /* Cambiado a inline para que no ocupe tanto espacio */
    font-weight: 400;
}

/* 4. Botón de Gmail flotante a la derecha */
.special-offer a {
    position: relative;
    padding: 22px 8px 4px 4px; /* 100px a la izquierda para dejar espacio a la barra del 1° */
    background-color: #f8f9fa;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;    /* ESTO centra el icono y el texto horizontalmente */
    text-align: center;     /* Centra las líneas de texto */
    min-height: 95px;
    box-shadow: 0 4px 5px rgba(0,0,0,0.05);
}

.special-offer a i {
    font-size: 18px;
}

.special-offer a:hover {
    background-color: #5f4eb3;
    transform: translateY(-32%) scale(1.1);
}




/* ---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  margin-top: 150px;
  position: relative;
  background-color: #7a6ad8; /* Tu color original */
  min-height: 150px;
  border-radius: 150px 150px 0px 0px; /* Tu curva original */
  padding: 40px 0; /* Controlamos el espacio arriba y abajo */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.footer-content {
  display: flex;
  flex-direction: column; /* Apila los 3 elementos */
  align-items: center;
  gap: 15px; /* Espacio uniforme entre elementos */
  position: relative;
  z-index: 3;
}

footer p {
  color: #fff;
  font-weight: 400;
  margin: 0;
  text-align: center;
}

.social-intro {
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  font-style: Playfair Display;
  opacity: 0.9;
}

/* Iconos de redes sociales en FILA */
.footer-socials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Asegura que estén en fila */
  gap: 20px;     /* Espacio entre iconos */
}

.footer-socials li a {
  color: #fff;
  font-size: 24px;
  transition: all .3s;
}

.footer-socials li a:hover {
  transform: scale(1.2);
  color: #a79ee8; /* Usamos el lila claro que pediste antes */
}

/* Decoración original */
footer::before {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 30px;
  transform: rotate(180deg);
  opacity: 0.3;
  bottom: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

.boton-whatsapp-fijo{
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  background-color:#a79ee8;
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  font-family: Source Sans Pro;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 8px rgb(167, 158, 232, 1);
  transition: all 0.5s ease;
}

.boton-whatsapp-fijo:hover{
  background-color: #8f84d6;
  transform: translateY(-5px);
}


/* RESPONSIVE PARA MÓVILES (iPhone/Samsung) */
@media (max-width: 768px) {
  footer {
    border-radius: 80px 80px 0px 0px; /* Curva más suave en móvil */
    padding: 30px 15px;
  }
  
  footer p {
    font-size: 12px;
  }
}

/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area {
    top: 0px;
  }
  .header-area .main-nav .logo h1 {
    border-right: none;
  }
  .main-banner .item {
    padding: 80px 30px 120px 30px !important;
  }
  .main-banner .owl-nav {
    left: 30px !important;
  }
  .event_filter  {
    padding: 15px 20px;
  }
  .event_filter li {
    display: inline-block;
    margin: 0px 10px;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav #search input,
  .header-area .main-nav #search i {
    display: none;
  }
  .header-area .main-nav .logo h1 {
    font-size: 34px;
  }
  .header-area .main-nav .logo {
    border-right: none;
  }
  .main-banner {
    padding-top: 100px;
  }
  .main-banner .item {
    padding: 100px 60px 140px 60px;
    margin-left: 0px;
    text-align: center;
  }
  .main-banner .item h2,
  .main-banner .item p {
    width: 100%;
  }
  .main-banner .item h2 {
    font-size: 36px;
    line-height: 50px;
  }
  .main-banner .item .buttons {
    display: inline-block;
    text-align: center;
  }
  .main-banner .item .buttons .main-button {
    margin-right: 0px;
    margin-bottom: 30px;
  }
  .main-banner .owl-nav {
    left: 50% !important;
    transform: translateX(-60px) !important;
    bottom: 60px;
  }
  .main-banner .owl-nav .owl-prev i {
    bottom: 0px;
  }
  .main-banner .owl-nav .owl-next i {
    bottom: 0px;
    position: absolute;
    left: 65px;
  }
  .services {
    margin-top: 100px;
  }
  .about-us {
    margin-top: 100px;
  }
  .accordion {
    padding: 40px 25px 10px 25px;
  }
  .services .service-item .icon {
    width: 170px;
    height: 170px;
    line-height: 170px;
  }
 

  .about-us .section-heading {
    margin-left: 0px;
    margin-top: 120px;
  }
  .about-us::before,
  .testimonials::before,
  .contact-us::before {
    display: none;
  }
  .about-us .section-heading p,
  .testimonials .section-heading p,
  .contact-us .section-heading p {
    margin-top: 30px;
  }
  .about-us .section-heading .main-button {
    margin-top: 30px;
  }
  .about-us .main-button a {
    background-color: #7a6ad8;
    color: #fff;
  }
  .courses {
    margin-top: 80px;
  }
  .event_filter ul li {
    display: block;
    margin: 12px 5px;
  }
  .fun-facts {
    margin-top: 70px;
  }
  .fun-facts::before {
    width: 95%;
  }
  .team {
    margin-top: 160px;
  }
  .team-member {
    margin-bottom: 140px;
  }
  .testimonials {
    margin-top: -50px;
    padding: 0px;
  }
  .testimonials .section-heading {
    margin-left: 0px;
    margin-top: 40px;
  }
  .testimonials .item {
    padding: 40px 40px 60px 40px;
  }
  .testimonials .item h4 {
    font-size: 17px;
  }
  .testimonials .item img {
    margin-right: 15px;
  }
  .testimonials .owl-nav {
    display: none;
  }
  .events {
    margin-top: 80px;
  }
  .events .item {
    margin-bottom: 66px;
  }
  .events .item .image img {
    position: relative;
    max-width: 100%;
  }
  .events .item ul {
    margin-top: -40px;
  }
  .events .item ul li:first-child {
    width: 100% !important;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd;
  }
  .events .item ul li:nth-child(2) {
    width: 40% !important;
  }
  .events .item ul li {
    display: inline-block;
    width: 28% !important;
  }
  .events .item ul li:last-child {
    text-align: right;
  }
  .events .item a {
    bottom: 150px;
    top: auto;
  }
  .events .item ul li h6 {
    font-size: 14px;
  }
  .contact-us {
    padding-top: 20px;
  }
  .contact-us .section-heading {
    margin-right: 0px;
  }
  .contact-us .special-offer {
    background-color: #f1f0fe;
    margin-bottom: 60px;
    padding: 34px 30px 34px 100px;
    width: 100%;
  }
  .contact-us .special-offer h4 {
    font-size: 17px;
  }
  .contact-us .special-offer a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 15px;
    right: 15px;
  }
  .contact-us .contact-us-content {
    padding: 30px;
  }
  footer {
    margin-top: 30px;
  }
}

@media (max-width: 1200px) {
  .header-area .main-nav #search input {
    width: 200px;
  }
  .header-area .main-nav .nav li.has-sub:after {
    right: 15px;
  }
  .fun-facts:before {
    width: 95%;
  }
}


@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding: 0 4px;
  }
  .header-area .main-nav .nav li a {
    padding: 8px 10px;
    font-size: 16px;
  }
  .header-area .main-nav #search input {
    width: 180px;
  }
}

/* Responsive para móviles */
@media (max-width: 767px) {
  .header-area .main-nav {
    flex-direction: column;
    align-items: flex-start;
  }
  .header-area .main-nav .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav .nav {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 20px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
  }
  .header-area .main-nav .nav li a {
    width: 100%;
    background-color: #f1f0fe;
    color: #1e1e1e;
    line-height: 50px;
    height: 50px;
    border-radius: 0 0 25px 25px;
  }
  .header-area .main-nav #search {
    width: 100%;
    margin-top: 15px;
  }
  .header-area .main-nav #search input {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .services .col-md-6,
  .services .col-lg-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 40px;
  }

  .services .service-item {
    text-align: center;
    padding: 5px;
  }

  .services .service-item h4 {
    font-size: 20px;
  }

  .services .service-item p {
    font-size: 18px;
  }

  
   .main-button a {
    font-size: 31px !important;
  }
}

@media (max-width: 480px) {
  .main-button a {
    font-size: 10px !important;
    padding: 10px 0px !important;
    white-space: normal !important;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    gap: 6px; /* espacio entre texto e ícono */
  }

  .main-button i {
    font-size: 24px !important;
    margin: 0 !important;
    flex-shrink: 0; /* evita que se encoja */
  }

   .main-button a {
    font-size: 22px !important;
  }

  /* Ajuste para iPhone SE (Pantalla de 375px) */
@media (max-width: 375px) {
  .main-button a {
    padding: 4px 10px  !important; /* Reducimos un poco el padding lateral para que quepa */
    width: 100%;                   /* El recuadro crece hasta ocupar todo el ancho del cel */
    box-sizing: border-box;  /* Evita que el padding extra rompa el diseño */   
  }
}

/* Ajuste para iPhone XR, 12 Pro y 14 Pro Max */
@media (min-width: 390px) and (max-width: 430px) {
  .boton-info{
    padding: 40px 40px;
  }
}


@media (min-width: 390px) and (max-width: 430px) {
  .main-button a {
    display: flex !important;    /* Forzamos a que se comporte como bloque flexible */
    padding: 4px 14px !important; /* RECUADRO GRANDE: 25px arriba/abajo, 40px lados */
    width: 100% !important;        /* Hace que el recuadro use todo el ancho del iPhone */
    box-sizing: border-box !important; /* Asegura que el padding no rompa el ancho */
  }
}

}