* {
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: 'Kronika'; /* Nombre de la fuente */
    src: url('../fonts/KRONIKA_.ttf') format('truetype'), /* Formato TrueType */
         url('../fonts/KRONIKA_.ttf') format('ttf'), /* Formato TTF */
}
:root {
    --color-primario: #149BD7;
    --color-secundario: #1E72B8;
  }
body {
    font-family: 'Kronica', Arial, sans-serif;
    margin: 0;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    overflow-x: hidden; /* Evita el scroll horizontal */
    font: normal 16px sans-serif;
    line-height:24px;
}
header {
    font-family: 'Kronica', Arial, sans-serif;
    width: 100vw;
    height: 100vh;
}
header.home {
    background-image: url(../img/home/Cover-background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.cover-page {
    text-align: center;
}
.cover-page img {
    width: 12%;
    height: auto;
    margin-top: 12%;
    border-radius: 20px;
}
main {
    margin: 0 6%;
}
.margin-right {
    margin-right: 33px;
}
.btnFloats {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}
.btnFloats i {
    display: block;
    width: 40px;
    height: 40px;
    background-color: #f9f9f9;
    color: var(--color-secundario);
    border: 1px solid var(--color-secundario);
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    margin-bottom: 13px;
    cursor: pointer;
}
.tooltipPlaystore {
    display: none;
    position: absolute;
    bottom: 50px;
    right: 20px;
    background-color: #f9f9f9;
    color: var(--color-secundario);
    border: 1px solid var(--color-secundario);
    padding: 5px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s;
}
#btnPlaystore:hover + #tooltipPlayStore {
    display: block;
    opacity: 1;
}
.tooltipAppstore {
    display: none;
    position: absolute;
    bottom: 0px;
    right: 20px;
    background-color: #f9f9f9;
    color: var(--color-secundario);
    border: 1px solid var(--color-secundario);
    padding: 5px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s;
}
#btnAppstore:hover + #tooltipAppStore {
    display: block;
    opacity: 1;
}
/* --------------
---- SLIDER -----
---------------*/
.carousel {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  
  .swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex; /* Cambia display a flex */
    flex-direction: row; /* Cambia flex-direction a row */
  }
  .swiper-wrapper {
    display: flex;
  }
  .swiper-slide {
    width: 300px;
    height: 300px;
    border-radius: 15px;
    display: flex;
    flex-direction: column; /* Cambia flex-direction a column */
    justify-content: center; /* Alinea verticalmente al centro */
    align-items: center; /* Alinea horizontalmente al centro */
  }
  
  .swiper-slide-active {
    filter: blur(0px);
  }
  
  .swiper-pagination-bullet,
  .swiper-pagination-bullet-active {
    background: #fff;
  }
  
  /* Asegúrate de que el resto de tu CSS se mantenga sin cambios. */
  
  .swiper-slide--one {
    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
      url(../img/slider/Task-1.png)
        no-repeat 50% 50% / cover;
  }
  
  .swiper-slide--two {
    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
      url(../img/slider/Task-12.png)
        no-repeat 50% 50% / cover;
  }
  
  .swiper-slide--three {
    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
      url(../img/slider/Task-21.png)
        no-repeat 50% 50% / cover;
  }
  
  .swiper-slide--four {
    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
      url(../img/slider/Task-22.png)
        no-repeat 50% 50% / cover;
  }
  
  .swiper-slide--five {
    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
      url(../img/slider/Task-23.png)
        no-repeat 50% 50% / cover;
  }
  
  .swiper-slide--six {
    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
      url(../img/slider/Task-27.png)
        no-repeat 50% 50% / cover;
  }
  .swiper-3d .swiper-slide-shadow-left,
  .swiper-3d .swiper-slide-shadow-right {
    background-image: none;
  }
/* --------------
---- NAVBAR -----
---------------*/
nav {
    display: flex;
    align-items: center;
    margin: 0 10% 0 10%;
    padding: 40px 0;
    transition: ease-in-out 0.5s;
}
logo-main div img {
    width: 30%;
}
.navLinks {
    transition: ease-in-out 0.5s;
}
ul{
    display: flex;
    gap: 2rem;
}
ul li{
    list-style-type:none;
    font-size: 14px;
    font-family: 'Kronica', Arial, sans-serif;
    font-weight: bold;
    color: var(--color-primario);
}
ul a{
    text-decoration: none;
}
.menu-item {
    white-space: nowrap;
}
.vert-line{
    color: rgb(133, 213, 245);
    border-left: 1.5px solid rgb(39, 147, 167);
}
.language-container {
    position: relative;
    display: inline-block; 
}
.language-container .icon-angle::after {
    content: "\f107"; /* Código Unicode del icono, reemplaza con el icono que desees */
    font-family: "FontAwesome"; /* Cambia la fuente a la que pertenece el icono */
    margin-left: 5px; /* Espacio entre la palabra y el icono */
    font-size: small;
}
.active {
    text-decoration: underline;
    color: var(--color-secundario);
    text-shadow: 2px 2px 4px rgba(72, 178, 202, 0.899);
    /* offsetX offsetY blurRadius color */
}
ul.dropdown {
    display: none;
    position: absolute;
    top: 100%; 
    left: 0;
    background-color: #f5f7f6;
    z-index: 1;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgba(72, 178, 202, 0.899);
    color: var(--color-secundario);
}
ul.dropdown li {
    padding: 10px;
}
ul.dropdown li a {
    text-decoration: none;
    color: var(--color-secundario);
}
#languageSelectSpa:hover + ul.dropdown {
    display: block;
}
#languageSelectEng:hover + ul.dropdown {
    display: block;
}
#menu-spa {
    display: flex;
}
#menu-eng {
    display: none;
}
.hamburguer {
    display: none;
    z-index: 100;
    cursor: pointer;
    transition: color 0.5s ease-in;
}
.hamburguer>i {
    font-size: 25px;
    line-height: 80px;
}
/* --------------
---- FOOTER -----
---------------*/
.footer-tasker {
    background-image: url('../img/footer-bg.png'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Ajusta la imagen para cubrir todo el fondo */
    background-position: center; /* Centra la imagen en el fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    padding:45px 0 10px 0;
    margin: 0;
    width: 100%;
    color: #ffffff;
}
.footer-tasker .footer-container {
  max-width: 100%;
  margin: 0 4%;
  padding: 10px;
}
.footer-tasker .footer-line {
  display: block;
  box-sizing: border-box;
  width: 97%;
  max-width: 100vw;
  margin: auto;
  height: 2px;
  background: transparent;
}
/* FOOTER LEFT */
.footer-tasker .footer-OneLeft{
  display: inline-block;
}
.footer-tasker .footer-OneLeft a:link,
.footer-tasker .footer-OneLeft a:visited,
.footer-tasker .footer-OneLeft a:hover,
.footer-tasker .footer-OneLeft a:active{
  color: #ffffff;
}
.footer-tasker .footer-OneLeft .footer-logo {
  width: 20vw;
  height: auto;
}
.footer-tasker .footer-OneLeft .footer-private{
  margin-top: 47px;
  text-decoration: none;
  font-size: 14px;
}
.footer-tasker p.footer-links {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin: 40px 40px;
  padding: 0;
  transition: ease .25s;
}
.footer-tasker p.footer-links a {
  display: inline-block;
  line-height: 1.8;
  text-decoration: none;
  color: inherit;
  transition: ease .25s;
}
.footer-tasker .footer-links a:before {
  content: " ";
  font-size: 20px;
  left: 0;
  color: #ffffff;
  display: inline-block;
  padding-right: 25px;
}
.footer-tasker .footer-links .link-one:before {
  content: none;
}
/* FOOTER RIGHT */
.footer-tasker .footer-OneRight {
  float: right;
  margin-top: 6px;
  max-width: 40vw;
}
.footer-tasker .footer-OneRight .line-a{
  background-color: transparent;
  line-height: 35px;
  margin: 0 24px;
  text-decoration: none;
}
.footer-tasker .footer-OneRight .line{
  width: 1px;
  height: 60px; /* Altura de la línea separadora */
  background-color: #ffffff;
  margin: 0 32px; /* Espacio entre la línea y los textos */
}
.footer-tasker .footer-OneRight a {
  display: inline-block;
  width:40px;
  height:40px;
  line-height:40px;
  font-size: 20px;
  margin-left:2px;
  margin-right:6px;
  border-radius:100%;
  background-color:#ffffff;
  color:#1F9DD7;
  text-align: center;
  align-items: center;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear;
}
.footer-tasker .footer-OneRight .footer-email{
  background-color: transparent;
  cursor: pointer;
  width: 155px;
  height: auto;
  margin: 33px 43px 33px 0px;
  color: #ffffff;
  text-decoration: none;
}
.footer-tasker .footer-OneRight .footer-language {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  background-color: transparent;
  margin-top: 40px;
  width: 66px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  color: #ffffff;
}
.footer-tasker .footer-OneRight .footer-language option {
  color: #000000;
  padding: 20px;
}
.footer-tasker .footer-OneRight .footer-language:focus {
  outline: none;
}
.footer-tasker .footer-OneRight .language-icon {
  color: #ffffff;
  text-align: center;
  align-items: center;
  display: inline-block;
  cursor: pointer;
}
.footer-tasker .footer-OneRight a:hover {
  color: #ffffff;
}
.footer-tasker .footer-OneRight a.facebook:hover {
  background-color:#3b5998
}
.footer-tasker .footer-OneRight a.twitter:hover {
  background-color:#000000
}
.footer-tasker .footer-OneRight a.youtube:hover {
  background-color:#FF0000
}
.footer-tasker .footer-OneRight a.instagram:hover {
  background-color:#C00C79
}
.footer-tasker .footer-OneRight a:hover{
  transform:scale(1.1); -webkit-transform:scale(1.1);
}
.footer-tasker .footer-OneRight .footer-email:hover{
  transform:none; 
  -webkit-transform:none;
}
.footer-tasker p.footer-links a:hover{
  text-decoration:underline;
}
/* --------------
----- HOME ------
---------------*/
.sectionA {
    background-image: url(../img/home/Main-section-a-background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: auto;
    height: 100vh;
    position: relative; /* Importante para posicionar los elementos internos */
}
.sectionA img {
    width: 52%;
    height: auto;
    position: absolute; /* Permite el posicionamiento absoluto */
    bottom: 32%; /* La imagen se coloca en la parte inferior */
    left: 0; /* La imagen se coloca en el lado izquierdo */
}
.sectionB {
    background-image: url(../img/home/Main-section-b-background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: auto;
    height: 100vh;
    position: relative;
}
.sectionB img {
    width: 32%;
    height: auto;
    position: absolute;
    bottom: 10%;
    right: 17%;
}
.sectionC {
    background-image: url(../img/home/Main-section-c-background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: auto;
    height: 100vh;
    position: relative;
}
.sectionC img {
    width: 50%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 10%;
}
.sectionD {
    background-image: url(../img/home/Main-section-d-background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: auto;
    height: 100vh;
    position: relative;
}
.sectionD img {
    width: 40%;
    height: auto;
    position: absolute;
    bottom: 10%;
    right: 10%;
}
/* --------------
--- ABOUT US ----
---------------*/
main h2 {
    font-size: 3rem;
    color: var(--color-primario);
    margin: 4% 0;
    line-height: 1;
}
main p {
    font-size: 1.4rem;
    color: var(--color-secundario);
    margin-bottom: 7px;
}
.cover-about {
    text-align: center;
    height: 56vh;
    width: auto;
    max-width: 100vw;
    background-image: url(../img/about/Cover-background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.cover-about img {
    width: 29%;
    height: auto;
    margin-top: 6%;
}
.cover-about h1 {
    color: var(--color-secundario);
    font-size: 1.4rem;
    margin: 2%;
    line-height: 1;
}
.button-container {
    display: flex; /* Utiliza un contenedor flexible para alinear los botones horizontalmente */
    justify-content: center; /* Coloca los elementos al inicio y al final del contenedor */
    gap: 20px;
    max-width: 100vw;
    margin-top: 40px;
}
.button-container a {
    text-decoration: none; /* Quita el subrayado por defecto en los enlaces */
    margin: 5px; /* Añade espacio entre los botones si lo deseas */
}
.button-container img {
    width: 160px; /* Ajusta el ancho de las imágenes según tus necesidades */
    height: 50px; /* Mantiene la proporción de aspecto */
    display: block; /* Quita cualquier espacio en línea debajo de las imágenes */
}
.separatorAbout {
    display: block;
    background-color: transparent;
    height: 10vh;
    width: auto;
}
.sectAbout {
    width: auto;
    height: auto;
    margin: 20% 6%;
}
.sectAbout .imgeSectAboutA {
    text-align: center;
}
.sectAbout .imgeSectAboutA img {
    width: 90%;
    height: auto;
    margin: 4% 0;
}
.sectAbout p#p3SectAboutA {
    color: var(--color-primario);
    font-size: 1.2rem;
}
.sectAbout .halfAboutB {
    display: flex; 
    justify-content: center;
    gap: 20px;
    max-width: 100vw;
    margin-top: 40px;
}
.halfAboutB .imageAboutB img{
    width: 100%;
    height: auto;
}
.halfAboutB .textAboutB p{
    margin: 10% 0;
    line-height: 1.2;
}
.halfAboutB .textAboutB p#p3SectAboutB{
    color: var(--color-primario);
    font-size: 1.2rem;
}
.sectAbout p#p4SectAboutB {
    margin: 4% 0;
    line-height: 1.2;
}
.sectAboutC {
    width: auto;
    height: auto;
    margin: 20% 6% 0 6%;
    display: grid;
    grid-template-columns: 2fr 1fr; /* Divide el contenedor en dos columnas iguales */
    grid-gap: 20px; /* Agrega espacio entre las columnas */
    align-items:start; /* Centra verticalmente los elementos */
    max-height: 100%;
    max-width: 100%;;
}
.sectAboutC .imageAboutC {
    width: auto;
    height: auto;
}
.sectAboutC .imageAboutC img{
    width: auto;
    max-width: 33vw; 
    height: 69vh;
    margin-left: 10%;
    display: flex; /* Usa flex para que la imagen ocupe toda la altura */
    align-items: flex-end; /* Alinea la imagen en la parte inferior */  
}
.sectAboutC .textAboutC {
    text-align: left;
    font-size: 1.4rem;
    color: var(--color-primario);
}
.sectAboutC .textAboutC h2 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1;
}
.sectAboutC .textAboutC h2#h2bSectAboutC {
    font-size: 2.4rem;
    font-weight: normal;
    color: var(--color-secundario);
    margin-left: 30%;
}
.sectAboutC .textAboutC ul {
    display: block;
    margin: 10%;
    padding-left: 20px; /* Espacio a la izquierda para las viñetas */
}
.sectAboutC .textAboutC li#li1SectAboutC {
    font-size: 20px; /* Tamaño de fuente más grande */
    color: var(--color-primario);
    margin: 6%;
}
.sectAboutC .textAboutC li#li2SectAboutC {
    font-size: 20px; /* Tamaño de fuente más grande */
    color: var(--color-secundario);
    margin: 6%;
}
/* --------------
--- SERVICES ----
---------------*/
.cover-services {
    display: block;
    height: 100%;
    width: auto;
    background-image: url(../img/services/cover-services-main.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
main img {
    width: 100%;
    height: auto;
}
main h2 {
    color: var(--color-primario);
    font-size: 2rem;
    margin-top: 10%;
}
main ul {
    display: block;
    list-style-type: disc;
    margin: 10% 0;
    padding-left: 20px 0; /* Espacio a la izquierda para las viñetas */
}
main li {
    color: var(--color-secundario);
    font-size: 1rem; /* Tamaño de fuente más grande */
    margin: 6% 0;
}
.sectServices {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide en dos columnas de igual ancho */
    grid-row: 1fr;
    gap: 10px;
    margin: 20% 10%;
}
.sectServices .textServiceLeft {
    grid-column: 1;
    grid-row: 1;
}
.sectServices .imageServiceLeft { 
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.sectServices .textServiceRight {
    grid-column: 2;
    text-align: right;
}
.sectServices .imageServiceRight { 
    grid-column: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
/* --------------
--- REQUESTER ---
---------------*/
header.applicants {
    margin-bottom: 10%;
}
main.applicants {
    margin: 0;
}
.cover-applicants {
    position: relative;
    height: 90vh;
    width: auto;
    text-align: center;
    align-items: center;
}
.cover-applicants img {
    width: 54%;
    height: auto;
}
.button-container {
    display: flex; /* Utiliza un contenedor flexible para alinear los botones horizontalmente */
    justify-content: center; /* Coloca los elementos al inicio y al final del contenedor */
    gap: 20px;
    padding-left: 6%;
}
.button-container a {
    text-decoration: none; /* Quita el subrayado por defecto en los enlaces */
    margin: 5px; /* Añade espacio entre los botones si lo deseas */
}
.button-container img {
    width: 170px; /* Ajusta el ancho de las imágenes según tus necesidades */
    height: 55px; /* Mantiene la proporción de aspecto */
    display: block; /* Quita cualquier espacio en línea debajo de las imágenes */
}
.SectApplicantsA #h2aSectApplicantsA {
    margin-left: 14%;
    color: var(--color-primario);
    font-size: 2.4rem;
}
.SectApplicantsA .halfSectionA {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide el contenedor en dos columnas iguales */
    grid-gap: 20px; /* Agrega espacio entre las columnas */
    align-items:start; /* Centra verticalmente los elementos */
    max-height: 100%;
    max-width: 100%;;
}
.SectApplicantsA .halfSectionA .imageApplicantsA img{
    width: 90%; 
    height: auto;
    margin-left: 20%;
    display: flex; /* Usa flex para que la imagen ocupe toda la altura */
    align-items: flex-end; /* Alinea la imagen en la parte inferior */  
}
.SectApplicantsA .halfSectionA .textApplicantsA {
    text-align: left;
    font-size: 1.4rem;
    color: var(--color-primario);
    margin-right: 14%;
}
.SectApplicantsA .halfSectionA .textApplicantsA h2{
    color: var(--color-secundario);
    font-size: 2.4rem;
    margin: 6% 0;
    margin-right: 14%;
}
/* --------------
--- PROVIDERS ---
---------------*/
header.provider {
    margin-bottom: 10%;
}
.cover-providers {
    position: relative;
    height: 88vh;
    width: auto;
}
.cover-providers img.imgCoverProvider {
    width: 50%;
    height: auto;
    margin-left: 7%;
}
.overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0); /* Fondo oscuro transparente */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.overlay h1#h1aCoverProviders {
    font-size: 3rem;
    color: var(--color-secundario);
    margin: 0 0 4% 14%;
}
.overlay h1#h1bCoverProviders {
    margin: 0 0 4% 40%;
    font-size: 4rem;
    color: var(--color-secundario);
}
.overlay span {
    font-size: 5.5rem;
    color: var(--color-primario);
    margin: 0;
}
.cover-providers .buttons {
    display: flex;
    gap: 10px;
    margin: 6% 0 0 44%;
}
.cover-providers .download-button img {
    margin: 5px; /* Espacio entre los botones */
    width: 200px;
    height: 66px;
}
.sectProviderA {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide en dos columnas iguales */
    gap: 20px; /* Espacio entre las columnas */
    align-items: center; /* Centra verticalmente */
    height: 100vh;
    width: auto;
}
.textProviderA {
    padding: 0 25%;
    margin-bottom: 20%;
    color: var(--color-primario);
    font-size: 1.4rem;
}
.textProviderA h2 {
    font-size: 4rem;
    margin-bottom: 10px;
    line-height: 1;
}
.textProviderA span {
    font-size: 6rem;
    margin-bottom: 10px;
    color: var(--color-secundario);
}
.imagesProviderA img {
    width: 111%;
    height: auto;
    margin: 10px 0;
}