body {
    font-family: 'Raleway', sans-serif!important;
}

html::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
html::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #252525;
}
html::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 6px;
}

.overflow{
  overflow: hidden; 
}

.layout_padding {
  padding: 75px 0;
}

.layout_padding2 {
  padding: 45px 0;
}

.layout_padding2-top {
  padding-top: 45px;
}

.layout_padding-top {
  padding-top: 75px;
}

.layout_padding-bottom {
  padding-bottom: 75px;
}

.card-header {
  background: #fff;
  padding: 10px 3px;
}

.btn-link {
    width: 100%;
    text-align: left;
}
.btn-link:hover {
  text-decoration: none;
  color: inherit;
}
.btn-link:active {
  text-decoration: none;
}
.btn-link:focus {
  text-decoration: none;
}

.scrollbar::-webkit-scrollbar {
    height: 6px;                           
    border: 1px solid #e2e2e2;
}

.scrollbar::-webkit-scrollbar-thumb:horizontal{
  background: #a7a7a7;
  border-radius: 1px;
}

.card-body li {
  text-align: justify;
}

.scrollbar:hover::-webkit-scrollbar-thumb:horizontal{
  background: #525252;
  border-radius: 10px;
}







.call_to-btn {
  display: inline-block;
  padding: 15px 45px;
  border-radius: 10px;
  font-size: 16px;
  background-color: #c1c1c1;
  color: #fff;
  font-weight: 500!important;
  transition: all 0.3s ease 0s;
}
.call_to-btn:hover {
    color: #fff;
}
.hero_section .call_to-btn {
  background: #ffffff;
  color: #14606c;
  border: 1px solid #297c89c7;
}

i.text-success {
  color: #14606cc7!important;
}

.btn_white-border:hover {
  color: #fff;
  border: 1px solid #fff;
}

.hero_btn-continer a:hover {
  color: #14606cb8!important;
  border: 1px solid #297c89c7;
}

.call_to-btn img {
  width: 18px;
  margin-left: 10px;
}

.btn_on-hover {
  transition: all 0.3s ease 0s;
}

.btn-price:hover{
  color: #fff!important;
}

.call_to-btn:hover,
.btn_on-hover:hover {
  -webkit-box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.7);
  transform: translateY(-7px);
}

.main-heading {
  color: #082465;
  font-weight: bold;
  text-align: center;
}

.generic_feature_list>ul>li {
    margin-left: 5%!important;
}

/*header section*/

.header_section {
  padding-top: 0px;
/*  font-family: 'Poppins', sans-serif;*/
background: #fff;
box-shadow: 0 0 5px #0000001f;
    width: 100%;
    position: fixed;
    z-index: 9999999;
animation: navbar-fixed-animated .5s;
    transition: top .5s ease;
}

@keyframes navbar-fixed-animated{
0%, 50% {
    margin-top: -200px;
}
100% {
    margin-top: 0;
}
}


@media (max-width: 992px){
.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link {
    color: #333!important;
}
}

nav.navbar.navbar-expand-lg {

  padding: 10px 0;
}

.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link {
  padding: 10px 20px;
  color: #222;
  text-align: center;
  border: none;
}


a,
a:hover,
a:focus {
  text-decoration: none;
}

a:hover,
a:focus {
  color: initial;
}

.btn,
.btn:focus {
  outline: none !important;
  box-shadow: none;
}

.top_container {
  position: inherit;
}


@media (max-width: 768px){
.top_container::before {
    background-size: contain!important;
}
}
/*.top_container::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../images/hero-bg.png);
  background-size: 100% 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
  z-index: -1;

    background-size: contain;
    background-position-y: 50px;
}*/

.sub_page .top_container::before {
  background-color: #fdd31d;
  background-image: none;
}

/*.top_container::after {
  content: "";
  position: absolute;
  width: 75px;
  height: 75px;
  bottom: 20%;
  left: 6%;
  background-color: #fdd31d;
}*/


.sub_page .top_container::after {
  display: none;
}


.navbar-brand img {
  width: 25px;
  margin-right: 7px;
}


.custom_nav-container .nav_search-btn {
  background-image: url(../images/search-icon.png);
  background-size: 22px;
  background-repeat: no-repeat;
  background-position-y: 7px;
  width: 35px;
  height: 35px;
  padding: 0;
  border: none;
    
    
    }
    .ingresar {
    border: 1px solid;
    border-radius: 50px;
    background: #ffc541;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-brand span {
  font-size: 22px;
  font-weight: 700;
  color: #fefefe;
}

.custom_nav-container {
  z-index: 99999;
  padding: 15px 0;
}

.custom_nav-container .navbar-toggler {
  outline: none;
}

.custom_nav-container .navbar-toggler .navbar-toggler-icon {
  background-image: url(../images/menu.png);
  background-size: 40px;
    filter: brightness(0.25);
}

/*end header section*/
@media (max-width: 992px){
.hero-container.container {
    /* padding-top: 110px!important; */
}
}
@media (max-width: 576px){
.hero-container {
    padding-bottom: 0px!important;
}
}

@media (max-width: 992px){
.hero_detail-box h1 {
    font-size: 25px!important;
}
}

@media (min-width: 992px){
.hero_detail-box h1 {
    margin-bottom: 100px!important;
}
}
/* hero section */
.hero-container {
  display: block;
  padding-top: 135px;
  padding-bottom: 50px;
}

.hero_detail-box {
  width: 100%;
}

.hero_img-container {
  /*width: 68%;
  margin-right: -8%;
  margin-top: -5%;*/
}

.hero_img-container img {
  width: 100%;
}

.hero_detail-box {
  /* color: #525252; */
}


.generic_feature_list ul {
    width: 75%;
    text-align: left;
    margin-left: auto!important;
    margin-right: auto!important;
}

.generic_feature_list ul li {
    margin-left: 20%;
}

.admission_detail-box h3 {
    margin-bottom: 25px;
}




.hero_detail-box h1 {
  /* color: #525252; */
  width: 100%;
}


.hero_detail-box p {
  margin-top: 20px;
  margin-bottom: 35px;
}


/* end hero section */

/* common style for some sections */
.common_style>section {
  padding: 0px;
}

.common_style .row {
  align-items: center;
    justify-content: center;
}

.common_style h3 {
  font-weight: 500;
  color: #525252;
}

.common_style p {
  font-weight: 400;
  color: #525252;
  margin: 30px 0 50px 0;
}

/*.common_style img {
  width: 100%;
}*/


/* end common style */

/* about section */
.about_section {
  text-align: right;
}

.about_section a {
  background-color: #222;
  color: #fefeff;
}

/* end about section */

/* admission section */


.admission_section a {
  background-color: #f3f3f3;
    color: #222;
border: 2px solid;
}

/* end admission section */

/* why section */

.why_section {
  text-align: right;
}

.why_section a {
 background-color: #f3f3f3;
    color: #222;
    border: 2px dashed;
}

/* end why section */

/* determine section */


.determine_section a {
  background-color: #fdd31d;
  color: #fefeff;
}


/* end determine section */

/* client section */
.client_section h2,
.client_section h5,
.client_section p {
  font-weight: 600;
}

.client_section h2 {
  text-align: center;
}


.client_section h5 {
  font-size: 30px;
  color: #343a40;
}

.client_section .row {
  align-items: center;
  padding: 75px 0;
  margin: 0 15px;
}

.client_section img {
  width: 100%;
}

.client_img-box::before,
.client_img-box::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 30px;
  border-radius: 20px;
  background-color: #fdd31d;
}

.client_img-box::before {
  top: -15px;
  transform: rotate(139deg);
  left: -15px;
  animation: beforeanimate 1s;
  animation-delay: .1s;
}

.client_img-box::after {
  bottom: -15px;
  transform: rotate(142deg);
  right: -15px;
  animation: afteranimate 1s;
  animation-delay: .1s;
}


@keyframes beforeanimate {
  0% {
    top: 43%;
    transform: rotate(142deg);
    left: 31%;

  }

  100% {
    top: -15px;
    transform: rotate(139deg);
    left: -15px;
  }
}

@keyframes afteranimate {
  0% {
    bottom: 46%;
    transform: rotate(142deg);
    right: 35%;
  }

  100% {
    bottom: -15px;
    transform: rotate(142deg);
    right: -15px;
  }
}

.client_section .carousel-indicators {
  margin: 0;
  justify-content: flex-end;
  padding-right: 15px;
  bottom: 20px;
}

.client_section .carousel-indicators li {
  width: 25px;
  height: 25px;
  background-color: ##525252;
  border-radius: 100%;
  opacity: 1;
}

.client_section .carousel-indicators li.active {
  background-color: #fdd31d;
}

/* end client section */

/* contact section */

.contact_section {
  padding: 75px 45px;
  /* font-family: 'Poppins', sans-serif; */
}

.contact_section .row {
  align-items: center;
}

.contact_section input {
  border: none;
  outline: none;
  border-bottom: 1px solid #000;
  width: 90%;
  margin: 15px 0;
}



.contact_form-container button {
  border: none;
  background-color: #6bd1bd;
  color: #fff;
  font-size: 15px;
  padding: 15px 45px;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: bold;
}

.contact_img-box {

  display: flex;
  align-items: center;
justify-content: center;
}

.contact_img-box img {
  width: 100%;
    max-width: 250px;
}

.contact_section h2 {
  font-size: 26px;
  color: #404040;
  font-weight: 600;
  /* font-family: 'Raleway', sans-serif; */
  margin-bottom: 35px;
}


/* end contact section */


/* info section */
.info_section {
  background-color: #252525;
  color: #fff;
  /* font-family: 'Poppins', sans-serif; */
}
.btn-dark{
  background-color: #252525!important;
}
.btn-dark:hover{
  color: #fff!important;
}
.info_logo-box {
  display: flex;
  justify-content: center;
}

.info_logo-box h2 {
  font-weight: bold;
  padding: 5px 7px;
  border-bottom: 1.5px solid #14606cc7;
}

.typed-cursor, .typed-cursor--blink{
    display: none;
}


.info_section ul {
  padding: 0;
}

.info_section ul li {
  list-style-type: none;
  margin: 3px 0;
}

.info_section ul li a {
  color: #ffffff;
}

.info_section ul li a:hover {
  color: #fdd31d;
}

.info_section h5 {
  margin-bottom: 12px;
  font-size: 22px;
}



.info_section .form_container input {
  width: 225px;
  height: 40px;
  padding: 10px;
}

.info_section .form_container input::placeholder {
  color: #ccc8c8;
}

.info_section .form_container button {
  background-color: #fdd31d;
  border: none;
  outline: none;
  color: #fff;
  padding: 8px 30px;
  margin-top: 15px;
  font-size: 15px;
  text-transform: uppercase;
}

.social_container {
  width: 90%;
  margin: 0 auto;
  border-top: 1px solid #898989;
  padding: 25px 0;
}

.info_section .social-box {
  margin: 0 auto;
  width: 400px;
  display: flex;
  justify-content: center;
}

.text-invit-dig {
  text-align:center;
  background-image: linear-gradient(160deg,transparent 0%,#525252 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  margin: 0!important;
}

.text-invit-dig::before {
  content: "";
  width: 50px;
  height: 1px;
  display: inline-block;
  background-color: #e1e1e1;
  margin: 0 15px;
  transform: translateY(-4px);
}
.text-invit-dig::after {
  content: "";
  width: 50px;
  height: 1px;
  display: inline-block;
  background-color: #e1e1e1;
  margin: 0 15px;
  transform: translateY(-4px);
}

.info_section .social-box img {
  width: 35px;
  margin-right: 5px;
}

.accordion {
  background: #f8f9fd!important;
    border: none!important;
}
.accordion .card {
  background: inherit!important;
  border: none!important;
}

.accordion button {
  text-align: center;
}

.card-header {
  border-radius: 50px!important;
    margin-bottom: 10px!important;
}

.card .collapse {
  border-radius: 10px!important;
  background: #fff!important;
  margin-bottom: 10px!important;
}

.accordion .btn-link {
  color: #212529;
  font-weight: 500;
}


.btn-verdemo {
  border-radius: 50px;
  padding: 10px 40px;
  font-weight: 500;
}

/* end info section */

/* footer section*/

.footer_section {
  background-color: #fff;
  padding: 5px 15px;
  /* font-family: 'Poppins', sans-serif; */

}

.footer_section p {
  color: #404040;
  margin: 0;
  text-align: center;
}

.footer_section a {
  color: #fdfdfe;
}



/* end footer section*/


/* animaciones movimientos */

/*FLASH*/
/*Efecto como de una cámara cuando lanza el flash, jugando con la opacidad*/
.flash{
  animation: flash 0.5s 1;
}
@keyframes flash{
  25%, 75% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/*CLICK*/
/*Efecto al hacer click sobre un botón, jugando con las escalas*/
.click{
  animation: click 0.5s 1;
}
@keyframes click{
  25%,75%{
    transform: scale(0.8)
  }
  50%{
    transform: scale(1.1)
  }
}

/*CHICLE*/
/*Efecto de chicle que se estira y se encoge y rebota, jugando con las escalas*/
.chicle{
  animation: chicle 1s 1;
}
@keyframes chicle{
  30% {
    transform: scaleX(1.25) scaleY(0.75);
  }
  50% {
    transform: scaleX(0.75) scaleY(1.25);
  }
  60% {
    transform: scaleX(1.15) scaleY(0.85);
  }  
}

/*VIBRADOR*/
/*Efecto de vibración, jugando con el desplazamiento en X e Y*/
.vibracion{
  animation: vibracion 1s infinite;
}
@keyframes vibracion{
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80%{
    transform: translateX(10px);
  }
  5%, 25%, 45%, 65%, 85% {
    transform: translateY(-10px);
  }
  15%, 35%, 55%, 75%{
    transform: translateY(10px);
  }    
}

/*CARTEL*/
/*Efecto como el de un cartel de una tienda que se mueve hacia los lados, jugando con la rotación.
Cambiamos el origin del elemento para que rote desde el top center*/
.cartel{
  animation: cartel 1s 1;
  transform-origin: top center;
}
@keyframes cartel{ 
  20%{
    transform: rotate(20deg)
  }
  40%{
    transform: rotate(-15deg)
  }
  60%{
    transform: rotate(10deg)
  }
  80%{
    transform: rotate(-5deg)
  }  
}

/*BALANCEO*/
/*Efecto de balanceo, jugando con la escala y la rotación*/
.balanceo{
  animation: balanceo 1s 1;
  transform-origin: top center;
}
@keyframes balanceo{
  20%{
    transform: scale(0.7) rotate(-6deg);
  }
  30%, 70%{
    transform: scale(1.1) rotate(6deg);
  }
  50%, 90%{
    transform: scale(1.1) rotate(-6deg);
  }
}

/*VAIVEN*/
/*Efecto vaivén, jugando con la rotración y la traslación en % (el porcentaje se calcula en base al tamaño del elemento)*/
.vaiven{
  animation: vaiven 1s 1;
}
@keyframes vaiven{
  15%{
    transform: translateX(-25%) rotate(-10deg);
  }
  30%{
    transform: translateX(20%) rotate(5deg);
  }
  45%{
    transform: translateX(-10%) rotate(-3deg);
  }
  60%{
    transform: translateX(5%) rotate(2deg);
  }
  75%{
    transform: translateX(-3%) rotate(-1deg);
  }  
}

/*DESCOLGADO*/
/*Efecto como que se descuelga de una esquina y luego cae, jugando con la rotación y la traslación*/
.descolgado{
  animation: descolgado 1s 2;
  transform-origin: top left;
}
@keyframes descolgado{
  20%,60%{
    transform: rotate(80deg);
  }
  40%, 80%{
    transform: rotate(60deg);
    opacity: 1;    
  }
  100%{
    transform: translateY(400px) rotate(60deg);
    opacity: 0;
  }
}

/*IN ROTATIVO*/
/*Efecto de entrar desde un lateral, rotando y apareciendo, jugando con la rotación, la traslación y la opacidad*/
.in_rotativo{
  animation: in_rotativo 1s 2;
}
@keyframes in_rotativo{
  0%{
    transform: translateX(-100%) rotate(-260deg);
    opacity: 0;
  }
}

/*OUT ROTATIVO*/
/*Efecto de salir por un lateral, rotando y apareciendo, jugando con la rotación, la traslación y la opacidad*/
.out_rotativo{
  animation: out_rotativo 1s 2;
}
@keyframes out_rotativo{
  100%{
    transform: translateX(100%) rotate(260deg);
    opacity: 0; 
  }
}

/*REBOTE*/
/*Efecto de botar un elemento*/
.rebote{
  animation: rebote 1s 4;
}
@keyframes rebote{
  20%, 50%, 70%{
    transform: translateY(0%);
  }
  40%{
    transform: translateY(-45px);
  }  
  60%{ 
    transform: translateY(-25px);
  }   
}

/*REBOTE IN*/
/*Efecto de aparición de un elemento botando*/
.rebote-in{
  animation: rebote-in 1s 2;
}
@keyframes rebote-in{
  0%{
    transform: scale(0.3);
    opacity: 0;
  }
  50%{ 
    transform: scale(1.1);
    opacity: 1;
  }
  70%{
    transform: scale(0.9)
  }  
}

/*REBOTE IN 2*/
/*Efecto de aparición de un elemento rebotando desde la izquierda*/
.rebote-in-2{
  animation: rebote-in-2 1s 2;
}
@keyframes rebote-in-2{
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20%{
    transform: translateX(10%);
    opacity: 1; 
  }
  40%{
    transform: translateX(-10%);
  }
  60%{
    transform: translateX(0%);
  }  
}

/*REBOTE OUT*/
/*Efecto de desaparición de un elemento botando*/
.rebote-out{
  animation: rebote-out 1s 2; 
}
@keyframes rebote-out{
  25%{
    transform: scale(0.9);
  }
  50%{ 
    transform: scale(1.1);
    opacity: 1; 
  }
  100%{
    transform: scale(0);
    opacity: 0;
  }  
}

/*REBOTE OUT 2*/
/*Efecto de desaparición de un elemento botando*/
.rebote-out-2{
  animation: rebote-out-2 1s 2; 
}
@keyframes rebote-out-2{
  20%{
    opacity: 1;
    transform: translateY(20px);
  }
  100%{
    opacity: 0;
    transform: translateY(-500px);
  }  
}

/*FADE IN*/
/*Efecto de fade in*/
.fade-in{
  animation: fade-in 2s 2; 
}
@keyframes fade-in{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0.7;
  }  
}

/*CORTINILLA*/
/*Efecto de cortinilla lateral*/
.tapa{ 
  position: absolute;
  left: 0;
  top: 0;
  width: 190px;
  height: 65px;
  background: white;
  left: 100%;
}
.cortinilla .tapa{
  animation: 1s cortinilla 1;
}  
@keyframes cortinilla{
  0%{
    left: 0px;
  }
}

/*VELOZ IN*/
/*Efecto de entrada lateral con inclinación*/
.veloz-in{
  animation: 0.5s veloz-in 1; 
}
@keyframes veloz-in{ 
  0%{
    opacity: 0;
    transform: translateX(-200%) skewX(30deg);
  }
  60%{ 
    opacity: 1;
    transform: translateX(-20%) skewX(-30deg);
  }
  80%{
    transform: translateX(0%) skew(15deg);
  }
}

/*VELOZ OUT*/
/*Efecto de salida lateral con inclinación*/
.veloz-out{
  animation: 0.5s veloz-out 1; 
}
@keyframes veloz-out{ 
  15%{
    opacity: 1;
  }
  100%{ 
    opacity: 0;
    transform: translateX(-200%) skewX(-70deg);
  } 
}

/*GIRO*/
/*Efecto de giro*/
.giro{
  animation: 1s giro 1;
  transform-origin: center;
}
@keyframes giro{ 
  0%{
    opacity: 0;
    transform: rotate(-200deg);    
  }
  100%{ 
    opacity: 1;
  } 
}

/*SOMBRA MOVIL*/
/*Efecto de sombra con caja que sube y baja*/
.sombra-movil{
  transform: translateY(-6px);
  transition-duration: 0.3s;
  animation: 4.0s mover-caja infinite;
}
.sombra-movil:before{
  content: '';
  background: radial-gradient(ellipse, 
    rgba(0,0,0,0.35) 0%, 
    rgba(0,0,0,0) 80%);
  width: 90%;
  height: 20px;
  top: 100%;
  left: 5%;
  position: absolute;
  opacity: 0;
}

h6 {
  font-weight: 500!important;
}

.sombra-movil:before{
  opacity: 1;
  transform: translateY(6px);
  transition-duration: 0.3s;
  animation: 4.0s mover-sombra infinite;
}

@keyframes mover-caja{ 
  50%{ 
    transform: translateY(-30px);
  } 
}
@keyframes mover-sombra{
  50%{
    opacity: 1;
    transform: translateY(30px) scale(0.9)
  }
}

/*FLECHA*/
/*Efecto de flecha que sale, se gira y vuelve a entrar*/
.flecha:before{
  content: '';
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: -10px;
  border-width: 10px 10px 10px 0;
  border-color: transparent #4d868f transparent transparent;
  border-style: solid;
}
.flecha:before{
  animation: 1.5s flecha infinite;
}

@keyframes flecha{
  25%{
    left: -9px;
    transform: rotate(0deg);
  }
  65%{
    left: -9px;
    transform: rotate(180deg);
  }
  100%{
    transform: rotate(180deg);
  }
}

/*EFECTO 3D*/
/*Efecto de giro 3D sobre el eje X. Usamos la propiedad perspective para que haga efecto de perspectiva y el backface para ver la parte de atrás de la caja*/
.efecto-3d{
  animation: efecto3d 1s 1;
  backface-visibility: visible
}
@keyframes efecto3d{
  0%{
    opacity: 0.5;
    transform: perspective(200px) rotateX(90deg); 
  }
  40%{ 
    transform: perspective(200px) rotateX(-20deg);
  }
  70%{ 
    transform: perspective(200px) rotateX(20deg);
  } 
}

/*TRANSLATEZ 3D*/
/*Efecto de giro 3D sobre el eje Y usando el translateZ para dar sensación de aumento*/
.translate-3d{
  animation: translate-3d 1s 1;
  backface-visibility: visible;
} 
@keyframes translate-3d{
  40%{
    transform: perspective(300px) translateZ(120px) rotateY(170deg);
  }
  50%{
    transform: perspective(300px) translateZ(120px) rotateY(190deg);
  }
  80%{
    transform: perspective(300px) translateZ(0px) rotateY(360deg)
  }
  100%{
    transform: perspective(300px) rotateY(360deg);    
  }
}
