/* 
Theme Name: Strivo Pre Onboarding
Theme URI: https://pre.strivo.co
Description: Official Theme for Strivo Pre Onboarding
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 */

.page-header {
    margin-top: 50px;
}

.premium-active-item a {
    color: #ffcc00 !important;
}

.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 a {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    white-space: nowrap;
    font-weight: 500;
    text-decoration: none;
    color: #1f2937;
    transition: color 0.2s ease;
    font-size: 18px;
}

.home-marquee-slide a:hover {
    color: #ffcc00;
}

.home-marquee-slide span {
    background: #ffcc00;
    padding: 10px 15px;
    border-radius: 50%;
    margin-right: 15px;
}

.home-marquee-slide a:hover span {
    color: #fff !important;
}

/* Fade effect using ::before and ::after */
.home-marquee-swiper::before,
.home-marquee-swiper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.home-marquee-swiper::before {
  left: 0;
  background: linear-gradient(to right, white 0%, transparent 100%);
}

.home-marquee-swiper::after {
  right: 0;
  background: linear-gradient(to left, white 0%, transparent 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: #1c2236;
    color: #ffffff;
    font-size: 70px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
  }
  
  .step-number span {
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .step-content h4 {
    color: #fff;
    margin-bottom: 20px;
    font-weight: 600;
  }
  
  .step-content p {
    font-size: 18px;
    color: #E6E6E7;
  }


  @media only screen and (max-width: 600px) {
    .step-number {
        margin: 0px auto 30px;
    }
    
    .step {
        display: block;
    }
  }
      
      .step-content h4 {
        color: #fff;
        margin-bottom: 20px;
        font-weight: 600;
      }
      
      .step-content p {
        font-size: 18px;
        color: #E6E6E7;
      }


      @media only screen and (max-width: 600px) {
        .step {
            display: block;
        }
      }


      /*_____________________________________________*/

#slack-setup ul {
    color: #fff;
    padding: 0;
    font-size: 18px;
}