@-webkit-keyframes sploosh {
  0% {
    width: auto;
    height: 0px;
    opacity: 1;
  }
  60% {
    width: auto;
    height: 90vh;
    box-shadow: inset 0px 0px 0px 0px #cacaca,
    inset 0px 0px 0px 0px #cacaca;
  }
  100% {
    width: auto;
    height: 90vh;
    box-shadow: inset 0px 0px 0px 0px #cacaca,
    inset 0px 0px 0px 0px #cacaca;
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(10);
            transform: scale(10);
  }
  15% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100%{
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}

@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext");

/* #Primary
================================================== */

body {
  font-family: "Poppins";
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212112;
  /*background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg");*/
  background-position: center;
  background-repeat: repeat;
  background-size: 7%;
  background-color: #fff;
  overflow-x: hidden;
  transition: all 200ms linear;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::selection {
  color: #fff;
  background-color: #8167a9;
}
::-moz-selection {
  color: #fff;
  background-color: #8167a9;
}

* {
  padding: 0;
  margin: 0;
}

/* #PRELOADER
================================================== */

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  overflow: hidden;
  z-index: 1000;
}

#two{
  animation-delay: 500ms;
}
.pulse {
  position: absolute; 
  aspect-ratio:1/1;
  left: 0; 
  right: 0;
  margin-left: auto; 
  margin-right: auto;
  display: flex;
  justify-content:center;
  align-items: center;
  width: 0px;
  height: 0px;
  border: none;
  border-radius: 50%;
  box-shadow: inset 30px 30px 60px 10px #cacaca,
    inset -30px -30px 60px 10px #cacaca;
  -webkit-animation: sploosh 5s cubic-bezier(0, 0, 0, 0.93) infinite;
  animation-delay: 230ms;
  background-color: transparent;
}

.preloader img{
  animation: pulse 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* #Primary style
================================================== */

.bg-light {
	background-color: #fff !important;
    transition: all 200ms linear;
}
.section {
    position: relative;
	width: 100%;
	display: block;
}
.full-height {
    height: 100vh;
}
.over-hide {
    overflow: hidden;
}
.absolute-center {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
  margin-top: 40px;
	transform: translateY(-50%);
	z-index: 20;
}
h1{
	font-size: 48px;
	line-height: 1.2;
	font-weight: 700;
	color: #212112;
	text-align: center;
}
p{
	text-align: center;
	margin: 0;
	padding-top: 10px;
	opacity: 1;
	transform: translate(0);
    transition: all 300ms linear;
}
a {
  text-decoration: none;
  color: var(--complimentary1);
}
body.hero-anime p{
	opacity: 0;
	transform: translateY(40px);
}
body.dark{
	color: #fff;
	background-color: #1f2029;
}
body.dark h1{
	color: #fff;
}
body.dark h1 span{
    transition-delay: 0ms !important;
}
body.dark p{
	color: #fff;
    transition-delay: 0ms !important;
}
body.dark .bg-light {
	background-color: #14151a !important;
}
body.dark .start-header {
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
}
body.dark .start-header.scroll-on {
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}

/* #Progress
================================================== */

:root {
	/*--primary: #EC4391;*/
	--yellow: #f8ab37;
	--green: #2ecc71;
	--white: #ffffff;
	--grey-light: #f2f7f9;
	--grey: #ecedf3;
	--black: #080808;
	--black-blue: #1f2029;
	--black-blue-light: #353746;
	--black-blue-light-2: #404255;
	--black-blue-light-3: #4b4d64;
	--black-light: #424455;
}

.progress-wrap {
	position: fixed;
	right: 50px;
	bottom: 50px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	/*border-radius: 50px;*/
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0.2);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.progress-wrap::after {
	position: absolute;
	font-family: 'fontawesome';
	content: '\f062';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	color: var(--grey);
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::after {
	opacity: 1;
	color: var(--base) !important;
}
.progress-wrap::before {
	position: absolute;
	font-family: 'fontawesome';
	content: '\f062';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	opacity: 0;
	background-image: linear-gradient(298deg, var(--base), var(--complimentary1));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 2;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::before {
	opacity: 1;
	color: var(--base) !important;
}
.progress-wrap svg path { 
	transition: all 200ms linear;
	fill: var(--black-blue); 
}
body.light .progress-wrap svg path { 
	fill: white; 
}
.progress-wrap svg.progress-circle path {
	stroke: var(--grey);
	stroke-width: 4;
	box-sizing:border-box;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
body.light .progress-wrap {
	box-shadow: inset  0 0 0 2px rgba(0,0,0,0.2);
}
body.light .progress-wrap::after {
	color: var(--black-blue);
}
body.light .progress-wrap svg.progress-circle path {
	stroke: var(--black-blue);
}

.progress-wrap:hover svg.progress-circle path {
	stroke: var(--base) !important;
}