/*
Theme Name: SoulyTalent v1
Author: NOVULA
Description: Plantilla desarollada por NOVULA para SoulyTalent.
Version: 0.1
License: GNU General Public License v2 or later
Text Domain: SoulyTalent.com



*/


@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100..900;1,100..900&family=Anek+Latin:wght@100..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* ==============================================================================================
   🎨 Variables Globales
   ============================================================================================== */
:root {
  --font-text-base: 'Open Sans', sans-serif;
  --font-titles-base: 'Montserrat', sans-serif;
  --font-logo-base: 'Advent Pro', sans-serif;        
  --font-size-base: 1rem; /* 16px */
  --font-weight-base: 500;
  --line-height-base: 1.5;
  --color-primary: #1b7b97;
  --color-accent: #87679d;
  --color-complement:#cbdfc8;
  --color-complement-g09:#3f3f3e; /*90%*/
  --color-complement-g08:#565555; /*80%*/
  --color-complement-g07:#6e6e6d; /*70%*/
  --color-complement-g06:#868685; /*60%*/
  --color-complement-g05:#9c9b9b; /*50%*/
  --color-complement-g04:#b1b1b1; /*40%*/
  --color-complement-g03:#c5c5c4; /*30%*/
  --color-complement-g02:#d9d9d8; /*20%*/
  --color-complement-g01:#ebebeb; /*10%*/

  --color-text-01: #1e1e1e;
  --color-text-02: #232323;
  --color-text-03: #13586c;
  --color-text-04: #404a60;
  --color-text-05: #7b8095;
  --color-text-06: #9f9f9f;
  --color-text-white: #ffffff;
        
  --color-bg-01: #ffffff;
  --color-bg-02: #f6f8fd;

  --primary: #1e3a8a;
  --hover: #93c5fd;
  --text: #fff;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
}
  /* ::-webkit-scrollbar{width: 15px;border: 5px solid transparent;}
  ::-webkit-scrollbar-thumb{background-color: var(--color-accent);border-radius: 10px;} */

/* ==============================================================================================
   🧹 Reset Moderno
   ============================================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
strong{font-weight: inherit;}
/* body, html {height: 100%;overflow: hidden;} */
html {scroll-behavior: smooth;font-size: clamp(14px, 1.5vw, 18px);}


body {
  font-family: var(--font-text-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-base);
  color: var(--color-text-02);
  background-color: var(--color-bg);
}
.open-sans {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}
.advent-pro {
  font-family: "Advent Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}
.anek-latin {
  font-family: "Anek Latin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}
.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
h1,h2,h3,h4,h5,h6{font-family: var(--font-titles-base);color: var(--color-text-02);}
h1 {font-weight: 700;font-size: 40px;line-height: 45px;}
h2 {font-weight: 700;font-size: 33px;line-height: 43px;}
h3 {font-weight: 700;font-size: 24px;line-height: 34px;}
h4 {font-weight: 700;font-size: 20px;line-height: 30px;}
h5 {font-weight: 700;font-size: 18px;line-height: 28px;}
h6 {font-weight: 700;font-size: 16px;line-height: 21px;}
p,a{color: var(--color-text-02);text-decoration: none;}
a:hover{color: var(--color-accent);}


.elmt-tepaim-01{padding: 2rem 0;}
.big-container {
  background-color: var(--color-primary);
    /*background-image: url(images/pattern-03-sm.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
}
.big-container02{
  background-image: url(images/pattern-03.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* =========================================== NAVBAR ================================================================ */
header {
  background-color: var(--color-bg-02);
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.nav-header .row{width: 100%;}
.navbar {}
.logo img {height: 60px;}
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
}
.hamburger span {height: 3px;background: var(--color-primary);border-radius: 2px;transition: all 0.3s ease;}
.hamburger.open span:nth-child(1) {transform: rotate(45deg) translateX(6px) translateY(6px);}
.hamburger.open span:nth-child(2) {opacity: 0;}
.hamburger.open span:nth-child(3) {transform: rotate(-45deg) translateX(6px) translateY(-6px);}
.menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  transition: none;
  animation: none;
  position: static;
  padding: 0;
  margin: 0;
}
.menu-btn {display: none;width: 50px;}
.menu li {list-style: none;}
.menu li a {
  color: var(--color-text-03);
  position: relative;
  font-weight: bold;
  font-size: 1.1rem;
  text-decoration: none;
  padding: .5rem;
  transition: all .5s;
  animation-duration: 0.9s;
}
.menu li a:hover {color: var(--color-accent);letter-spacing: calc(var(--spacing-sm) * .2);}
.menu li a::before,
.menu li a::after {
  content: "";
  position: absolute;
  display: block;
  border: 0 solid transparent;
  width: 0%;
  height: 0%;
  transition: all 0.5s ease;
}
.menu li a::after {
  top: 0;
  left: 0;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
}
.menu li a::before {
  right: 0;
  bottom: 0;
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
}
.menu li a:hover::before,
.menu li a:hover::after {
  width: 100%;
  height: 100%;
  border-color: var(--color-accent);
  border-radius: 10px;
}
.menu li:hover a{letter-spacing: calc(var(--spacing-sm) * .2);}
.nav-link.active {
  font-weight: bold;
  color: var(--color-accent);
  transition: all .1s;
}
.nav-btn{display: none;}

/* ================================================================================================================================ */
/* =========================================== FOOTER ================================================================ */

footer{background-color: var(--color-bg-02);}
footer .logo-conta img{max-width: 200px;}
.title-footer-conta{}
.title-footer-wrapp{display: block;vertical-align: middle;}
.title-footer-conta h5{font-weight: 600;}
.title-footer-conta::after{display: block;
    content: "";
    position: relative;
    width: 30px;
    height: 4px;
    background-color: var(--color-accent);
    transition: all .5s;}
footer .info-conta:hover .title-footer-conta::after {width: 110px;}

.info-conta ul{padding-top: 1rem;list-style: none;}
.info-conta li{margin: .5rem 0;}
.info-conta span{margin-right: .5rem;font-weight: 700;color: var(--color-primary);transition: all .5s;}
.bounce {display: inline-block;transition: all .5s;}
.info-conta a{transition: all .5s ease;}
.info-conta a:hover{font-weight: 700;}
.info-conta a:hover span{animation: bounce 1s infinite ease;}
.info-conta i{color: var(--color-primary);transition: all .5s;}
.info-conta a:hover i{font-size: 1.1rem;}

/* ================================================================================================================================ */
/* =========================================== LOADER ================================================================ */

#loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: var(--color-complement);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1050;
      flex-direction: column;
      transition: opacity 1s ease, visibility 1s ease;
}
.progress-bar-striped {background-image: none;}
#loader.fade-out {opacity: 0;visibility: hidden;}
#loader.none{display: none;}
#loader .progress{height: 2rem;border-radius: 2rem;position: relative;overflow: hidden;transition: all 0.5s;will-change: transform;box-shadow: 0 0 5px var(--color-complement);}
#loader p, #loader h4{color: var(--color-text-white);margin-top: 1rem;}
.text-primary {color: var(--color-primary) !important;}
.spinner-border {--bs-spinner-animation-speed: 1s;border: .5rem solid currentcolor;border-right-color: transparent;}
.bg-primary {background-color: var(--color-accent) !important;}
.logo-wrapper {position: relative;width: 100%;height: 180px;padding-top: 2rem;margin-bottom: 2rem;}
.logo-part {position: absolute;width: 100%;height: 100%;opacity: 0;transition: transform .5s ease, opacity 1s ease;}
.left { transform: translate(-100px,40px); }
.bottom { transform: translate(100px,60px); }
.top { transform: translate(45px,-50px); }
.left.final{ transform: translate(-80px, 40px); }
.bottom.final{ transform: translate(80px, 60px); }
.top.final{ transform: translate(45px, 0px); }
.logo-wrapper img{max-width: 150px;}
.logo-wrapper div:nth-child(1) img{width: 150px;}
.logo-wrapper div:nth-child(2) img{width: 150px;}
.logo-wrapper div:nth-child(3) img{width: 50px;}


/* ==============================================================================================
   📐 MAINTENANCE
   ============================================================================================== */
#maintenance{background-color: #f4f7fb;}
.logo-conta{padding: 2rem;}
.logo-img{max-width: 200px;}
.main-wrapper{overflow: hidden;
    width: 100%;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: "Roboto", sans-serif;
    position: relative;
}
.shape {position: absolute;z-index: -1;max-width: 35px;}
.shape-1 {left: 0;right: 0;margin: auto;top: 120px;}
.shape-2 {right: 380px; top: 95px;}
.shape-3 {right: 88px;top: 230px;}
.shape-4 {right: 295px;top: 550px;    max-width: 70px;}
.shape-5 {right: 48px;bottom: 30px;max-width: 80px;}
.shape-6 {right: 272px;bottom: -20px;}
section.maintenance {padding: 150px 0;text-align: center;}
section.maintenance .tm-big-icon{font-size: 104px;color: #1b7b97;}
.page-header {padding-bottom: 9px;margin: 40px 0 20px;border-bottom: none;margin-bottom: 0;}
section.maintenance h1 {font-size: 80px;line-height: 100%;color: #87679d;}
section.maintenance .page-content p {font-size: 18px;margin-bottom: 30px;}
section.maintenance .page-content {padding: 2rem;}
.aparecer {opacity: 0;animation: aparecerAnimacion 2s ease-out forwards;}
.retraso-01 {animation-duration: 2s;animation-delay: 1s;}
.retraso-02 {animation-duration: 2s;animation-delay: 1.5s;}
.figuras-conta{visibility: hidden;}
/* ==============================================================================================
   🧩 Componentes
   ============================================================================================== */
.btn-conta{padding: 1rem 0;}
button {
  border-radius: 4px;
  background-color: var(--color-accent);
  border: none;
  color: #fff;
  text-align: center;
  font-size: calc(var(--font-size-base) * 1.25);
  font-family: var(--font-primary-base);
  font-weight: 600;
  padding: 16px;
  width: 100%;
  transition: all 0.5s;
  cursor: pointer;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0,.7);
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
button:after {
  content: '»';
  position: absolute;
  opacity: 0;  
  top: 14px;
  right: -20px;
  transition: 0.5s;
}
button:hover{
  padding-right: 24px;
  padding-left:8px;
  background-color: var(--color-primary);
}
button:hover:after {opacity: 1;right: 10px;}
button a {color: var(--color-text-white)}
button:hover a {color: var(--color-text-white)}

/* ================================================================================================================================ */
/* =========================================== TITLE ================================================================ */

.title-f-conta{}
.title-f-conte{margin-bottom: 1rem;display: table;width: 100%;position: relative;background: none;box-shadow: none;z-index: 10;}
.title-f-wrapp{display: block;vertical-align: middle;}

.title-f-conte h4{margin-bottom: 5px;margin-top: 5px;font-weight: 400;text-transform: uppercase;font-size: 15px;line-height: 24px;color: var(--color-accent);}
.title-f-conte h2{letter-spacing: -2.5px;font-weight: 700;font-size: calc(var(--font-size-base) * 3);line-height: calc(var(--line-height-base) * .6);margin-bottom: 20px;}
.title-f-conte h3 {
    letter-spacing: -2.5px;
    font-weight: 700;
    font-size: calc(var(--font-size-base) * 2.5);
    line-height: calc(var(--line-height-base) * .6);
    margin-bottom: 20px;}
.title-f-conte h2 > span {transition: transform .5s;display: inline-block;}
.title-f-conte h2:hover > span{transform: scale(1.5) translate(4px, -6px);}

.title-f-conte:after {
    display: block;
    content: "";
    position: absolute;
    width: 30px;
    height: 4px;
    background-color: var(--color-accent);
    transition: all .5s;
}
.title-f-conta:hover .title-f-conte::after{width: 100px;}

.title-c-01{color: var(--color-primary);}
.title-c-02{color: var(--color-text-02);}
.title-c-03{color: var(--color-text-white);}

.bar-c01::after{background-color: var(--color-primary);}
.bar-c02::after{background-color: var(--color-accent);}
.bar-c03::after{background-color: var(--color-complement);}
.bar-p-center::after{left: 50%;}
.bar-p-right::after{right: 0;}
.title-f-conta:hover .bar-p-center::after{left: 41%;}
.span-color01 span{color:var(--color-primary);}
.span-color02 span{color:var(--color-accent);}
.span-color03 span{color:var(--color-complement);}

.animate-charcter
{
  background: #1B7B97;
background: -webkit-linear-gradient(90deg, rgba(27, 123, 151, 1) 20%, rgba(203, 223, 200, 1) 50%, rgba(27, 123, 151, 1) 80%);
background: -moz-linear-gradient(90deg, rgba(27, 123, 151, 1) 20%, rgba(203, 223, 200, 1) 50%, rgba(27, 123, 151, 1) 80%);
background: linear-gradient(90deg, rgba(27, 123, 151, 1) 20%, rgba(203, 223, 200, 1) 50%, rgba(27, 123, 151, 1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1B7B97", endColorstr="#1B7B97", GradientType=1);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
}

/* ================================================================================================================================ */
/* =========================================== ABOUT ================================================================ */

.img-conta img{width: 100%;}
.pricing-cards-conte{transition: all 0.3s ease;padding: 1rem;box-shadow: 0 4px 10px 0 #0000001A;border: none;}/** -webkit-box-shadow: 0 10px 50px rgb(27 123 151 / 30%);box-shadow: 0 10px 50px rgb(27 123 151 / 30%); */
.bg-eff-conta{border: none;position: relative;height: 100%;background: transparent;overflow: hidden;}
.pricing-img{}
.pricing-img img{width: 100%; max-width: 70px;}
.pricing-header{}
.pricing-header h3{margin-top: 1rem;transition: all 0.3s ease;}
.pricing-body{margin: 1rem;}/** border-bottom: 2px solid rgba(113, 132, 148, 0.2);border-top: 2px solid rgba(113, 132, 148, 0.2);border-color:  var(--color-accent); */
.pricing-body p{padding: 1rem 0;margin: 0;transition: all 0.3s ease;}
.pricing-body li::marker{color: var(--color-accent);}
.pricing-body li:last-child{margin-bottom: 1rem;}
.title-effect-01 header{box-shadow: unset;background-color: unset;}
.card-bg-effect{position: absolute;bottom: 0;left: 0;z-index: 0;transition: all 0.3s ease;}
.pricing-cards-conte:hover{background-color: var(--color-complement-g01);}/*transform: translate3d(0, -10px, 0);*/
.pricing-cards-conte:hover .card-bg-effect{scale: 1.2;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;}
.pricing-body::after,.pricing-body::before{
            display: block;
    content: "";
    position: relative;
    width: 30px;
    height: 4px;
    background-color: var(--color-accent);
    transition: all .5s;
    margin: auto;
        }
/* .pricing-cards-conte:hover h3,.pricing-cards-conte:hover p{color: var(--color-text-white);} */
.pricing-cards-conte:hover .pricing-body::after,.pricing-cards-conte:hover .pricing-body::before{width: 70%;}
/* .pricing-cards-conte:hover .pricing-body::after,.pricing-cards-conte:hover .pricing-body::before{background-color: var(--color-complement);} */

.pricing-body h4 {color: var(--color-accent);transition: all 0.3s ease;}
/* .pricing-cards-conte:hover h4{color: var(--color-text-white);} */
.values-body li{margin-bottom: 2rem;}            
.values-body p{padding: 0;}

#whoWeAre .img-conta img {padding: 2rem;}

/* ================================================================================================================================ */
/* =========================================== WHY CHOOSE ================================================================ */
#whyChoose .cards-conta {padding: 0;}
.cards-conte{}
.cards-conte p{font-weight: 400;color: var(--color-text-white);}
.card-01 {
  overflow: hidden;
  transition: transform 0.3s ease;
  /* From https://css.glass */
border-radius: 16px;
background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.2)
  );
  backdrop-filter: blur(4px);
  /* box-shadow: 0 0 10px #000; */
  border-top: 2px solid rgba(255, 255, 255, 0.25);
  border-left: 2px solid rgba(255, 255, 255, 0.2);
padding: 1rem;
display: inline-flex;
    flex-direction: column;
    align-items: center;
        width: 100%;
        height: 100%;
    justify-content: flex-start;
}
.card-01 img{max-width: 200px;}
.card-01 p{margin-top: 1rem;}
.card-01 .img-conta{height: auto;background-color: unset;max-height: 200px;}
.card-text ul{}
.card-text li{color: var(--color-text-white);}
.item-conta .row{justify-content: center;}

/* ================================================================================================================================ */
/* =========================================== SERVICES ================================================================ */

.pricing-body ul{list-style: none;margin: 0;padding-top: 1rem;text-align: left;transition: all 0.3s ease;}
.pricing-body li{list-style: disc;}
#servicePricing .col-12 > .row{padding: 1rem 0;}
#servicePricing .col-12 .p-4{padding: 1rem 0 !important;}
/* .pricing-cards-conte:hover li{color: var(--color-text-white);} */
/* .pricing-body li{padding-left: 25px;margin-bottom: 1rem;position: relative;
    display: inline-block;
    color: var(--color-text-01);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;}
.pricing-body li:hover{padding-left: 50px;}
.pricing-body li:before{
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    background-color: var(--color-primary);
    content: '';
    width: 20px;
    height: 3px;
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.pricing-cards-conte:hover li::before{background-color: var(--color-complement);}
.pricing-body li:hover::before{width: 35px;} */

/* ================================================================================================================================ */
/* =========================================== HOW IT WORKS ================================================================ */

.circular-progress {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.circular-progress svg {
  width: 100%;
  height: auto;
  display: block;
}
.circular-progress img {
  padding: 1rem;
  width: 100%;
  height: auto;
  max-width: 350px;
  max-height: 350px;
  /* border-radius: 50%; */
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.5s, transform 0.5s;
  opacity: 1;
}

.circular-progress img.fade-out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}

.circular-progress img.fade-in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.circular-progress::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  background-color: white;
  border-radius: 50%;
  z-index: 1;
  top: 10%;
  left: 10%;
}
.circular-progress .progress{stroke: var(--color-accent);stroke-width: 2;cx: 75;cy: 75;stroke-dasharray: 415;r: 65;}
.progress-bg{stroke-width: 5;}
.circular-progress .progress {
  transition: all 3s ease;
}
.circular-progress .progress.visible {
  opacity: 1;
  transition: all 3s ease;
}
.progress-circle-wrapper {
  position: relative;
  display: inline-block;
}


.progress-digit {
    font-size: 10rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-accent);
    font-weight: bold;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.3s;
    opacity: 1;
    z-index: 10;
}
.progress-digit.fade-in { opacity: 1; }
.progress-digit.fade-out { opacity: 0; }


.accordion-item{margin: 1rem 0;border: none;}
.accordion-button {transition: all 0.5s ease;border-radius: 1rem;padding: 1rem;display: inline-flex;justify-content: space-between;}
.accordion-button i{opacity: 0;transition: all 0.5s ease;font-size: 1.5rem;}
.accordion-button:hover i{opacity: 1;}
.accordion-button:hover{padding: 1rem;color: var(--color-text-white);}
.accordion-button::after {display: none;transition: all 0.5s ease;top: auto;}
.accordion-button:not(.collapsed) {color: var(--color-text-white);background-color: var(--color-accent);}
.accordion-item:first-of-type>.accordion-header .accordion-button {border-top-left-radius: 1rem;border-top-right-radius: 1rem;}
.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {border-bottom-right-radius: 1rem;border-bottom-left-radius: 1rem;}
.accordion-item:last-of-type>.accordion-collapse {border-bottom-right-radius: 1rem;border-bottom-left-radius: 1rem;}
.accordion-collapse{background-color: var(--color-complement);box-shadow: 0 4px 10px 0 #0000001A;border-radius: 1rem;margin-top: 1rem;}
.accordion-body p{color: var(--color-accent);}

.collapsed .bi-dash{display: none;opacity: 0;}
.collapsed .bi-plus{display: block;opacity: 1;}
.accordion-button:not(.collapsed) .bi-dash{transition: all 0.5s ease;display: block;opacity: 1;}
.accordion-button:not(.collapsed) .bi-plus{transition: all 0.5s ease;display: none;opacity: 0;}

.circle-conte {
    width: 89.5%;
    height: 89.5%;
    padding: 0;
    border-radius: 50%;
    list-style: none;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10;
}
.circle-conte > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -10px;
}
.circle-conte li span {
    display: block;
    max-width: 100%;
    border-radius: 50%;
    -webkit-transition: .15s;
    transition: .15s;
    width: 30px;
    height: 30px;
    background-color: #CBD1D6;
    -webkit-transition: all 0.6s cubic-bezier(0.95, -1.68, 0.01, 2.88);
    transition: all 0.6s cubic-bezier(0.95, -1.68, 0.01, 2.88);
}
.circle-conte li.circle-active span {
    background-color: var(--color-primary);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
.circle-conte li span {
  transition: background 0.4s, transform 0.4s, box-shadow 0.4s;
  background: #CBD1D6;
  box-shadow: none;
}
.circle-conte li.active-step span {
  background: var(--color-complement);
  transform: scale(1.2);
  /* box-shadow: 0 0 12px 2px var(--color-primary); */
}
.circle-conte li.passed-step span {
  background: var(--color-accent);
  transform: scale(1.15);
  /* box-shadow: 0 0 6px 1px var(--color-complement); */
}

.circle-conte li {
  position: absolute;
  left: 50%;
  top: 50%;
  /* El radio es el 45% del contenedor, puedes ajustar */
  --radius: 910%;
  transform: rotate(var(--i)) translateY(calc(-1 * var(--radius)));
  /* Centra el span */
  transform-origin: center center;
  margin: -14px;
}

.circle-conte li span {
  display: block;
  background: #CBD1D6;
  border-radius: 50%;
  transition: all 0.3s;
}

/* ================================================================================================================================ */
/* =========================================== CONTACT ================================================================ */

input {outline: none;border: none;}
textarea {outline: none;border: none;}
textarea:focus, input:focus {border-color: transparent;}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }
textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }
input::-webkit-input-placeholder { color: #999999; }
input:-moz-placeholder { color: #999999; }
input::-moz-placeholder { color: #999999; }
input:-ms-input-placeholder { color: #999999; }
textarea::-webkit-input-placeholder { color: #999999; }
textarea:-moz-placeholder { color: #999999; }
textarea::-moz-placeholder { color: #999999; }
textarea:-ms-input-placeholder { color: #999999; }
.map-conta{position:relative;}
.map-conta img{transition: all .5s ease;filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}
.map-conta:hover img{filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.8));}
        .map-dots-conte {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* para que solo los iconos sean interactivos */
}
.map-text i{color: var(--color-accent);}
.map-dot {
    position: absolute;
    top: var(--top);
    left: var(--left);
    font-size: 2rem;
    color: var(--color-complement);
    transform: translate(-50%, -100%);
    transition: color 0.2s, transform 0.2s;
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 2px 6px #0002);
}
.map-dot::before{
  content: url(https://soulytalent.com/images/contact_map-dot-person.svg)!important;
  width: 2rem;
}
.map-dot:hover {
    color: var(--color-accent);
    transform: translate(-50%, -110%) scale(1.2);
    filter: drop-shadow(0 5px 5px var(--color-complement));
}

.sib-form{margin: 1rem 0;}
.sib-form-message-panel {
  margin: 0 0 1.25rem 0;
  width: 100%;
  padding: 0.4375rem;
  border: 1px solid;
  display: none;
}
.sib-form-message-panel--active {
  display: inline-block;
}
.sib-form-message-panel__text {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.5rem;
}
.sib-form-message-panel__text .sib-icon {
  contain: strict;
  display: inline-block;
  fill: currentColor;
}
.sib-form-message-panel__text .sib-notification__icon {
  height: 1.5em;
  width: 1.5em;
  flex-shrink: 0;
  margin-right: calc(1rem - 1px);
}
.sib-loader {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
#error-message{font-size:16px; text-align:left; font-family:Helvetica, sans-serif; color:#661d1d; background-color:#ffeded; border-radius:3px; border-color:#ff4949;max-width:100%;}
#success-message{font-size:16px; text-align:left; font-family:Helvetica, sans-serif; color:#085229; background-color:#e7faf0; border-radius:3px; border-color:#13ce66;max-width:100%;}
.entry__error {
  display: none;
  margin-top: 6px;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0);
}
.sib-form .entry__error,
.sib-form .entry__label,
.sib-form .entry__specification,
.sib-form .form__error {max-width: 40em;}
.sib-form .entry__error,
.sib-form .entry__specification,
.sib-form .form__error {display: block;}
.sib-form .entry__choice + .entry__error,
.sib-form .entry__choice + .entry__specification,
.sib-form .entry__error + .entry__error,
.sib-form .entry__error + .entry__specification,
.sib-form .entry__specification + .entry__error,
.sib-form .entry__specification + .entry__specification {
  margin-top: 0.5rem;
}
.sib-form .entry__label + .entry__specification {
  margin-top: 4px;
}
.sib-form .entry__error {
  display: none;
  color: #ff4949;
  font-size: 0.87055056rem;
  line-height: 1rem;
}
.entry__error{
    font-size: 16px;
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: rgb(102, 29, 29);
    background-color: rgb(255, 237, 237);
    border-radius: 3px;
    border-color: rgb(255, 73, 73);
    display: block;
    padding: .5rem;
}
.progress-indicator {background: rgba(0, 0, 0, 0);}
.sib-hide-loader-icon {display: none;}
.sib-form-block__button {
  display: inline-block;
  padding: 8px 18px;
  border: none;
  overflow-wrap: break-word;
  max-width: 100%;
  cursor: pointer;
}
.sib-form-block__button-disabled {opacity: 0.5;}
.sib-form-block__button-with-loader {min-height: 40px;line-height: 23px;}
.sib-form .progress-indicator {
  -webkit-align-items: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  display: -webkit-flex;
  display: flex;
  height: 100%;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
}
.sib-form .progress-indicator .progress-indicator__icon {
  fill: #0092ff;
  height: 2rem;
  width: 2rem;
}
.sib-form .progress-indicator_small .progress-indicator__icon {
  height: 1rem;
  width: 1rem;
}
.sib-form .progress-indicator__icon {
  -webkit-animation: indicator-spin 1.3s cubic-bezier(0.46, 0.35, 0.39, 0.85)
    infinite;
  animation: indicator-spin 1.3s cubic-bezier(0.46, 0.35, 0.39, 0.85) infinite;
}
.input--hidden {display: none !important;}
.form__entry textarea{width: 100%;}


.wrapp-input100 {
    position: relative;
    width: 100%;
  z-index: 1;
  margin-bottom: 10px;
}

.input100 {
    color: #666666;
    display: block;
    width: 100%;
    background: #ddd;
    height: 50px;
    border-radius: 15px;
    padding: 0 30px 0 48px;
    /* border: 2px solid #e6e6e6; */
    transition: all .3s ease;
    box-shadow: none;
}
.input100:focus {background: var(--color-complement);}
.symbol-input100 {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #3E4857;
    font-size: 1.2em;
    pointer-events: none;
    transition: color 0.3s;
}
.input100:focus ~ .symbol-input100 {color: var(--color-accent);}
.symbol-alig01{top: 13%;}
.entry__field textarea{padding: 8px 30px 0px 48px;}
.focus-input100 {
  display: block;
  position: absolute;
  border-radius: 15px;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 0px 0px;
  color: var(--color-accent);
}
.input100:focus + .focus-input100 {
  -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
  animation: anim-shadow 0.5s ease-in-out forwards;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  margin: 0;
}
input[type="checkbox"]:focus {outline: 0;}
.cbx {
  position: relative;
  width: 24px;
  height: 24px;
}
.cbx input {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-primary);;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.cbx input:hover {
  border-color: var(--color-accent);
  background-color: var(--color-complement);
}
.cbx input:hover i{color: red;}
.cbx label {
  width: 24px;
  height: 24px;
  background: none;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: trasnlate3d(0, 0, 0);
  pointer-events: none;
}

.cbx svg {
  position: absolute;
  top: 5px;
  left: 4px;
  z-index: 1;
  pointer-events: none;
}
.cbx svg path {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 19;
  stroke-dashoffset: 19;
  transition: all 0.4s ease;
}
.cbx input:checked + label {animation: splash 0.6s ease forwards;}
.cbx input:checked + label + svg path {stroke-dashoffset: 0;}
.cbx i{color: var(--color-primary);margin-left: 2px;}
.cbx input:checked + label i{color: var(--color-complement);}
.captcha-conta{padding: 1rem 0 0 1rem;}
.conditions-conta{display: inline-flex;}
.conditions-conta span{font-size: 14px;margin-left: .5rem;}
.sib-form button:after {top: 7px;}


/* ================================================================================================================================ */
/* =========================================== PRIVACY, TERMS AND SITE MAP ================================================================ */

.privacy-terms-conta h3{color: var(--color-primary);}
.privacy-terms-conta h3 span{color: var(--color-accent);}
.privacy-terms-conta ul{}
.privacy-terms-conta li{}
.privacy-terms-conta > div{padding: 1rem 0;}


.siteMap-conte {line-height: 2rem;}
.siteMap-conte li a{transition: all .3s ease;}
.siteMap-conte li a:hover{color: var(--color-accent);}
.siteMap-conte h3 {color: var(--color-primary);}



/* ================================================================================================================================ */
/* =========================================== OWL CAROUSEL ================================================================ */
.owl-carousel{    padding: 2rem 0;}
.item-conta{background-color: var(--color-complement-g01);}
.item-conte{padding: 2rem;}
.item-conte p{color: var(--color-text-white);}
.item-conte li{color: var(--color-complement-g09);}
.item-conte .card-title {font-weight: 700;color: var(--color-primary);}
.owl-theme .owl-nav [class*=owl-] {box-shadow: unset;}
.owl-theme .owl-nav [class*=owl-]:hover {background: unset;box-shadow: unset;}
.owl-carousel .owl-nav{display: flex;justify-content: center;margin: auto;}
.owl-carousel button{width: auto;}
.owl-carousel button:hover::after{display: none;}
.custom-prev,
.custom-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #333;
  color: #fff;
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.custom-prev:hover,
.custom-next:hover {background-color: var(--color-accent);}




/* ================================================================================================================================ */
/* =========================================== ANIM. EFFECTS ================================================================ */
.appear {
				opacity: 0;
				-webkit-transform: translateX(-40px);
				-moz-transform: translateX(-40px);
				-ms-transform: translateX(-40px);
				-o-transform: translateX(-40px);
				transform: translateX(-40px);
				-webkit-transition: all 0.6s ease-out;
				-moz-transition: all 0.6s ease-out;
				-ms-transition: all 0.6s ease-out;
				-o-transition: all 0.6s ease-out;
				transition: all 0.6s ease-out;
}
.appear.visible {
				opacity: 1;
				-webkit-transform: none;
				-moz-transform: none;
				-ms-transform: none;
				-o-transform: none;
				transform: none;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}
@keyframes bounce-jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@-webkit-keyframes anim-shadow {
  to {
    box-shadow: 0px 0px 70px 25px;
    opacity: 0;
  }
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
@keyframes anim-shadow {
  to {
    box-shadow: 0px 0px 70px 25px;
    opacity: 0;
  }
}
@-webkit-keyframes indicator-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
@keyframes indicator-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
@-moz-keyframes splash {
  0% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
    background: var(--color-accent);
    box-shadow: 0 -18px 0 -8px var(--color-accent), 16px -8px 0 -8px var(--color-accent), 16px 8px 0 -8px var(--color-accent), 0 18px 0 -8px var(--color-accent), -16px 8px 0 -8px var(--color-accent), -16px -8px 0 -8px var(--color-accent);
  }
  100% {
    background: var(--color-accent);
    box-shadow: 0 -32px 0 -10px transparent, 28px -16px 0 -10px transparent, 28px 16px 0 -10px transparent, 0 32px 0 -10px transparent, -28px 16px 0 -10px transparent, -28px -16px 0 -10px transparent;
  }
}
@-webkit-keyframes splash {
  0% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
    background: var(--color-accent);
    box-shadow: 0 -18px 0 -8px var(--color-accent), 16px -8px 0 -8px var(--color-accent), 16px 8px 0 -8px var(--color-accent), 0 18px 0 -8px var(--color-accent), -16px 8px 0 -8px var(--color-accent), -16px -8px 0 -8px var(--color-accent);
  }
  100% {
    background: var(--color-accent);
    box-shadow: 0 -32px 0 -10px transparent, 28px -16px 0 -10px transparent, 28px 16px 0 -10px transparent, 0 32px 0 -10px transparent, -28px 16px 0 -10px transparent, -28px -16px 0 -10px transparent;
  }
}
@-o-keyframes splash {
  0% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
    background: var(--color-accent);
    box-shadow: 0 -18px 0 -8px var(--color-accent), 16px -8px 0 -8px var(--color-accent), 16px 8px 0 -8px var(--color-accent), 0 18px 0 -8px var(--color-accent), -16px 8px 0 -8px var(--color-accent), -16px -8px 0 -8px var(--color-accent);
  }
  100% {
    background: var(--color-accent);
    box-shadow: 0 -32px 0 -10px transparent, 28px -16px 0 -10px transparent, 28px 16px 0 -10px transparent, 0 32px 0 -10px transparent, -28px 16px 0 -10px transparent, -28px -16px 0 -10px transparent;
  }
}
@keyframes splash {
  0% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
    background: var(--color-accent);
    box-shadow: 0 -18px 0 -8px var(--color-accent), 16px -8px 0 -8px var(--color-accent), 16px 8px 0 -8px var(--color-accent), 0 18px 0 -8px var(--color-accent), -16px 8px 0 -8px var(--color-accent), -16px -8px 0 -8px var(--color-accent);
  }
  100% {
    background: var(--color-accent);
    box-shadow: 0 -32px 0 -10px transparent, 28px -16px 0 -10px transparent, 28px 16px 0 -10px transparent, 0 32px 0 -10px transparent, -28px 16px 0 -10px transparent, -28px -16px 0 -10px transparent;
  }
}





/* ==============================================================================================
   📱 Responsive
   ============================================================================================== */
@media (max-width: 1400px) {
    .circle-conte li{--radius:785%}	
}

@media (max-width: 1260px) {
	.circle-conte li{--radius:650%}	
}
@media (max-width: 1024px) {
 .circular-progress img {width: 50%;}
}
@media (max-width: 992px) {
  .circle-conte li{--radius:490%}	
}
@media (max-width: 768px) {
  .nav-header > .container{max-width: 100%;}
  .hamburger {display: flex;}
  .menu-btn {display: flex;justify-content: flex-end;}
  .menu {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem 0;
    animation: slideDown 0.4s ease forwards;
    position: absolute;
    background-color: var(--color-bg-02);
    width: 104.5%;
    margin-left: -21px;
    top: 74px;
    transition: all 0.3s;
  }
  .menu.show {display: flex;transition: all 1s;}
  .navbar {flex-direction: row;}
  .nav-btn{display: block;margin: auto;}

  .btn-conta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .btn-conta button {
    width: 100%;
    max-width: 320px; /* Opcional: limita el ancho máximo del botón */
  }

  .progress-digit {font-size: 6rem;}
  .circular-progress {width: 50%;}
  .circle-conte li{--radius:560%;margin: -10px;}
  .circle-conte > * {width: 20px;height: 20px;}
  .circle-conte li span {width: 20px;height: 20px;}
  

  .symbol-alig01{top: 20%;}
  .entry__field textarea {padding: 20px 30px 20px 48px;min-height: 160px;}
  .captcha-conta > div{margin: 1rem 0;}
  .cbx i {font-size: 18px;}

  .bar-p-right::after {right: auto;}

  .title-f-conte h2 {font-size: calc(var(--font-size-base) * 2.5);}
  .card-01 {height:-webkit-fill-available;}
  
}
@media (max-width: 600px) {
      .info-conta{padding: 0 2rem;}
      section .container{padding-right: calc(var(--bs-gutter-x) * 1);padding-left: calc(var(--bs-gutter-x) * 1);}
      /* #whyChoose .container{padding-right: calc(var(--bs-gutter-x) * 1.5);padding-left: calc(var(--bs-gutter-x) * 1.5);} */
      #aboutBussiness .container{padding-right: calc(var(--bs-gutter-x) * 1.5);padding-left: calc(var(--bs-gutter-x) * 1.5);}

      .circle-conte li{--radius:470%;}
}

@media (max-width: 556px) {
      .circle-conte li{--radius:350%;}
}