@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Theme Name: Educal – Online Learning and Education HTML5 Template
    Author: Theme Pure
    Support: basictheme@gmail.com
    Description: Educal – Online Learning and Education HTML5 Template
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

    01. Common CSS
    02. Header CSS
    03. Hero CSS
    04. Category CSS
    05. Banner CSS
    06. Course CSS
    07. Events CSS
    08. Price CSS
    09. Cta CSS
    10. Product CSS
    11. Services CSS
    12. About CSS
    13. What CSS
    14. Why CSS
    15. Counter CSS
    16. Testimonial CSS
    17. Blog CSS
    18. Slider CSS
    19. Brand CSS
    20. Teacher CSS
    21. Page Title CSS
    22. Contact CSS
    23. Error CSS
    24. Login CSS
    00. Footer CSS


**********************************************/
/*


*/
/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap");
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueThin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueUltraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueUltraLightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueLightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueRegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueMediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueSemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueSemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geogrotesque";
  src: url("../../assets/fonts/geogrotesque/EmtypeFoundryGeogrotesqueBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Geogrotesque", sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: #6d6e75;
  line-height: 26px;
}

a {
  text-decoration: none;
}

.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

a,
.btn,
button,
span,
p,
i,
input,
select,
textarea,
li,
img,
svg path,
*::after,
*::before,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  /* color: #ffffff; */
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
  border: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Geogrotesque", sans-serif;
  color: #0e1133;
  margin-top: 0px;
  font-weight: 700;
  line-height: 1.2;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

ul {
  margin: 0px;
  padding: 0px;
}

li {
  list-style: none;
}

p {
  font-family: "Geogrotesque", sans-serif;
  font-size: 17px;
  font-weight: normal;
  color: #1C1B1D;
  margin-bottom: 15px;
  line-height: 26px;
}

*::-moz-selection {
  background: #2b4eff;
  color: #ffffff;
  text-shadow: none;
}

::-moz-selection {
  background: #2b4eff;
  color: #ffffff;
  text-shadow: none;
}

::selection {
  background: #2b4eff;
  color: #ffffff;
  text-shadow: none;
}

/*--
    - Input Placeholder
-----------------------------------------*/
*::-moz-placeholder {
  color: #1C1B1D;
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: #1C1B1D;
  font-size: 14px;
  opacity: 1;
}

/*--
    - Common Classes
-----------------------------------------*/
.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.z-index-1 {
  z-index: 1;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

/*--
    - Background color
-----------------------------------------*/
.grey-bg {
  background: #f3f4f8;
}

.grey-bg-2 {
  background: #edeef3;
}

.grey-bg-5 {
  background: #f5f6fa;
}

.blue-bg {
  background: #2b4eff;
}

.blue-bg-3 {
  background: #b8dde3;
}

.blue-bg-4 {
  background: #2d69f0;
}

.pink-bg {
  background: #dd246e;
}

.purple-bg {
  background: #8007e6;
}

.green-bg {
  background: #0cae74;
}

.white-bg {
  background: #ffffff;
}

.z100 {
  z-index: 1;
  position: relative;
}

.black-bg {
  background: #1C1B1D;
}

.footer-bg {
  background: #0e1133;
}

.xcenter {
  display: flex;
  justify-content: center;
}

label.checkbox-label {
  line-height: 16px;
}

.just-ce {
  justify-content: center;
  margin-bottom: 5px;
}
@media (max-width: 575px) {
  .just-ce {
    justify-content: start !important;
  }
}

@media (max-width: 575px) {
  input#aceptaTerminos, input#aceptaPolitica {
    height: 22px !important;
    width: 22px !important;
  }
}

.image-bg {
  background-image: url("https://www.trilce.edu.pe/storage/static/upload/fe556a60-a534-11f0-8a68-f197c98d8d1c.webp");
  background-size: cover; /* ancho completo, alto proporcional */
  background-position: top center; /* puedes jugar con 'top', 'bottom', etc. */
  background-repeat: no-repeat;
}
@media (max-width: 575px) {
  .image-bg {
    background-image: url("https://www.trilce.edu.pe/storage/static/upload/ea4112a0-a534-11f0-8a5f-d12b079dbc4b.webp");
  }
}

.color-blanco {
  color: #ffffff !important;
  font-weight: 600;
}

.color-rojizo {
  color: #F22E19;
}

.color-azul {
  color: #1D4D9B;
}

.color-morado {
  color: #62348C;
}

.color-celeste {
  color: #01C0B9;
}

.color-naranja {
  color: #FF4E0E;
}

.color-amarillo {
  color: #FF9406;
}

.iconx64 {
  font-size: 60px;
}

.iconx28 {
  font-size: 28px;
}

.iconx50 {
  font-size: 60px;
}
@media (max-width: 575px) {
  .iconx50 {
    font-size: 44px;
  }
}

.lineH {
  line-height: 27px;
}

.p-icon {
  font-weight: 400px;
  margin-top: 15px;
}

.x-number {
  font-size: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .x-number {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .x-number {
    font-size: 44px;
  }
}

.s-white {
  color: #fff;
}

/*Bg - Personalizado*/
.moradoVacaciones-bg {
  background: #49529f;
}

.naranjaVacaciones-bg {
  background: #f22e19;
}

.mor-bg {
  background: #5f67aa;
}

.rojizo-bg {
  background: #F22E19;
}

.azul-bg {
  background: #1D4D9B;
}

.morado-bg {
  background: #62348C;
}

.celeste-bg {
  background: #01C0B9;
}

.naranja-bg {
  background: #FF4E0E;
}
.lila-bg {
  background: #49529f;
}
.amarillo-bg {
  background: #FF9406;
}

.uni-bg {
  background: #881002;
}

.sanMarcos-bg {
  background-color: #FFA300;
}

.catolica-bg {
  background: #042354;
}

/*--
    - color
-----------------------------------------*/
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #ffffff !important;
}

.white-color {
  color: #ffffff;
}

.theme-color {
  color: #2b4eff !important;
}

.black-color {
  color: #1C1B1D;
}

.pl-245 {
  padding-left: 245px;
}

.pr-245 {
  padding-right: 245px;
}

.mb-22 {
  margin-bottom: 22px;
}

.ml-270 {
  margin-left: 270px;
}

.mb--120 {
  margin-bottom: -170px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .mb--120 {
    padding: 20px;
  }
}
@media (max-width: 575px) {
  .mb--120 {
    margin-bottom: 0px;
  }
}

.mb--40 {
  margin-bottom: -40px;
}

.mb--100 {
  margin-bottom: -100px;
}

.mt--210 {
  margin-top: -210px;
}

.mt--80 {
  margin-top: -80px;
}

.mb-130 {
  margin-bottom: -130px;
}

.section-padding {
  padding-left: 50px;
  padding-right: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section-padding {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 575px) {
  .section-padding {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.mrp-10 {
  padding-left: 100px;
}
@media (max-width: 1200px) {
  .mrp-10 {
    padding-left: 40px !important;
  }
}

.e-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 50px;
  line-height: 52px;
  font-size: 18px;
  text-align: center;
  font-weight: 400;
  padding: 0 25px;
  color: #ffffff;
  background: #0dbc42;
  border-radius: 80px !important;
  /*	font-weight: 500;*/
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .e-btn {
    font-size: 19px;
  }
}
@media (max-width: 575px) {
  .e-btn {
    font-size: 14px;
  }
}
.e-btn {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.e-btn:hover {
  color: #ffffff;
  /*@include box-shadow(0px 10px 24px 0px rgba(4, 23, 118, 0.3));*/
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.e-btn-2 {
  height: 34px;
  line-height: 36px;
  padding: 0 20px;
  font-size: 14px;
}
.e-btn-3 {
  padding: 0 28px;
}
.e-btn-4 {
  height: 46px;
  line-height: 44px;
  border: 2px solid #2b4eff;
  background: #2b4eff;
  color: #ffffff;
}
.e-btn-5 {
  padding-left: 22px;
  padding-right: 22px;
}
.e-btn-6 {
  padding-left: 60px;
  padding-right: 60px;
}
.e-btn-7 {
  height: 44px;
  line-height: 46px;
}
.e-btn-10 {
  background-color: #0dbc42;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: #fff;
  z-index: 1;
  border-radius: 100px;
  transition: all 0.6s ease-in-out;
}
.e-btn-border {
  height: 46px;
  line-height: 44px;
  border: 2px solid #d7d9e3;
  color: #1C1B1D;
  background: transparent;
}
.e-btn-border:hover {
  background: #2b4eff;
  border-color: #2b4eff;
  color: #ffffff;
}
.e-btn-border-2 {
  height: 46px;
  line-height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  padding: 0 20px;
}
.e-btn-border-2:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #1C1B1D;
}
.e-btn-white {
  height: 54px;
  line-height: 58px;
  background: #ffffff;
  color: #1C1B1D;
  padding: 0 45px;
}
.e-btn-white:hover {
  color: #1C1B1D;
}

/* link btn */
.link-btn {
  position: relative;
  font-size: 16px;
  color: #6d6e75;
  font-weight: 500;
  padding-right: 21px;
  display: inline-block;
}
.link-btn i {
  font-size: 14px;
  position: absolute;
  top: 12px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
}
.link-btn i:first-child {
  right: 10%;
  visibility: hidden;
  opacity: 0;
}
.link-btn i:last-child {
  right: 0;
}
.link-btn:hover {
  color: #2b4eff;
}
.link-btn:hover i:first-child {
  right: 0;
  visibility: visible;
  opacity: 1;
}
.link-btn:hover i:last-child {
  right: -10%;
  visibility: hidden;
  opacity: 0;
}
.link-btn.link-prev {
  padding-right: 0;
  padding-left: 21px;
}
.link-btn.link-prev i:first-child {
  left: 10%;
  right: auto;
}
.link-btn.link-prev i:last-child {
  left: 0;
  right: auto;
}
.link-btn.link-prev:hover i:first-child {
  left: 0%;
  right: auto;
}
.link-btn.link-prev:hover i:last-child {
  left: -10%;
  right: auto;
}

.link-btn-2 {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  color: #1C1B1D;
  text-transform: uppercase;
  padding-right: 25px;
  width: 40px;
  height: 40px;
  display: inline-block;
  line-height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.link-btn-2 {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.link-btn-2 i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
}
.link-btn-2 i:first-child {
  left: -100%;
  visibility: hidden;
  opacity: 0;
}
.link-btn-2 i:last-child {
  right: 35%;
}
.link-btn-2:hover {
  color: #ffffff;
}
.link-btn-2:hover i:first-child {
  left: 35%;
  visibility: visible;
  opacity: 1;
}
.link-btn-2:hover i:last-child {
  right: -100%;
  visibility: hidden;
  opacity: 0;
}

.play-btn {
  display: inline-block;
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 47px;
  background: #ffffff;
  color: #2b4eff;
  -webkit-animation: pulse 2s infinite;
  -moz-animation: pulse 2s infinite;
  -o-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
  font-size: 12px;
}
.play-btn {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.section__sub-title {
  font-size: 18px;
  font-weight: 500;
  color: #2b4eff;
  display: inline-block;
  margin-bottom: 5px;
}
.section__title {
  font-size: 42px;
  color: #1C1B1D;
  /*text-transform: capitalize;*/
  z-index: 1;
  margin-bottom: 3px;
}
@media (max-width: 575px) {
  .section__title {
    font-size: 33px;
  }
}
.section__title span {
  position: relative;
}
.section__title span img {
  position: absolute;
  left: -14px;
  bottom: 12px;
  z-index: -1;
  -webkit-animation: section-animation 3s infinite;
  animation: section-animation 3s infinite;
}
.section__title span.yellow-bg-big img {
  bottom: 15px;
  width: 120%;
  -webkit-animation: section-animation-2 3s infinite;
  animation: section-animation-2 3s infinite;
}
.section__title span.yellow-bg-sm img {
  bottom: 10px;
  width: 120%;
  -webkit-animation: section-animation-2 3s infinite;
  animation: section-animation-2 3s infinite;
}
.section__title-wrapper {
  position: relative;
  z-index: 1;
}
.section__title-wrapper p {
  font-size: 16px;
  color: #53545b;
}

@keyframes section-animation {
  0% {
    width: 0;
  }
  15% {
    width: 100%;
  }
  85% {
    opacity: 1;
  }
  90% {
    width: 100%;
    opacity: 0;
  }
  to {
    width: 0;
    opacity: 0;
  }
}
@keyframes section-animation-2 {
  0% {
    width: 0;
  }
  15% {
    width: 125%;
  }
  85% {
    opacity: 1;
  }
  90% {
    width: 125%;
    opacity: 0;
  }
  to {
    width: 0;
    opacity: 0;
  }
}
/* basic pagination */
.basic-pagination ul li {
  display: inline-block;
  margin-right: 20px;
}
@media (max-width: 575px) {
  .basic-pagination ul li {
    margin-right: 5px;
  }
}
.basic-pagination ul li.prev a, .basic-pagination ul li.next a {
  width: inherit;
  height: inherit;
  line-height: inherit;
  border: none;
}
.basic-pagination ul li.prev a, .basic-pagination ul li.next a {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.basic-pagination ul li.prev a:hover, .basic-pagination ul li.next a:hover {
  color: #2b4eff;
  background: inherit;
}
.basic-pagination ul li.active a {
  color: #ffffff;
  background: #2b4eff;
  border-color: #2b4eff;
}
.basic-pagination ul li a {
  position: relative;
  overflow: hidden;
  background: transparent;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  border: 2px solid #eef0f6;
  color: #1C1B1D;
}
.basic-pagination ul li a {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.basic-pagination ul li a:hover {
  background: #2b4eff;
  color: #ffffff;
  border-color: #2b4eff;
}

.body-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.body-overlay:hover {
  cursor: pointer;
}

.body-overlay.opened {
  opacity: 1;
  visibility: visible;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-115 {
    padding-top: 70px;
  }
}
@media (max-width: 575px) {
  .pt-115 {
    padding-top: 55px;
  }
}

.x80 {
  font-size: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .x80 {
    font-size: 50px;
  }
}
@media (max-width: 575px) {
  .x80 {
    font-size: 70px;
  }
}

.plom-bg {
  background: #F8F8F8;
}

/*----------------------------------------*/
/*  02. HEADER CSS START
/*----------------------------------------*/
.header__padding {
  padding-left: 245px;
  padding-right: 245px;
}
@media only screen and (min-width: 1601px) and (max-width: 1800px) {
  .header__padding {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .header__padding {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header__padding {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__padding {
    padding: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__padding {
    padding: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__padding {
    padding: 20px;
  }
}
@media (max-width: 575px) {
  .header__padding {
    padding: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__padding-2 {
    padding: 20px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__padding-2 {
    padding: 20px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__padding-2 {
    padding: 20px 0;
  }
}
@media (max-width: 575px) {
  .header__padding-2 {
    padding: 20px 0;
  }
}
.header__shadow {
  -webkit-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.06);
  -moz-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.06);
  box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.06);
}
.header__area.sticky {
  position: fixed;
  top: 10;
  left: 0;
  width: 100%;
  background: #ffffff;
  z-index: 99;
  animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  display: block;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  -moz-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
}
.header__area.sticky .header__search input {
  background: #edeef3;
}
.header__area.sticky .logo .logo-white {
  display: none;
}
.header__area.sticky .logo .logo-black {
  display: block;
}
.header__area.sticky .main-menu-3 ul li a {
  color: #1C1B1D;
}
.header__area.sticky .main-menu-3 ul li a::after {
  color: #1C1B1D;
}
.header__area.sticky .main-menu-3 ul li a::before {
  background: #1C1B1D;
}
.header__area.sticky .main-menu-3 ul li .submenu li a::before {
  background: #2b4eff;
}
.header__area.sticky .header__search-2 svg .st0 {
  fill: #1C1B1D;
}
.header__area.sticky .header__search-2 svg .st1 {
  fill: #121317;
}
.header__area.sticky .cat-menu {
  color: #1C1B1D;
}
.header__area.sticky .cat-menu:hover {
  color: #2b4eff;
}
.header__area.sticky .cat-menu:hover svg .cat-dot {
  fill: #2b4eff;
}
.header__area.sticky .cat-menu svg .cat-dot {
  fill: #1C1B1D;
}
.header__area.sticky .header__category::after {
  background: rgba(28, 27, 29, 0.2);
}
.header__area.sticky .sidebar-toggle-btn .line {
  background-color: #2b4eff;
}
.header__transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 11;
}
.header__white .cat-menu {
  color: #ffffff;
}
.header__white .cat-menu svg .cat-dot {
  fill: #ffffff;
}
.header__white .cat-menu:hover {
  color: #ffffff;
}
.header__white .cat-menu:hover svg .cat-dot {
  fill: #ffffff;
}
.header__white .header__category::after {
  background: rgba(255, 255, 255, 0.2);
}
.header__white .main-menu ul li a {
  color: #ffffff;
}
.header__white .sidebar-toggle-btn .line {
  background-color: #ffffff;
}
.header__category {
  position: relative;
  padding-left: 30px;
  margin-left: 30px;
  padding-top: 3px;
}
.header__category::after {
  position: absolute;
  content: "";
  left: 0;
  top: 60%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: #c9ccd4;
}
.header__category ul li {
  position: relative;
}
.header__category ul li .cat-submenu {
  position: absolute;
  top: calc(100% + 30px);
  left: 0;
  width: 200px;
  padding: 17px 0;
  padding-bottom: 15px;
  background: #ffffff;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  -moz-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.header__category ul li .cat-submenu {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.header__category ul li .cat-submenu li {
  display: block;
  margin-right: 0;
}
.header__category ul li .cat-submenu li > a {
  width: 100%;
  display: block;
  padding: 3px 30px;
  text-transform: capitalize;
  color: #6d6e75;
  font-weight: 500;
  position: relative;
}
.header__category ul li .cat-submenu li > a::after {
  right: 30px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.header__category ul li .cat-submenu li:hover > a {
  color: #2b4eff;
}
.header__category ul li:hover .cat-submenu {
  visibility: visible;
  opacity: 1;
  top: calc(100% + 10px);
}
.header__search input {
  width: 280px;
  height: 50px;
  line-height: 20px;
  background: #ffffff;
  outline: none;
  border: 1px solid #ffffff;
  font-size: 16px;
  padding: 25px 65px 20px 55px;
}
.header__search input {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.header__search input::placeholder {
  color: #8c8faa;
}
.header__search input:focus {
  border-color: #2b4eff;
}
.header__search button {
  background: transparent;
  position: absolute;
  top: 15px;
  left: 24px;
}
.header__search button i::after {
  color: #1C1B1D;
  opacity: 1;
}
.header__search button i::before {
  color: #8c8faa;
}
.header__search-2 svg {
  width: 18px;
  height: 18px;
}
.header__search-2 svg .st0 {
  fill: #8c8faa;
}
.header__search-2 svg .st1 {
  fill: #ffffff;
}
.header__search-2 svg:hover {
  cursor: pointer;
}
.header__cart {
  position: absolute;
  top: 15px;
  right: 20px;
  padding-left: 18px;
}
.header__cart::after {
  position: absolute;
  content: "";
  top: -5px;
  left: 0;
  width: 2px;
  height: 30px;
  background: #dbdfe9;
}
.header__cart-icon {
  display: inline-block;
}
.header__cart-icon svg {
  width: 20px;
  height: 19px;
}
.header__cart-icon svg .st0 {
  fill: none;
  stroke: #1C1B1D;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header__cart a {
  position: relative;
  font-size: 17px;
  color: #1C1B1D;
}
.header__cart a .cart-item {
  position: absolute;
  top: -10px;
  right: -10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 22px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  background: #2b4eff;
  font-weight: 500;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(4, 23, 118, 0.3);
  -moz-box-shadow: 0px 10px 20px 0px rgba(4, 23, 118, 0.3);
  box-shadow: 0px 10px 20px 0px rgba(4, 23, 118, 0.3);
}
.header__cart a .cart-item {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.header__cart a:hover .cart-item {
  background: #1C1B1D;
}
@media (max-width: 575px) {
  .header__btn-2 {
    width: 100%;
  }
}
.header__btn-2 a {
  height: 44px;
  line-height: 44px;
  padding: 26px 38px;
}
@media (max-width: 575px) {
  .header__btn-2 a {
    height: 40px;
    line-height: 0px;
    padding: 0 0px;
  }
}
.header__search-3 {
  position: fixed;
  top: -100px;
  left: 0;
  width: 100%;
  min-height: 330px;
  padding: 40px 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  z-index: 9999;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__search-3 {
    min-height: 300px;
  }
}
@media (max-width: 575px) {
  .header__search-3 {
    padding-top: 30px;
    min-height: 300px;
  }
}
.header__search-3.search-opened {
  top: 0;
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.header__search-3-btn {
  margin-bottom: 35px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__search-3-btn {
    margin-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .header__search-3-btn {
    margin-bottom: 20px;
  }
}
.header__search-3-btn-close {
  font-size: 18px;
  color: #2b4eff;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.header__search-3-header {
  margin-bottom: 35px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__search-3-header {
    margin-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .header__search-3-header {
    margin-bottom: 20px;
  }
}
.header__search-3-header h3 {
  color: #1C1B1D;
  font-size: 30px;
}
.header__search-3-categories {
  margin-bottom: 35px;
}
.header__search-3-categories ul li {
  display: inline-block;
}
.header__search-3-categories ul li a {
  font-size: 18px;
  color: #121317;
  padding: 0 30px;
}
.header__search-3-categories ul li a:hover {
  color: #2b4eff;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__search-3-categories ul li a {
    padding: 0 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__search-3-categories ul li a {
    font-size: 16px;
    padding: 0 5px;
  }
}
@media (max-width: 575px) {
  .header__search-3-categories ul li a {
    padding: 0 5px;
    font-size: 14px;
  }
}
.header__search-3-input input {
  height: 50px;
  width: 100%;
  border: none;
  padding: 0 15px;
  padding-right: 30px;
  border-bottom: 1px solid #eef0f6;
  outline: none;
}
.header__search-3-input input {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.header__search-3-input input::placeholder {
  color: #53545b;
}
.header__search-3-input input:focus {
  border-color: #2b4eff;
}
.header__search-3-input button {
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 50px;
  text-align: center;
  font-size: 14px;
  background: transparent;
  color: #1C1B1D;
}

.logo-black {
  display: none;
}

.cat-menu {
  font-size: 16px;
  font-weight: 500;
  color: #1C1B1D;
  position: relative;
}
.cat-menu:hover {
  color: #2b4eff;
}
.cat-menu:hover svg .cat-dot {
  fill: #2b4eff;
}
.cat-menu svg {
  width: 16px;
  height: 16px;
}
.cat-menu svg .cat-dot {
  fill: #1C1B1D;
}
.cat-menu span {
  padding-left: 14px;
  line-height: 1;
  display: inline-block;
  padding-top: 3px;
}

.main-menu ul li {
  display: inline-block;
  position: relative;
}
.main-menu ul li:not(:first-child) {
  margin-left: 40px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .main-menu ul li:not(:first-child) {
    margin-left: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu ul li:not(:first-child) {
    margin-left: 10px;
  }
}
.main-menu ul li a {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: transparent;
  padding: 35px 0;
  text-transform: capitalize;
}
.main-menu ul li.has-dropdown > a {
  position: relative;
}
.main-menu ul li.has-dropdown > a::after {
  content: "\f107";
  -webkit-transform: translateY(1px);
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  transform: translateY(1px);
  font-size: 14px;
  color: #1C1B1D;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  margin-left: 5px;
  display: inline-block;
}
.main-menu ul li:hover > a {
  color: transparent;
}
.main-menu ul li:hover > a::after {
  color: #2b4eff;
}
.main-menu ul li:hover .submenu {
  top: 100%;
  visibility: visible;
  opacity: 1;
}
.main-menu ul li .submenu {
  position: absolute;
  top: 120%;
  left: 0;
  width: 200px;
  background: #ffffff;
  z-index: 99;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  visibility: hidden;
  opacity: 0;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
}
.main-menu ul li .submenu li {
  display: block;
  width: 100%;
  margin: 0;
}
.main-menu ul li .submenu li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.main-menu ul li .submenu li.has-dropdown > a::after {
  position: absolute;
  top: 50%;
  right: 25px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.main-menu ul li .submenu li a {
  padding: 10px 25px;
  font-size: 13px;
  position: relative;
  z-index: 1;
  color: #1C1B1D;
  width: 100%;
}
.main-menu ul li .submenu li a::before {
  position: absolute;
  content: "";
  top: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 100%;
  background: #2b4eff;
  z-index: -1;
}
.main-menu ul li .submenu li .submenu {
  left: 120%;
  top: 0;
  visibility: hidden;
  opacity: 0;
}
.main-menu ul li .submenu li:hover > a {
  color: #ffffff;
}
.main-menu ul li .submenu li:hover > a::after {
  color: #ffffff;
}
.main-menu ul li .submenu li:hover > a::before {
  left: 0;
  right: auto;
  width: 100%;
}
.main-menu ul li .submenu li:hover .submenu {
  left: 100%;
  visibility: visible;
  opacity: 1;
}

.main-menu-2 ul li:not(:first-child) {
  margin-left: 35px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu-2 ul li:not(:first-child) {
    margin-left: 20px;
  }
}
.main-menu-2 ul li .menu-tag {
  position: absolute;
  top: 13px;
  right: -4px;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 0 7px;
  background: #2b4eff;
  color: #ffffff;
  font-size: 12px;
  text-transform: capitalize;
  -webkit-box-shadow: 0px 8px 20px 0px rgba(1, 23, 133, 0.3);
  -moz-box-shadow: 0px 8px 20px 0px rgba(1, 23, 133, 0.3);
  box-shadow: 0px 8px 20px 0px rgba(1, 23, 133, 0.3);
}
.main-menu-2 ul li .menu-tag {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu-2 ul li .menu-tag {
    display: none;
  }
}
.main-menu-2 ul li .menu-tag::after {
  position: absolute;
  content: "";
  bottom: -5px;
  left: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid #2b4eff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.main-menu-3 ul li a {
  color: #ffffff;
  position: relative;
}
.main-menu-3 ul li a::before {
  position: absolute;
  content: "";
  left: auto;
  right: 0;
  bottom: 38px;
  width: 0%;
  height: 1px;
  background: #ffffff;
}
.main-menu-3 ul li.has-dropdown a::after {
  color: #ffffff;
}
.main-menu-3 ul li .submenu li a::after {
  color: #1C1B1D;
}
.main-menu-3 ul li:hover a {
  color: #ffffff;
}
.main-menu-3 ul li:hover a::before {
  width: 100%;
  left: 0;
  right: auto;
}

/* sidebar css start */
.sidebar-toggle-btn .line {
  width: 30px;
  height: 3px;
  background-color: #2b4eff;
  display: block;
  margin: 6px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.sidebar-toggle-btn-white .line {
  background: #ffffff;
}
.sidebar-toggle-btn:hover {
  cursor: pointer;
}
.sidebar-toggle-btn:hover .line {
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.sidebar-toggle-btn:hover .line:nth-child(1) {
  width: 10px;
}
.sidebar-toggle-btn:hover .line:nth-child(2) {
  width: 20px;
}

.sidebar__area {
  position: fixed;
  right: -340px;
  top: 0;
  width: 320px;
  height: 100%;
  background: #ffffff none repeat scroll 0 0;
  overflow-y: scroll;
  -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  z-index: 9999;
}
.sidebar__area.sidebar-opened {
  right: 0px;
}
.sidebar__wrapper {
  position: relative;
  padding: 30px;
}
.sidebar__close {
  position: absolute;
  top: 25px;
  right: 80px;
}
.sidebar__close-btn {
  transition: all 450ms cubic-bezier(0.4, 0.25, 0.3, 1.3);
  width: 40px;
  height: 40px;
  position: absolute;
  text-align: center;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1C1B1D;
  border: 1px solid #2a3a57;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  z-index: 99;
}
.sidebar__close-btn:focus {
  border: 1px solid #1C1B1D;
}
.sidebar__close-btn span {
  transition: all 400ms cubic-bezier(0.4, 0.25, 0.3, 1.3) 100ms;
  position: absolute;
  top: 54%;
  left: 50%;
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  vertical-align: middle;
}
.sidebar__close-btn span:first-of-type {
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.sidebar__close-btn span:last-of-type {
  text-transform: uppercase;
  transform: translate(-50%, 50%);
  -webkit-transform: translate(-50%, 50%);
  -moz-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  -o-transform: translate(-50%, 50%);
}
.sidebar__close-btn:hover {
  width: 100px;
  border-radius: 0;
}
.sidebar__close-btn:hover span:first-of-type {
  transform: translate(-50%, -150%);
  -webkit-transform: translate(-50%, -150%);
  -moz-transform: translate(-50%, -150%);
  -ms-transform: translate(-50%, -150%);
  -o-transform: translate(-50%, -150%);
}
.sidebar__close-btn:hover span:last-of-type {
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.sidebar__search input {
  width: 100%;
  height: 50px;
  line-height: 20px;
  background: #edeef3;
  outline: none;
  border: 1px solid #ffffff;
  font-size: 16px;
  padding: 25px 65px 20px 55px;
}
.sidebar__search input {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.sidebar__search input::placeholder {
  color: #8c8faa;
}
.sidebar__search input:focus {
  border-color: #2b4eff;
}
.sidebar__search button {
  background: transparent;
  position: absolute;
  top: 15px;
  left: 24px;
}
.sidebar__search button i::after {
  color: #1C1B1D;
  opacity: 1;
}
.sidebar__search button i::before {
  color: #8c8faa;
}
.sidebar__cart-icon {
  display: inline-block;
}
.sidebar__cart-icon svg {
  width: 20px;
  height: 19px;
}
.sidebar__cart-icon svg .st0 {
  fill: none;
  stroke: #1C1B1D;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar__cart a {
  position: relative;
  font-size: 17px;
  color: #1C1B1D;
}
.sidebar__cart a .cart-item {
  position: absolute;
  top: -10px;
  right: -10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 22px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  background: #2b4eff;
  font-weight: 500;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(4, 23, 118, 0.3);
  -moz-box-shadow: 0px 10px 20px 0px rgba(4, 23, 118, 0.3);
  box-shadow: 0px 10px 20px 0px rgba(4, 23, 118, 0.3);
}
.sidebar__cart a .cart-item {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.sidebar__cart a:hover .cart-item {
  background: #1C1B1D;
}

/* mean menu customize */
.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 0;
  color: #1C1B1D;
  border-top: 1px solid #bbbcbf;
  font-size: 13px;
  font-weight: 600;
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 0px;
  height: 15px;
  line-height: 14px;
  border-bottom: none;
  padding: 0;
  display: inline-block;
  width: 40px;
  height: 44px;
  line-height: 44px;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
  color: #1C1B1D;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
  color: #1C1B1D;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  color: #1C1B1D;
}

/*----------------------------------------*/
/*  03. HERO CSS START
/*----------------------------------------*/
@media (max-width: 575px) {
  .hero__content-wrapper {
    margin-top: 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .hero__log {
    justify-content: center;
  }
}
.hero__height {
  min-height: 720px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__height {
    min-height: 760px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__height {
    min-height: 412px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__height {
    min-height: 1100px;
  }
}
@media (max-width: 575px) {
  .hero__height {
    min-height: 850px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__height-2 {
    min-height: 412px;
  }
}
@media (max-width: 575px) {
  .hero__height-2 {
    min-height: 600px;
  }
}
.hero__title {
  font-size: 60px;
  line-height: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__title {
    font-size: 50px;
  }
}
@media (max-width: 575px) {
  .hero__title {
    font-size: 30px;
  }
}
.hero__title span:first-child {
  font-weight: 300;
  display: block;
}
.hero__title span.yellow-shape {
  position: relative;
  z-index: 1;
}
.hero__title span.yellow-shape img {
  position: absolute;
  bottom: 22px;
  left: -8px;
  z-index: -1;
  -webkit-animation: section-animation 3s infinite;
  animation: section-animation 3s infinite;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__title span.yellow-shape img {
    bottom: 12px;
    height: 40% !important;
  }
}
.hero__title-2 {
  margin-bottom: 20px;
}
.hero__content p {
  font-size: 22px;
  color: #1C1B1D;
  padding-right: 130px;
  line-height: 30px;
  margin-bottom: 28px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__content p {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content p {
    padding-right: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__content p {
    padding-right: 0px;
  }
}
@media (max-width: 575px) {
  .hero__content p {
    padding-right: 0px;
  }
}
.hero__content-2 h4 {
  font-size: 22px;
  margin-bottom: 0;
}
.hero__content-2 p {
  color: #53545b;
  font-size: 16px;
  margin-bottom: 37px;
}
.hero__thumb {
  z-index: 1;
}
.hero__thumb-big {
  position: relative;
}
.hero__thumb-big img {
  max-width: 400px;
  max-height: 460px;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  -moz-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
}
.hero__thumb-big img {
  -webkit-border-radius: 40px 4px 40px 4px;
  -moz-border-radius: 40px 4px 40px 4px;
  border-radius: 40px 4px 40px 4px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-big img {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-big img {
    margin-top: 50px;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .hero__thumb-big img {
    margin-top: 50px;
    width: 100%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-sm {
    margin-left: -50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-sm {
    margin-left: -160px;
    margin-top: -95px;
  }
}
.hero__thumb-sm img {
  max-width: 200px;
  max-height: 240px;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  -moz-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
}
.hero__thumb-sm img {
  -webkit-border-radius: 4px 40px 4px 40px;
  -moz-border-radius: 4px 40px 4px 40px;
  border-radius: 4px 40px 4px 40px;
}
.hero__thumb-shape img {
  position: absolute;
  z-index: -1;
}
.hero__thumb-shape img.hero-1-dot {
  bottom: -25px;
  left: -30px;
  -webkit-animation: hero-dot-1 5s linear 0s infinite alternate;
  -moz-animation: hero-dot-1 5s linear 0s infinite alternate;
  -o-animation: hero-dot-1 5s linear 0s infinite alternate;
  animation: hero-dot-1 5s linear 0s infinite alternate;
}
.hero__thumb-shape img.hero-1-circle-3 {
  bottom: -47px;
  right: 1%;
}
.hero__thumb-shape img.hero-1-circle-4 {
  top: -50px;
  right: 10%;
}
.hero__thumb-2 {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-2 img.hero-big {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-2 img.hero-big {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-2 img.hero-big {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-2 img.hero-big {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .hero__thumb-2 img.hero-big {
    width: 100%;
  }
}
.hero__thumb-2 img.hero-shape-purple {
  position: absolute;
  left: 0;
  bottom: 19%;
  z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-2 img.hero-shape-purple {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-2 img.hero-shape-purple {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-2 img.hero-shape-purple {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-2 img.hero-shape-purple {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .hero__thumb-2 img.hero-shape-purple {
    width: 100%;
  }
}
.hero__quote {
  position: absolute;
  bottom: 60px;
  right: -200px;
  padding: 15px 25px;
  padding-bottom: 20px;
  background: #ffffff;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  -moz-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
}
.hero__quote {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__quote {
    right: -145px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__quote {
    right: 60px;
    bottom: -50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__quote {
    right: 30px;
    bottom: -50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__quote {
    right: 30px;
    bottom: -50px;
  }
}
@media (max-width: 575px) {
  .hero__quote {
    right: 15px;
    bottom: -50px;
  }
}
.hero__quote span {
  font-size: 14px;
  color: #474956;
}
.hero__quote h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1;
}
.hero__quote-animation {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: hero-bounce;
}
.hero__shape img {
  position: absolute;
}
.hero__shape img.hero-1-circle {
  top: 25%;
  left: 5%;
  -webkit-animation: hero-circle-1 6s linear 0s infinite alternate;
  -moz-animation: hero-circle-1 6s linear 0s infinite alternate;
  -o-animation: hero-circle-1 6s linear 0s infinite alternate;
  animation: hero-circle-1 6s linear 0s infinite alternate;
}
.hero__shape img.hero-1-circle-2 {
  bottom: 29%;
  left: 0;
}
.hero__shape img.hero-1-dot-2 {
  right: 0;
  bottom: 38%;
}
.hero__search-input {
  position: relative;
  width: 370px;
}
@media (max-width: 575px) {
  .hero__search-input {
    width: 100%;
  }
}
.hero__search-input input {
  width: 100%;
  height: 54px;
  line-height: 54px;
  padding: 0 24px;
  padding-right: 35px;
  font-size: 14px;
  outline: none;
  border: none;
}
.hero__search-input input {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.hero__search-input input::placeholder {
  color: #8d8e9a;
}
.hero__search-input button {
  position: absolute;
  top: 50%;
  right: 24px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 18px;
  background: transparent;
}
.hero__search-input button i::after {
  color: #1C1B1D;
  opacity: 1;
}
.hero__search-input button i::before {
  color: #8c8faa;
}
.hero__search p {
  font-size: 16px;
  color: #6d6e75;
}
.hero__promotion {
  position: absolute !important;
  left: 12% !important;
  top: 60% !important;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  -moz-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  padding: 15px 20px;
  padding-bottom: 10px;
}
.hero__promotion {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__promotion {
    left: 20% !important;
    top: 71% !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__promotion {
    left: 9% !important;
    top: 71% !important;
  }
}
@media (max-width: 575px) {
  .hero__promotion {
    left: 9% !important;
    top: 52% !important;
  }
}
.hero__promotion.education {
  bottom: 10% !important;
  top: auto !important;
  left: 60% !important;
}
.hero__promotion-icon span {
  display: inline-block;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  background: #fa4c0e;
}
.hero__promotion-icon span {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.hero__promotion-icon span img {
  height: 38px;
}
.hero__promotion-icon span.cap {
  background: #62348c;
}
.hero__promotion-text h5 {
  font-size: 16px;
  margin-bottom: 0;
}
.hero__promotion-text p {
  font-size: 14px;
  color: #474956;
  margin-bottom: 0;
}
.hero__class {
  position: absolute;
  left: auto !important;
  top: auto !important;
  bottom: 33%;
  right: -12%;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  -moz-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
}
.hero__class {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__class {
    right: -5%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__class {
    right: 1%;
    bottom: 15%;
  }
}
.hero__class-thumb img {
  width: 34px;
  height: 34px;
}
.hero__class-thumb img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.hero__class-text h5 {
  font-size: 16px;
  margin-bottom: 0;
}
.hero__class-text p {
  font-size: 14px;
  color: #474956;
  margin-bottom: 0;
}
.hero__class-text a {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #ffffff;
  font-weight: 500;
  padding: 0 15px;
  background: #e233fb;
}
.hero__class-text a {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.hero__mic {
  position: absolute;
  top: 30%;
  right: 10%;
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: hero-bounce;
}
.hero__mic span {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #ff3c4e;
  -webkit-box-shadow: 0px 14px 30px 0px rgba(131, 2, 14, 0.2);
  -moz-box-shadow: 0px 14px 30px 0px rgba(131, 2, 14, 0.2);
  box-shadow: 0px 14px 30px 0px rgba(131, 2, 14, 0.2);
}
.hero__mic span {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.hero__mic span svg {
  height: 28px;
  fill: #ffffff;
}
.hero__form {
  background-color: #ffffff;
  padding: 60px 50px 45px 50px;
  border-radius: 10px;
  -webkit-box-shadow: -10px 20px 40px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: -10px 20px 40px 6px rgba(0, 0, 0, 0.25);
  box-shadow: -10px 20px 40px 6px rgba(0, 0, 0, 0.25);
}
@media (max-width: 575px) {
  .hero__form {
    padding: 40px 30px 45px 30px;
    border-radius: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__form {
    padding: 33px 34px 34px 30px;
    border-radius: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__form {
    padding: 25px;
  }
}
.hero__form .titulo_form {
  color: #ff4e0e;
  font-size: 41px;
  font-weight: 600;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__form .titulo_form {
    font-size: 24px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__form .titulo_form {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .hero__form .titulo_form {
    font-size: 41px;
  }
}
.hero__form .subtitulo_form {
  color: #1C1B1D;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__form .subtitulo_form {
    font-size: 14px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__form .subtitulo_form {
    font-size: 11px;
    margin-bottom: 0px;
  }
}
@media (max-width: 575px) {
  .hero__form .subtitulo_form {
    font-size: 18px;
  }
}
.hero__gracias {
  padding: 90px !important;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__gracias {
    padding: 60px !important;
  }
}
@media (max-width: 575px) {
  .hero__gracias {
    padding: 100px 20px 100px 20px !important;
  }
}
/* ======================================================= */
/* INICIO: CORRECCIÓN ERROR CHECKBOX RESPONSIVE */
/* Pega esto al final de tu bloque <style> */
/* ======================================================= */

/* ======================================================= */
/* ESTE CSS YA DEBERÍAS TENERLO (ESTÁ BIEN) */
/* ======================================================= */
.checkbox-error-fix {
  font-size: 10px;
  width: 100%;
  flex-basis: 100%; /* Fuerza al error a ir a una nueva línea */
  
  /* Por defecto (desktop), el texto estará centrado */
  text-align: center;
}

/* En móvil (pantallas de 575px o menos) */
@media (max-width: 575px) {
  .checkbox-error-fix {
      /* 1. El texto se alinea a la izquierda (como en tu foto) */
      text-align: left;
      
      /* 2. Se alinea con el texto "He leído..." (justo como marcaste) */
      /* (Input 14px + Gap 4px = 18px) */
      padding-left: 18px; 
  }
}
/* ======================================================= */
/* FIN DEL CSS */
/* ======================================================= */
/* ======================================================= */
/* FIN: CORRECCIÓN ERROR CHECKBOX */
/* ======================================================= */
.hero_btn_matriculate {
  /* --- Tus nuevos colores --- */
  background-color: #49529f; /* El color azul/morado que pediste */
  color: #fff;

  /* --- Estilos base (Copiados y adaptados para <a>) --- */
  font-size: 20px;
  font-weight: 500;
  padding: 5px 40px;
  border-radius: 50px;
  height: 56px;
  border: none;
  cursor: pointer !important;
  transition: all 0.3s ease; /* suaviza todos los cambios */

  /* --- Ajustes para <a> tag (para que se centre bien) --- */
  display: inline-flex;  /* Usar flex para centrar */
  align-items: center;    /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  text-decoration: none; /* Quitar subrayado del enlace */
}

/* Efecto hover con un color más oscuro */
.hero_btn_matriculate:hover {
  /* --- Color hover (más oscuro que el base) --- */
  background-color: #3a407a; 
  color: #f2f2f2;

  /* --- Efectos (Copiados de tu ejemplo) --- */
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  text-decoration: none; /* Asegurar que no aparezca subrayado */
}

/* --- Media Query (Copiado y adaptado) --- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero_btn_matriculate {
    height: 42px;
    padding: 0px 50px;
  }
}
.hero__btn {
  background-color: #FF4E0E;
  font-size: 20px;
  font-weight: 500;
  padding: 5px 80px;
  border-radius: 50px;
  height: 56px;
  color: #fff;
  border: none;
  cursor: pointer !important;
  transition: all 0.3s ease; /* suaviza todos los cambios */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__btn {
    height: 42px;
    padding: 0px 50px;
  }
}
.hero__btn:hover {
  background-color: #e2430c;
  color: #f2f2f2;
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

@keyframes hero-dot-1 {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes hero-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes hero-circle-1 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.form-control {
  border-radius: 0;
}

.input-field {
  position: relative;
  margin-bottom: 1.1rem;
}
.input-field input,
.input-field select,
.input-field textarea {
  display: block;
  width: 100%;
  padding: 10px 8px 8px 0;
  font-size: 13px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  background: transparent;
  outline: none;
  color: #4d4d4d;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .input-field input,
  .input-field select,
  .input-field textarea {
    font-size: 10px;
  }
}
@media (max-width: 575px) {
  .input-field input,
  .input-field select,
  .input-field textarea {
    font-size: 16px;
  }
}
.input-field input:focus,
.input-field select:focus,
.input-field textarea:focus {
  border-bottom: 2px solid #ff4e0e;
  box-shadow: none;
}
.input-field input:focus + label,
.input-field select:focus + label,
.input-field textarea:focus + label {
  top: -14px;
  font-size: 12px;
  color: #ff4e0e;
}
.input-field input:not(:focus):not(:placeholder-shown) + label,
.input-field select:not(:focus):not(:placeholder-shown) + label,
.input-field textarea:not(:focus):not(:placeholder-shown) + label {
  top: -14px;
  font-size: 12px;
  color: #4d4d4d;
}
.input-field input.filled + label,
.input-field select.filled + label,
.input-field textarea.filled + label {
  top: -14px;
  font-size: 12px;
  color: #4d4d4d;
}
.input-field select {
  appearance: none;
  background-color: transparent;
  border-bottom: 1px solid #ccc;
  padding-right: 24px;
}
.input-field select:focus {
  border-bottom: 2px solid #ff4e0e;
}
.input-field label {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 14px;
  color: #000;
  opacity: 0.7;
  pointer-events: none;
  transition: all 0.2s ease;
  font-family: "Geogrotesque", sans-serif;
  font-weight: 300;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .input-field label {
    font-size: 10px;
  }
}
.input-field .dropdown-trigger {
  padding: 8px 8px 8px 0;
  border: none;
  border-bottom: 1px solid #ccc;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #4d4d4d;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .input-field .dropdown-trigger {
    font-size: 10px;
  }
}
.input-field .dropdown-trigger:after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #4d4d4d;
}
.input-field .dropdown-trigger.active {
  border-bottom: 2px solid #ff4e0e;
}
.input-field .dropdown-menu {
  display: none;
  position: absolute;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
  z-index: 9999;
  max-height: 200px;
  overflow-y: auto;
}
.input-field .dropdown-menu li {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 16px;
  color: #4d4d4d;
}
.input-field .dropdown-menu li:hover {
  background-color: #f2f2f2;
}
.input-field.active label {
  top: -14px;
  font-size: 12px;
  color: #ff4e0e;
}

#dropdownSede label,
#dropdownGrado label {
  position: absolute;
  top: 10px;
  left: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s ease;
}

/* Muestra el label cuando el campo está activo */
#dropdownSede.active label,
#dropdownGrado.active label {
  top: -14px;
  font-size: 12px;
  color: #ff4e0e;
  opacity: 1;
  visibility: visible;
}

.acepto {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
}

.termi {
  color: #000;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0;
}

.call {
  color: #fff;
  width: 277px;
  height: 50px;
  border-radius: 80px;
  font-size: 20px;
}

.call:hover {
  color: #f2f2f2;
  color: #ffffff;
  /*@include box-shadow(0px 10px 24px 0px rgba(4, 23, 118, 0.3));*/
  transition: transform 0.3s ease-in-out;
  transform: scale(1.1);
}

/* Modal (fondo oscuro) */
.modal {
  display: none;
  /* Oculto por defecto */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* scroll si es necesario */
  background-color: rgba(0, 0, 0, 0.5);
  /* Fondo semitransparente */
}
/* =================================================== */
/* CSS PARA ADAPTAR BOOTSTRAP A TU DISEÑO PERSONALIZADO */
/* =================================================== */

/* 1. Usamos tu clase .modal-custom-style para aplicar los estilos */
.modal-custom-style .modal-content {
  /* Estilos de tu .modal-content de style.css */
  padding: 55px;
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  
  /* Anulaciones de Bootstrap */
  border: none; /* Quitamos el borde de Bootstrap */
  background-color: #fff; /* Aseguramos el fondo */
  position: relative; /* Necesario para el botón de cierre */
}

/* 2. Ocultamos el header y footer de Bootstrap, ya no los usamos */
.modal-custom-style .modal-header,
.modal-custom-style .modal-footer {
  display: none;
}

/* 3. Ajustamos el padding del body de Bootstrap */
.modal-custom-style .modal-body {
  padding: 0; /* El padding principal lo da .modal-content */
}

/* 4. Estilos para tu botón de cierre personalizado */
.modal-custom-style .close-btn {
  /* Estilos de tu .close-btn de style.css */
  color: #aaa;
  position: absolute;
  right: 15px; /* Lo posicionamos relativo al .modal-content */
  top: 10px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
  z-index: 10; /* Nos aseguramos que esté por encima */

  /* Anulaciones de Bootstrap (si se coló un .btn-close) */
  background: transparent;
  border: none;
  opacity: 1;
  box-shadow: none;
}

.modal-custom-style .close-btn:hover {
  color: #000;
}

/* 5. Ajustes responsive de tu style.css */
@media (max-width: 575px) {
  .modal-custom-style .modal-content {
      padding: 24px;
      border-radius: 14px;
  }
}
/* Contenido del modal */
.modal-custom-style .modal-content {
  /* Tus estilos originales */
  background-color: #fff;
  padding: 55px;
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;

  /* Anulaciones forzadas de Bootstrap */
  border: none; /* Quitamos el borde de Bootstrap */
  margin: 0 auto; /* Anulamos tu 'margin: 5% auto' que rompe el centrado */
  width: auto; /* Dejamos que .modal-lg (del HTML) controle el ancho */
}
@media (max-width: 575px) {
  .modal-content {
    width: 97%;
    padding: 24px;
    border-radius: 14px;
  }
}

.p-terminos {
  font-size: 14px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .p-terminos {
    font-size: 19px;
  }
}
@media (max-width: 575px) {
  .p-terminos {
    font-size: 14px;
  }
}

.titulo_modal {
  font-size: 15px;
}

.p_terminos {
  font-size: 14px;
}

/* Botón cerrar (X) */
.modal-custom-style .close-btn {
  /* Tus estilos originales */
  color: #aaa;
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
  z-index: 10; /* Nos aseguramos que esté por encima */

  /* Anulaciones forzadas de Bootstrap .btn-close */
  background: transparent;
  border: none;
  opacity: 1;
  box-shadow: none;
  padding: 0; /* Ajuste por si acaso */
}
/* 1. Cambia el color del borde cuando está SIN MARCAR */
.checkbox_form.form-check-input {
  border-color: #FF4E0E;
}

/* 2. Cambia el color de fondo y borde cuando está MARCADO */
.checkbox_form.form-check-input:checked {
  background-color: #FF4E0E;
  border-color: #FF4E0E;
}

/* 3. (Recomendado) Cambia el color del "anillo" de foco */
.checkbox_form.form-check-input:focus {
  border-color: #FF4E0E;
  box-shadow: 0 0 0 0.25rem rgba(255, 78, 14, 0.25);
}
.modal-custom-style .close-btn:hover {
  color: #000; /* Tu estilo hover original */
}
@media (max-width: 575px) {
  .section_form {
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
  }
}

.subtitulo_form_2 {
  line-height: 34px;
}
@media (max-width: 575px) {
  .subtitulo_form_2 {
    font-size: 16px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .p-espe {
    margin: 0 !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .espe-mt {
    margin-bottom: 3px !important;
  }
}

.t-gracias {
  font-size: 35px !important;
  text-align: center;
}

.subtitulo_form_2 {
  text-align: center;
}

.descarga__area {
  padding-top: 100px;
  padding-bottom: 140px;
  justify-content: center;
}
@media (max-width: 992px) {
  .descarga__area {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media (max-width: 575px) {
  .descarga__content {
    padding-top: 0px;
  }
}
.descarga__sub-title {
  font-size: 18px;
  font-weight: 500;
  color: #2b4eff;
  display: inline-block;
  margin-bottom: 5px;
}
.descarga__title {
  font-size: 45px;
  color: #1C1B1D;
  z-index: 1;
  font-weight: 600;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .descarga__title {
    font-size: 39px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .descarga__title {
    font-size: 30px;
    text-align: start;
  }
}
@media (max-width: 575px) {
  .descarga__title {
    font-size: 30px;
    text-align: start;
    margin-bottom: 10px;
  }
}
.descarga__title span {
  position: relative;
}
.descarga__title span img {
  position: absolute;
  left: 0px;
  bottom: 3px;
  z-index: -1;
  -webkit-animation: section-animation 3s infinite;
  animation: section-animation 3s infinite;
}
.descarga__title span.yellow-bg-big img {
  bottom: 15px;
  width: 120%;
  -webkit-animation: section-animation-2 3s infinite;
  animation: section-animation-2 3s infinite;
}
.descarga__title span.yellow-bg-sm img {
  bottom: 10px;
  width: 120%;
  -webkit-animation: section-animation-2 3s infinite;
  animation: section-animation-2 3s infinite;
}
.descarga__span {
  text-align: start;
  margin-top: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .descarga__span {
    text-align: center;
  }
}
.descarga__title-wrapper {
  position: relative;
  z-index: 1;
}
.descarga__title-wrapper p {
  font-size: 16px;
  color: #53545b;
}
.descarga__content {
  width: 100%;
}
.descarga__colleft {
  flex: 0 0 52%; /* ocupa 55% exacto */
  max-width: 52%;
  padding-left: 2rem; /* equivalente a ps-5 */
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .descarga__colleft {
    flex: 0 0 60%; /* ocupa 55% exacto */
    max-width: 60%;
  }
}
@media (max-width: 992px) {
  .descarga__colleft {
    flex: 0 0 100%; /* ocupa 55% exacto */
    max-width: 100%;
    padding-left: 0rem; /* equivalente a ps-5 */
  }
}
.descarga__colright {
  flex: 0 0 48%; /* ocupa 45% exacto */
  max-width: 48%;
  text-align: center;
}
@media (max-width: 992px) {
  .descarga__colright {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .descarga__colright {
    flex: 0 0 40%; /* ocupa 55% exacto */
    max-width: 40%;
  }
}
.descarga__img {
  width: 100%;
  height: 980px;
  object-fit: cover;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .descarga__img {
    height: 850px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .descarga__img {
    height: 675px;
  }
}
@media (max-width: 992px) {
  .descarga__espe {
    text-align: center;
  }
}
@media (max-width: 575px) {
  .descarga__espe {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .descarga__espe {
    font-size: 29px;
  }
}
.descarga__mob {
  display: none;
}
@media (max-width: 992px) {
  .descarga__mob {
    display: block;
    width: 100%;
  }
  .descarga__mob img {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .descarga__mob img {
    height: 230px;
    object-fit: contain;
  }
}

input,
button,
textarea {
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  color: inherit;
  background-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

[class*=__container] {
  max-width: 1240px;
}

.intro {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
@media (max-width: 767.98px) {
  .intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
}

.title {
  font-size: 40px;
  font-weight: 500;
  line-height: 127.5%;
  position: relative;
  text-transform: capitalize;
  display: inline-flex;
  font-family: "Geogrotesque", sans-serif;
  padding: 0 7px 0 7px;
}
@media (max-width: 767.98px) {
  .title {
    font-size: 36px;
  }
}

.text {
  font-size: 18px;
  line-height: 127%; /* 23/18 */
}
@media (max-width: 479.98px) {
  .text {
    font-size: 16px;
  }
}

.process {
  padding: 40px 0 40px 0;
  font-family: "Geogrotesque", sans-serif;
}

@media (max-width: 767.98) {
  .process {
    padding: 30px 0 30px 0;
  }
}
.process__intro {
  margin-bottom: 80px;
}

@media (max-width: 991.98px) {
  .process__intro {
    margin-bottom: 32px;
  }
}
.process__title {
  flex-shrink: 0;
}

.process__text {
  max-width: 18.25rem;
}

.accordions__list {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

@media (max-width: 479.98px) {
  .accordions__list {
    gap: 1.25rem;
  }
}
.accordions__item {
  background-color: #f3f4f8;
  border-radius: 2.8rem;
  overflow: hidden;
  transition: 0.5s cubic-bezier(0.65, 0.2, 0.65, 1);
  box-shadow: 0px 0.3125rem 0px 0px #191a23;
  border: 0.0625rem solid #191a23;
}
@media (max-width: 479.98px) {
  .accordions__item {
    border-radius: 1.5rem;
  }
}

.accordions__control {
  display: flex;
  align-items: center;
  padding: 7px 40px 7px;
  width: 100%;
  position: relative;
}

@media (max-width: 767.98px) {
  .accordions__control {
    padding: 30px;
  }
}
@media (max-width: 479.98px) {
  .accordions__control {
    padding: 20px;
  }
}
.accordions__title {
  font-family: "Geogrotesque", sans-serif;
  color: black;
  font-size: 26px;
  font-weight: 400;
  text-transform: capitalize;
  flex: 1 1 auto;
  display: flex;
  line-height: 120%;
  padding-right: 1.25rem;
  justify-content: flex-start;
  text-align: left;
}
@media (max-width: 767.98px) {
  .accordions__title {
    font-size: 20px;
  }
}

.accordions__icon {
  flex: 0 0 58px;
  display: flex;
  width: 58px;
  height: 58px;
  background-color: #f3f3f3;
  border-radius: 50%;
  position: relative;
  transition: 0.5s cubic-bezier(0.65, 0.2, 0.65, 1);
}
@media (max-width: 479.98px) {
  .accordions__icon {
    flex: 0 0 32px;
    display: flex;
    width: 32px;
    height: 32px;
  }
}

.accordions__icon::before {
  content: "";
  width: 1.5625rem;
  height: 0.3125rem;
  background-color: #191a23;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 479.98px) {
  .accordions__icon::before {
    width: 20px;
    height: 2px;
  }
}

.accordions__icon::after {
  content: "";
  width: 1.5625rem;
  height: 0.3125rem;
  background-color: #191a23;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
@media (max-width: 479.98px) {
  .accordions__icon::after {
    width: 20px;
    height: 2px;
  }
}

.accordions__content {
  padding: 0 40px 0 40px;
  max-height: 0;
  overflow: hidden;
  will-change: max-height;
  transition: 0.5s cubic-bezier(0.65, 0.2, 0.65, 1);
  box-sizing: content-box;
  position: relative;
  z-index: 5;
}
@media (max-width: 767.98px) {
  .accordions__content {
    padding: 0 30px 0 30px;
  }
}
@media (max-width: 479.98px) {
  .accordions__content {
    padding: 0 20px 0 20px;
  }
}

.open .accordions__content {
  padding: 0px 40px 50px 40px;
}
@media (max-width: 767.98px) {
  .open .accordions__content {
    padding: 20px 30px;
  }
}
@media (max-width: 479.98px) {
  .open .accordions__content {
    padding: 0px 20px 20px 20px;
    
  }
}

.open .accordions__icon {
  transform: rotate(225deg);
}

.accordions__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 992px) {
  .accordions__grid {
    text-align: center;
  }
}

.grid__button {
  color: #ffffff;
  border-radius: 80px;
  padding-top: 18px;
  padding-bottom: 18px;
  font-weight: 600;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.3s ease;
  width: 210px;
  height: 55px;
}

@media (max-width: 768px) {
  .accordions__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .accordions__grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
    text-align: center;
  }
  .accordions__grid {
    margin-top: 12px;
  }
}
.call {
  background-color: #F8F8F8 !important;
}
@media (max-width: 575px) {
  .call__area {
    padding-top: 60px !important;
  }
}
.call__contenido_de {
  width: 100%;
}
.call__contenido_de img {
  width: 420px;
}
@media (max-width: 575px) {
  .call__contenido_de img {
    width: 360px;
  }
}
.call__man_flex_respon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media (max-width: 575px) {
  .call__man_flex_respon {
    flex-direction: column;
  }
}
.call__txt_propuesta {
  font-size: 14px;
  font-weight: 400;
  color: black;
  margin-top: 10px;
}
.call__contenido_iz img {
  width: 180px;
}
@media (max-width: 575px) {
  .call__contenido_iz img {
    width: 160px;
  }
}
.call__btn {
  background-color: #FF4E0E;
  font-size: 22px;
  font-weight: 600;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-radius: 50px;
}
@media (max-width: 575px) {
  .call__btn {
    padding-left: 44px;
    padding-right: 44px;
    font-size: 23px;
  }
}
.call__btn:hover {
  background-color: #e2430c; /* tono más oscuro */
  transform: scale(1.05) translateY(-2px); /* efecto de “levantarse” */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); /* sombra suave */
}
.call__footer {
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
}
.call__footer p {
  font-size: 14px;
}

/*----------------------------------------*/
/*  23. ERROR CSS START
/*----------------------------------------*/
.error__title {
  font-size: 70px;
  line-height: 0.9;
  margin-bottom: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .error__title {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .error__title {
    font-size: 37px;
  }
}
.error__content p {
  font-size: 20px;
  color: #53545b;
  margin-bottom: 45px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .error__thumb img {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .error__thumb img {
    width: 100%;
  }
}

/*----------------------------------------*/
/*  00. FOOTER CSS START
/*----------------------------------------*/
.footer__widget-title {
  padding-top: 5px;
  font-size: 20px;
  color: #ffffff;
}
.footer__widget-title-2 {
  color: #1C1B1D;
}
.footer__widget-body p {
  font-size: 16px;
  line-height: 24px;
  color: #a1a2ab;
  margin-bottom: 30px;
}
.footer__widget-body-2 p {
  color: #53545b;
}
.footer__social ul li {
  display: inline-block;
}
.footer__social ul li:not(:last-child) {
  margin-right: 10px;
}
.footer__social ul li a {
  display: inline-block;
  font-size: 15px;
  width: 44px;
  height: 44px;
  line-height: 46px;
  text-align: center;
  border: 2px solid #285da1;
  background: #285da1;
  color: #ffffff;
}
.footer__social ul li a {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.footer__social ul li a:hover {
  background: transparent;
  color: #285da1;
}
.footer__social ul li a.tw {
  background: #03a9f4;
  border-color: #03a9f4;
}
.footer__social ul li a.tw:hover {
  background: transparent;
  color: #03a9f4;
}
.footer__social ul li a.pin {
  background: #d2173f;
  border-color: #d2173f;
}
.footer__social ul li a.pin:hover {
  background: transparent;
  color: #d2173f;
}
.footer__link ul li:not(:last-child) {
  margin-bottom: 4px;
}
.footer__link ul li a {
  color: #a1a2ab;
}
.footer__link ul li a:hover {
  color: #ffffff;
}
.footer__link-2 ul li a {
  color: #53545b;
}
.footer__link-2 ul li a:hover {
  color: #2b4eff;
}
.footer__subscribe-input {
  position: relative;
}
.footer__subscribe-input input {
  width: 100%;
  height: 60px;
  padding: 0 30px;
  padding-right: 50px;
  border: none;
  outline: none;
}
.footer__subscribe-input input {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.footer__subscribe-input input::placeholder {
  font-size: 14px;
  color: #6d6e75;
}
.footer__subscribe-input button {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 18px;
  color: #ffffff;
  background: #2b4eff;
  width: 70px;
  height: 60px;
  padding-right: 25px;
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  overflow: hidden;
}
.footer__subscribe-input button i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
}
.footer__subscribe-input button i:last-child {
  left: 0%;
  visibility: hidden;
  opacity: 0;
}
.footer__subscribe-input button:hover i {
  left: 100%;
  visibility: hidden;
  opacity: 0;
}
.footer__subscribe-input button:hover i:last-child {
  left: 50%;
  visibility: visible;
  opacity: 1;
}
.footer__subscribe p {
  font-size: 14px;
  line-height: 20px;
  color: #83848a;
  padding-right: 60px;
}
.footer__subscribe-2 p {
  color: #6d6e75;
}
.footer__pl-70 {
  padding-left: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__pl-70 {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__pl-70 {
    padding-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer__pl-70 {
    padding-left: 0;
  }
}
@media (max-width: 575px) {
  .footer__pl-70 {
    padding-left: 0;
  }
}
.footer__bottom {
  padding: 20px 0;
}
.footer__bottom-2 {
  border-color: #e0e1e8;
  padding-top: 100px;
}
@media (max-width: 575px) {
  .footer__bottom-2 {
    padding-top: 10px;
  }
}
.footer__copyright p {
  font-size: 14px;
  color: #83848a;
  margin-bottom: 0;
}
.footer__copyright p a {
  color: #ffffff;
}
.footer__copyright-2 p {
  color: #ffffff;
}
.footer__copyright-2 p a {
  color: #2b4eff;
}
.footer__grid__button__especial:hover {
  transform: scale(1.05); /* Aumenta el tamaño un 5% */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  color: #5f67aa; /* Mantenemos el color de texto */
}

.footer__grid__button__especial {
  color: #5f67aa;
  border-radius: 80px;
  padding: 2rem 3rem;
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: all 0.3s 
ease-in-out;
  height: 53px;
  font-size: 22px;
  font-weight: 600;
  display: inline-flex
;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
@media (max-width: 575px) {
  .footer__grid__button__especial {
    font-size: 20px;
  }
}

#goTopBtn {
  transition: transform 0.3s ease-in-out;
}

/*#goTopBtn:hover {
    transform: scale(1.1);
}
    */
.vid {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*# sourceMappingURL=style.css.map */
/* =================================================== */
/* CSS PARA LA GRILLA DE BOTONES DENTRO DEL ACORDEÓN */
/* (Con estilos solicitados, pero responsive)        */
/* =================================================== */

.accordions__content .accordions__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* <--- ¡ESTA ES LA CORRECCIÓN! */
    gap: 15px 10px; /* Espacio vertical y horizontal */
  padding-top: 15px;
  justify-items: center ;
}

.accordions__content .grid__item {
  /* No se necesita estilo extra aquí */
}

/* Estilos para los botones de las sedes */
.accordions__content .grid__button {
  /* --- Estructura y Tamaño --- */
  display: block; /* Ocupa el espacio del item */
  width: 210px;
  height: 55px; /* Usa el ancho de la columna del grid */
  /* height: 55px; */ /* REMOVIDO: Dejar que el padding defina la altura */
  /* width: 210px; */ /* REMOVIDO: Dejar que el grid defina el ancho */
  padding: 12px 10px; /* AJUSTADO: Padding vertical reducido para evitar altura excesiva */
  box-sizing: border-box; /* Incluye padding en el tamaño total */

  /* --- Apariencia (Tus estilos) --- */
  background: #49529f; /* Color base morado (será sobrescrito por clases específicas) */
  color: #ffffff;
  border-radius: 80px; /* Muy redondeado */
  border: none; /* Asegurar que no haya borde por defecto */
  font-weight: 600;
  font-size: 18px; /* AJUSTADO: Ligeramente reducido para mejor encaje */
  line-height: 1.3; /* Ajustar altura de línea */
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease;
  text-decoration: none;

  /* --- Manejo de texto largo --- */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accordions__content .grid__button:hover {
  opacity: 0.85; /* Ligero cambio al pasar el mouse */
  color: white;
}

/* --- Colores Específicos --- */
.accordions__content .moradoVacaciones-bg {
  background-color: #49529f; /* Tu color morado */
}

.accordions__content .naranjaVacaciones-bg {
   background-color: #f22e19; /* Tu color naranja */
}

/* --- Márgenes Opcionales --- */
.accordions__content .accordions__grid.mb-50 {
    margin-bottom: 50px !important;
}
.accordions__content .accordions__grid.mt-25 {
    margin-top: 25px !important;
}

/* AÑADE ESTO AL FINAL DE style.css 
   (Este es el único cambio que necesitas)
*/
/* --- AÑADE ESTO AL FINAL DE style.css --- */

@media (max-width: 991px) {

  /* Oculta el header en móviles (<= 991px) 
     SOLO si AÚN NO tiene la clase .sticky (es decir, no se ha hecho scroll).
  */
  /* .header__area:not(.sticky) {
    display: none;
  } */

}

/* Fix for Bootstrap validation icons appearing multiple times or incorrectly */

.was-validated .form-control:valid, 
.form-control.is-valid,
.was-validated .form-select:valid, 
.form-select.is-valid {
    /* Ensure the background image (check icon) appears only once and is positioned correctly */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center; /* Default Bootstrap position */
    background-size: calc(.75em + .375rem) calc(.75em + .375rem); /* Default Bootstrap size */
    padding-right: calc(1.5em + .75rem); /* Ensure space for the icon */
}

.was-validated .form-control:invalid, 
.form-control.is-invalid,
.was-validated .form-select:invalid, 
.form-select.is-invalid {
     /* Ensure the background image (error icon) appears only once and is positioned correctly */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center; /* Default Bootstrap position */
    background-size: calc(.75em + .375rem) calc(.75em + .375rem); /* Default Bootstrap size */
    padding-right: calc(1.5em + .75rem); /* Ensure space for the icon */
}

/* Ensure selects specifically don't get multiple icons */
.was-validated select.form-select:valid, 
select.form-select.is-valid,
.was-validated select.form-select:invalid, 
select.form-select.is-invalid {
    background-size: 16px 12px, calc(.75em + .375rem) calc(.75em + .375rem); /* Adjust size if needed */
    background-position: right 1.75rem center, center right .75rem; /* Adjust position */
}
.descarga__colright .about__thumb-wrapper,
.descarga__colright .about__thumb-2 {
    box-shadow: none !important;
    border: none !important;
}
/* --- FIX: eliminar la "línea" entre columnas en sección descarga --- */
/* 1) eliminar padding lateral del container dentro de esta sección */
.descarga__area > .container {
  padding-left: 0;
  padding-right: 0;
}

/* 2) ajustar espaciado interno de la columna de contenido
   - reduce el padding-left para que el contenido y la imagen estén pegados */
.descarga__colleft {
  padding-left: 1rem; /* cambia a 0 si quieres que quede totalmente pegado */
}

/* 3) asegurar que la columna derecha no añada padding que cause separación */
.descarga__colright {
  padding-right: 0;
  box-shadow: none; /* por si hubiera alguna sombra */
  border: none;
}

/* 4) hacer que la imagen ocupe toda la altura disponible de su columna,
   evitando la franja blanca por diferencia de alturas */
.descarga__colright .about__thumb-wrapper,
.descarga__colright .about__thumb-2 {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.footer__grid__button__especial:hover {
  transform: scale(1.05); /* Aumenta el tamaño un 5% */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra para "levantarlo" */
  color: #5f67aa; /* Mantiene el color del texto */
}
/* 5) evitar borde/espacio por imagen y permitir ajuste responsivo */
.descarga__img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none; /* quita la altura fija si existía */
  object-fit: cover;
  border: none;
  box-shadow: none;
}

/* 6) media queries: en móvil ya ocultas la columna derecha; conservar comportamiento */
@media (max-width: 992px) {
  .descarga__area > .container { padding-left: 1rem; padding-right: 1rem; }
  .descarga__colleft { padding-left: 0.75rem; }
}