/*----------------------------------------------------
@File: Default Styles
@Author: Rocky
@URL: http://wethemez.com
Author E-mail: rockybd1995@gmail.com

This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.
---------------------------------------------------- */

/*=====================================================================
@Template Name: Cerative Agency
@Author: Rocky
@Developed By: Rocky
@Developer URL: http://rocky.wethemez.com
Author E-mail: rockybd1995@gmail.com

@Default Styles

Table of Content:
01/ Variables
02/ predefin
03/ header
04/ banner
05/ slider
06/ feature
07/ button
08/ service
09/ testimonials 
10/ blog 
11/ contact 
12/ footer 
=====================================================================*/ 

/*----------------------------------------------------*/
@import "variables";
/*---------------------------------------------------- */ 

/*----------------------------------------------------*/
@import "predefin";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "header";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "banner";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "slider";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "feature";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "button";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "contact";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "chart";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "portfolio";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "blog";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "footer";
/*---------------------------------------------------- */

.loading {
    $colors: #7ef9ff, #89cff0, #4682b4, #0f52ba, #000080;
    display: flex;
    animation-delay: 1s;
  
    .dot {
      position: relative;
      width: 2em;
      height: 2em;
      margin: 0.8em;
      border-radius: 50%;
  
      &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: inherit;
        border-radius: inherit;
        animation: wave 2s ease-out infinite;
      }
  
      @for $i from 1 through 5 {
        &:nth-child(#{$i}) {
          background: nth($colors, $i);
  
          &::before {
            animation-delay: $i * 0.2s;
          }
        }
      }
    }
  }
  
  @keyframes wave {
    50%,
    75% {
      transform: scale(2.5);
    }
  
    80%,
    100% {
      opacity: 0;
    }
  }