/* 
Theme Name: Strivo Portal
Theme URI: https://portal.strivo.co
Description: Official Theme for Strivo Portal
Author: Patt Naguit
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

a {
  color: #ffcc00;
}

.text-dev {
  position: relative;
  display: inline-flex;
  font-style: normal;
}

.decor {
  position: absolute;
  pointer-events: none;
}

.decor02 {
  bottom: -15px;
  left: 5px;
  transform: scale(1.2);
}

.decor03 {
  right: -50px;
  top: 0;
}

.decor04 {
  bottom: -35px;
  left: 45px;
  transform: scale(1.2);
}

.decor05 {
    top: 20px;
    left: 0;
    z-index: -1;
    transform: scale(1.7) rotate(-15deg);
}

.decor06 {
    top: 0px;
    left: 0;
    z-index: -1;
    transform: rotate(-15deg) scale(1.2);
}

.decor6{
      top: 11px;
    left: 0;
    z-index: -1;
    transform: rotate(-15deg) scale(1.7);
}

.decor07 {
  top: 0;
  left: 0;
  z-index: -1;
  transform: rotate(-15deg) scale(1.2);
}

.decor08 {
  top: -10px;
  left: -45px;
}

.decor09 {
  bottom: 0;
}

.decor10 {
  transform: scale(1.5) translateX(-50%);
  bottom: -10px;
  left: 50%;
}

.decor11 {
  bottom: -15px;
  left: -20px;
}

.decor12 {
  top: 15px;
  left: -37px;
  z-index: -1;
  transform: rotate(-15deg) scale(1.2);
}

.decor13 {
  bottom: -10px;
  transform: scale(1.3);
}


.home-marquee-swiper {
  width: 100%;
  overflow: hidden;
}

.home-marquee-wrapper {
  display: flex;
  transition-timing-function: linear !important;
}

.home-marquee-slide {
  width: auto !important;
  flex-shrink: 0;
}

.home-marquee-slide img {
  -webkit-filter: grayscale(1) invert(1);
  filter: grayscale(1) invert(1);
  height: 50px;
  width: 100%;
}

/*-----------------------------------*/

.steps {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.step {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 30px;
}

.step:hover .step-number {
  background-color: #ffcc00;
  color: #000;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.step:hover .step-number span {
  background: #020920;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.step-number {
  flex-shrink: 0;
  background-color: #F5F5F6;
  color: #909092;
  font-size: 70px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  animation: highlight 4s infinite ease-in-out;
}

.step-content h3,
.step-content h4 {
  color: #051241;
  margin-bottom: 20px;
  font-weight: 600;
}

.step-content p {
  font-size: 18px;
  color: #6C6C6E;
}

.how-it-works .steps:before {
  content: "";
  position: absolute;
  border-left: 1px solid;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  left: 75px;
  z-index: -1;
  color: #D0D0D1;
}

.how-to-proceed .step-number {
  font-size: 40px;
  width: 77px;
  height: 77px;
}

.how-to-proceed .steps:before {
  content: "";
  position: absolute;
  border-left: 1px solid;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  left: 53px;
  z-index: -1;
  color: #D0D0D1;
}

.how-to-proceed .steps {
  gap: 18px;
}


/* 2) Offset each one by N seconds */
.step:nth-child(1) .step-number { animation-delay: 0s; }
.step:nth-child(2) .step-number { animation-delay: 1s; }
.step:nth-child(3) .step-number { animation-delay: 2s; }
.step:nth-child(4) .step-number { animation-delay: 3s; }

/* 3) Define keyframes so that:
      • for the first quarter of the cycle (0–25% = 1s) it’s “on”  
      • for the rest (25–100%) it returns to the default */
@keyframes highlight {
  0%, 24.99%  { background-color: #ffcc00; }
  25%, 100%   { background-color: #F5F5F6; }
}

@media only screen and (max-width: 600px) {
  .step-number {
    margin: 0px auto 30px;
  }

  .step {
    display: block;
  }

  .decor02 {
      bottom: -5px;
      left: 0;
      transform: scale(1);
  }

  .decor05 {
    top: -25px;
    left: -90px;
    z-index: -1;
    transform: rotate(-15deg) scale(0.7);
}

.decor07 {
  top: -25px;
  left: -60px;
  z-index: -1;
  transform: rotate(-15deg) scale(0.8);
}

.decor12 {
  top: -23px;
  left: -72px;
  z-index: -1;
  transform: rotate(-15deg) scale(0.8);
}

.decor13 {
  bottom: -5px;
  transform: scale(0.8);
  left: -24px;
}
  .how-it-works .steps:before,
  .how-to-proceed .steps:before {
    display: none;
  }

}


/*_____________________________________________*/