/* Typewriter effect for hero paragraph */
.hero-typewriter-wrapper {
   text-align: center;
}

.hero-typewriter-wrapper .cursor {
   position: relative;
   width: 100%;
   max-width: 50em;
   margin: 0 auto;
   border-right: 2px solid rgba(255, 255, 255, .75);
   font-size: 30px;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   transform: translateY(-5%);
   line-height: 1.4;
   padding-bottom: 0.2em;
}

/* Animation - first paragraph types once */
.typewriter-animation {
   animation: typewriter 5s steps(50) 1s 1 normal both, blinkingCursor 500ms steps(50) infinite normal;
}

@keyframes typewriter {
   from {
      width: 0;
   }

   to {
      width: 100%;
   }
}

@keyframes blinkingCursor {
   from {
      border-right-color: rgba(255, 255, 255, .75);
   }

   to {
      border-right-color: transparent;
   }
}

/* Make sure the static second paragraph is centered and matches color */
.hero-typewriter-wrapper p {
   margin: .25rem 0;
}

/* Header link color override: make nav links dark (#222) */
.tb-main-header a,
.tb-main-header li a,
.tb-main-header .tb-primary-nav-list a {
   color: #222 !important;
}

.tb-main-header a:hover,
.tb-main-header li a:hover,
.tb-main-header .tb-primary-nav-list a:hover {
   color: #000 !important;
}

/* Custom override for green color palette
   Base color: #6eb914
   Palette: Primary #5aa10f, Light #9be84a, Medium #76c72a, Dark #4f9a0f
*/

/* Hero section */
.tb-hero.tb-style11 {
   background-color: transparent !important;
   background-image: linear-gradient(40deg, #5aa10f 0%, #9be84a 100%) !important;
   -webkit-box-align: end;
   -ms-flex-align: end;
   align-items: flex-end !important
}

.tb-hero.tb-style11 .tb-btn-group {
   justify-content: center !important
}

.tb-circle-shape1 {
   background-color: #76c72a !important
}

.tb-circle-shape2 {
   background-color: #9be84a !important
}

.tb-circle-shape3 {
   background-color: #4f9a0f !important
}

.elementor-7 .elementor-element.elementor-element-50e23c24 .tb-hero.tb-style11 {
   background-image: linear-gradient(40deg, #5aa10f 0%, #9be84a 100%) !important
}

.elementor-7 .elementor-element.elementor-element-50e23c24 .tb-hero-img-box-circle,
.elementor-7 .elementor-element.elementor-element-50e23c24 .tb-circle-shape1 {
   background: #76c72a !important
}

/* Primary buttons and CTA */
.tb-btn-primary {
   background-color: #5aa10f !important;
   border-color: #5aa10f !important;
   color: #fff !important
}

.tb-btn-primary:hover {
   background-color: #76c72a !important;
   border-color: #76c72a !important;
   color: #fff !important
}

.tb-btn-primary:active {
   background-color: #4f9a0f !important;
   border-color: #4f9a0f !important;
   color: #fff !important
}

.tb-newsletter-submit {
   background-color: #5aa10f !important;
   border-color: #5aa10f !important;
   color: #fff !important
}

.tb-newsletter-submit:hover {
   background-color: #76c72a !important;
   border-color: #76c72a !important;
   color: #fff !important
}

/* Footer newsletter button */
.tb-site-footer .tb-newsletter.tb-style8 button {
   background-color: #5aa10f !important
}

.tb-site-footer .tb-newsletter.tb-style8 button:hover {
   background-color: #76c72a !important
}

/* Links */
a {
   color: #5aa10f !important
}

a:hover {
   color: #76c72a !important
}

a:visited {
   color: #6eb914 !important
}

/* Accent colors - vivid-cyan-blue to green */
.has-vivid-cyan-blue-color {
   color: #5aa10f !important
}

.has-vivid-cyan-blue-background-color {
   background-color: #5aa10f !important
}

.has-vivid-cyan-blue-border-color {
   border-color: #5aa10f !important
}

/* Override WordPress color presets */
:root {
   --wp--preset--color--vivid-cyan-blue: #5aa10f !important
}

/* Button color styles */
.tb-color9 .tb-btn {
   background-color: #5aa10f !important;
   border-color: #5aa10f !important
}

.tb-color9 .tb-btn:hover {
   background-color: #76c72a !important;
   border-color: #76c72a !important
}

.tb-color6 .tb-btn {
   background-color: #5aa10f !important;
   border-color: #5aa10f !important
}

.tb-color6 .tb-btn:hover {
   background-color: #76c72a !important;
   border-color: #76c72a !important
}

/* Focus states and interactive elements */
:focus {
   outline-color: #5aa10f !important
}

button:focus {
   outline-color: #5aa10f !important
}

input:focus {
   border-color: #5aa10f !important;
   outline-color: #5aa10f !important
}

textarea:focus {
   border-color: #5aa10f !important;
   outline-color: #5aa10f !important
}

select:focus {
   border-color: #5aa10f !important;
   outline-color: #5aa10f !important
}

/* Additional primary color classes */
.tb-primary {
   color: #5aa10f !important
}

.tb-primary-bg {
   background-color: #5aa10f !important
}

.tb-primary-border {
   border-color: #5aa10f !important
}

/* Dropping texts animation for hero H1 */
.tb-hero-title .dropping-texts {
   display: inline-block;
   position: relative;
   width: auto;
   min-width: 180px;
   text-align: left;
   height: 1em;
   vertical-align: baseline;
   margin-left: 0.5rem;
}

.tb-hero-title .dropping-texts>div {
   font-size: 0px;
   opacity: 0;
   margin-left: -30px;
   position: absolute;
   left: 0;
   top: 0;
   font-weight: 300;
   box-shadow: 0px 60px 25px -20px rgba(0, 0, 0, 0.5);
   color: inherit;
   white-space: nowrap;
}

.tb-hero-title .dropping-texts>div:nth-child(1) {
   animation: roll 5s linear infinite 0s;
}

.tb-hero-title .dropping-texts>div:nth-child(2) {
   animation: roll 5s linear infinite 1s;
}

.tb-hero-title .dropping-texts>div:nth-child(3) {
   animation: roll 5s linear infinite 2s;
}

.tb-hero-title .dropping-texts>div:nth-child(4) {
   animation: roll2 5s linear infinite 3s;
}

@keyframes roll {
   0% {
      font-size: 0px;
      opacity: 0;
      margin-left: -30px;
      margin-top: 0px;
      transform: rotate(-25deg);
   }

   3% {
      opacity: 1;
      transform: rotate(0deg);
   }

   5% {
      font-size: inherit;
      opacity: 1;
      margin-left: 0px;
      margin-top: 0px;
   }

   20% {
      font-size: inherit;
      opacity: 1;
      margin-left: 0px;
      margin-top: 0px;
      transform: rotate(0deg);
   }

   27% {
      font-size: 0px;
      opacity: 0.5;
      margin-left: 20px;
      margin-top: 100px;
   }

   100% {
      font-size: 0px;
      opacity: 0;
      margin-left: -30px;
      margin-top: 0px;
      transform: rotate(15deg);
   }
}

@keyframes roll2 {
   0% {
      font-size: 0px;
      opacity: 0;
      margin-left: -30px;
      margin-top: 0px;
      transform: rotate(-25deg);
   }

   3% {
      opacity: 1;
      transform: rotate(0deg);
   }

   5% {
      font-size: inherit;
      opacity: 1;
      margin-left: 0px;
      margin-top: 0px;
   }

   30% {
      font-size: inherit;
      opacity: 1;
      margin-left: 0px;
      margin-top: 0px;
      transform: rotate(0deg);
   }

   37% {
      font-size: 1500px;
      opacity: 0;
      margin-left: -1000px;
      margin-top: -800px;
   }

   100% {
      font-size: 0px;
      opacity: 0;
      margin-left: -30px;
      margin-top: 0px;
      transform: rotate(15deg);
   }
}

/* Make sure hero overflow is visible so animation can expand */
.tb-hero .tb-hero-text {
   overflow: visible;
}

/* Center the hero H1 and its dropping texts */
.tb-hero-text.text-center .tb-hero-title {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   text-align: center;
   width: auto;
   transform: none !important;
   margin-left: 0 !important;
}

.tb-hero-title .dropping-texts {
   /* ensure the animated span centers with the headline */
   display: inline-block;
   position: relative;
   left: 0;
   transform: translateX(-50px);
   margin: 0;
   vertical-align: middle;
}

/* Static hero word (Desarrollamos) moved left 100px */
.tb-hero-title .hero-static {
   display: inline-block;
   transform: translateX(-100px);
   margin-right: 0.5rem;
}

@media (max-width: 767px) {
   .tb-hero-title .hero-static {
      transform: none !important;
   }
}

@media (max-width: 767px) {
   .tb-hero-text.text-center .tb-hero-title {
      transform: none !important;
      margin-left: 0 !important;
   }

   /* Reset dropping-texts shift on small screens */
   .tb-hero-title .dropping-texts {
      transform: none !important;
   }
}