/*
Theme Name: True value CPA
Theme URI: 
Author: Crest Infosystems
Description: True value CPA is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. True value CPA comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor.
Version: 1.0
Text Domain: True-value-CPA
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/


.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: white;
  animation: colorSlide 15s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;

  .text-center {
    text-align: center;

    h1,
    h3 {
      margin: 10px;
      cursor: default;

      .fade-in {
        animation: fadeIn 2s ease infinite;
      }
    }

    h1 {
      font-size: 8em;
      transition: font-size 200ms ease-in-out;
      border-bottom: 1px dashed white;

      span#digit1 {
        animation-delay: 200ms;
      }

      span#digit2 {
        animation-delay: 300ms;
      }

      span#digit3 {
        animation-delay: 400ms;
      }
    }

    button {
      border: 1px solid white;
      background: transparent;
      outline: none;
      padding: 10px 20px;
      font-size: 1.1rem;
      font-weight: bold;
      color: white;
      text-transform: uppercase;
      transition: background-color 200ms ease-in;
      margin: 20px 0;

      &:hover {
        background-color: white;
        color: #555;
        cursor: pointer;
      }
    }
  }
}


@media (max-width:767px) {
  .hero-banner-wrapper.home-hero-banner {
    background-position: 67% 0px;
  }

  .hero-banner-wrapper .hero-overlay-bg {
    background: linear-gradient(90deg, rgba(34, 40, 53, 0.8379726890756303) 55%, rgba(255, 255, 255, 0) 136%) !important;
  }
}

@keyframes colorSlide {
  0% {
    background-color: #152a68;
  }

  25% {
    background-color: royalblue;
  }

  50% {
    background-color: seagreen;
  }

  75% {
    background-color: tomato;
  }

  100% {
    background-color: #152a68;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  ;

  100% {
    opacity: 1;
  }
}