.index {

  .templates,
  .resources,
  .pricing {
  
    h3,
    p {
      text-align: center;
    }
  
    h3 {
      color: var(--f-color);
      font-size: 3.25rem;
      font-weight: 600;
      margin: 1.75rem 0 1.25rem 0;

      span {
        font-size: 2.25rem;
        margin: 0 .25rem;
      }
    }
  
    p {
      color: var(--fs-color);
      font-size: 1.525rem;
      font-weight: 300;
      line-height: 2rem;
      margin: 0 0 0 0.15rem;
    }
  }

  .cta {
    padding: 2rem 0 6rem 0;
    text-align: center;

    h4 {
      font-size: 2.25rem;
      font-weight: 700;
      line-height: 3.25rem;
      margin: 2rem 0;
    }

    a {
      display: inline-block;
      color: var(--f-color);
      font-size: 1rem;
      font-weight: 600;
      border: .15rem solid var(--br-color);
      border-radius: var(--radius-full);
      padding: 1rem 1.55rem 1rem 1.65rem;
      margin: 0 .5rem;
      text-align: center;
      
      &:hover {
        background: var(--brh-color);
      }

      &:last-of-type {
        border-color: var(--f-color);

        &:hover {
          background: var(--lt-color);
        }
      }
    }
  }

  .scroll-down {
    display: block;
    width: fit-content;
    padding: .5rem;
    margin: 3rem auto;

    .arrow {
      width: .75rem;
      height: .75rem;
      border-bottom: .2rem solid var(--f-color);
      border-right: .2rem solid var(--f-color);
    }
    
    .rotate45 {
      -webkit-transform: translate(-50%, 0%) rotate(45deg);
      -moz-transform: translate(-50%, 0%) rotate(45deg);
      transform: translate(-50%, 0%) rotate(45deg);
    }
    
    .fade {
      -webkit-animation: fade_move_down 2s ease-in-out infinite;
      -moz-animation: fade_move_down 2s ease-in-out infinite;
      animation: fade_move_down 2s ease-in-out infinite;
    }
  }

  @-webkit-keyframes fade_move_down {
    0% {
      -webkit-transform: translate(0, -10px) rotate(45deg);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      -webkit-transform: translate(0, 10px) rotate(45deg);
      opacity: 0;
    }
  }

  @-moz-keyframes fade_move_down {
    0% {
      -moz-transform: translate(0, -10px) rotate(45deg);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      -moz-transform: translate(0, 10px) rotate(45deg);
      opacity: 0;
    }
  }

  @keyframes fade_move_down {
    0% {
      transform: translate(0, -10px) rotate(45deg);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translate(0, 10px) rotate(45deg);
      opacity: 0;
    }
  }
}