::-webkit-scrollbar {
   width: 8px;
   /* Tamaño del scroll en vertical */
   height: 8px;
   /* Tamaño del scroll en horizontal */
}

/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
::-webkit-scrollbar-thumb {
   background: #2c3a4e80;
   border-radius: 4px;
}

/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
::-webkit-scrollbar-thumb:hover {
   background: #2c3a4ee0;
   box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* Cambiamos el fondo cuando esté en active */
::-webkit-scrollbar-thumb:active {
   background-color: #999999;
}

/* Ponemos un color de fondo y redondeamos las esquinas del track */
::-webkit-scrollbar-track {
   background: #2c3a4e00;
   border-radius: 4px;
}

/* Cambiamos el fondo cuando esté en active o hover */
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active {
   background: #e9ebec;
}

.text-body {
   color: rgb(255 255 255) !important;
}

@media (max-width: 991.98px) {
   .job-navbar {
      background-color: #021e47f7;
   }
}

.text-orange {
   --vz-text-opacity: 1;
   color: #ff6100 !important;
}
.img-sec-prom {
   width: 100%;
}

.sec-prom::before {
   content: "";
   position: absolute;
   right: 20px;
   left: -20px;
   top: -20px;
   bottom: 20px;
   border: 1px solid #29badb;
   z-index: 0;
   border-radius: 0.25rem;
}

.bg-eventos {
   background-image: url(../img/clases-acuaticas.jpg);
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}

.auth-bg-cover {
   height: 100vh;
}

.auth-bg-cover .card {
   color: #000;
}

.coming-soon-text {
   font-weight: 600;
   text-transform: uppercase;
   color: #ff731e;
   text-shadow: -1px 3px #ffffff;
}

.bg-blue {
   --vz-bg-opacity: 1;
   background-color: rgb(2 30 71) !important;
}
.btn-orange.btn-animation {
   background-color: #ff6100;
   border-color: #ff6100 !important;
}

.btn-orange.btn-animation:is(:hover, :focus, :active, :focus-visible) {
   color: #ff6100;
   background-color: #ff6100;
}

.btn-orange {
   --vz-btn-color: #fff;
   --vz-btn-bg: #ff6100;
   --vz-btn-border-color: #ff6100;
   --vz-btn-hover-color: #fff;
   --vz-btn-hover-bg: #ff6100;
   --vz-btn-hover-border-color: #ff6100;
   --vz-btn-focus-shadow-rgb: 243, 134, 134;
   --vz-btn-active-color: #fff;
   --vz-btn-active-bg: #ff6100;
   --vz-btn-active-border-color: #ff4c00;
   --vz-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --vz-btn-disabled-color: #fff;
   --vz-btn-disabled-bg: #ff6100;
   --vz-btn-disabled-border-color: #ff6100;
}

.badge-gradient-orange {
   background: linear-gradient(-135deg, #ff6100 0%, #5b71b9 100%);
}

.badge-soft-orange {
   color: #ff6100;
   background-color: rgba(241, 113, 113, 0.1);
}

.badge-outline.badge-orange {
   color: #ff6100;
   border: 1px solid #ff6100;
   background-color: transparent;
}

.badge-label.bg-orange:before {
   border-left-color: #ff6100;
}

#landing-services {
   display: flex;
   align-items: center;
   align-content: center;
}
.landing-services {
   border: 3px solid #021e47;
   border-radius: 1em;
}
.landing-services:hover {
   border: 3px solid #ff6100;
}

.about-img-section {
   position: relative;
   background: linear-gradient(216deg, #0e3db1 0%, #030406 100%);
}

.job-icon-effect {
   background: repeating-linear-gradient(55deg, rgba(255, 255, 255, 0) 0.8px, #021e47 1.6px, #021e47 2px, rgba(255, 255, 255, 0) 3.8px, rgba(255, 255, 255, 0) 5px);
}

.shape1 {
   position: absolute;
   top: -40px;
   left: 0;
   right: 0;
   z-index: 1;
   pointer-events: none;
}

.shape1>svg {
   width: 100%;
   height: auto;
   fill: #051f5c;
}

.bg-overlay1 {
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   bottom: 0;
   right: 0;
   top: 0;
   opacity: 0.7;
   background: linear-gradient(180deg, #000000 0%, #17181a 80%, #01091a 100%)
}

/** preguntas frecuentes */

#modalFaq #top-close {
   right: 20px;
   z-index: 100;
   background: rgba(30, 43, 127, 0.5);
   width: 98%;
   top: 1px;
}

#modalFaq .modal-body {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   background-color: rgba(30, 43, 127, 1);
}

#modalFaq .modal-body .card {
   position: relative;
   min-width: 40%;
   width: 400px;
   height: 440px;
   box-shadow: 0 1px 2px rgba(255, 255, 255, 0);
   border-radius: 15px;
   margin: 30px;
   transition: 0.5s;
   background: transparent;
}

#modalFaq .modal-body .card .box {
   position: absolute;
   top: 20px;
   left: 20px;
   right: 20px;
   bottom: 20px;
   background: rgba(4, 31, 90, 0.9);
   border-radius: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   transition: 0.5s;
}

#modalFaq .modal-body .card .box:hover {
   transform: translateY(-50px);
}

#modalFaq .modal-body .card .box:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 50%;
   height: 100%;
   background: rgba(255, 255, 255, 0.03);
}

#modalFaq .modal-body .card .box .content {
   padding: 20px;
   text-align: center;
}

#modalFaq .modal-body .card .box .content h2 {
   position: absolute;
   top: -10px;
   right: 30px;
   font-size: 8rem;
   color: rgba(255, 255, 255, 0.1);
}

#modalFaq .modal-body .card .box .content h3 {
   font-size: 1.8rem;
   color: #ff6100;
   z-index: 1;
   transition: 0.5s;
   margin-bottom: 15px;
}

#modalFaq .modal-body .card .box .content p {
   font-size: 1rem;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.9);
   z-index: 1;
   transition: 0.5s;
}

#modalFaq .modal-body .card .box .content a {
   position: relative;
   display: inline-block;
   padding: 8px 20px;
   background: black;
   border-radius: 5px;
   text-decoration: none;
   color: white;
   margin-top: 20px;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
   transition: 0.5s;
}

#modalFaq .modal-body .card .box .content a:hover {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
   background: #fff;
   color: #000;
}

/* Cards instructores */

.hero {
   display: inline-block;
   position: relative;
   border-radius: 7em 7em 1em 2em;
   overflow: hidden;
   margin: 30px;
   border-width: 0px 0px 2px 0px;
   border-style: solid;
   border-color: #ff6100;
   width: fit-content;
   padding: 0px;
}

.hero-profile-img {
   width: 200px;
   border-radius: 10rem;
   border-width: 0px 3px 0px 3px;
   border-style: solid;
   border-color: #ff6100;
}

.hero-description-bk {
   background: #051f5ceb;
   border-radius: 20px;
   position: absolute;
   top: 65%;
   left: 0;
   height: 65%;
   width: 108%;
   transform: skew(36deg, 360deg);
}

.hero:hover {

   border-width: 0px;
   
   .hero-profile-img {
      border-width: 3px;
   }

   .hero-description-bk {
      border: 3px solid #ff6100;
   }
}

.hero-description {
   position: absolute;
   color: #fff;
   font-weight: 900;
   left: 0px;
   bottom: 1%;
   width: 100%;
   text-align: start;
   padding: 0px 0.7rem 0px 1em;
   overflow: hidden;
}

.hero-description p {
   padding: 0;
   margin: 0;
}

.hero-description a {
   color: #eee;
   font-size: small;
   font-weight: 100;
}

.swal2-popup {
   background-image: url(../img/cover-pattern.png) !important;
   background-color: #021e47d6 !important;
   background-size: cover !important;
   background-position: center !important;
   background-attachment: fixed !important;
   border-radius: 1em !important;

   max-width: 90% !important;
   width: 55em !important;
}


@media (max-width: 768px) {
   .swal2-popup {
      max-width: 95% !important;
   }
}


#textSemblanza {
   padding-right: 5px;
   padding-bottom: 5px;
   margin: 10px 0;
   overflow: auto;
   float: left;

   text-align: left;
   color: #fff;

   background: #0312385c;
   padding: 10px;
   border-radius: 1em;
   margin: 1em 0em;

   img {
      float: inline-start;
      margin: 1em;
      background: #021338;
   }

   p {
      color: #fff;
      text-align: justify;
   }
}

@media (max-width: 768px) {
   #textSemblanza {

      text-align: center;

      img {
         float: initial;
         margin: 1em;
         background: #021338;
      }

   }
   
}

#cards-prom {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   align-content: center;
   width: 100%;
   overflow: hidden;
}

.prom-card {
   background: #d9d9d9;
   padding: 2px;
   position: relative;
   border-radius: 1em;
   overflow: hidden;
   text-align: center;
   border-width: 2px 0px 2px 0px;
   border-style: solid;
   border-color: #ff6100;
   width: auto;
   max-width: 17em;
   margin: 1em;
}

.prom-card:hover {
   box-shadow: 0px 0px 5px 3px #df6d2d;
}

.prom-card img {
   border-radius: 1em;
   max-width: 100%;
}